diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss index 4a20a98eb3..fe107d7511 100644 --- a/cms/static/sass/_base.scss +++ b/cms/static/sass/_base.scss @@ -368,42 +368,6 @@ p, ul, ol, dl { color: $gray-d3; } } - - .introduction { - @include box-sizing(border-box); - @extend .t-copy-sub1; - width: flex-grid(12); - margin: 0 0 $baseline 0; - - .copy strong { - font-weight: 600; - } - - &.has-links { - @include clearfix(); - - .copy { - float: left; - width: flex-grid(8,12); - margin-right: flex-gutter(); - } - - .nav-introduction-supplementary { - @extend .t-copy-sub2; - float: right; - width: flex-grid(4,12); - display: block; - text-align: right; - - .icon { - @extend .t-action3; - display: inline-block; - vertical-align: middle; - margin-right: ($baseline/4); - } - } - } - } } .content-primary, .content-supplementary { diff --git a/cms/static/sass/elements/_system-help.scss b/cms/static/sass/elements/_system-help.scss index d1b0584fc4..ca8fa38154 100644 --- a/cms/static/sass/elements/_system-help.scss +++ b/cms/static/sass/elements/_system-help.scss @@ -1,40 +1,169 @@ // studio - elements - system help // ==================== -// notices - in-context: to be used as notices to users within the context of a form/action -.notice-incontext { - @extend .ui-well; - border-radius: ($baseline/10); +// view introductions - common greeting/starting points for the UI +.content .introduction { + @include box-sizing(border-box); + margin-bottom: $baseline; .title { - @extend .t-title7; - margin-bottom: ($baseline/4); + @extend .t-title4; font-weight: 600; } .copy { @extend .t-copy-sub1; - @include transition(opacity $tmg-f2 ease-in-out 0s); - opacity: 0.75; } strong { font-weight: 600; } - &:hover { + // CASE: has links alongside + &.has-links { + @include clearfix(); .copy { - opacity: 1.0; + float: left; + width: flex-grid(8,12); + margin-right: flex-gutter(); + } + + .nav-introduction-supplementary { + @extend .t-copy-sub2; + float: right; + width: flex-grid(4,12); + display: block; + text-align: right; + + .icon { + @extend .t-action3; + display: inline-block; + vertical-align: middle; + margin-right: ($baseline/4); + } } } } -// particular warnings around a workflow for something +// notices - in-context: to be used as notices to users within the context of a form/action +.notice-incontext { + @extend .ui-well; + border-radius: ($baseline/10); + position: relative; + overflow: hidden; + margin-bottom: $baseline; + + .title { + @extend .t-title7; + margin-bottom: ($baseline/4); + font-weight: 700; + } + + .copy { + @extend .t-copy-sub1; + @include transition(opacity $tmg-f2 ease-in-out 0s); + opacity: 0.75; + margin-bottom: $baseline; + + &:last-child { + margin-bottom: 0; + } + } + + strong { + font-weight: 600; + } + + &.has-status { + + .status-indicator { + position: absolute; + top: 0; + left: 0; + display: block; + width: 100%; + height: ($baseline/4); + opacity: 0.40; + } + } + + // CASE: notice has actions { + &.has-actions { + + .list-actions { + margin-top: ($baseline*0.75); + + .action-item { + + } + + .action-primary { + @extend .btn-primary-blue; + @extend .t-action3; + } + } + } +} + +// particular notice - warnings around a workflow for something .notice-workflow { background: $yellow-l5; - .copy { + .status-indicator { + background: $yellow; + } + + title { color: $gray-d1; } + + .copy { + color: $gray; + } +} + +// particular notice - instructional +.notice-instruction { + background-color: $gray-l4; + + .title { + color: $gray-d1; + } + + .copy { + color: $gray; + } + + &.has-actions { + + .list-actions { + + .action-item { + + } + + .action-primary { + @extend .btn-primary-blue; + @extend .t-action3; + } + } + } +} + +// particular notice - confirmation +.notice-confirmation { + background-color: $green-l5; + + .status-indicator { + background: $green-s1; + } + + .title { + color: $green; + } + + .copy { + color: $gray; + } } diff --git a/cms/static/sass/views/_dashboard.scss b/cms/static/sass/views/_dashboard.scss index 8d1b068256..a1cd5a47f6 100644 --- a/cms/static/sass/views/_dashboard.scss +++ b/cms/static/sass/views/_dashboard.scss @@ -3,8 +3,254 @@ body.dashboard { + // temp + .content { + margin-bottom: ($baseline*5); + + &:last-child { + margin-bottom: 0; + } + } + + // ==================== + + // basic layout + .content-primary, .content-supplementary { + @include box-sizing(border-box); + float: left; + } + + .content-primary { + width: flex-grid(9, 12); + margin-right: flex-gutter(); + } + + .content-supplementary { + width: flex-grid(3, 12); + } + + // ==================== + + // elements - notices + .content .notice-incontext { + width: flexgrid(9, 9); + + // CASE: notice has actions { + &.has-actions { + + .msg, .list-actions { + display: inline-block; + vertical-align: middle; + } + + .msg { + width: flex-grid(6, 9); + margin-right: flex-gutter(); + } + + .list-actions { + width: flex-grid(3, 9); + text-align: right; + margin-top: 0; + + .action-item { + + } + + .action-create-course { + @extend .btn-primary-green; + } + } + } + } + + + + // elements - authorship controls + .wrapper-authorshiprights { + overflow: hidden; + + .ui-toggle-control { + @extend .depth2; + @extend .btn-secondary-gray; + @include clearfix(); + display: block; + text-align: left; + + // STATE: hover - syncing up colors with current so transition is smoother + &:hover { + background: $gray-d1; + color: $white; + } + + .label { + @extend .t-action3; + float: left; + width: flex-grid(8, 9); + margin: 3px flex-gutter() 0 0; + } + + .icon-remove-sign { + @extend .t-action1; + @include transition(rotate 10.0s ease-in-out 0s); + @include transform(rotate(45deg)); + @include transform-origin(center center); + float: right; + text-align: right; + } + } + + .ui-toggle-target { + @extend .depth1; + @include transition(opacity 0.50s ease-in-out 0s); + position: relative; + top: -2px; + display: none; + opacity: 0; + } + + // CASE: when the content area is shown + &.is-shown { + + .ui-toggle-control { + @include border-bottom-radius(0); + + .icon-remove-sign { + @include transform(rotate(90deg)); + @include transform-origin(center center); + } + } + + .ui-toggle-target { + display: block; + opacity: 1.0; + } + } + + + } + + // elements - authorship controls + .status-authorship { + margin-top: $baseline; + + .title { + @extend .t-title7; + margin-bottom: ($baseline/4); + font-weight: 700; + color: $gray-d1; + } + + .copy { + + } + + .list-actions { + margin-top: ($baseline*0.75); + + .action-item { + + } + + .action-primary { + @extend .btn-primary-blue; + @extend .t-action3; + } + } + + .status-update { + + .label { + @extend .text-sr; + } + + .value { + @include border-radius(($baseline/4)); + position: relative; + overflow: hidden; + padding: ($baseline/5) ($baseline/2); + background: $gray; + + .status-indicator { + position: absolute; + top: 0; + left: 0; + display: block; + width: 100%; + height: ($baseline/4); + opacity: 0.40; + } + } + + .value-formal, .value-description { + @include border-radius(($baseline/10)); + display: inline-block; + vertical-align: middle; + color: $white; + } + + .value-formal { + @extend .t-title5; + margin: ($baseline/2); + font-weight: 700; + + [class^="icon-"] { + margin-right: ($baseline/4); + } + } + + .value-description { + @extend .t-copy-sub1; + position: relative; + color: $white; + opacity: 0.65; + } + } + + // CASE: rights are not requested yet + &.is-unrequested { + + .title { + @extend .text-sr; + } + } + + // CASE: status is pending + &.is-pending { + + .status-update { + + .value { + background: $orange; + } + + .status-indicator { + background: $orange-d1; + } + } + } + + + // CASE: status is rejected + &.is-rejected { + + .status-update { + + .value { + background: $red-l1; + } + + .status-indicator { + background: $red-s1; + } + } + } + } + + // ==================== + .my-classes { - margin-top: $baseline; + margin: $baseline 0; } .class-list { diff --git a/cms/templates/index.html b/cms/templates/index.html index 5a1003b391..21cbc26799 100644 --- a/cms/templates/index.html +++ b/cms/templates/index.html @@ -5,6 +5,22 @@ <%block name="title">${_("My Courses")} <%block name="bodyclass">is-signedin index dashboard +<%block name="jsextra"> + + + + <%block name="header_extras">