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) { ...@@ -11,8 +11,6 @@ define(['logme'], function (logme) {
state.containerEl = $( state.containerEl = $(
'<div ' + '<div ' +
'style=" ' + 'style=" ' +
'border: 1px solid black; ' +
// 'overflow: hidden; ' +
'clear: both; ' + 'clear: both; ' +
'" ' + '" ' +
'></div>' '></div>'
......
common/static/js/capa/drag_and_drop/draggables.js
...@@ -35,6 +35,7 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -35,6 +35,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
'float: left; ' + 'float: left; ' +
'overflow: hidden; ' + 'overflow: hidden; ' +
'z-index: ' + index + '; ' + 'z-index: ' + index + '; ' +
'border: 1px solid gray; ' +
'" ' + '" ' +
'data-draggable-position-index="' + index + '" ' + 'data-draggable-position-index="' + index + '" ' +
'></div>' '></div>'
......
common/static/js/capa/drag_and_drop/scroller.js
...@@ -13,9 +13,8 @@ define(['logme'], function (logme) { ...@@ -13,9 +13,8 @@ define(['logme'], function (logme) {
parentEl = $( parentEl = $(
'<div ' + '<div ' +
'style=" ' + 'style=" ' +
'width: 95%; ' + 'width: 100%; ' +
'height: 100px; ' + 'height: 102px; ' +
'border: 1px solid black; ' +
'margin-left: auto; ' + 'margin-left: auto; ' +
'margin-right: auto; ' + 'margin-right: auto; ' +
'" ' + '" ' +
...@@ -26,27 +25,74 @@ define(['logme'], function (logme) { ...@@ -26,27 +25,74 @@ define(['logme'], function (logme) {
'<div ' + '<div ' +
'style=" ' + 'style=" ' +
'width: 6%; ' + 'width: 6%; ' +
'height: 100px; ' + 'height: 102px; ' +
'display: inline; ' + 'display: inline; ' +
'float: left; ' + '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); 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 () { moveLeftEl.click(function () {
showElLeftMargin += 100; if (showElLeftMargin > -102) {
return;
}
showElLeftMargin += 102;
state.sliderEl.animate({ state.sliderEl.animate({
'margin-left': showElLeftMargin + 'px' 'margin-left': showElLeftMargin + 'px'
}); }, 100);
}); });
showEl = $( showEl = $(
'<div ' + '<div ' +
'style=" ' + 'style=" ' +
'width: 88%; ' + 'width: 714px; ' +
'height: 100px; ' + 'height: 102px; ' +
'overflow: hidden; ' + 'overflow: hidden; ' +
'display: inline; ' + 'display: inline; ' +
'float: left; ' + 'float: left; ' +
...@@ -60,8 +106,8 @@ define(['logme'], function (logme) { ...@@ -60,8 +106,8 @@ define(['logme'], function (logme) {
state.sliderEl = $( state.sliderEl = $(
'<div ' + '<div ' +
'style=" ' + 'style=" ' +
'width: 800px; ' + 'width: 20000px; ' +
'height: 100px; ' + 'height: 102px; ' +
'" ' + '" ' +
'></div>' '></div>'
); );
...@@ -71,20 +117,50 @@ define(['logme'], function (logme) { ...@@ -71,20 +117,50 @@ define(['logme'], function (logme) {
'<div ' + '<div ' +
'style=" ' + 'style=" ' +
'width: 6%; ' + 'width: 6%; ' +
'height: 100px; ' + 'height: 102px; ' +
'display: inline; ' + 'display: inline; ' +
'float: left; ' + '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.appendTo(parentEl);
moveRightEl.click(function () { moveRightEl.click(function () {
showElLeftMargin -= 100; if (showElLeftMargin < -102 * (state.sliderEl.children().length - 8)) {
return;
}
showElLeftMargin -= 102;
state.sliderEl.animate({ state.sliderEl.animate({
'margin-left': showElLeftMargin + 'px' 'margin-left': showElLeftMargin + 'px'
}); }, 100);
}); });
parentEl.appendTo(state.containerEl); parentEl.appendTo(state.containerEl);
......
common/static/js/capa/drag_and_drop/targets.js
...@@ -33,7 +33,7 @@ define(['logme', 'update_input'], function (logme, updateInput) { ...@@ -33,7 +33,7 @@ define(['logme', 'update_input'], function (logme, updateInput) {
borderCss = ''; borderCss = '';
if (state.config.target_outline === true) { if (state.config.target_outline === true) {
borderCss = 'border: 1px solid black; '; borderCss = 'border: 1px dashed gray; ';
} }
tEl = $( 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