Skip to content

E
edx-platform
Unverified Commit 51459d33 by Harry Rein Committed by GitHub
Options

Merge pull request #16444 from edx/responsive-header-cleanup 

Cleaning up mobile web.
parents 61793775 7f61828e
Showing with 103 additions and 45 deletions
common/lib/xmodule/xmodule/css/sequence/display.scss
...@@ -4,7 +4,7 @@ $seq-nav-link-color: $link-color !default; ...@@ -4,7 +4,7 @@ $seq-nav-link-color: $link-color !default;
$seq-nav-icon-color: rgb(10, 10, 10) !default; $seq-nav-icon-color: rgb(10, 10, 10) !default;
$seq-nav-icon-color-muted: rgb(90, 90, 90) !default; $seq-nav-icon-color-muted: rgb(90, 90, 90) !default;
$seq-nav-tooltip-color: rgb(51, 51, 51) !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 // repeated extends - needed since LMS styling was referenced
.block-link { .block-link {
...@@ -162,7 +162,7 @@ $seq-nav-height: 44px; ...@@ -162,7 +162,7 @@ $seq-nav-height: 44px;
@extend %ui-depth2; @extend %ui-depth2;
margin-top: ($baseline/5); margin-top: 12px;
background: $seq-nav-tooltip-color; background: $seq-nav-tooltip-color;
color: $white; color: $white;
font-family: $font-family-sans-serif; font-family: $font-family-sans-serif;
...@@ -223,7 +223,7 @@ $seq-nav-height: 44px; ...@@ -223,7 +223,7 @@ $seq-nav-height: 44px;
font-weight: normal; font-weight: normal;
padding: 0; padding: 0;
white-space: nowrap; white-space: nowrap;
overflow-x: scroll; overflow-x: hidden;
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
min-width: 120px; min-width: 120px;
......
common/static/sass/edx-pattern-library-shims/_breadcrumbs.scss
...@@ -12,13 +12,23 @@ ...@@ -12,13 +12,23 @@
display: inline-block; display: inline-block;
@include media-breakpoint-down(md) { @include media-breakpoint-down(lg) {
max-width: 60px; max-width: 240px;
}
@include media-breakpoint-down(sm) {
max-width: 140px;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
} }
@include media-breakpoint-down(xs) {
&:not(:first-child) {
max-width: 60px;
}
}
&.nav-item-course { &.nav-item-course {
max-width: none; max-width: none;
} }
...@@ -36,7 +46,7 @@ ...@@ -36,7 +46,7 @@
.fa-angle-right { .fa-angle-right {
@include margin-left($baseline/4); @include margin-left($baseline/4);
@include media-breakpoint-down(md) { @include media-breakpoint-down(sm) {
position: relative; position: relative;
top: -5px; top: -5px;
} }
......
lms/static/sass/bootstrap/_layouts.scss
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
} }
.form-actions { .form-actions {
@include media-breakpoint-down(xs) { @include media-breakpoint-down(sm) {
margin-top: $baseline/2; margin-top: $baseline/2;
} }
} }
...@@ -90,6 +90,14 @@ ...@@ -90,6 +90,14 @@
} }
} }
} }
@include media-breakpoint-down(sm) {
padding: $baseline;
.page-header-search {
width: 100%;
}
}
} }
.page-content-container { .page-content-container {
...@@ -102,6 +110,7 @@ ...@@ -102,6 +110,7 @@
.page-content { .page-content {
padding: $baseline*2; padding: $baseline*2;
// Adjust styles for desktop sized screens
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
display: flex; display: flex;
...@@ -115,4 +124,17 @@ ...@@ -115,4 +124,17 @@
margin-left: $baseline*2; 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;
}
} }
lms/static/sass/course/instructor/_instructor_2.scss
...@@ -284,7 +284,6 @@ ...@@ -284,7 +284,6 @@
.instructor-nav { .instructor-nav {
@extend %ui-no-list; @extend %ui-no-list;
border-top: 1px solid $gray-l3;
border-bottom: 1px solid $gray-l3; border-bottom: 1px solid $gray-l3;
.nav-item { .nav-item {
...@@ -301,11 +300,11 @@ ...@@ -301,11 +300,11 @@
&:hover, &:hover,
&:focus { &:focus {
background: $gray-l5 !important; border-bottom: 3px solid theme-color("primary");
} }
&.active-section { &.active-section {
background: $gray-l5; border-bottom: 3px solid theme-color("primary");
color: $black; color: $black;
} }
} }
......
lms/static/sass/course/layout/_courseware_preview.scss
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
margin: 0 auto; margin: 0 auto;
padding: ($baseline*0.75); padding: ($baseline*0.75);
background-color: $lms-preview-menu-color; background-color: theme-color("primary");
box-sizing: border-box; box-sizing: border-box;
@media print { @media print {
...@@ -31,6 +31,7 @@ ...@@ -31,6 +31,7 @@
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
vertical-align: middle; vertical-align: middle;
color: theme-color("inverse");
} }
.action-preview-select { .action-preview-select {
......
lms/static/sass/course/modules/_calculator.scss
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
.calc-main { .calc-main {
@extend %ui-print-excluded; @extend %ui-print-excluded;
bottom: -126px; bottom: -129px;
left: 0; left: 0;
position: fixed; position: fixed;
......
lms/static/sass/discussion/views/_search.scss
.forum-search { .forum-search {
@include margin-left($baseline);
display: flex; display: flex;
width: 100%;
margin-top: $baseline;
.search-input { .search-input {
width: input-width(short); width: input-width(short);
...@@ -10,4 +10,10 @@ ...@@ -10,4 +10,10 @@
.search-button { .search-button {
margin-left: 0; margin-left: 0;
} }
@include media-breakpoint-up(sm) {
@include margin-left($baseline);
margin-top: 0;
}
} }
lms/static/sass/elements/_navigation.scss
...@@ -120,7 +120,7 @@ ...@@ -120,7 +120,7 @@
// +case - calculator spacing (needed for overriding calculator positioning) // +case - calculator spacing (needed for overriding calculator positioning)
// -------------------- // --------------------
&.has-utility-calculator { &.has-utility-calculator {
@include right($baseline*2.50); @include right($baseline*2.75);
} }
} }
......
lms/static/sass/features/_course-experience.scss
...@@ -279,6 +279,13 @@ ...@@ -279,6 +279,13 @@
margin-top: ($baseline / 5); 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 // Course outline
...@@ -480,6 +487,7 @@ ...@@ -480,6 +487,7 @@
top: $baseline * (-1/2); top: $baseline * (-1/2);
right: $baseline / 2; right: $baseline / 2;
cursor: pointer; cursor: pointer;
background-color: theme-color("primary");
} }
} }
......
lms/static/sass/features/_learner-profile.scss
...@@ -110,6 +110,8 @@ ...@@ -110,6 +110,8 @@
.window-wrap, .window-wrap,
.content-wrapper { .content-wrapper {
background-color: $body-bg; background-color: $body-bg;
padding: 0;
margin-top: 0;
} }
.page-banner { .page-banner {
...@@ -119,6 +121,7 @@ ...@@ -119,6 +121,7 @@
.user-messages { .user-messages {
max-width: map-get($container-max-widths, xl); max-width: map-get($container-max-widths, xl);
margin: auto; margin: auto;
padding: $baseline/2;
} }
} }
...@@ -265,7 +268,7 @@ ...@@ -265,7 +268,7 @@
margin: 0 auto; margin: 0 auto;
border-bottom: 1px solid $gray-l3; border-bottom: 1px solid $gray-l3;
background-color: $gray-l4; background-color: $gray-l4;
padding: ($baseline*0.75) 0; padding: ($baseline*0.75) 5%;
.u-field-account_privacy { .u-field-account_privacy {
@extend .container; @extend .container;
...@@ -273,6 +276,7 @@ ...@@ -273,6 +276,7 @@
border: none; border: none;
box-shadow: none; box-shadow: none;
padding: 0; padding: 0;
margin: 0;
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
max-width: calc(100% - 40px); max-width: calc(100% - 40px);
...@@ -311,11 +315,11 @@ ...@@ -311,11 +315,11 @@
.wrapper-profile-sections { .wrapper-profile-sections {
@extend .container; @extend .container;
@include padding($baseline*1.5, 5%, $baseline*1.5, 5%);
@include padding($baseline*1.5, 0, $baseline*1.5, 0);
display: flex; display: flex;
min-width: 0; min-width: 0;
max-width: 100%;
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
@include margin-left(0); @include margin-left(0);
...@@ -327,11 +331,7 @@ ...@@ -327,11 +331,7 @@
.profile-header { .profile-header {
max-width: map-get($container-max-widths, xl); max-width: map-get($container-max-widths, xl);
margin: auto; margin: auto;
padding: $baseline 0 0; padding: $baseline 5% 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);
}
.header { .header {
@extend %t-title4; @extend %t-title4;
...@@ -347,8 +347,7 @@ ...@@ -347,8 +347,7 @@
.wrapper-profile-section-container-one { .wrapper-profile-section-container-one {
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
width: 90%; width: 100%;
padding: 0 5%;
} }
.wrapper-profile-section-one { .wrapper-profile-section-one {
...@@ -481,7 +480,7 @@ ...@@ -481,7 +480,7 @@
@media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap @media (max-width: $learner-profile-container-flex) { // Switch to map-get($grid-breakpoints,md) for bootstrap
width: 90%; width: 90%;
margin-top: $baseline; margin-top: $baseline;
padding: 0 5%; padding: 0;
} }
.u-field-textarea { .u-field-textarea {
......
lms/static/sass/multicourse/_dashboard.scss
...@@ -150,12 +150,10 @@ ...@@ -150,12 +150,10 @@
} }
.course-info { .course-info {
display: block;
@include float(left); @include float(left);
display: block;
padding: 0; padding: 0;
margin-top: $baseline;
[class*="info-"] { [class*="info-"] {
color: $gray-d1; color: $gray-d1;
...@@ -183,6 +181,21 @@ ...@@ -183,6 +181,21 @@
// Responsive behavior // Responsive behavior
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
width: 100%; 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 @@ ...@@ -786,6 +799,7 @@
// TYPE: status // TYPE: status
&.message-status { &.message-status {
border-color: $gray-l4; border-color: $gray-l4;
margin-bottom: 0;
.wrapper-message-primary { .wrapper-message-primary {
@include clearfix(); @include clearfix();
...@@ -1001,9 +1015,8 @@ ...@@ -1001,9 +1015,8 @@
&.message-related-programs { &.message-related-programs {
background: none; background: none;
margin-top: ($baseline/4); padding: $baseline/2;
margin-bottom: $baseline/2; margin-bottom: 0;
padding: 0;
.related-programs-preface { .related-programs-preface {
@include float(left); @include float(left);
......
lms/static/sass/shared-v2/_components.scss
...@@ -149,7 +149,7 @@ ...@@ -149,7 +149,7 @@
margin: 0 auto; margin: 0 auto;
padding: ($baseline*0.75) ($baseline*2); padding: ($baseline*0.75) ($baseline*2);
background-color: $lms-preview-menu-color; background-color: theme-color("primary");
@media print { @media print {
display: none; display: none;
...@@ -176,6 +176,7 @@ ...@@ -176,6 +176,7 @@
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
vertical-align: middle; vertical-align: middle;
color: theme-color("inverse");
} }
.action-preview-select { .action-preview-select {
......
lms/static/sass/shared-v2/_help-tab.scss
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
@include transform-origin(0 0); @include transform-origin(0 0);
z-index: z-index(front); z-index: z-index(front);
top: 250px; bottom: $baseline;
left: 0; left: 0;
position: fixed; position: fixed;
......
lms/static/sass/shared/_help-tab.scss
...@@ -24,7 +24,7 @@ ...@@ -24,7 +24,7 @@
transform: rotate(-90deg); transform: rotate(-90deg);
transform-origin: top left; transform-origin: top left;
position: fixed; position: fixed;
top: 250px; bottom: $baseline;
left: 0; left: 0;
a:link, a:link,
......
lms/static/sass/views/_program-list.scss
.program-list-wrapper { .program-list-wrapper {
padding: $baseline;
@include media-breakpoint-up(sm) {
padding: $baseline;
}
} }
.program-cards-container { .program-cards-container {
@include grid-container(); @include grid-container();
@include span(12); @include span(12);
@media (min-width: $bp-screen-md) { @include media-breakpoint-up(sm) {
@include span(9); @include span(9);
} }
} }
...@@ -17,7 +20,7 @@ ...@@ -17,7 +20,7 @@
margin-bottom: $baseline; margin-bottom: $baseline;
@media (min-width: $bp-screen-md) { @include media-breakpoint-up(sm) {
@include span(3); @include span(3);
} }
......
lms/templates/header/user_dropdown.html
...@@ -32,7 +32,7 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_ ...@@ -32,7 +32,7 @@ from openedx.core.djangoapps.user_api.accounts.image_helpers import get_profile_
<span class="fa fa-caret-down" aria-hidden="true"></span> <span class="fa fa-caret-down" aria-hidden="true"></span>
</div> </div>
<div class="dropdown-user-menu hidden" aria-label=${_("More Options")} role="menu" id="user-menu" tabindex="-1"> <div class="dropdown-user-menu hidden" aria-label=${_("More Options")} role="menu" id="user-menu" tabindex="-1">
<div class="dropdown-item dropdown-nav-item"><a href="${reverse('dashboard')}" role="menuitem">${_("Dashboard")}</a></div> <div class="mobile-nav-item dropdown-item dropdown-nav-item"><a href="${reverse('dashboard')}" role="menuitem">${_("Dashboard")}</a></div>
<div class="mobile-nav-item dropdown-item dropdown-nav-item"><a href="${reverse('account_settings')}" role="menuitem">${_("Account")}</a></div> <div class="mobile-nav-item dropdown-item dropdown-nav-item"><a href="${reverse('account_settings')}" role="menuitem">${_("Account")}</a></div>
<div class="mobile-nav-item dropdown-item dropdown-nav-item"><a href="${reverse('logout')}" role="menuitem">${_("Sign Out")}</a></div> <div class="mobile-nav-item dropdown-item dropdown-nav-item"><a href="${reverse('logout')}" role="menuitem">${_("Sign Out")}</a></div>
</div> </div>
......
lms/templates/instructor/instructor_dashboard_2/instructor_dashboard_2.html
...@@ -109,12 +109,6 @@ from openedx.core.djangolib.markup import HTML ...@@ -109,12 +109,6 @@ from openedx.core.djangolib.markup import HTML
%endif %endif
</div> </div>
%if analytics_dashboard_message:
<div class="wrapper-msg urgency-low is-shown">
<p>${analytics_dashboard_message}</p>
</div>
%endif
## 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
......
lms/templates/wiki/base.html
...@@ -35,6 +35,8 @@ ...@@ -35,6 +35,8 @@
} }
</script> </script>
{% comment %} The wiki page does not use the main.html template {% endcomment %}
<script type="text/javascript" src="{% static 'js/header/header.js' %}"></script>
{% addtoblock 'js' %} {% addtoblock 'js' %}
{% comment %} These scripts load at the bottom of the body {% endcomment %} {% comment %} These scripts load at the bottom of the body {% endcomment %}
......
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