Andal.LND/edx-platform
4
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Strip down sequence navigaiton and more stripping of the courseware nav

Browse Source
This commit is contained in:
Kyle Fiedler
2012-08-01 14:29:53 -04:00
parent 0e7ce4a6be
commit cdd37eeb92
8 changed files with 68 additions and 173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

133
common/lib/xmodule/xmodule/css/sequence/display.scss
View File

@@ -2,10 +2,8 @@ nav.sequence-nav {
// TODO (cpennington): This doesn't work anymore. XModules aren't able to
// import from external sources.
@extend .topbar;
border-bottom: 1px solid #ddd;
border-bottom: 1px solid $border-color;
margin: (-(lh())) (-(lh())) lh() (-(lh()));
background: #eee;
position: relative;
@include border-top-right-radius(4px);
@@ -14,7 +12,7 @@ nav.sequence-nav {
display: table;
height: 100%;
margin: 0;
padding-left: 0;
padding-left: 3px;
padding-right: flex-grid(1, 9);
width: 100%;
@@ -23,133 +21,104 @@ nav.sequence-nav {
}
li {
border-left: 1px solid #eee;
display: table-cell;
min-width: 20px;
&:first-child {
border-left: none;
}
.inactive {
background-repeat: no-repeat;
&:hover {
background-color: #eee;
}
}
.visited {
background-color: #ddd;
background-repeat: no-repeat;
&:hover {
background-position: center center;
}
}
.active {
background-color: #fff;
background-repeat: no-repeat;
@include box-shadow(0 1px 0 #fff);
&:hover {
background-color: #fff;
background-position: center;
}
}
a {
background-position: center center;
border: none;
background-position: center;
background-repeat: no-repeat;
border: 1px solid transparent;
border-bottom: none;
@include border-radius(3px 3px 0 0);
cursor: pointer;
display: block;
height: 17px;
height: 10px;
padding: 15px 0 14px;
position: relative;
@include transition(all, .4s, $ease-in-out-quad);
@include transition();
width: 100%;
&.progress {
border-bottom-style: solid;
border-bottom-width: 4px;
&:hover {
background-repeat: no-repeat;
background-position: center;
background-color: #F6F6F6;
}
&.visited {
background-color: #F6F6F6;
&:hover {
background-position: center center;
}
}
&.active {
border-color: $border-color;
@include box-shadow(0 2px 0 #fff);
background-color: #fff;
z-index: 9;
&:hover {
background-position: center;
background-color: #fff;
}
}
&.progress-none {
@extend .progress;
border-bottom-color: red;
background-color: lighten(red, 50%);
}
&.progress-some {
@extend .progress;
border-bottom-color: yellow;
background-color: yellow;
}
&.progress-done {
@extend .progress;
border-bottom-color: green;
background-color: green;
}
//video
&.seq_video {
&.inactive {
@extend .inactive;
background-image: url('../images/sequence-nav/video-icon-normal.png');
background-position: center;
}
&.visited {
@extend .visited;
background-image: url('../images/sequence-nav/video-icon-visited.png');
background-position: center;
}
&.active {
@extend .active;
background-image: url('../images/sequence-nav/video-icon-current.png');
background-position: center;
}
}
//other
&.seq_other {
&.inactive {
@extend .inactive;
background-image: url('../images/sequence-nav/document-icon-normal.png');
background-position: center;
}
&.visited {
@extend .visited;
background-image: url('../images/sequence-nav/document-icon-visited.png');
background-position: center;
}
&.active {
@extend .active;
background-image: url('../images/sequence-nav/document-icon-current.png');
background-position: center;
}
}
//vertical & problems
&.seq_vertical, &.seq_problem {
&.inactive {
@extend .inactive;
background-image: url('../images/sequence-nav/list-icon-normal.png');
background-position: center;
}
&.visited {
@extend .visited;
background-image: url('../images/sequence-nav/list-icon-visited.png');
background-position: center;
}
&.active {
@extend .active;
background-image: url('../images/sequence-nav/list-icon-current.png');
background-position: center;
}
}
@@ -157,6 +126,7 @@ nav.sequence-nav {
background: #333;
color: #fff;
display: none;
font-family: $sans-serif;
line-height: lh();
left: 0px;
opacity: 0;
@@ -207,27 +177,29 @@ nav.sequence-nav {
right: 0;
top: 0;
width: flex-grid(1, 9);
border: 1px solid $border-color;
border-bottom: 0;
@include border-radius(3px 3px 0 0);
li {
float: left;
margin-bottom: 0;
width: 50%;
&.prev, &.next {
a {
// background-color: darken($cream, 5%);
background-position: center center;
background-position: center;
background-repeat: no-repeat;
border-left: 1px solid darken(#f6efd4, 20%);
@include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
@include box-sizing(border-box);
cursor: pointer;
display: block;
height: 10px;
padding: 15px 0 14px;
text-indent: -9999px;
@include transition(all, .2s, $ease-in-out-quad);
&:hover {
opacity: .5;
background-color: #f4f4f4;
}
&.disabled {
@@ -240,20 +212,13 @@ nav.sequence-nav {
&.prev {
a {
background-image: url('../images/sequence-nav/previous-icon.png');
&:hover {
// background-color: $cream;
}
}
}
&.next {
a {
border-left: 1px solid lighten($border-color, 10%);
background-image: url('../images/sequence-nav/next-icon.png');
&:hover {
// background-color: $cream;
}
}
}
}
@@ -274,10 +239,8 @@ nav.sequence-bottom {
ul {
@extend .clearfix;
background-color: #eee;
border: 1px solid #ddd;
border: 1px solid $border-color;
@include border-radius(3px);
@include box-shadow(inset 0 0 0 1px lighten(#f6efd4, 5%));
@include inline-block();
li {
@@ -312,7 +275,7 @@ nav.sequence-bottom {
&.prev {
a {
background-image: url('../images/sequence-nav/previous-icon.png');
border-right: 1px solid darken(#f6efd4, 20%);
border-right: 1px solid lighten($border-color, 10%);
&:hover {
background-color: none;