Skip to content
Projects
Groups
Snippets
Help
This project
Loading...
Sign in / Register
Toggle navigation
E
edx-platform
Overview
Overview
Details
Activity
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
edx
edx-platform
Commits
8b0b4f5c
Commit
8b0b4f5c
authored
Sep 27, 2016
by
Brian Jacobel
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Redesign sequence nav, move breadcrumbs out of sequence container
TNL-5555
parent
caef3fe8
Hide whitespace changes
Inline
Side-by-side
Showing
7 changed files
with
138 additions
and
181 deletions
+138
-181
common/lib/xmodule/xmodule/css/sequence/display.scss
+111
-137
common/lib/xmodule/xmodule/js/src/sequence/display.coffee
+2
-1
common/lib/xmodule/xmodule/js/src/sequence/display/jquery.sequence.js
+4
-26
lms/static/sass/course/courseware/_courseware.scss
+1
-1
lms/static/sass/views/_bookmarks.scss
+2
-2
lms/templates/courseware/courseware.html
+1
-0
lms/templates/seq_module.html
+17
-14
No files found.
common/lib/xmodule/xmodule/css/sequence/display.scss
View file @
8b0b4f5c
$sequence--border-color
:
#C8C8C8
;
$link-color
:
rgb
(
26
,
161
,
222
)
!
default
;
$seq-nav-border-color
:
$border-color
!
default
;
$seq-nav-hover-color
:
rgb
(
245
,
245
,
245
)
!
default
;
$seq-nav-link-color
:
$link-color
!
default
;
$seq-nav-icon-color
:
rgb
(
10
,
10
,
10
)
!
default
;
$seq-nav-icon-color-muted
:
rgb
(
90
,
90
,
90
)
!
default
;
$seq-nav-tooltip-color
:
rgb
(
51
,
51
,
51
)
!
default
;
$seq-nav-height
:
44px
;
// repeated extends - needed since LMS styling was referenced
.block-link
{
border-left
:
1px
solid
lighten
(
$sequence--border-color
,
10%
);
@include
border-left
(
1px
solid
$seq-nav-border-color
);
display
:
block
;
&
:hover
,
&
:focus
{
...
...
@@ -12,7 +18,7 @@ $link-color: rgb(26, 161, 222) !default;
.topbar
{
@include
clearfix
();
border-bottom
:
1px
solid
$seq
uence-
-border-color
;
border-bottom
:
1px
solid
$seq
-nav
-border-color
;
@media
print
{
display
:
none
;
...
...
@@ -20,7 +26,7 @@ $link-color: rgb(26, 161, 222) !default;
a
{
&
.block-link
{
border-left
:
1px
solid
lighten
(
$sequence--border-color
,
10%
);
@include
border-left
(
1px
solid
$seq-nav-border-color
);
display
:
block
;
&
:hover
,
&
:focus
{
...
...
@@ -31,7 +37,7 @@ $link-color: rgb(26, 161, 222) !default;
}
%ui-clear-button
{
background-color
:
rgba
(
0
,
0
,
0
,
0
)
;
background-color
:
transparent
;
background-image
:
none
;
background-position
:
center
14px
;
background-repeat
:
no-repeat
;
...
...
@@ -50,134 +56,73 @@ $link-color: rgb(26, 161, 222) !default;
// ====================
.sequence-nav
{
// TODO (cpennington): This doesn't work anymore. XModules aren't able to
// import from external sources.
@extend
.topbar
;
margin
:
-4px
0
$baseline
;
margin
:
0
0
$baseline
0
;
position
:
relative
;
border-bottom
:
none
;
z-index
:
0
;
height
:
$seq-nav-height
;
display
:
flex
;
@media
print
{
display
:
none
;
}
.left-shadow
{
@extend
%ui-depth4
;
@include
linear-gradient
(
left
,
$shadow
,
$transparent
);
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
20px
;
height
:
46px
;
background-color
:
transparent
;
pointer-events
:
none
;
.sequence-nav-button
{
max-width
:
200px
;
}
.right-shadow
{
@extend
%ui-depth4
;
@include
linear-gradient
(
right
,
$shadow
,
$transparent
);
position
:
absolute
;
top
:
0
;
right
:
0
;
width
:
20px
;
height
:
46px
;
background-color
:
transparent
;
pointer-events
:
none
;
@media
print
{
display
:
none
;
}
.sequence-list-wrapper
{
@extend
%ui-depth2
;
@include
linear-gradient
(
top
,
#ddd
,
#eee
);
position
:
relative
;
border
:
1px
solid
$gray-l3
;
height
:
44px
;
margin
:
0
(
$baseline
*
2
);
box-shadow
:
0
1px
3px
$shadow-l1
inset
;
height
:
100%
;
flex-grow
:
1
;
}
ol
{
position
:
absolute
;
top
:
0
;
left
:
0
;
@include
box-sizing
(
border-box
);
display
:
table
;
height
:
100%
;
margin
:
0
;
padding
:
0
(
$baseline
/
2
);
width
:
100%
;
button
{
@extend
.block-link
;
}
display
:
flex
;
li
{
display
:
table-cell
;
box-sizing
:
border-box
;
min-width
:
20px
;
flex-grow
:
1
;
border-color
:
$seq-nav-border-color
;
border-width
:
1px
;
border-top-style
:
solid
;
&
:not
(
:last-child
)
{
@include
border-right-style
(
solid
);
}
button
{
@extend
%ui-fake-link
;
@extend
%ui-clear-button
;
@include
transition
(
none
);
width
:
100%
;
height
:
42px
;
height
:
(
$seq-nav-height
-
1
);
position
:
relative
;
margin
:
0
;
display
:
block
;
padding
:
0
;
position
:
relative
;
display
:
block
;
text-align
:
center
;
border-color
:
$seq-nav-border-color
;
border-width
:
1px
;
border-bottom-style
:
solid
;
box-sizing
:
border-box
;
.icon
{
line-height
:
42px
;
// This matches the height of the <a> it's within (the parent) to get vertical centering.
font-size
:
90%
;
// The icons at 100% are just a tad too big.
color
:
rgb
(
90
,
90
,
90
);
-webkit-font-smoothing
:
antialiased
;
// Clear up the lines on the icons
}
i
.fa-bookmark
{
color
:
$link-color
;
}
&
.inactive
{
.icon
{
color
:
rgb
(
90
,
90
,
90
);
}
}
&
.active
{
@extend
%ui-depth1
;
background-color
:
$white
;
.icon
{
color
:
rgb
(
10
,
10
,
10
);
}
&
:hover
,
&
:focus
{
background-color
:
$white
;
background-repeat
:
no-repeat
;
background-position
:
center
14px
;
.icon
{
color
:
rgb
(
10
,
10
,
10
);
}
i
.fa-bookmark
{
color
:
$link-color
;
}
}
display
:
block
;
line-height
:
100%
;
// This matches the height of the <a> its within (the parent) to get vertical centering.
font-size
:
110%
;
color
:
$seq-nav-icon-color-muted
;
}
&
:hover
,
&
:focus
{
background-color
:
$white
;
background-repeat
:
no-repeat
;
background-position
:
center
14px
;
.fa-bookmark
{
color
:
$seq-nav-link-color
;
}
//video
&
.seq_video
{
.icon
:before
{
content
:
"\f008"
;
// .fa-film
}
...
...
@@ -185,45 +130,38 @@ $link-color: rgb(26, 161, 222) !default;
//other
&
.seq_other
{
.icon
:before
{
content
:
"\f0
16"
;
// .fa-file-o
content
:
"\f0
2d"
;
// .fa-book
}
}
//vertical & problems
&
.seq_vertical
,
&
.seq_problem
{
//vertical
&
.seq_vertical
{
.icon
:before
{
content
:
"\f00b"
;
// .fa-tasks
}
}
&
.progress-none
{
}
&
.progress-some
,
&
.progress-in_progress
{
}
&
.progress-done
{
//problems
&
.seq_problem
{
.icon
:before
{
content
:
"\f044"
;
// .fa-pencil-square-o
}
}
.sequence-tooltip
{
@include
text-align
(
left
);
@extend
%ui-depth2
;
margin-top
:
(
$baseline
/
5
);
background
:
#333
;
background
:
$seq-nav-tooltip-color
;
color
:
$white
;
font-family
:
$sans-serif
;
line-height
:
lh
();
right
:
0
;
right
:
0
;
// Should not be RTLed, tooltips do not move in RTL
padding
:
6px
;
position
:
absolute
;
top
:
48px
;
text-shadow
:
0
-1px
0
$black
;
@include
text-align
(
left
);
white-space
:
pre
;
pointer-events
:
none
;
...
...
@@ -236,14 +174,15 @@ $link-color: rgb(26, 161, 222) !default;
}
&
:
:
after
{
background
:
#333
;
@include
transform
(
rotate
(
45deg
));
@include
right
(
18px
);
background
:
$seq-nav-tooltip-color
;
content
:
" "
;
display
:
block
;
height
:
10px
;
right
:
18px
;
right
:
18px
;
// Not RTLed, positions tooltips relative to seq nav item
position
:
absolute
;
top
:
-5px
;
@include
transform
(
rotate
(
45deg
));
width
:
10px
;
}
}
...
...
@@ -258,27 +197,40 @@ $link-color: rgb(26, 161, 222) !default;
.sequence-nav-button
{
@extend
%ui-depth3
;
@include
transition
(
all
.2s
$ease-in-out-quad
0s
);
position
:
absolute
;
display
:
block
;
top
:
0
;
width
:
(
$baseline
*
2
);
height
:
46px
;
padding
:
0
;
height
:
100%
;
text-shadow
:
none
;
// overrides default button text-shadow
background
:
none
;
// overrides default button gradient
background-color
:
white
;
border-color
:
$seq-nav-border-color
;
box-shadow
:
none
;
min-width
:
120px
;
font-size
:
inherit
;
font-weight
:
normal
;
padding
:
0
$baseline
;
text-overflow
:
ellipsis
;
white-space
:
nowrap
;
overflow
:
hidden
;
span
:not
(
:last-child
)
{
@include
padding-right
(
$baseline
/
2
);
}
&
.button-previous
{
@include
border-radius
(
35px
,
0
,
0
,
35px
);
@include
left
(
0
);
@include
border-top-left-radius
(
3px
);
@include
border-top-right-radius
(
0
);
@include
border-bottom-right-radius
(
0
);
@include
border-bottom-left-radius
(
3px
);
}
&
.button-next
{
@include
border-radius
(
0
,
35px
,
35px
,
0
);
@include
right
(
0
);
}
&
:hover
,
&
:active
{
@include
border-top-left-radius
(
0
);
@include
border-top-right-radius
(
3px
);
@include
border-bottom-right-radius
(
3px
);
@include
border-bottom-left-radius
(
0
);
}
&
.disabled
{
...
...
@@ -292,10 +244,18 @@ $link-color: rgb(26, 161, 222) !default;
nav
.sequence-bottom
{
position
:
relative
;
width
:
79px
;
height
:
1px
;
height
:
45px
;
margin
:
lh
(
2
)
auto
;
text-align
:
center
;
display
:
flex
;
justify-content
:
center
;
.sequence-nav-button
{
position
:
relative
;
&
:last-of-type
{
@include
border-left
(
none
);
}
}
@media
print
{
display
:
none
;
...
...
@@ -303,10 +263,24 @@ nav.sequence-bottom {
}
#seq_content
{
&
:focus
,
&
:active
{
outline
:
none
;
}
}
// hover and active states
.sequence-nav-button
,
.sequence-nav
button
{
&
:hover
,
&
:active
,
&
.active
{
border-bottom
:
3px
solid
$seq-nav-link-color
;
// keeps icon/text centered on hover, necessary due to border-box setting
padding-top
:
2px
;
.icon
{
color
:
$seq-nav-icon-color
;
}
}
}
common/lib/xmodule/xmodule/js/src/sequence/display.coffee
View file @
8b0b4f5c
...
...
@@ -3,6 +3,7 @@ class @Sequence
@
updatedProblems
=
{}
@
requestToken
=
$
(
element
).
data
(
'request-token'
)
@
el
=
$
(
element
).
find
(
'.sequence'
)
@
path
=
$
(
'.path'
)
@
contents
=
@
$
(
'.seq_contents'
)
@
content_container
=
@
$
(
'#seq_content'
)
@
sr_container
=
@
$
(
'.sr-is-focusable'
)
...
...
@@ -190,7 +191,7 @@ class @Sequence
sequence_links
=
@
content_container
.
find
(
'a.seqnav'
)
sequence_links
.
click
@
goto
@
el
.
find
(
'.path'
)
.
text
(
@
el
.
find
(
'.nav-item.active'
).
data
(
'path'
))
@
path
.
text
(
@
el
.
find
(
'.nav-item.active'
).
data
(
'path'
))
@
sr_container
.
focus
()
...
...
common/lib/xmodule/xmodule/js/src/sequence/display/jquery.sequence.js
View file @
8b0b4f5c
...
...
@@ -4,9 +4,7 @@ var SequenceNav = function($element) {
var
$wrapper
=
$element
.
find
(
'.sequence-list-wrapper'
);
var
$list
=
$element
.
find
(
'#sequence-list'
);
var
$arrows
=
$element
.
find
(
'.sequence-nav-button'
);
var
maxScroll
=
$list
.
width
()
-
$wrapper
.
width
()
+
20
;
var
$leftShadow
=
$
(
'<div class="left-shadow"></div>'
);
var
$rightShadow
=
$
(
'<div class="right-shadow"></div>'
);
var
maxScroll
=
$list
.
width
()
-
$wrapper
.
width
();
var
$body
=
$
(
'body'
);
var
listOrigin
;
var
mouseOrigin
;
...
...
@@ -25,8 +23,6 @@ var SequenceNav = function($element) {
var
targetLeft
=
clamp
(
listOrigin
+
offset
,
-
maxScroll
,
0
);
updateHorizontalPosition
(
targetLeft
);
setShadows
(
targetLeft
);
};
var
stopDrag
=
function
(
e
)
{
...
...
@@ -35,17 +31,6 @@ var SequenceNav = function($element) {
$body
.
unbind
(
'mouseup'
,
stopDrag
);
};
var
setShadows
=
function
(
left
)
{
var
left
=
left
||
$list
.
position
().
left
;
var
padding
=
30
;
var
leftPercent
=
clamp
(
-
left
/
padding
,
0
,
1
);
$leftShadow
.
css
(
'opacity'
,
leftPercent
);
var
rightPercent
=
clamp
((
maxScroll
+
left
)
/
padding
,
0
,
1
);
$rightShadow
.
css
(
'opacity'
,
rightPercent
);
};
var
clamp
=
function
(
val
,
min
,
max
)
{
if
(
val
>
max
)
return
max
;
if
(
val
<
min
)
return
min
;
...
...
@@ -53,10 +38,9 @@ var SequenceNav = function($element) {
};
var
updateWidths
=
function
(
e
)
{
maxScroll
=
$list
.
width
()
-
$wrapper
.
width
()
+
20
;
maxScroll
=
$list
.
width
()
-
$wrapper
.
width
();
var
targetLeft
=
clamp
(
$list
.
position
().
left
,
-
maxScroll
,
0
);
updateHorizontalPosition
(
targetLeft
);
setShadows
(
targetLeft
);
};
var
updateHorizontalPosition
=
function
(
left
)
{
...
...
@@ -73,20 +57,14 @@ var SequenceNav = function($element) {
if
(
$active
.
position
().
left
+
$active
.
width
()
>
$wrapper
.
width
()
-
$list
.
position
().
left
)
{
$list
.
animate
({
'left'
:
(
-
$active
.
position
().
left
+
$wrapper
.
width
()
-
$active
.
width
()
-
10
)
+
'px'
},
{
step
:
setShadows
});
},
{});
}
else
if
(
$active
.
position
().
left
<
-
$list
.
position
().
left
)
{
$list
.
animate
({
'left'
:
(
-
$active
.
position
().
left
+
10
)
+
'px'
},
{
step
:
setShadows
});
},
{});
}
};
$wrapper
.
append
(
$leftShadow
).
append
(
$rightShadow
);
setShadows
(
0
);
$wrapper
.
bind
(
'mousedown'
,
startDrag
);
$arrows
.
bind
(
'click'
,
checkPosition
);
$
(
window
).
bind
(
'resize'
,
updateWidths
);
...
...
lms/static/sass/course/courseware/_courseware.scss
View file @
8b0b4f5c
...
...
@@ -411,7 +411,7 @@ html.video-fullscreen {
}
}
.
sequence
.
path
{
.path
{
@extend
%t-copy-sub1
;
margin-top
:
-
(
$baseline
);
margin-bottom
:
$baseline
;
...
...
lms/static/sass/views/_bookmarks.scss
View file @
8b0b4f5c
...
...
@@ -135,8 +135,8 @@ $bookmarked-icon: "\f02e"; // .fa-bookmark
// Rules for bookmark icon shown on each sequence nav item
.course-content
{
.bookmark-icon.bookmarked
{
@include
lef
t
(
$baseline
/
4
);
.bookmark-icon.bookmarked
{
@include
righ
t
(
$baseline
/
4
);
top
:
-3px
;
position
:
absolute
;
}
...
...
lms/templates/courseware/courseware.html
View file @
8b0b4f5c
...
...
@@ -153,6 +153,7 @@ ${HTML(fragment.foot_html())}
</div>
% endif
<section
class=
"course-content"
id=
"course-content"
>
<div
class=
"path"
></div>
<main
id=
"main"
aria-label=
"Content"
tabindex=
"-1"
>
% if getattr(course, 'entrance_exam_enabled') and \
getattr(course, 'entrance_exam_minimum_score_pct') and \
...
...
lms/templates/seq_module.html
View file @
8b0b4f5c
...
...
@@ -2,20 +2,20 @@
<
%!
from
django
.
utils
.
translation
import
ugettext
as
_
%
>
<div
id=
"sequence_${element_id}"
class=
"sequence"
data-id=
"${item_id}"
data-position=
"${position}"
data-ajax-url=
"${ajax_url}"
data-next-url=
"${next_url}"
data-prev-url=
"${prev_url}"
>
<div
class=
"path"
></div>
% if banner_text:
<div
class=
"pattern-library-shim alert alert-information subsection-header"
tabindex=
"-1"
>
<span
class=
"pattern-library-shim icon alert-icon fa fa-bullhorn"
aria-hidden=
"true"
></span>
<div
class=
"pattern-library-shim alert-message"
>
<p
class=
"pattern-library-shim alert-copy"
>
${banner_text}
</p>
</div>
% if banner_text:
<div
class=
"pattern-library-shim alert alert-information subsection-header"
tabindex=
"-1"
>
<span
class=
"pattern-library-shim icon alert-icon fa fa-bullhorn"
aria-hidden=
"true"
></span>
<div
class=
"pattern-library-shim alert-message"
>
<p
class=
"pattern-library-shim alert-copy"
>
${banner_text}
</p>
</div>
% endif
</div>
% endif
<div
class=
"sequence-nav"
>
<button
class=
"sequence-nav-button button-previous"
>
<span
class=
"icon fa fa-chevron-prev"
aria-hidden=
"true"
></span><span
class=
"sr"
>
${_('Previous')}
</span>
<span
class=
"icon fa fa-chevron-prev"
aria-hidden=
"true"
></span>
<span>
${_('Previous')}
</span>
</button>
<nav
class=
"sequence-list-wrapper"
aria-label=
"${_('Unit')}"
>
<ol
id=
"sequence-list"
>
...
...
@@ -40,7 +40,8 @@
</ol>
</nav>
<button
class=
"sequence-nav-button button-next"
>
<span
class=
"icon fa fa-chevron-next"
aria-hidden=
"true"
></span><span
class=
"sr"
>
${_('Next')}
</span>
<span>
${_('Next')}
</span>
<span
class=
"icon fa fa-chevron-next"
aria-hidden=
"true"
></span>
</button>
</div>
...
...
@@ -58,10 +59,12 @@
<nav
class=
"sequence-bottom"
aria-label=
"${_('Section')}"
>
<button
class=
"sequence-nav-button button-previous"
>
<span
class=
"icon fa fa-chevron-prev"
aria-hidden=
"true"
></span><span
class=
"sr"
>
${_('Previous')}
</span>
<span
class=
"icon fa fa-chevron-prev"
aria-hidden=
"true"
></span>
<span>
${_('Previous')}
</span>
</button>
<button
class=
"sequence-nav-button button-next"
>
<span
class=
"icon fa fa-chevron-next"
aria-hidden=
"true"
></span><span
class=
"sr"
>
${_('Next')}
</span>
<span>
${_('Next')}
</span>
<span
class=
"icon fa fa-chevron-next"
aria-hidden=
"true"
></span>
</button>
</nav>
</div>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment