From b90f1e41e5f26eebfda5c495909c2b5033901e36 Mon Sep 17 00:00:00 2001 From: Frances Botsford Date: Mon, 5 May 2014 10:32:28 -0400 Subject: [PATCH] UI cleanup of new instructor dashboard Stylize warning banners; more UI touches for the intructor dash: clean up nav structure, compact header so content is higher on the page LMS-1296 --- .../instructor_dashboard.coffee | 2 +- .../sass/course/instructor/_instructor.scss | 5 +- .../sass/course/instructor/_instructor_2.scss | 101 ++++++++++++------ .../courseware/instructor_dashboard.html | 10 +- .../instructor_dashboard_2.html | 11 +- 5 files changed, 82 insertions(+), 47 deletions(-) diff --git a/lms/static/coffee/src/instructor_dashboard/instructor_dashboard.coffee b/lms/static/coffee/src/instructor_dashboard/instructor_dashboard.coffee index 4459e407df..1235feaceb 100644 --- a/lms/static/coffee/src/instructor_dashboard/instructor_dashboard.coffee +++ b/lms/static/coffee/src/instructor_dashboard/instructor_dashboard.coffee @@ -99,7 +99,7 @@ setup_instructor_dashboard = (idash_content) => e.preventDefault() # deactivate all link & section styles - idash_content.find(".#{CSS_INSTRUCTOR_NAV}").children().removeClass CSS_ACTIVE_SECTION + idash_content.find(".#{CSS_INSTRUCTOR_NAV} li").children().removeClass CSS_ACTIVE_SECTION idash_content.find(".#{CSS_IDASH_SECTION}").removeClass CSS_ACTIVE_SECTION # discover section paired to link diff --git a/lms/static/sass/course/instructor/_instructor.scss b/lms/static/sass/course/instructor/_instructor.scss index d0a9ed59fe..03211f7b45 100644 --- a/lms/static/sass/course/instructor/_instructor.scss +++ b/lms/static/sass/course/instructor/_instructor.scss @@ -173,11 +173,14 @@ .wrapper-msg { margin-bottom: ($baseline*1.5); - padding: ($baseline/2) $baseline; .msg { margin-bottom: 0; } + + .note { + margin: 0; + } } } diff --git a/lms/static/sass/course/instructor/_instructor_2.scss b/lms/static/sass/course/instructor/_instructor_2.scss index 924de892c9..35a984c6e8 100644 --- a/lms/static/sass/course/instructor/_instructor_2.scss +++ b/lms/static/sass/course/instructor/_instructor_2.scss @@ -34,6 +34,11 @@ } // system feedback - messages + + .wrapper-msg { + margin-bottom: ($baseline*1.5); + } + .msg { border-radius: 1px; padding: $baseline/2 $baseline*0.75; @@ -43,6 +48,10 @@ .copy { font-weight: 600; } + + &.is-shown { + display: block; + } } // TYPE: warning @@ -51,6 +60,10 @@ background: tint($warning-color,95%); display: none; color: $warning-color; + + &.is-shown { + display: block; + } } // TYPE: confirm @@ -59,6 +72,10 @@ background: tint($confirm-color,95%); display: none; color: $confirm-color; + + &.is-shown { + display: block; + } } // TYPE: confirm @@ -69,6 +86,10 @@ .copy { color: $error-color; } + + &.is-shown { + display: block; + } } // inline copy @@ -110,6 +131,11 @@ section.instructor-dashboard-content-2 { // border: 1px solid blue; // } + .wrap-instructor-info { + display: inline; + top: 0; + } + .request-response-error { margin: 0; padding-bottom: ($baseline); @@ -141,8 +167,10 @@ section.instructor-dashboard-content-2 { h1 { @extend .top-header; + display: inline-block; padding-bottom: 0; border-bottom: 0; + margin-bottom: ($baseline*.75); } input[type="button"] { @@ -163,20 +191,29 @@ section.instructor-dashboard-content-2 { } .instructor-nav { - padding-bottom: 1em; + @extend %ui-no-list; + border-top: 1px solid $gray-l3; + border-bottom: 1px solid $gray-l3; - border-bottom: 1px solid #C8C8C8; - a { - margin-right: 1.2em; - } + .nav-item { + @extend %t-copy-base; + display: inline-block; + margin: ($baseline/2) $baseline; - .active-section { - color: #551A8B; + a { + display: block; + text-transform: uppercase; + + &.active-section { + color: $black; + } + } } } section.idash-section { display: none; + margin-top: ($baseline*1.5); // background-color: #0f0; &.active-section { @@ -560,14 +597,14 @@ section.instructor-dashboard-content-2 { float: left; clear: both; margin-top: 25px; - + .metrics-left { position: relative; width: 30%; height: 640px; float: left; margin-right: 2.5%; - + svg { width: 100%; } @@ -579,33 +616,33 @@ section.instructor-dashboard-content-2 { float: left; margin-left: 2.5%; margin-bottom: 25px; - + svg { width: 100%; } } - + svg { .stacked-bar { cursor: pointer; } } - + .metrics-tooltip { width: 250px; background-color: lightgray; padding: 3px; } - + .metrics-overlay { - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - background-color: rgba(255,255,255, .75); + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + background-color: rgba(255,255,255, .75); display: none; - + .metrics-overlay-content-wrapper { position: relative; display: block; @@ -616,23 +653,23 @@ section.instructor-dashboard-content-2 { border: 1px solid #000; border-radius: 25px; padding: 2.5%; - + .metrics-overlay-title { display: block; height: 50px; margin-bottom: 10px; font-weight: bold; } - + .metrics-overlay-content { width: 100%; height: 370px; overflow: auto; border: 1px solid #000; - + table { width: 100%; - + .header { background-color: #ddd; } @@ -641,18 +678,18 @@ section.instructor-dashboard-content-2 { } } } - + .overflow-message { padding-top: 20px; } - + .download-csv { position: absolute; display: none; right: 2%; bottom: 2%; } - + .close-button { position: absolute; right: 1.5%; @@ -661,27 +698,27 @@ section.instructor-dashboard-content-2 { } } } - + .stacked-bar-graph-legend { fill: white; } - + p.loading { padding-top: 100px; text-align: center; } - + p.nothing { padding-top: 25px; } - + h3.attention { padding: 10px; border: 1px solid #999; border-radius: 5px; margin-top: 25px; } - + input#graph_reload { display: none; } diff --git a/lms/templates/courseware/instructor_dashboard.html b/lms/templates/courseware/instructor_dashboard.html index 8b1f1f9585..c20da8d477 100644 --- a/lms/templates/courseware/instructor_dashboard.html +++ b/lms/templates/courseware/instructor_dashboard.html @@ -127,14 +127,12 @@ function goto( mode) %endif ${_("Back To Standard Dashboard")} - +

