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

2
lms/static/sass/base/_variables.scss
View File

@@ -15,6 +15,7 @@ $blue: rgb(29,157,217);
$pink: rgb(182,37,104); $pink: rgb(182,37,104);
$yellow: rgb(255, 252, 221); $yellow: rgb(255, 252, 221);
$error-red: rgb(253, 87, 87); $error-red: rgb(253, 87, 87);
$border-color: #C8C8C8;
// old variables // old variables
$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif; $body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
@@ -29,4 +30,3 @@ $dark-gray: #333;
$mit-red: #993333; $mit-red: #993333;
$cream: #F6EFD4; $cream: #F6EFD4;
$text-color: $dark-gray; $text-color: $dark-gray;
$border-color: $light-gray;

6
lms/static/sass/course/base/_base.scss
View File

@@ -12,4 +12,10 @@ table {
.container { .container {
padding: lh(2); padding: lh(2);
> div {
display: table;
width: 100%;
table-layout: fixed;
}
} }

83
lms/static/sass/course/base/_extends.scss
View File

@@ -1,43 +1,9 @@
.wrapper {
margin: 0 auto;
max-width: $fg-max-width;
min-width: $fg-min-width;
text-align: left;
width: flex-grid(12);
div.table-wrapper {
display: table;
width: flex-grid(12);
overflow: hidden;
}
}
h1.top-header { h1.top-header {
background: #f3f3f3;
border-bottom: 1px solid #e3e3e3; border-bottom: 1px solid #e3e3e3;
margin: (-(lh())) (-(lh())) lh();
padding: lh();
text-align: left; text-align: left;
} font-size: 24px;
font-weight: 100;
.button { padding-bottom: lh();
border: 1px solid darken(#888, 10%);
@include border-radius(3px);
@include box-shadow(inset 0 1px 0 lighten(#888, 10%), 0 0 3px #ccc);
color: #fff;
cursor: pointer;
font: bold $body-font-size $body-font-family;
@include linear-gradient(lighten(#888, 5%), darken(#888, 5%));
padding: 4px 8px;
text-decoration: none;
text-shadow: none;
-webkit-font-smoothing: antialiased;
&:hover, &:focus {
border: 1px solid darken(#888, 20%);
@include box-shadow(inset 0 1px 0 lighten(#888, 20%), 0 0 3px #ccc);
@include linear-gradient(lighten(#888, 10%), darken(#888, 5%));
}
} }
.light-button, a.light-button { .light-button, a.light-button {
@@ -147,27 +113,20 @@ h1.top-header {
} }
header#open_close_accordion { header#open_close_accordion {
border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee);
padding: lh(.5) lh();
position: relative; position: relative;
h2 {
margin: 0;
padding-right: 20px;
}
a { a {
background: #eee url('../images/slide-left-icon.png') center center no-repeat; background: #f6f6f6 url('../images/slide-left-icon.png') center center no-repeat;
border: 1px solid #D3D3D3; border: 1px solid #D3D3D3;
@include border-radius(3px 0 0 3px); @include border-radius(3px 0 0 3px);
height: 16px; height: 16px;
padding: 8px; padding: 6px;
position: absolute; position: absolute;
right: -1px; right: -1px;
text-indent: -9999px; text-indent: -9999px;
top: 6px; top: 6px;
width: 16px; width: 16px;
z-index: 99;
&:hover { &:hover {
background-color: white; background-color: white;
@@ -182,32 +141,17 @@ h1.top-header {
.topbar { .topbar {
@extend .clearfix; @extend .clearfix;
border-bottom: 1px solid darken($cream, 10%); border-bottom: 1px solid $border-color;
border-top: 1px solid #fff; font-size: 14px;
font-size: 12px;
line-height: 46px;
text-shadow: 0 1px 0 #fff;
@media print { @media print {
display: none; display: none;
} }
a { a {
line-height: 46px;
border-bottom: 0;
color: darken($cream, 80%);
&:hover {
color: darken($cream, 60%);
text-decoration: none;
}
&.block-link { &.block-link {
// background: darken($cream, 5%); border-left: 1px solid lighten($border-color, 10%);
border-left: 1px solid darken($cream, 20%);
@include box-shadow(inset 1px 0 0 lighten($cream, 5%));
display: block; display: block;
text-transform: uppercase;
&:hover { &:hover {
background: none; background: none;
@@ -219,12 +163,3 @@ h1.top-header {
.tran { .tran {
@include transition( all, .2s, $ease-in-out-quad); @include transition( all, .2s, $ease-in-out-quad);
} }
p.ie-warning {
background: yellow;
display: block !important;
line-height: 1.3em;
margin-bottom: 0;
padding: lh();
text-align: left;
}

8
lms/static/sass/course/courseware/_courseware.scss
View File

@@ -181,17 +181,9 @@ div.course-wrapper {
overflow: hidden; overflow: hidden;
header#open_close_accordion { header#open_close_accordion {
padding: 0;
min-height: 47px;
a { a {
background-image: url('../images/slide-right-icon.png'); background-image: url('../images/slide-right-icon.png');
} }
h2 {
visibility: hidden;
width: 10px;
}
} }
div#accordion { div#accordion {

7
lms/static/sass/course/courseware/_sidebar.scss
View File

@@ -23,7 +23,8 @@ section.course-index {
} }
&:hover { &:hover {
background: #eee; background: #f6f6f6;
text-decoration: none;
} }
&.ui-accordion-header { &.ui-accordion-header {
@@ -49,7 +50,7 @@ section.course-index {
ul.ui-accordion-content { ul.ui-accordion-content {
@include border-radius(0); @include border-radius(0);
background: #FFF; background: transparent;
border: none; border: none;
font-size: 12px; font-size: 12px;
margin: 0; margin: 0;
@@ -104,7 +105,7 @@ section.course-index {
&:after { &:after {
opacity: 1; opacity: 1;
right: 15px; right: 15px;
@include transition(all, 0.2s, linear); @include transition();
} }
> a p { > a p {

1
lms/static/sass/course/discussion/_question-view.scss
View File

@@ -313,7 +313,6 @@ div.question-header {
} }
a.edit { a.edit {
@extend .button;
font-size: 12px; font-size: 12px;
padding: 2px 10px; padding: 2px 10px;
} }

1
lms/templates/staticbook.html
View File

@@ -67,7 +67,6 @@ $("#open_close_accordion a").click(function(){
<section aria-label="Textbook Navigation" class="book-sidebar"> <section aria-label="Textbook Navigation" class="book-sidebar">
<header id="open_close_accordion"> <header id="open_close_accordion">
<h2>Table of Contents</h2>
<a href="#">close</a> <a href="#">close</a>
</header> </header>