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

Merge pull request #16357 from edx/HarryRein/responsive-header-dashboard-fixes

Browse Source 
Styling fixes for the dashboard and course header.
This commit is contained in:
Andy Armstrong
2017-10-29 16:04:11 -04:00
committed by GitHub
parent d0f348d38d 58f93cc7cc
commit dde4ee003f
8 changed files with 555 additions and 518 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lms/djangoapps/courseware/testutils.py
View File

@@ -33,7 +33,7 @@ class RenderXBlockTestMixin(object):
'<ol class="tabs course-tabs"',
'<footer id="footer-openedx"',
'<div class="window-wrap"',
'<div class="preview-menu container"',
'<div class="preview-menu"',
'<div class="container"',
]

44
lms/static/sass/_header.scss
View File

@@ -30,28 +30,36 @@
height: $header-logo-height;
}
@include media-breakpoint-down(sm) {
margin-left: calc(50% - 30px);
@include media-breakpoint-down(md) {
@include margin-left(50%);
height: $header-logo-height;
width: auto;
.logo {
@include margin-left(-50%);
}
}
}
.course-header {
@include float(left);
@include margin($baseline*1.25, 0, 0, $baseline);
@include margin($baseline*0.8, 0, 0, $baseline);
font-size: $font-size-lg;
font-size: $font-size-sm;
color: theme-color("dark");
line-height: 1em;
display: none;
.provider {
font-weight: $font-weight-bold;
.course-name {
display: block;
font-size: $font-size-base;
margin-top: 7px;
font-weight: 600;
}
// Hide the course header for smaller screen sizes
@include media-breakpoint-up(md) {
@include media-breakpoint-up(lg) {
display: block;
}
}
@@ -64,7 +72,7 @@
by the desktop styling
*/
// Desktop styling
@include media-breakpoint-up(md) {
@include media-breakpoint-up(lg) {
.nav-links {
.nav-item {
margin: 0 $baseline;
@@ -90,11 +98,11 @@
a {
color: theme-color("secondary");
padding: $baseline*0.35 $baseline*1.25 $baseline;
padding: $baseline*0.35 $baseline*1.25 19px;
font-weight: $font-weight-normal;
display: inline-block;
margin-bottom: -1*$baseline/2;
border-bottom: 2px solid transparent;
border-bottom: 3px solid transparent;
cursor: pointer;
&.active,
@@ -121,9 +129,14 @@
padding: $baseline/2 0 0;
margin: 0 $baseline/2;
&.nav-item-dropdown {
padding: 0;
margin: 0;
}
a {
color: theme-color("dark");
font-weight: $font-weight-bold;
font-weight: $font-weight-normal;
}
}
@@ -173,6 +186,7 @@
// Dropdown behavior
.toggle-user-dropdown {
padding: $baseline/2;
text-decoration: none;
cursor: pointer;
}
@@ -224,7 +238,7 @@
}
// Responsive styling for mobile
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
// Display the menu icon and allow for transition to an X on click
.hamburger-menu {
@include left(22px);
@@ -308,11 +322,11 @@
.mobile-menu {
border-bottom: 1px solid theme-color('primary');
@include media-breakpoint-up(md) {
@include media-breakpoint-up(lg) {
display: none !important;
}
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
display: none;
// Override standard styling for the mobile menu links
@@ -353,7 +367,7 @@
// Hide elements in menu bar when they exist in mobile
.hidden-mobile {
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
&:not(.mobile-nav-link) {
display: none;
}

10
lms/static/sass/bootstrap/_layouts.scss
View File

@@ -5,7 +5,7 @@
padding-bottom: $baseline*2;
.course-tabs {
padding: 0;
padding: 0 $baseline*2;
font-size: $font-size-sm;
.nav-item {
@@ -42,7 +42,7 @@
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid $border-color;
padding: 20px;
padding: $baseline $baseline*2;
.page-header-search {
@include margin-right($baseline);
@@ -62,6 +62,10 @@
.page-header-main {
flex-grow: 1; // This column should consume all the available space
.page-title {
margin-top: $baseline*0.4;
}
}
.page-header-secondary {
@@ -84,7 +88,7 @@
}
.page-content {
padding: $baseline;
padding: $baseline*2;
@include media-breakpoint-up(md) {
display: flex;

1009
lms/static/sass/multicourse/_dashboard.scss
View File

@@ -136,7 +136,7 @@
.course-title {
a, span {
@extend %t-title3;
@extend %t-light;
@extend %t-regular;
display: inline-block;
margin-bottom: ($baseline/2);
@@ -155,7 +155,7 @@
@include float(left);
padding: 0;
margin-top: ($baseline/2);
margin-top: $baseline;
[class*="info-"] {
color: $gray-d1;
@@ -176,7 +176,7 @@
.wrapper-course-actions {
@include margin-right($baseline);
margin-top: $baseline/2;
margin-top: $baseline;
}
@@ -378,498 +378,6 @@
// ====================
// UI: messages
.wrapper-messages-primary {
@include clearfix();
.messages-list {
margin: 0;
padding: 0;
background-color: theme-color("lightest");
}
.message {
@extend %ui-depth1;
border-radius: 3px;
display: none;
padding: ($baseline/2) $baseline;
border-top: 1px solid $gray-l4;
color: $base-font-color; // Overrides the normal white color in this one case
// STATE: shown
&.is-shown {
@include clearfix();
display: block;
}
a {
font-family: $font-family-sans-serif;
}
strong {
font-weight: 700;
a {
font-weight: 700;
}
}
.actions {
@include clearfix();
list-style: none;
margin: 0;
padding: 0;
}
.message-title,
.message-copy .title {
@extend %t-title6;
@extend %t-weight4;
line-height: 1em;
margin-bottom: ($baseline/4);
}
.message-copy,
.message-copy .copy {
@extend %t-copy-sub1;
margin: 2px 0 0 0;
}
// CASE: expandable
&.is-expandable {
.wrapper-tip {
.message-title, .message-copy {
margin-bottom: 0;
display: inline-block;
}
.message-title .value, .message-copy {
@include transition(color $tmg-f2 ease-in-out 0s);
}
// STATE: hover
&:hover {
cursor: pointer;
.message-title .value, .message-copy, .ui-toggle-expansion {
color: $link-color;
}
}
}
.wrapper-extended {
@include transition(opacity $tmg-f2 ease-in-out 0);
display: none;
opacity: 0;
}
}
// STATE: is expanded
&.is-expanded {
.ui-toggle-expansion {
@include rtl {
@include transform(rotate(-90deg));
}
@include ltr {
@include transform(rotate(90deg));
}
@include transform-origin(50% 50%);
}
.wrapper-extended {
display: block;
opacity: 1;
}
}
// TYPE: upsell
&.message-upsell {
.wrapper-tip {
@include clearfix();
.message-title {
@include float(left);
}
.ui-toggle-expansion {
@include transition(all $tmg-f2 ease-in-out 0s);
@include font-size(18);
display: inline-block;
vertical-align: middle;
@include margin-right($baseline/4);
}
.message-copy {
@include float(right);
}
}
.wrapper-extended {
padding: ($baseline/4) 0;
.message-copy {
display: inline-block;
.message-copy-bold {
font-weight: 600;
}
}
}
.action-upgrade-container {
@include float(right);
display: inline-block;
margin-top: ($baseline/2);
}
.action-upgrade {
@extend %btn-primary-green;
@include clearfix();
position: relative;
@include left($baseline/2);
@include padding(($baseline * 0.4), 0, ($baseline * 0.4), ($baseline * 0.75));
.action-upgrade-icon {
@include float(left);
display: inline;
@include margin-right($baseline*0.4);
margin-top: ($baseline/4);
background: url('#{$static-path}/images/icon-sm-verified.png') no-repeat;
background-position: -($baseline*0.3);
background-color: white;
width: ($baseline*0.8);
height: ($baseline*0.7);
}
.deco-graphic {
position: absolute;
top: -($baseline/4);
@include left(-($baseline*0.75));
width: ($baseline*2);
}
span {
color: $white; // nasty but needed override for poor <span> styling
}
.copy, .copy-sub {
display: inline-block;
vertical-align: middle;
}
.copy {
@extend %t-action3;
@extend %t-weight4;
@include margin-right($baseline);
}
.copy-sub {
@extend %t-action4;
opacity: 0.875;
}
}
}
// TYPE: status
&.message-status {
border-color: $gray-l4;
.wrapper-message-primary {
@include clearfix();
}
.message-copy {
@extend %t-copy-sub1;
margin: 0;
}
.credit-action {
.credit-btn {
@extend %btn-pl-yellow-base;
@include float(right);
@include margin-right(5px);
background-image: none ;
text-shadow: none;
box-shadow: none;
text-transform: none;
}
}
.actions {
.action {
@include float(left);
@include margin(0, 15px, 0, 0);
.btn {
display: inline-block;
}
.btn {
@include box-sizing(border-box);
@include float(left);
border-radius: 3px;
font: normal 0.8rem/1.2rem $font-family-sans-serif;
letter-spacing: 1px;
padding: 6px 12px;
text-align: center;
&.disabled {
cursor: default !important;
&:hover, &:focus {
@include background-image(linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%));
background: #eee;
}
}
}
.btn {
@include float(left);
font: normal 0.8rem/1.2rem $font-family-sans-serif;
letter-spacing: 1px;
padding: 6px 12px;
text-align: center;
}
}
}
.exam-registration-number {
font-family: $font-family-sans-serif;
font-size: 18px;
a {
font-family: $font-family-sans-serif;
}
}
&.exam-register {
.message-copy {
margin-top: ($baseline/4);
width: 55%;
}
}
&.exam-schedule {
.exam-button {
margin-top: ($baseline/4);
}
}
.exam-button {
@include button(simple, $pink);
@include float(right);
margin-top: 0;
}
.contact-button {
@include button(simple, $pink);
}
.button {
display: inline-block;
margin-top: ($baseline/2);
padding: 9px 18px 10px;
font-size: 13px;
font-weight: bold;
letter-spacing: 0;
&:hover, &:focus {
text-decoration: none;
}
}
&.course-status-certrendering {
.btn {
margin-top: 2px;
}
}
&.course-status-certavailable {
.message-copy {
width: flex-grid(6, 12);
position: relative;
@include float(left);
}
.actions-primary {
@include float(right);
.action {
@include margin(0, 0, ($baseline/2), ($baseline*.75));
float: none;
text-align: center;
&:last-child {
margin-bottom: 0;
}
.btn {
float: none;
}
}
.action-certificate .btn {
@extend %btn-inherited-primary;
@include box-sizing(border-box);
float: none;
border-radius: 3px;
display: block;
@include padding(7px, ($baseline*.75), 7px, ($baseline*.75));
text-align: center;
a:link, a:visited {
color: #fff;
}
}
.action-share .btn {
display: inline;
letter-spacing: 0;
}
}
}
.actions-secondary {
margin-top: ($baseline/2);
border-top: 1px solid $gray-l4;
padding-top: ($baseline/2);
.action-share {
@include float(right);
margin: 0;
}
}
.certificate-explanation {
@extend %t-copy-sub1;
margin-top: ($baseline/2);
border-top: 1px solid $gray-l4;
padding-top: ($baseline/2);
}
.verification-reminder {
width: flex-grid(8, 12);
@include float(left);
position: relative;
}
.verification-cta {
width: flex-grid(4, 12);
@include float(left);
position: relative;
.btn {
@extend %btn-pl-green-base;
@include float(right);
}
}
}
&.message-related-programs {
background: none;
border: none;
margin-top: ($baseline/4);
padding-bottom: 0;
.related-programs-preface {
@include float(left);
font-weight: bold;
}
ul {
display: inline;
padding: 0;
margin: 0;
}
li {
@include float(left);
display: inline;
padding: 0 0.5em;
border-right: 1px solid;
.category-icon {
@include float(left);
@include margin-right($baseline/4);
margin-top: ($baseline/10);
background-color: transparent;
background-size: 100%;
width: ($baseline*0.7);
height: ($baseline*0.7);
}
}
// Remove separator from last list item.
li:last-child {
border: 0;
}
}
// TYPE: pre-requisites
.prerequisites {
@include clearfix;
.tip {
font-family: $font-family-sans-serif;
font-size: 1em;
color: $lighter-base-font-color;
margin-top: ($baseline/2);
}
}
@include media-breakpoint-down(md) {
@include padding($baseline/2, $baseline, $baseline/2, $baseline/2);
}
}
}
// ====================
// CASE: "enrolled as" status - professional ed
&.professional {
@@ -967,6 +475,9 @@
@include padding($baseline*2, $baseline*2, $baseline, $baseline);
max-width: $baseline*20;
min-width: $baseline*20;
min-height: $baseline/2;
flex-grow: 1;
order: 2;
@@ -1022,12 +533,25 @@
}
}
.profile-sidebar {
ul {
padding: 0;
border: 1px solid theme-color("light");
}
}
// Responsive behavior
@include media-breakpoint-down(md) {
margin: 0 $baseline $baseline*2;
padding: 0;
max-width: 100%;
}
// Responsive behavior
@include media-breakpoint-down(xl) {
max-width: $baseline*15;
min-width: $baseline*15;
}
}
// Responsive behavior
@@ -1036,6 +560,497 @@
}
}
// ====================
// UI: messages
.wrapper-messages-primary {
@include clearfix();
.messages-list {
margin: 0;
padding: 0;
background-color: theme-color("lightest");
}
.message {
@extend %ui-depth1;
border-radius: 3px;
display: none;
padding: ($baseline/2) $baseline;
border-top: 1px solid $gray-l4;
color: $base-font-color; // Overrides the normal white color in this one case
// STATE: shown
&.is-shown {
@include clearfix();
display: block;
}
a {
font-family: $font-family-sans-serif;
}
strong {
font-weight: 700;
a {
font-weight: 700;
}
}
.actions {
@include clearfix();
list-style: none;
margin: 0;
padding: 0;
}
.message-title,
.message-copy .title {
@extend %t-title6;
@extend %t-weight4;
line-height: 1em;
margin-bottom: ($baseline/4);
}
.message-copy,
.message-copy .copy {
@extend %t-copy-sub1;
margin: 2px 0 0 0;
}
// CASE: expandable
&.is-expandable {
.wrapper-tip {
.message-title, .message-copy {
margin-bottom: 0;
display: inline-block;
}
.message-title .value, .message-copy {
@include transition(color $tmg-f2 ease-in-out 0s);
}
// STATE: hover
&:hover {
cursor: pointer;
.message-title .value, .message-copy, .ui-toggle-expansion {
color: $link-color;
}
}
}
.wrapper-extended {
@include transition(opacity $tmg-f2 ease-in-out 0);
display: none;
opacity: 0;
}
}
// STATE: is expanded
&.is-expanded {
.ui-toggle-expansion {
@include rtl {
@include transform(rotate(-90deg));
}
@include ltr {
@include transform(rotate(90deg));
}
@include transform-origin(50% 50%);
}
.wrapper-extended {
display: block;
opacity: 1;
}
}
// TYPE: upsell
&.message-upsell {
.wrapper-tip {
@include clearfix();
.message-title {
@include float(left);
}
.ui-toggle-expansion {
@include transition(all $tmg-f2 ease-in-out 0s);
@include font-size(18);
display: inline-block;
vertical-align: middle;
@include margin-right($baseline/4);
}
.message-copy {
@include float(right);
}
}
.wrapper-extended {
padding: ($baseline/4) 0;
.message-copy {
display: inline-block;
.message-copy-bold {
font-weight: 600;
}
}
}
.action-upgrade-container {
@include float(right);
display: inline-block;
margin-top: ($baseline/2);
}
.action-upgrade {
@extend %btn-primary-green;
@include clearfix();
position: relative;
@include left($baseline/2);
@include padding(($baseline * 0.4), 0, ($baseline * 0.4), ($baseline * 0.75));
.action-upgrade-icon {
@include float(left);
display: inline;
@include margin-right($baseline*0.4);
margin-top: ($baseline/4);
background: url('#{$static-path}/images/icon-sm-verified.png') no-repeat;
background-position: -($baseline*0.3);
background-color: white;
width: ($baseline*0.8);
height: ($baseline*0.7);
}
.deco-graphic {
position: absolute;
top: -($baseline/4);
@include left(-($baseline*0.75));
width: ($baseline*2);
}
span {
color: $white; // nasty but needed override for poor <span> styling
}
.copy, .copy-sub {
display: inline-block;
vertical-align: middle;
}
.copy {
@extend %t-action3;
@extend %t-weight4;
@include margin-right($baseline);
}
.copy-sub {
@extend %t-action4;
opacity: 0.875;
}
}
}
// TYPE: status
&.message-status {
border-color: $gray-l4;
.wrapper-message-primary {
@include clearfix();
}
.message-copy {
@extend %t-copy-sub1;
margin: 0;
}
.credit-action {
.credit-btn {
@extend %btn-pl-yellow-base;
@include float(right);
@include margin-right(5px);
background-image: none ;
text-shadow: none;
box-shadow: none;
text-transform: none;
}
}
.actions {
.action {
@include float(left);
@include margin(0, 15px, 0, 0);
.btn {
display: inline-block;
}
.btn {
@include box-sizing(border-box);
@include float(left);
border-radius: 3px;
font: normal 0.8rem/1.2rem $font-family-sans-serif;
letter-spacing: 1px;
padding: 6px 12px;
text-align: center;
&.disabled {
cursor: default !important;
&:hover, &:focus {
@include background-image(linear-gradient(top, #EEE 0%, #C2C2C2 50%, #ABABAB 50%, #B0B0B0 100%));
background: #eee;
}
}
}
.btn {
@include float(left);
font: normal 0.8rem/1.2rem $font-family-sans-serif;
letter-spacing: 1px;
padding: 6px 12px;
text-align: center;
}
}
}
.exam-registration-number {
font-family: $font-family-sans-serif;
font-size: 18px;
a {
font-family: $font-family-sans-serif;
}
}
&.exam-register {
.message-copy {
margin-top: ($baseline/4);
width: 55%;
}
}
&.exam-schedule {
.exam-button {
margin-top: ($baseline/4);
}
}
.exam-button {
@include button(simple, $pink);
@include float(right);
margin-top: 0;
}
.contact-button {
@include button(simple, $pink);
}
.button {
display: inline-block;
margin-top: ($baseline/2);
padding: 9px 18px 10px;
font-size: 13px;
font-weight: bold;
letter-spacing: 0;
&:hover, &:focus {
text-decoration: none;
}
}
&.course-status-certrendering {
.btn {
margin-top: 2px;
}
}
&.course-status-certavailable {
.message-copy {
width: flex-grid(6, 12);
position: relative;
@include float(left);
}
.actions-primary {
@include float(right);
.action {
@include margin(0, 0, ($baseline/2), ($baseline*.75));
float: none;
text-align: center;
&:last-child {
margin-bottom: 0;
}
.btn {
float: none;
}
}
.action-certificate .btn {
@extend %btn-inherited-primary;
@include box-sizing(border-box);
float: none;
border-radius: 3px;
display: block;
@include padding(7px, ($baseline*.75), 7px, ($baseline*.75));
text-align: center;
a:link, a:visited {
color: #fff;
}
}
.action-share .btn {
display: inline;
letter-spacing: 0;
}
}
}
.actions-secondary {
margin-top: ($baseline/2);
border-top: 1px solid $gray-l4;
padding-top: ($baseline/2);
.action-share {
@include float(right);
margin: 0;
}
}
.certificate-explanation {
@extend %t-copy-sub1;
margin-top: ($baseline/2);
border-top: 1px solid $gray-l4;
padding-top: ($baseline/2);
}
.verification-reminder {
width: flex-grid(8, 12);
@include float(left);
position: relative;
}
.verification-cta {
width: flex-grid(4, 12);
@include float(left);
position: relative;
.btn {
@extend %btn-pl-green-base;
@include float(right);
}
}
}
&.message-related-programs {
background: none;
margin-top: ($baseline/4);
margin-bottom: $baseline/2;
padding: 0;
.related-programs-preface {
@include float(left);
font-weight: bold;
}
ul {
display: inline;
padding: 0;
margin: 0;
}
li {
@include float(left);
display: inline;
padding: 0 0.5em;
border-right: 1px solid;
.category-icon {
@include float(left);
@include margin-right($baseline/4);
margin-top: ($baseline/10);
background-color: transparent;
background-size: 100%;
width: ($baseline*0.7);
height: ($baseline*0.7);
}
}
// Remove separator from last list item.
li:last-child {
border: 0;
}
}
// TYPE: pre-requisites
.prerequisites {
@include clearfix;
.tip {
font-family: $font-family-sans-serif;
font-size: 1em;
color: $lighter-base-font-color;
margin-top: ($baseline/2);
}
}
@include media-breakpoint-down(md) {
@include padding($baseline/2, $baseline, $baseline/2, $baseline/2);
}
}
}
// CASE: empty dashboard
.empty-dashboard-message {
border: 3px solid $gray-l4;
@@ -1093,6 +1108,9 @@
// status - verification
.status-verification {
list-style: none;
padding: $baseline/2;
.status-title {
margin: 0 0 ($baseline/4) 0;
}
@@ -1124,6 +1142,7 @@
@extend %t-copy-sub2;
position: relative;
padding-top: $baseline/2;
p {
@extend %t-copy-sub2;

2
lms/static/sass/shared-v2/_components.scss
View File

@@ -148,7 +148,7 @@
@include box-sizing(border-box);
margin: 0 auto;
padding: ($baseline*0.75);
padding: ($baseline*0.75) ($baseline*2);
background-color: $lms-preview-menu-color;
@media print {

2
lms/templates/header/user_dropdown.html
View File

@@ -27,7 +27,7 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_
<span class="username">${username}</span>
</a>
</div>
<div class="nav-item hidden-mobile" tabindex="-1">
<div class="nav-item hidden-mobile nav-item-dropdown" tabindex="-1">
<div class="user-dropdown" aria-expanded="false" aria-haspopup="true" aria-controls="user-menu">
<span class="sr">user menu</span>
<span class="fa fa-caret-down toggle-user-dropdown" aria-hidden="true" tabindex="0"></span>

2
lms/templates/main.html
View File

@@ -159,7 +159,7 @@ from pipeline_mako import render_require_js_path_overrides
<div class="marketing-hero"><%block name="marketing_hero"></%block></div>
<div class="content-wrapper ${"container-fluid" if uses_bootstrap else "" } main-container" id="content">
<div class="content-wrapper main-container" id="content">
${self.body()}
<%block name="bodyextra"/>
</div>

2
lms/templates/preview_menu.html
View File

@@ -27,7 +27,7 @@ show_preview_menu = course and staff_access and supports_preview_menu
student_selected = selected(not staff_selected and not specific_student_selected and not masquerade_group_id)
%>
<nav class="wrapper-preview-menu" aria-label="${_('Course View')}">
<div class="preview-menu container">
<div class="preview-menu">
<ol class="preview-actions">
<li class="action-preview">
<form action="#" class="action-preview-form" method="post">