Skip to content

E
edx-platform
Commit 545b1bea by Valera Rozuvan Committed by Alexander Kryklia
Options

Slight changes to UI design.

parent 30488537
Showing with 95 additions and 20 deletions
common/static/images/arrow-left.png
common/static/images/arrow-left.png

2.41 KB | W: | H:

common/static/images/arrow-left.png

1.04 KB | W: | H:

common/static/images/arrow-left.png
common/static/images/arrow-left.png
common/static/images/arrow-left.png
common/static/images/arrow-left.png
  • 2-up
  • Swipe
  • Onion skin
common/static/images/arrow-right.png
common/static/images/arrow-right.png

2.4 KB | W: | H:

common/static/images/arrow-right.png

1.05 KB | W: | H:

common/static/images/arrow-right.png
common/static/images/arrow-right.png
common/static/images/arrow-right.png
common/static/images/arrow-right.png
  • 2-up
  • Swipe
  • Onion skin
common/static/js/capa/drag_and_drop/container.js
......@@ -11,8 +11,6 @@ define(['logme'], function (logme) {
state.containerEl = $(
'<div ' +
'style=" ' +
'border: 1px solid black; ' +
// 'overflow: hidden; ' +
'clear: both; ' +
'" ' +
'></div>'
......
common/static/js/capa/drag_and_drop/draggables.js
......@@ -35,6 +35,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'float: left; ' +
'overflow: hidden; ' +
'z-index: ' + index + '; ' +
'border: 1px solid gray; ' +
'" ' +
'data-draggable-position-index="' + index + '" ' +
'></div>'
......
common/static/js/capa/drag_and_drop/scroller.js
......@@ -13,9 +13,8 @@ define(['logme'], function (logme) {
parentEl = $(
'<div ' +
'style=" ' +
'width: 95%; ' +
'height: 100px; ' +
'border: 1px solid black; ' +
'width: 100%; ' +
'height: 102px; ' +
'margin-left: auto; ' +
'margin-right: auto; ' +
'" ' +
......@@ -26,27 +25,74 @@ define(['logme'], function (logme) {
'<div ' +
'style=" ' +
'width: 6%; ' +
'height: 100px; ' +
'height: 102px; ' +
'display: inline; ' +
'float: left; ' +
'background: url(\'/static/images/arrow-left.png\') center center no-repeat; ' +
'" ' +
'></div>'
'>' +
'<div ' +
'style=" ' +
'width: 80%; ' +
'height: 50px; '+
'margin-left: auto; ' +
'margin-right: auto; ' +
'margin-top: 26px; ' +
'border: 1px solid #CCC; ' +
'background-color: #EEE; ' +
'background-image: -webkit-linear-gradient(top, #EEE, #DDD); ' +
'background-image: -moz-linear-gradient(top, #EEE, #DDD); ' +
'background-image: -ms-linear-gradient(top, #EEE, #DDD); ' +
'background-image: -o-linear-gradient(top, #EEE, #DDD); ' +
'background-image: linear-gradient(top, #EEE, #DDD); ' +
'-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; ' +
'box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; ' +
'background-image: url(\'/static/images/arrow-left.png\'); ' +
'background-position: center center; ' +
'background-repeat: no-repeat; ' +
'border-radius: 35px 0 0 35px; ' +
'" ' +
'></div>' +
'</div>'
);
moveLeftEl.appendTo(parentEl);
/*
position: absolute;
margin-bottom: 0;
height: 44px;
width: 70px;
border: 1px solid #CCC;
background-color: #EEE;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #EEE), color-stop(100%, #DDD));
background-image: -webkit-linear-gradient(top, #EEE, #DDD);
background-image: -moz-linear-gradient(top, #EEE, #DDD);
background-image: -ms-linear-gradient(top, #EEE, #DDD);
background-image: -o-linear-gradient(top, #EEE, #DDD);
background-image: linear-gradient(top, #EEE, #DDD);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
*/
moveLeftEl.click(function () {
showElLeftMargin += 100;
if (showElLeftMargin > -102) {
return;
}
showElLeftMargin += 102;
state.sliderEl.animate({
'margin-left': showElLeftMargin + 'px'
});
}, 100);
});
showEl = $(
'<div ' +
'style=" ' +
'width: 88%; ' +
'height: 100px; ' +
'width: 714px; ' +
'height: 102px; ' +
'overflow: hidden; ' +
'display: inline; ' +
'float: left; ' +
......@@ -60,8 +106,8 @@ define(['logme'], function (logme) {
state.sliderEl = $(
'<div ' +
'style=" ' +
'width: 800px; ' +
'height: 100px; ' +
'width: 20000px; ' +
'height: 102px; ' +
'" ' +
'></div>'
);
......@@ -71,20 +117,50 @@ define(['logme'], function (logme) {
'<div ' +
'style=" ' +
'width: 6%; ' +
'height: 100px; ' +
'height: 102px; ' +
'display: inline; ' +
'float: left; ' +
'background: url(\'/static/images/arrow-right.png\') center center no-repeat; ' +
// 'background: url(\'/static/images/arrow-right.png\') center center no-repeat; ' +
'" ' +
'></div>'
'>' +
'<div ' +
'style=" ' +
'width: 80%; ' +
'height: 50px; '+
'margin-left: auto; ' +
'margin-right: auto; ' +
'margin-top: 26px; ' +
'border: 1px solid #CCC; ' +
'background-color: #EEE; ' +
'background-image: -webkit-linear-gradient(top, #EEE, #DDD); ' +
'background-image: -moz-linear-gradient(top, #EEE, #DDD); ' +
'background-image: -ms-linear-gradient(top, #EEE, #DDD); ' +
'background-image: -o-linear-gradient(top, #EEE, #DDD); ' +
'background-image: linear-gradient(top, #EEE, #DDD); ' +
'-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; ' +
'box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset; ' +
'background-image: url(\'/static/images/arrow-right.png\'); ' +
'background-position: center center; ' +
'background-repeat: no-repeat; ' +
'border-radius: 0 35px 35px 0; ' +
'" ' +
'></div>' +
'</div>'
);
moveRightEl.appendTo(parentEl);
moveRightEl.click(function () {
showElLeftMargin -= 100;
if (showElLeftMargin < -102 * (state.sliderEl.children().length - 8)) {
return;
}
showElLeftMargin -= 102;
state.sliderEl.animate({
'margin-left': showElLeftMargin + 'px'
});
}, 100);
});
parentEl.appendTo(state.containerEl);
......
common/static/js/capa/drag_and_drop/targets.js
......@@ -33,7 +33,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
borderCss = '';
if (state.config.target_outline === true) {
borderCss = 'border: 1px solid black; ';
borderCss = 'border: 1px dashed gray; ';
}
tEl = $(
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment