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

Styling and template changes for the Course Home page.

Browse Source 
ECOM-2810
This commit is contained in:
Peter Fogg
2015-11-09 17:15:11 -05:00
parent 1cd5086b58
commit fd397964b3
14 changed files with 172 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
lms/static/sass/_developer.scss
View File

@@ -231,40 +231,41 @@
.date-summary-container {
.date-summary {
@include clearfix;
margin-top: $baseline/2;
margin-bottom: $baseline/2;
padding: 10px;
background-color: $gray-l4;
@include border-left(3px solid $gray-l3);
.heading {
@extend %t-title7;
color: $gray-d2;
}
.description {
margin-top: $baseline/2;
margin-bottom: $baseline/2;
display: inline-block;
color: $lighter-base-font-color;
font-size: 80%;
color: $gray-d1;
@extend %t-title8;
}
.date-summary-link {
@include float(right);
font-size: 80%;
@extend %t-title8;
font-weight: $font-semibold;
a {
color: $base-font-color;
color: $link-color;
font-weight: normal;
}
}
.date {
color: $lighter-base-font-color;
font-size: 80%;
color: $gray-d1;
@extend %t-title9;
}
&-todays-date {
@include border-left(3px solid $blue);
.heading {
font-weight: $font-regular;
font-size: 80%;
@extend %t-title8;
}
}

7
lms/static/sass/base/_layouts.scss
View File

@@ -32,9 +32,16 @@ body.view-in-course {
.wrapper-course-material .course-material,
.wrapper-preview-menu .preview-menu {
width: auto;
}
.wrapper-preview-menu .preview-menu {
padding: 15px 2%;
}
.wrapper-course-material .course-material {
padding: ($baseline/2) 0 0 0;
}
.wrapper-course-material .course-material .course-tabs {
padding: 0;
}

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

@@ -514,7 +514,7 @@ $light-gray: rgb(221, 221, 221) !default;
$dark-gray: rgb(51, 51, 51) !default;
$border-color: rgb(200, 200, 200) !default;
$sidebar-color: rgb(246, 246, 246) !default;
$outer-border-color: rgb(170, 170, 170);
$outer-border-color: $gray-l3;
$light-gray: rgb(221,221,221) !default;
// used by descriptor css

61
lms/static/sass/course/_info.scss
View File

@@ -1,11 +1,39 @@
.home-wrapper {
max-width: 1180px;
margin: 0 auto;
.home {
margin: $baseline;
.page-title {
margin-bottom: 5px;
color: $dark-gray1;
font-size: 24px;
}
.page-subtitle {
color: $dark-gray2;
font-size: 14px;
text-transform: none;
}
}
}
div.info-wrapper {
background-color: rgb(252, 252, 252);
section.updates {
@extend .content;
@include padding-left($baseline);
line-height: lh();
> h1 {
@extend .top-header;
h1 {
@include text-align(left);
@extend %t-strong;
@extend %t-title6;
margin-bottom: $baseline;
font-style: normal;
}
> p {
@@ -19,10 +47,10 @@ div.info-wrapper {
> li,article {
@extend .clearfix;
border-bottom: 1px solid lighten($border-color, 10%);
padding: $baseline;
list-style-type: none;
margin-bottom: lh(1.5);
padding-bottom: lh(.75);
background-color: $white;
ol, ul {
ol,ul {
@@ -31,8 +59,9 @@ div.info-wrapper {
}
h2 {
font-size: $body-font-size;
font-weight: bold;
@extend %t-title9;
margin-bottom: ($baseline/4);
text-transform: none;
background: url('#{$static-path}/images/calendar-icon.png') 0 center no-repeat;
padding-left: $baseline;
}
@@ -81,8 +110,7 @@ div.info-wrapper {
padding: 20px 30px;
margin: 0;
@extend .sidebar;
border-radius: 0 4px 4px 0;
@include border-left(1px solid #ddd);
background: rgba(0, 0, 0, 0);
box-shadow: none;
font-size: 14px;
@@ -97,15 +125,14 @@ div.info-wrapper {
h1 {
@include text-align(left);
@extend %t-strong;
@extend %t-title6;
margin-bottom: 0;
padding: 12px 26px 20px 0;
font-size: 18px;
font-style: normal;
font-weight: bold;
}
ul {
background-color: #f6f6f6;
margin-bottom: 14px;
}
@@ -119,7 +146,8 @@ div.info-wrapper {
padding: 0;
color: $link-color;
&:hover, &:focus {
&:hover,
&:focus {
background: transparent;
}
}
@@ -154,7 +182,8 @@ div.info-wrapper {
display: inline-block;
padding: 0;
&:hover, &:focus {
&:hover,
&:focus {
background: transparent;
}
}
@@ -175,7 +204,8 @@ div.info-wrapper {
display: inline-block;
padding: 0;
&:hover, &:focus {
&:hover,
&:focus {
background: transparent;
}
}
@@ -191,7 +221,8 @@ div.info-wrapper {
position: absolute;
width: 100%;
&:hover, &:focus {
&:hover,
&:focus {
opacity: 0.6;
filter: alpha(opacity=60);

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

@@ -24,8 +24,7 @@
display: table;
table-layout: fixed;
width: 100%;
border-radius: 3px;
border: 1px solid $outer-border-color;
border: 1px solid $border-color-2;
background: $container-bg;
box-shadow: 0 1px 2px $shadow-l2;
}

40
lms/static/sass/course/layout/_courseware_header.scss
View File

@@ -15,48 +15,50 @@
ol.course-tabs {
@include border-top-radius(4px);
@include clearfix();
@include margin-left(10px);
padding: ($baseline*0.75) 0 ($baseline*0.75) 0;
li {
@include float(left);
list-style: none;
margin-right: 6px;
&.prominent {
margin-right: 16px;
background: rgba(255, 255, 255, .5);
@include margin-right(16px);
background: rgba(255, 255, 255, 0.5);
border-radius: 3px;
}
&.prominent + li {
padding-left: ($baseline*0.75);
border-left: 1px solid #333;
@include padding-left($baseline*0.75);
@include border-left(1px solid $gray-d3);
}
a {
border-radius: 3px;
color: #555;
@include padding(($baseline/2), ($baseline*0.75), 13px, ($baseline*0.75));
@extend %t-title7;
@extend %t-strong;
border-bottom: 3px solid transparent;
color: $gray-d1;
display: block;
text-align: center;
padding: ($baseline/2) 13px 12px;
font-size: 14px;
font-weight: bold;
text-decoration: none;
// text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
&:hover, &:focus {
color: #333;
background: rgba(255, 255, 255, .6);
&:hover,
&:focus {
color: $blue;
border-bottom: 3px solid $blue;
}
&.active {
// background: $shadow;
@include linear-gradient(top, rgba(0, 0, 0, .4), rgba(0, 0, 0, .25));
border-bottom: 3px solid $gray-d4;
background-color: transparent;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5), 0 1px 1px rgba(0, 0, 0, .3) inset;
color: $white;
text-shadow: 0 1px 0 rgba(0, 0, 0, .4);
color: $gray-d4;
&:hover,
&:focus {
color: $gray-d4;
}
}
}
}
@@ -87,7 +89,7 @@ header.global.slim {
}
.guest .secondary {
margin-right: 0;
@include margin-right(0);
}
.guest .secondary a {

89
lms/static/sass/shared/_header.scss
View File

@@ -115,8 +115,8 @@ header.global {
.user {
@include float(right);
@extend %ui-print-excluded;
margin-top: ($baseline/4);
padding-left: 0;
margin: 0;
.settings-language-form {
margin-top: 4px;
@@ -135,7 +135,7 @@ header.global {
&:last-child {
> a {
padding: ($baseline/5) ($baseline/2);
padding: ($baseline/2);
&.shopping-cart {
border-radius: 4px;
@@ -147,14 +147,19 @@ header.global {
}
}
a.user-link {
@include padding(5px, 2px, 10px, 10px);
.user-link {
padding: 0;
position: relative;
text-transform: none;
font-size: 14px;
font-weight: bold;
letter-spacing: 0;
.user-image-frame {
max-width: ($baseline*2);
border-radius: 10%;
}
.icon {
display: inline-block;
@include float(left);
@@ -163,35 +168,9 @@ header.global {
color: $m-gray;
}
.avatar {
// CASE: right to left layout
display: inline-block;
@include left(8px);
opacity: 0.5;
overflow: hidden;
top: 4px;
margin-top: 1px;
margin-right: 2px;
@include transition(all 0.15s linear 0s);
width: 19px;
}
div {
margin-top: 3px;
float: right;
margin-left: 4px;
}
div {
margin-top: 3px;
float: right;
margin-left: 4px;
}
&:hover, &:focus {
.avatar {
opacity: 0.8;
}
.label-username {
@include float(right);
@include margin(($baseline*0.75), ($baseline/4), ($baseline*0.75), ($baseline*0.75));
}
}
@@ -471,7 +450,6 @@ header.global-new {
.user {
@include float(right);
margin-top: 4px;
> .primary {
display: block;
@@ -489,7 +467,7 @@ header.global-new {
> a {
@include border-radius(0, 4px, 4px, 0);
@include border-left(none);
padding: ($baseline/5) ($baseline/2);
padding: ($baseline/2) ($baseline/2);
&.shopping-cart {
border-radius: 4px;
@@ -500,14 +478,19 @@ header.global-new {
}
}
}
a.user-link {
@include padding(5px, 2px, 10px, 10px);
.user-link {
padding: 0;
position: relative;
text-transform: none;
font-size: 14px;
font-weight: bold;
letter-spacing: 0;
.user-image-frame {
max-width: ($baseline/2);
border-radius: 10%;
}
.icon {
display: inline-block;
@include float(left);
@@ -516,35 +499,9 @@ header.global-new {
color: $m-gray;
}
.avatar {
// CASE: right to left layout
display: inline-block;
@include left(8px);
opacity: 0.5;
overflow: hidden;
top: 4px;
margin-top: 1px;
margin-right: 2px;
@include transition(all 0.15s linear 0s);
width: 19px;
}
div {
margin-top: 3px;
float: right;
margin-left: 4px;
}
div {
margin-top: 3px;
float: right;
margin-left: 4px;
}
&:hover, &:focus {
.avatar {
opacity: 0.8;
}
.label-username {
@include float(right);
@include margin(($baseline*0.75), ($baseline/4), ($baseline*0.75), ($baseline*0.75));
}
}