Skip to content

E
edx-platform
Commit eedf62a1 by David Ormsbee
Options

Merge pull request #333 from MITx/feature/kfiedler/courseware-style 

Strip down sequence nav, start to use ems for font size instead of pixels and started to strip down the info page
parents 0e7ce4a6 b90aa2e2
Showing with 129 additions and 224 deletions
cms/static/sass/_base.scss
......@@ -2,6 +2,7 @@ $fg-column: 70px;
$fg-gutter: 26px;
$fg-max-columns: 12;
$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
$sans-serif: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
$body-font-size: 14px;
$body-line-height: 20px;
......@@ -12,6 +13,7 @@ $orange: #f96e5b;
$yellow: #fff8af;
$cream: #F6EFD4;
$mit-red: #933;
$border-color: #ddd;
@mixin hide-text {
background-color: transparent;
......
common/lib/xmodule/xmodule/css/sequence/display.scss
......@@ -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 {
a {
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: 10px;
padding: 15px 0 14px;
position: relative;
@include transition();
width: 100%;
&:hover {
background-color: #eee;
background-repeat: no-repeat;
background-position: center;
background-color: #F6F6F6;
}
}
.visited {
background-color: #ddd;
background-repeat: no-repeat;
&.visited {
background-color: #F6F6F6;
&:hover {
background-position: center center;
&:hover {
background-position: center center;
}
}
}
.active {
background-color: #fff;
background-repeat: no-repeat;
@include box-shadow(0 1px 0 #fff);
&:hover {
&.active {
border-color: $border-color;
@include box-shadow(0 2px 0 #fff);
background-color: #fff;
background-position: center;
}
}
z-index: 9;
a {
background-position: center center;
border: none;
cursor: pointer;
display: block;
height: 17px;
padding: 15px 0 14px;
position: relative;
@include transition(all, .4s, $ease-in-out-quad);
width: 100%;
&.progress {
border-bottom-style: solid;
border-bottom-width: 4px;
&: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;
......
lms/static/sass/application.scss
......@@ -2,9 +2,9 @@
@import 'base/reset';
@import 'base/font_face';
@import 'base/mixins';
@import 'base/variables';
@import 'base/base';
@import 'base/mixins';
@import 'base/extends';
@import 'base/animations';
......
lms/static/sass/base/_mixins.scss
@function em($pxval, $base: 16) {
@return #{$pxval / $base}em;
}
// Line-height
@function lh($amount: 1) {
@return $body-line-height * $amount;
......
lms/static/sass/base/_variables.scss
......@@ -4,10 +4,15 @@ $gw-gutter: 20px;
$fg-column: $gw-column;
$fg-gutter: $gw-gutter;
$fg-max-columns: 12;
$fg-max-width: 1400px;
$fg-min-width: 810px;
$sans-serif: 'Open Sans', $verdana;
$body-font-family: $sans-serif;
$serif: $georgia;
$body-font-size: em(14);
$body-line-height: golden-ratio(.875em, 1);
$base-font-color: rgb(60,60,60);
$lighter-base-font-color: rgb(160,160,160);
......@@ -15,18 +20,11 @@ $blue: rgb(29,157,217);
$pink: rgb(182,37,104);
$yellow: rgb(255, 252, 221);
$error-red: rgb(253, 87, 87);
$border-color: #C8C8C8;
// old variables
$body-font-family: "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
$body-font-size: 14px;
$body-line-height: golden-ratio($body-font-size, 1);
$fg-max-width: 1400px;
$fg-min-width: 810px;
$light-gray: #ddd;
$dark-gray: #333;
$mit-red: #993333;
$cream: #F6EFD4;
$text-color: $dark-gray;
$border-color: $light-gray;
lms/static/sass/course.scss
......@@ -2,9 +2,9 @@
@import 'base/reset';
@import 'base/font_face';
@import 'base/mixins';
@import 'base/variables';
@import 'base/base';
@import 'base/mixins';
@import 'base/extends';
@import 'base/animations';
......
lms/static/sass/course/_info.scss
......@@ -3,6 +3,7 @@ div.info-wrapper {
section.updates {
@extend .content;
line-height: lh();
> h1 {
@extend .top-header;
......@@ -15,30 +16,35 @@ div.info-wrapper {
> ol {
list-style: none;
padding-left: 0;
margin-bottom: lh();
> li {
@extend .clearfix;
border-bottom: 1px solid #e3e3e3;
margin-bottom: lh(.5);
margin-bottom: lh();
padding-bottom: lh(.5);
list-style-type: disk;
&:first-child {
background: $cream;
border-bottom: 1px solid darken($cream, 10%);
margin: 0 (-(lh(.5))) lh();
padding: lh(.5);
}
ol, ul {
margin: lh() 0 0 lh();
list-style-type: circle;
margin: 0;
list-style-type: disk;
ol,ul {
list-style-type: circle;
}
}
h2 {
float: left;
margin: 0 flex-gutter() 0 0;
width: flex-grid(2, 9);
font-size: $body-font-size;
font-weight: bold;
}
section.update-description {
......@@ -64,16 +70,20 @@ div.info-wrapper {
@extend .sidebar;
border-left: 1px solid #d3d3d3;
@include border-radius(0 4px 4px 0);
@include box-shadow(none);
border-right: 0;
header {
h1 {
@extend .bottom-border;
padding: lh(.5) lh(.75);
padding: lh(.5) lh(.5);
}
h1 {
font-size: 18px;
margin: 0 ;
}
header {
// h1 {
// font-weight: 100;
// font-style: italic;
// }
p {
color: #666;
......@@ -94,7 +104,7 @@ div.info-wrapper {
border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee);
@include box-sizing(border-box);
padding: 7px lh(.75);
padding: em(7) lh(.75);
position: relative;
&.expandable,
......@@ -108,13 +118,13 @@ div.info-wrapper {
ul {
background: none;
margin: 7px (-(lh(.75))) 0;
margin: em(7) (-(lh(.75))) 0;
li {
border-bottom: 0;
border-top: 1px solid #d3d3d3;
@include box-shadow(inset 0 1px 0 #eee);
padding-left: 18px + lh(.75);
padding-left: lh(1.5);
}
}
......@@ -150,7 +160,7 @@ div.info-wrapper {
border-bottom: 0;
@include box-shadow(none);
color: #999;
font-size: 12px;
font-size: $body-font-size;
font-weight: bold;
text-transform: uppercase;
}
......
lms/static/sass/course/_textbook.scss
......@@ -62,7 +62,6 @@ div.book-wrapper {
@extend .clearfix;
li {
background-color: darken($cream, 4%);
&.last {
display: block;
......
lms/static/sass/course/base/_base.scss
......@@ -12,4 +12,10 @@ table {
.container {
padding: lh(2);
> div {
display: table;
width: 100%;
table-layout: fixed;
}
}
lms/static/sass/course/base/_extends.scss
.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 {
background: #f3f3f3;
border-bottom: 1px solid #e3e3e3;
margin: (-(lh())) (-(lh())) lh();
padding: lh();
text-align: left;
}
.button {
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%));
}
font-size: 24px;
font-weight: 100;
padding-bottom: lh();
}
.light-button, a.light-button {
......@@ -94,11 +60,13 @@ h1.top-header {
width: flex-grid(3);
h1, h2 {
font-size: 18px;
font-weight: bold;
font-size: em(18);
font-weight: 100;
letter-spacing: 0;
text-transform: none;
font-family: $sans-serif;
text-align: left;
font-style: italic;
}
a {
......@@ -147,27 +115,20 @@ h1.top-header {
}
header#open_close_accordion {
border-bottom: 1px solid #d3d3d3;
@include box-shadow(0 1px 0 #eee);
padding: lh(.5) lh();
position: relative;
h2 {
margin: 0;
padding-right: 20px;
}
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;
@include border-radius(3px 0 0 3px);
height: 16px;
padding: 8px;
padding: 6px;
position: absolute;
right: -1px;
text-indent: -9999px;
top: 6px;
width: 16px;
z-index: 99;
&:hover {
background-color: white;
......@@ -182,32 +143,17 @@ h1.top-header {
.topbar {
@extend .clearfix;
border-bottom: 1px solid darken($cream, 10%);
border-top: 1px solid #fff;
font-size: 12px;
line-height: 46px;
text-shadow: 0 1px 0 #fff;
border-bottom: 1px solid $border-color;
font-size: 14px;
@media print {
display: none;
}
a {
line-height: 46px;
border-bottom: 0;
color: darken($cream, 80%);
&:hover {
color: darken($cream, 60%);
text-decoration: none;
}
&.block-link {
// background: darken($cream, 5%);
border-left: 1px solid darken($cream, 20%);
@include box-shadow(inset 1px 0 0 lighten($cream, 5%));
border-left: 1px solid lighten($border-color, 10%);
display: block;
text-transform: uppercase;
&:hover {
background: none;
......@@ -219,12 +165,3 @@ h1.top-header {
.tran {
@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;
}
lms/static/sass/course/courseware/_courseware.scss
......@@ -181,17 +181,9 @@ div.course-wrapper {
overflow: hidden;
header#open_close_accordion {
padding: 0;
min-height: 47px;
a {
background-image: url('../images/slide-right-icon.png');
}
h2 {
visibility: hidden;
width: 10px;
}
}
div#accordion {
......
lms/static/sass/course/courseware/_sidebar.scss
......@@ -23,7 +23,8 @@ section.course-index {
}
&:hover {
background: #eee;
background: #f6f6f6;
text-decoration: none;
}
&.ui-accordion-header {
......@@ -49,7 +50,7 @@ section.course-index {
ul.ui-accordion-content {
@include border-radius(0);
background: #FFF;
background: transparent;
border: none;
font-size: 12px;
margin: 0;
......@@ -104,7 +105,7 @@ section.course-index {
&:after {
opacity: 1;
right: 15px;
@include transition(all, 0.2s, linear);
@include transition();
}
> a p {
......
lms/static/sass/course/discussion/_profile.scss
......@@ -72,7 +72,6 @@ body.user-profile-page {
margin-bottom: 30px;
li {
background-color: lighten($cream, 3%);
background-position: 10px center;
background-repeat: no-repeat;
@include border-radius(4px);
......
lms/static/sass/course/discussion/_question-view.scss
......@@ -32,8 +32,6 @@ div.question-header {
&.post-vote {
@include border-radius(4px);
background-color: lighten($cream, 5%);
border: 1px solid darken( $cream, 10% );
@include box-shadow(inset 0 1px 0px #fff);
}
......@@ -149,7 +147,7 @@ div.question-header {
&.revision {
text-align: center;
background:lighten($cream, 7%);
// background:lighten($cream, 7%);
a {
color: black;
......@@ -313,7 +311,6 @@ div.question-header {
}
a.edit {
@extend .button;
font-size: 12px;
padding: 2px 10px;
}
......
lms/static/sass/course/wiki/_wiki.scss
......@@ -24,7 +24,6 @@ div.wiki-wrapper {
}
p {
color: darken($cream, 55%);
float: left;
line-height: 46px;
margin-bottom: 0;
......@@ -40,14 +39,12 @@ div.wiki-wrapper {
input[type="button"] {
@extend .block-link;
background-color: darken($cream, 5%);
background-position: 12px center;
background-repeat: no-repeat;
border: 0;
border-left: 1px solid darken(#f6efd4, 20%);
@include border-radius(0);
@include box-shadow(inset 1px 0 0 lighten(#f6efd4, 5%));
color: darken($cream, 80%);
display: block;
font-size: 12px;
font-weight: normal;
......
lms/templates/info.html
......@@ -20,23 +20,25 @@ $(document).ready(function(){
</%block>
<section class="container">
<section class="courseware">
<div class="info-wrapper">
% if user.is_authenticated():
<section class="updates">
${get_course_info_section(course, 'updates')}
</section>
<section aria-label="Handout Navigation" class="handouts">
${get_course_info_section(course, 'handouts')}
</section>
% else:
<section class="updates">
${get_course_info_section(course, 'guest_updates')}
</section>
<section aria-label="Handout Navigation" class="handouts">
${get_course_info_section(course, 'guest_handouts')}
</section>
% endif
</div>
</section>
<div class="info-wrapper">
% if user.is_authenticated():
<section class="updates">
<h1>Course Updates &amp; News</h1>
${get_course_info_section(course, 'updates')}
</section>
<section aria-label="Handout Navigation" class="handouts">
<h1>Course Handouts</h1>
${get_course_info_section(course, 'handouts')}
</section>
% else:
<section class="updates">
<h1>Course Updates &amp; News</h1>
${get_course_info_section(course, 'guest_updates')}
</section>
<section aria-label="Handout Navigation" class="handouts">
<h1>Course Handouts</h1>
${get_course_info_section(course, 'guest_handouts')}
</section>
% endif
</div>
</section>
lms/templates/staticbook.html
......@@ -67,7 +67,6 @@ $("#open_close_accordion a").click(function(){
<section aria-label="Textbook Navigation" class="book-sidebar">
<header id="open_close_accordion">
<h2>Table of Contents</h2>
<a href="#">close</a>
</header>
......
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