${_("Instructor Dashboard")}

-
-
${_("You are using the legacy instructor dashboard, which will be going away in the near future. Please use the Standard Dashboard. If it is missing functionality, please let us know.")} - ${_("Return to the Standard Dashboard")}

-
+
+

${_("You are using the legacy instructor dashboard, which we will retire in the near future.")} ${_("Return to the Standard Dashboard")}

+

${_("If the Standard Dashboard is missing functionality, please let us know.")}

[ Grades | diff --git a/lms/templates/instructor/instructor_dashboard_2/instructor_dashboard_2.html b/lms/templates/instructor/instructor_dashboard_2/instructor_dashboard_2.html index b2281d712a..1fbab858e3 100644 --- a/lms/templates/instructor/instructor_dashboard_2/instructor_dashboard_2.html +++ b/lms/templates/instructor/instructor_dashboard_2/instructor_dashboard_2.html @@ -65,21 +65,18 @@

${_("Instructor Dashboard")}

-
-
-

${_("We've changed the look and feel of the Instructor Dashboard. During this transition time, you can still access the old Instructor Dashboard by clicking the 'Revert to Legacy Dashboard' button in the top right hand corner.")}

-
## links which are tied to idash-sections below. ## the links are activated and handled in instructor_dashboard.coffee ## when the javascript loads, it clicks on the first section -

+

+ ## each section corresponds to a section_data sub-dictionary provided by the view ## to keep this short, sections can be pulled out into their own files