From 4e331a2c6a2999ad7847212a00135e5810121f45 Mon Sep 17 00:00:00 2001 From: Brian Talbot Date: Mon, 8 Apr 2013 15:39:01 -0400 Subject: [PATCH] studio - restyling course basic details and adding in a course's URL more prominently WIP --- cms/static/sass/elements/_controls.scss | 2 +- cms/static/sass/elements/_forms.scss | 39 +++++++++++--- cms/static/sass/views/_settings.scss | 67 ++++++++++++++++++++++++- cms/templates/settings.html | 27 +++++----- 4 files changed, 111 insertions(+), 24 deletions(-) diff --git a/cms/static/sass/elements/_controls.scss b/cms/static/sass/elements/_controls.scss index c4e96616a8..953b2d15e5 100644 --- a/cms/static/sass/elements/_controls.scss +++ b/cms/static/sass/elements/_controls.scss @@ -97,7 +97,7 @@ color: $blue; &:hover, &:active { - background: $blue-l3; + background: $blue-l4; color: $blue-s2; } diff --git a/cms/static/sass/elements/_forms.scss b/cms/static/sass/elements/_forms.scss index 3bda079473..1faf4a883e 100644 --- a/cms/static/sass/elements/_forms.scss +++ b/cms/static/sass/elements/_forms.scss @@ -8,11 +8,11 @@ input[type="password"], textarea.text { padding: 6px 8px 8px; @include box-sizing(border-box); - border: 1px solid $mediumGrey; + border: 1px solid $gray-l2; border-radius: 2px; - @include linear-gradient($lightGrey, tint($lightGrey, 90%)); - background-color: $lightGrey; - @include box-shadow(0 1px 2px rgba(0, 0, 0, .1) inset); + @include linear-gradient($gray-l5, $white); + background-color: $gray-l5; + @include box-shadow(inset 0 1px 2px $shadow-l1); font-family: 'Open Sans', sans-serif; font-size: 11px; color: $baseFontColor; @@ -21,7 +21,7 @@ textarea.text { &::-webkit-input-placeholder, &:-moz-placeholder, &:-ms-input-placeholder { - color: #979faf; + color: $gray-l2; } &:focus { @@ -39,7 +39,7 @@ textarea.text { color: $gray-d2; } - input, textarea { + label, input, textarea { pointer-events: none; } } @@ -61,8 +61,31 @@ form { .note { @include box-sizing(border-box); - padding: $baseline; - background: $gray-l4; + + .title { + + } + + .copy { + + } + + // note with actions + &.has-actions { + @include clearfix(); + + .title { + + } + + .copy { + + } + + .list-actions { + + } + } } .note-promotion { diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss index 6b8bec7912..87d076ab72 100644 --- a/cms/static/sass/views/_settings.scss +++ b/cms/static/sass/views/_settings.scss @@ -147,7 +147,7 @@ body.course.settings { } label { - @include font-size(14); + @extend .t-copy-sub1; @include transition(color, 0.15s, ease-in-out); margin: 0 0 ($baseline/4) 0; font-weight: 400; @@ -243,12 +243,31 @@ body.course.settings { .list-input { @include clearfix(); + padding: 0 ($baseline/2); .field { margin-bottom: 0; } } + // course details that should appear more like content than elements to change + .field.is-not-editable { + + label { + + } + + input, textarea { + @extend .t-copy-lead1; + @include box-shadow(none); + border: none; + background: none; + padding: 0; + margin: 0; + font-weight: 600; + } + } + #field-course-organization { float: left; width: flex-grid(2, 9); @@ -265,6 +284,52 @@ body.course.settings { float: left; width: flex-grid(5, 9); } + + // course link note + .note-promotion-courseURL { + @include box-shadow(0 1px 1px $shadow-l1); + @include border-radius(($baseline/5)); + margin-top: ($baseline*1.5); + border: 1px solid $gray-l3; + padding: ($baseline/2) 0 0 0; + + .title { + @extend .t-copy-sub1; + margin: 0 0 ($baseline/10) 0; + padding: 0 ($baseline/2); + } + + .copy { + padding: 0 ($baseline/2) ($baseline/2) ($baseline/2); + + .link-courseURL { + @extend .t-copy-lead1; + + &:hover { + + } + } + } + + .list-actions { + @include box-shadow(inset 0 1px 1px $shadow-l1); + border-top: 1px solid $gray-l4; + padding: ($baseline/2); + background: $gray-l5; + + .action-primary { + @include blue-button(); + @include font-size(13); + + .icon { + @extend .t-icon; + @include font-size(16); + display: inline-block; + vertical-align: middle; + } + } + } + } } // specific fields - schedule diff --git a/cms/templates/settings.html b/cms/templates/settings.html index afc958c608..9e16c15c0a 100644 --- a/cms/templates/settings.html +++ b/cms/templates/settings.html @@ -67,20 +67,6 @@ from contentstore import utils The nuts and bolts of your course -
-

Your Course's Live URL

-
-

Students can enroll in and access ${context_course.display_name_with_default} at: ${utils.get_lms_link_for_about_page(course_location)}

-
- - -
-
  1. @@ -97,6 +83,19 @@ from contentstore import utils
+ +
+

Course URL (for student enrollment and access)

+
+

${utils.get_lms_link_for_about_page(course_location)}

+
+ + +