diff --git a/common/lib/xmodule/xmodule/css/sequence/display.scss b/common/lib/xmodule/xmodule/css/sequence/display.scss index 2d2712eff7..aafc0e7503 100644 --- a/common/lib/xmodule/xmodule/css/sequence/display.scss +++ b/common/lib/xmodule/xmodule/css/sequence/display.scss @@ -4,7 +4,7 @@ $seq-nav-link-color: $link-color !default; $seq-nav-icon-color: rgb(10, 10, 10) !default; $seq-nav-icon-color-muted: rgb(90, 90, 90) !default; $seq-nav-tooltip-color: rgb(51, 51, 51) !default; -$seq-nav-height: 44px; +$seq-nav-height: 50px; // repeated extends - needed since LMS styling was referenced .block-link { @@ -162,7 +162,7 @@ $seq-nav-height: 44px; @extend %ui-depth2; - margin-top: ($baseline/5); + margin-top: 12px; background: $seq-nav-tooltip-color; color: $white; font-family: $font-family-sans-serif; @@ -223,7 +223,7 @@ $seq-nav-height: 44px; font-weight: normal; padding: 0; white-space: nowrap; - overflow-x: scroll; + overflow-x: hidden; @include media-breakpoint-up(md) { min-width: 120px; diff --git a/common/static/sass/edx-pattern-library-shims/_breadcrumbs.scss b/common/static/sass/edx-pattern-library-shims/_breadcrumbs.scss index b21ebb9b0b..79e0a7a08f 100644 --- a/common/static/sass/edx-pattern-library-shims/_breadcrumbs.scss +++ b/common/static/sass/edx-pattern-library-shims/_breadcrumbs.scss @@ -12,13 +12,23 @@ display: inline-block; - @include media-breakpoint-down(md) { - max-width: 60px; + @include media-breakpoint-down(lg) { + max-width: 240px; + } + + @include media-breakpoint-down(sm) { + max-width: 140px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } + @include media-breakpoint-down(xs) { + &:not(:first-child) { + max-width: 60px; + } + } + &.nav-item-course { max-width: none; } @@ -36,7 +46,7 @@ .fa-angle-right { @include margin-left($baseline/4); - @include media-breakpoint-down(md) { + @include media-breakpoint-down(sm) { position: relative; top: -5px; } diff --git a/lms/static/sass/bootstrap/_layouts.scss b/lms/static/sass/bootstrap/_layouts.scss index 4263e0326d..c52987315f 100644 --- a/lms/static/sass/bootstrap/_layouts.scss +++ b/lms/static/sass/bootstrap/_layouts.scss @@ -65,7 +65,7 @@ } .form-actions { - @include media-breakpoint-down(xs) { + @include media-breakpoint-down(sm) { margin-top: $baseline/2; } } @@ -90,6 +90,14 @@ } } } + + @include media-breakpoint-down(sm) { + padding: $baseline; + + .page-header-search { + width: 100%; + } + } } .page-content-container { @@ -102,6 +110,7 @@ .page-content { padding: $baseline*2; + // Adjust styles for desktop sized screens @include media-breakpoint-up(md) { display: flex; @@ -115,4 +124,17 @@ margin-left: $baseline*2; } } + + // Override styles for tablet sized screens + @include media-breakpoint-only(md) { + .page-content-secondary { + min-width: 250px; + max-width: 250px; + } + } + + // Adjust styles for phone sized screens + @include media-breakpoint-down(sm) { + padding: $baseline; + } } diff --git a/lms/static/sass/course/instructor/_instructor_2.scss b/lms/static/sass/course/instructor/_instructor_2.scss index 538355d6f9..e19126c74d 100644 --- a/lms/static/sass/course/instructor/_instructor_2.scss +++ b/lms/static/sass/course/instructor/_instructor_2.scss @@ -284,7 +284,6 @@ .instructor-nav { @extend %ui-no-list; - border-top: 1px solid $gray-l3; border-bottom: 1px solid $gray-l3; .nav-item { @@ -301,11 +300,11 @@ &:hover, &:focus { - background: $gray-l5 !important; + border-bottom: 3px solid theme-color("primary"); } &.active-section { - background: $gray-l5; + border-bottom: 3px solid theme-color("primary"); color: $black; } } diff --git a/lms/static/sass/course/layout/_courseware_preview.scss b/lms/static/sass/course/layout/_courseware_preview.scss index 1a46f68be1..b4d0a21afa 100644 --- a/lms/static/sass/course/layout/_courseware_preview.scss +++ b/lms/static/sass/course/layout/_courseware_preview.scss @@ -3,7 +3,7 @@ margin: 0 auto; padding: ($baseline*0.75); - background-color: $lms-preview-menu-color; + background-color: theme-color("primary"); box-sizing: border-box; @media print { @@ -31,6 +31,7 @@ display: inline-block; margin-bottom: 0; vertical-align: middle; + color: theme-color("inverse"); } .action-preview-select { diff --git a/lms/static/sass/course/modules/_calculator.scss b/lms/static/sass/course/modules/_calculator.scss index a3878fcc7e..4372fa1de9 100644 --- a/lms/static/sass/course/modules/_calculator.scss +++ b/lms/static/sass/course/modules/_calculator.scss @@ -4,7 +4,7 @@ .calc-main { @extend %ui-print-excluded; - bottom: -126px; + bottom: -129px; left: 0; position: fixed; diff --git a/lms/static/sass/discussion/views/_search.scss b/lms/static/sass/discussion/views/_search.scss index 3dd402fa10..5425b2f4b7 100644 --- a/lms/static/sass/discussion/views/_search.scss +++ b/lms/static/sass/discussion/views/_search.scss @@ -1,7 +1,7 @@ .forum-search { - @include margin-left($baseline); - display: flex; + width: 100%; + margin-top: $baseline; .search-input { width: input-width(short); @@ -10,4 +10,10 @@ .search-button { margin-left: 0; } + + @include media-breakpoint-up(sm) { + @include margin-left($baseline); + + margin-top: 0; + } } diff --git a/lms/static/sass/elements/_navigation.scss b/lms/static/sass/elements/_navigation.scss index be5dc41906..86e17636b1 100644 --- a/lms/static/sass/elements/_navigation.scss +++ b/lms/static/sass/elements/_navigation.scss @@ -120,7 +120,7 @@ // +case - calculator spacing (needed for overriding calculator positioning) // -------------------- &.has-utility-calculator { - @include right($baseline*2.50); + @include right($baseline*2.75); } } diff --git a/lms/static/sass/features/_course-experience.scss b/lms/static/sass/features/_course-experience.scss index 30b809ebfc..e98242bcea 100644 --- a/lms/static/sass/features/_course-experience.scss +++ b/lms/static/sass/features/_course-experience.scss @@ -279,6 +279,13 @@ margin-top: ($baseline / 5); } } + + @include media-breakpoint-down(sm) { + @include padding-left(0); + + border-top: 1px solid theme-color("light"); + padding-top: $baseline; + } } // Course outline @@ -480,6 +487,7 @@ top: $baseline * (-1/2); right: $baseline / 2; cursor: pointer; + background-color: theme-color("primary"); } } diff --git a/lms/static/sass/features/_learner-profile.scss b/lms/static/sass/features/_learner-profile.scss index 6dc0a1e902..9e7a4a00bb 100644 --- a/lms/static/sass/features/_learner-profile.scss +++ b/lms/static/sass/features/_learner-profile.scss @@ -110,6 +110,8 @@ .window-wrap, .content-wrapper { background-color: $body-bg; + padding: 0; + margin-top: 0; } .page-banner { @@ -119,6 +121,7 @@ .user-messages { max-width: map-get($container-max-widths, xl); margin: auto; + padding: $baseline/2; } } @@ -265,7 +268,7 @@ margin: 0 auto; border-bottom: 1px solid $gray-l3; background-color: $gray-l4; - padding: ($baseline*0.75) 0; + padding: ($baseline*0.75) 5%; .u-field-account_privacy { @extend .container; @@ -273,6 +276,7 @@ border: none; box-shadow: none; padding: 0; + margin: 0; @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap max-width: calc(100% - 40px); @@ -311,11 +315,11 @@ .wrapper-profile-sections { @extend .container; - - @include padding($baseline*1.5, 0, $baseline*1.5, 0); + @include padding($baseline*1.5, 5%, $baseline*1.5, 5%); display: flex; min-width: 0; + max-width: 100%; @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap @include margin-left(0); @@ -327,11 +331,7 @@ .profile-header { max-width: map-get($container-max-widths, xl); margin: auto; - padding: $baseline 0 0; - - @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap - @include padding(0, $baseline*2, $baseline, $baseline*0.75); - } + padding: $baseline 5% 0; .header { @extend %t-title4; @@ -347,8 +347,7 @@ .wrapper-profile-section-container-one { @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap - width: 90%; - padding: 0 5%; + width: 100%; } .wrapper-profile-section-one { @@ -481,7 +480,7 @@ @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap width: 90%; margin-top: $baseline; - padding: 0 5%; + padding: 0; } .u-field-textarea { diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss index a4a61d3b65..b6e0b51151 100644 --- a/lms/static/sass/multicourse/_dashboard.scss +++ b/lms/static/sass/multicourse/_dashboard.scss @@ -150,12 +150,10 @@ } .course-info { - display: block; - @include float(left); + display: block; padding: 0; - margin-top: $baseline; [class*="info-"] { color: $gray-d1; @@ -183,6 +181,21 @@ // Responsive behavior @include media-breakpoint-down(sm) { width: 100%; + display: flex; + flex-direction: column; + + .course-info, + .wrapper-course-actions { + flex-grow: 1; + + .action { + @include margin-right(0); + } + + .wrapper-action-more { + padding-top: 3px; + } + } } } @@ -786,6 +799,7 @@ // TYPE: status &.message-status { border-color: $gray-l4; + margin-bottom: 0; .wrapper-message-primary { @include clearfix(); @@ -1001,9 +1015,8 @@ &.message-related-programs { background: none; - margin-top: ($baseline/4); - margin-bottom: $baseline/2; - padding: 0; + padding: $baseline/2; + margin-bottom: 0; .related-programs-preface { @include float(left); diff --git a/lms/static/sass/shared-v2/_components.scss b/lms/static/sass/shared-v2/_components.scss index 90e19ccab8..24bcffce6d 100644 --- a/lms/static/sass/shared-v2/_components.scss +++ b/lms/static/sass/shared-v2/_components.scss @@ -149,7 +149,7 @@ margin: 0 auto; padding: ($baseline*0.75) ($baseline*2); - background-color: $lms-preview-menu-color; + background-color: theme-color("primary"); @media print { display: none; @@ -176,6 +176,7 @@ display: inline-block; margin-bottom: 0; vertical-align: middle; + color: theme-color("inverse"); } .action-preview-select { diff --git a/lms/static/sass/shared-v2/_help-tab.scss b/lms/static/sass/shared-v2/_help-tab.scss index a0d212c7e8..474db59fe8 100644 --- a/lms/static/sass/shared-v2/_help-tab.scss +++ b/lms/static/sass/shared-v2/_help-tab.scss @@ -20,7 +20,7 @@ @include transform-origin(0 0); z-index: z-index(front); - top: 250px; + bottom: $baseline; left: 0; position: fixed; diff --git a/lms/static/sass/shared/_help-tab.scss b/lms/static/sass/shared/_help-tab.scss index 69eb713cac..e08507029d 100644 --- a/lms/static/sass/shared/_help-tab.scss +++ b/lms/static/sass/shared/_help-tab.scss @@ -24,7 +24,7 @@ transform: rotate(-90deg); transform-origin: top left; position: fixed; - top: 250px; + bottom: $baseline; left: 0; a:link, diff --git a/lms/static/sass/views/_program-list.scss b/lms/static/sass/views/_program-list.scss index 8c4f6f0547..1f35c002f2 100644 --- a/lms/static/sass/views/_program-list.scss +++ b/lms/static/sass/views/_program-list.scss @@ -1,12 +1,15 @@ .program-list-wrapper { - padding: $baseline; + + @include media-breakpoint-up(sm) { + padding: $baseline; + } } .program-cards-container { @include grid-container(); @include span(12); - @media (min-width: $bp-screen-md) { + @include media-breakpoint-up(sm) { @include span(9); } } @@ -17,7 +20,7 @@ margin-bottom: $baseline; - @media (min-width: $bp-screen-md) { + @include media-breakpoint-up(sm) { @include span(3); } diff --git a/lms/templates/header/user_dropdown.html b/lms/templates/header/user_dropdown.html index 2c3f508203..fe80bba634 100644 --- a/lms/templates/header/user_dropdown.html +++ b/lms/templates/header/user_dropdown.html @@ -32,7 +32,7 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_
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 aa10e49eed..96a15fa7cb 100644 --- a/lms/templates/instructor/instructor_dashboard_2/instructor_dashboard_2.html +++ b/lms/templates/instructor/instructor_dashboard_2/instructor_dashboard_2.html @@ -109,12 +109,6 @@ from openedx.core.djangolib.markup import HTML %endif - %if analytics_dashboard_message: -${analytics_dashboard_message}
-