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

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

Browse Source 
Cleaning up mobile web.
This commit is contained in:
Harry Rein
2017-11-06 14:17:53 -05:00
committed by GitHub
parent 617937755d 7f61828e12
commit 51459d3333
18 changed files with 103 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
common/lib/xmodule/xmodule/css/sequence/display.scss
View File

@@ -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;

16
common/static/sass/edx-pattern-library-shims/_breadcrumbs.scss
View File

@@ -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;
}

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

@@ -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;
}
}

5
lms/static/sass/course/instructor/_instructor_2.scss
View File

@@ -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;
}
}

3
lms/static/sass/course/layout/_courseware_preview.scss
View File

@@ -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 {

2
lms/static/sass/course/modules/_calculator.scss
View File

@@ -4,7 +4,7 @@
.calc-main {
@extend %ui-print-excluded;
bottom: -126px;
bottom: -129px;
left: 0;
position: fixed;

10
lms/static/sass/discussion/views/_search.scss
View File

@@ -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;
}
}

2
lms/static/sass/elements/_navigation.scss
View File

@@ -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);
}
}

8
lms/static/sass/features/_course-experience.scss
View File

@@ -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");
}
}

21
lms/static/sass/features/_learner-profile.scss
View File

@@ -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 {

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

@@ -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);

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

@@ -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 {

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

@@ -20,7 +20,7 @@
@include transform-origin(0 0);
z-index: z-index(front);
top: 250px;
bottom: $baseline;
left: 0;
position: fixed;

2
lms/static/sass/shared/_help-tab.scss
View File

@@ -24,7 +24,7 @@
transform: rotate(-90deg);
transform-origin: top left;
position: fixed;
top: 250px;
bottom: $baseline;
left: 0;
a:link,

9
lms/static/sass/views/_program-list.scss
View File

@@ -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);
}

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

@@ -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>
</div>
<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('logout')}" role="menuitem">${_("Sign Out")}</a></div>
</div>

6
lms/templates/instructor/instructor_dashboard_2/instructor_dashboard_2.html
View File

@@ -109,12 +109,6 @@ from openedx.core.djangolib.markup import HTML
%endif
</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.
## the links are activated and handled in instructor_dashboard.coffee
## when the javascript loads, it clicks on the first section

2
lms/templates/wiki/base.html
View File

@@ -35,6 +35,8 @@
}
</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' %}
{% comment %} These scripts load at the bottom of the body {% endcomment %}