Skip to content

E
edx-platform
Commit b90f1e41 by Frances Botsford Committed by Sarina Canelake
Options

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
parent bc0c1382
Showing with 82 additions and 47 deletions
lms/static/coffee/src/instructor_dashboard/instructor_dashboard.coffee
...@@ -99,7 +99,7 @@ setup_instructor_dashboard = (idash_content) => ...@@ -99,7 +99,7 @@ setup_instructor_dashboard = (idash_content) =>
e.preventDefault() e.preventDefault()
# deactivate all link & section styles # 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 idash_content.find(".#{CSS_IDASH_SECTION}").removeClass CSS_ACTIVE_SECTION
# discover section paired to link # discover section paired to link
......
lms/static/sass/course/instructor/_instructor.scss
...@@ -173,11 +173,14 @@ ...@@ -173,11 +173,14 @@
.wrapper-msg { .wrapper-msg {
margin-bottom: ($baseline*1.5); margin-bottom: ($baseline*1.5);
padding: ($baseline/2) $baseline;
.msg { .msg {
margin-bottom: 0; margin-bottom: 0;
} }
.note {
margin: 0;
}
} }
} }
......
lms/static/sass/course/instructor/_instructor_2.scss
...@@ -34,6 +34,11 @@ ...@@ -34,6 +34,11 @@
} }
// system feedback - messages // system feedback - messages
.wrapper-msg {
margin-bottom: ($baseline*1.5);
}
.msg { .msg {
border-radius: 1px; border-radius: 1px;
padding: $baseline/2 $baseline*0.75; padding: $baseline/2 $baseline*0.75;
...@@ -43,6 +48,10 @@ ...@@ -43,6 +48,10 @@
.copy { .copy {
font-weight: 600; font-weight: 600;
} }
&.is-shown {
display: block;
}
} }
// TYPE: warning // TYPE: warning
...@@ -51,6 +60,10 @@ ...@@ -51,6 +60,10 @@
background: tint($warning-color,95%); background: tint($warning-color,95%);
display: none; display: none;
color: $warning-color; color: $warning-color;
&.is-shown {
display: block;
}
} }
// TYPE: confirm // TYPE: confirm
...@@ -59,6 +72,10 @@ ...@@ -59,6 +72,10 @@
background: tint($confirm-color,95%); background: tint($confirm-color,95%);
display: none; display: none;
color: $confirm-color; color: $confirm-color;
&.is-shown {
display: block;
}
} }
// TYPE: confirm // TYPE: confirm
...@@ -69,6 +86,10 @@ ...@@ -69,6 +86,10 @@
.copy { .copy {
color: $error-color; color: $error-color;
} }
&.is-shown {
display: block;
}
} }
// inline copy // inline copy
...@@ -110,6 +131,11 @@ section.instructor-dashboard-content-2 { ...@@ -110,6 +131,11 @@ section.instructor-dashboard-content-2 {
// border: 1px solid blue; // border: 1px solid blue;
// } // }
.wrap-instructor-info {
display: inline;
top: 0;
}
.request-response-error { .request-response-error {
margin: 0; margin: 0;
padding-bottom: ($baseline); padding-bottom: ($baseline);
...@@ -141,8 +167,10 @@ section.instructor-dashboard-content-2 { ...@@ -141,8 +167,10 @@ section.instructor-dashboard-content-2 {
h1 { h1 {
@extend .top-header; @extend .top-header;
display: inline-block;
padding-bottom: 0; padding-bottom: 0;
border-bottom: 0; border-bottom: 0;
margin-bottom: ($baseline*.75);
} }
input[type="button"] { input[type="button"] {
...@@ -163,20 +191,29 @@ section.instructor-dashboard-content-2 { ...@@ -163,20 +191,29 @@ section.instructor-dashboard-content-2 {
} }
.instructor-nav { .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; .nav-item {
a { @extend %t-copy-base;
margin-right: 1.2em; display: inline-block;
} margin: ($baseline/2) $baseline;
.active-section { a {
color: #551A8B; display: block;
text-transform: uppercase;
&.active-section {
color: $black;
}
}
} }
} }
section.idash-section { section.idash-section {
display: none; display: none;
margin-top: ($baseline*1.5);
// background-color: #0f0; // background-color: #0f0;
&.active-section { &.active-section {
...@@ -560,14 +597,14 @@ section.instructor-dashboard-content-2 { ...@@ -560,14 +597,14 @@ section.instructor-dashboard-content-2 {
float: left; float: left;
clear: both; clear: both;
margin-top: 25px; margin-top: 25px;
.metrics-left { .metrics-left {
position: relative; position: relative;
width: 30%; width: 30%;
height: 640px; height: 640px;
float: left; float: left;
margin-right: 2.5%; margin-right: 2.5%;
svg { svg {
width: 100%; width: 100%;
} }
...@@ -579,33 +616,33 @@ section.instructor-dashboard-content-2 { ...@@ -579,33 +616,33 @@ section.instructor-dashboard-content-2 {
float: left; float: left;
margin-left: 2.5%; margin-left: 2.5%;
margin-bottom: 25px; margin-bottom: 25px;
svg { svg {
width: 100%; width: 100%;
} }
} }
svg { svg {
.stacked-bar { .stacked-bar {
cursor: pointer; cursor: pointer;
} }
} }
.metrics-tooltip { .metrics-tooltip {
width: 250px; width: 250px;
background-color: lightgray; background-color: lightgray;
padding: 3px; padding: 3px;
} }
.metrics-overlay { .metrics-overlay {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-color: rgba(255,255,255, .75); background-color: rgba(255,255,255, .75);
display: none; display: none;
.metrics-overlay-content-wrapper { .metrics-overlay-content-wrapper {
position: relative; position: relative;
display: block; display: block;
...@@ -616,23 +653,23 @@ section.instructor-dashboard-content-2 { ...@@ -616,23 +653,23 @@ section.instructor-dashboard-content-2 {
border: 1px solid #000; border: 1px solid #000;
border-radius: 25px; border-radius: 25px;
padding: 2.5%; padding: 2.5%;
.metrics-overlay-title { .metrics-overlay-title {
display: block; display: block;
height: 50px; height: 50px;
margin-bottom: 10px; margin-bottom: 10px;
font-weight: bold; font-weight: bold;
} }
.metrics-overlay-content { .metrics-overlay-content {
width: 100%; width: 100%;
height: 370px; height: 370px;
overflow: auto; overflow: auto;
border: 1px solid #000; border: 1px solid #000;
table { table {
width: 100%; width: 100%;
.header { .header {
background-color: #ddd; background-color: #ddd;
} }
...@@ -641,18 +678,18 @@ section.instructor-dashboard-content-2 { ...@@ -641,18 +678,18 @@ section.instructor-dashboard-content-2 {
} }
} }
} }
.overflow-message { .overflow-message {
padding-top: 20px; padding-top: 20px;
} }
.download-csv { .download-csv {
position: absolute; position: absolute;
display: none; display: none;
right: 2%; right: 2%;
bottom: 2%; bottom: 2%;
} }
.close-button { .close-button {
position: absolute; position: absolute;
right: 1.5%; right: 1.5%;
...@@ -661,27 +698,27 @@ section.instructor-dashboard-content-2 { ...@@ -661,27 +698,27 @@ section.instructor-dashboard-content-2 {
} }
} }
} }
.stacked-bar-graph-legend { .stacked-bar-graph-legend {
fill: white; fill: white;
} }
p.loading { p.loading {
padding-top: 100px; padding-top: 100px;
text-align: center; text-align: center;
} }
p.nothing { p.nothing {
padding-top: 25px; padding-top: 25px;
} }
h3.attention { h3.attention {
padding: 10px; padding: 10px;
border: 1px solid #999; border: 1px solid #999;
border-radius: 5px; border-radius: 5px;
margin-top: 25px; margin-top: 25px;
} }
input#graph_reload { input#graph_reload {
display: none; display: none;
} }
......
lms/templates/courseware/instructor_dashboard.html
...@@ -127,14 +127,12 @@ function goto( mode) ...@@ -127,14 +127,12 @@ function goto( mode)
%endif %endif
<a class="instructor-info-action beta-button" href="${ standard_dashboard_url }">${_("Back To Standard Dashboard")}</a> <a class="instructor-info-action beta-button" href="${ standard_dashboard_url }">${_("Back To Standard Dashboard")}</a>
</div> </div>
<h1>${_("Instructor Dashboard")}</h1> <h1>${_("Instructor Dashboard")}</h1>
<div class="wrapper-msg urgency-low warning"> <div class="wrapper-msg urgency-low msg-warning is-shown">
<div class="msg" <p>${_("You are using the legacy instructor dashboard, which we will retire in the near future.")} <a href="${ standard_dashboard_url }">${_("Return to the Standard Dashboard")} <i class="icon-double-angle-right"></i></a></p>
<p>${_("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.")} <p class="note">${_("If the Standard Dashboard is missing functionality, please let us know.")}</p>
<a href="${ standard_dashboard_url }">${_("Return to the Standard Dashboard")} <i class="icon-angle-right"></i></a></p>
</div>
</div> </div>
<h2 class="navbar">[ <a href="#" onclick="goto('Grades');" class="${modeflag.get('Grades')}">Grades</a> | <h2 class="navbar">[ <a href="#" onclick="goto('Grades');" class="${modeflag.get('Grades')}">Grades</a> |
......
lms/templates/instructor/instructor_dashboard_2/instructor_dashboard_2.html
...@@ -65,21 +65,18 @@ ...@@ -65,21 +65,18 @@
</div> </div>
<h1>${_("Instructor Dashboard")}</h1> <h1>${_("Instructor Dashboard")}</h1>
<hr /> <div class="wrapper-msg urgency-low msg-warning is-shown">
<div class="wrapper-msg urgency-low warning">
<div class="msg"
<p>${_("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.")}</p> <p>${_("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.")}</p>
</div>
</div> </div>
## links which are tied to idash-sections below. ## links which are tied to idash-sections below.
## the links are activated and handled in instructor_dashboard.coffee ## the links are activated and handled in instructor_dashboard.coffee
## when the javascript loads, it clicks on the first section ## when the javascript loads, it clicks on the first section
<h2 class="instructor-nav"> <ul class="instructor-nav">
% for section_data in sections: % for section_data in sections:
<a href="" data-section="${ section_data['section_key'] }">${_(section_data['section_display_name'])}</a> <li class="nav-item"><a href="" data-section="${ section_data['section_key'] }">${_(section_data['section_display_name'])}</a></li>
% endfor % endfor
</h2> </ul>
## each section corresponds to a section_data sub-dictionary provided by the view ## 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 ## to keep this short, sections can be pulled out into their own files
......
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