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

Styling changes for responsive behavior on LMS.

Browse Source
This commit is contained in:
Harry Rein
2017-11-08 16:59:09 -05:00
committed by Marco Morales
parent 95b47369c4
commit aa853a930e
13 changed files with 41 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -313,12 +313,20 @@ $seq-nav-height: 50px;
&:hover,
&:active,
&.active {
border-bottom: 3px solid $seq-nav-link-color;
// keeps icon/text centered on hover, necessary due to border-box setting
padding-top: 2px;
background-color: theme-color("primary");
.icon {
color: $seq-nav-icon-color;
color: theme-color("inverse");
}
@include media-breakpoint-up(sm) {
border-bottom: 3px solid $seq-nav-link-color;
background-color: theme-color("inverse");
.icon {
color: $seq-nav-icon-color;
}
}
}
}

8
common/lib/xmodule/xmodule/js/fixtures/sequence.html
View File

@@ -5,6 +5,10 @@
<span class="icon fa fa-chevron-prev" aria-hidden="true"></span>
<span>Previous</span>
</button>
<button class="sequence-nav-button button-next">
<span>Next</span>
<span class="icon fa fa-chevron-next" aria-hidden="true"></span>
</button>
<nav class="sequence-list-wrapper" aria-label="Unit">
<ol id="sequence-list" role="tablist">
<li>
@@ -23,10 +27,6 @@
</li>
</ol>
</nav>
<button class="sequence-nav-button button-next">
<span>Next</span>
<span class="icon fa fa-chevron-next" aria-hidden="true"></span>
</button>
</div>
<div class="sr-is-focusable" tabindex="-1"></div>

2
lms/djangoapps/discussion/templates/discussion/discussion_board_fragment.html
View File

@@ -33,7 +33,7 @@ from openedx.core.djangolib.markup import HTML
<div class="page-header-secondary">
## Add Post button
% if has_permission(user, 'create_thread', course.id):
<div class="form-actions">
<div class="forum-actions">
<button class="btn btn-outline-primary btn-small new-post-btn">${_("Add a Post")}</button>
</div>
% endif

2
lms/static/sass/_variables.scss
View File

@@ -1,6 +1,6 @@
// LMS-specific variables
$text-width-readability-max: 900px;
$text-width-readability-max: 1080px;
// LMS-only colors
$audit-mode-color: rgb(74, 74, 74) !default;

10
lms/static/sass/course/courseware/_courseware.scss
View File

@@ -41,6 +41,7 @@ html.video-fullscreen {
border-radius: ($baseline/4);
background-color: $light-gray1;
color: $staff-color;
text-transform: uppercase;
&:hover {
background-color: $staff-color;
@@ -134,12 +135,11 @@ html.video-fullscreen {
overflow-wrap: break-word;
word-wrap: break-word;
word-break: break-word;
}
margin: 0 auto;
// Make text-focused blocks have a maximum width for readability.
.xmodule_HtmlModule,
.xmodule_CapaModule {
max-width: $text-width-readability-max;
&.xblock-student_view-vertical {
max-width: $text-width-readability-max;
}
}
h1 {

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

@@ -293,7 +293,7 @@
.btn-link {
display: inline-block;
padding: ($baseline/2) $baseline;
padding: ($baseline/2);
border: 0;
box-shadow: none;
text-shadow: none;

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

@@ -177,6 +177,8 @@
.forum-nav-thread-list {
padding-left: 0 !important; // should *not* be RTLed, see below for explanation
min-height: 60px; // @TODO: Remove this when we have a real empty state for the discussion thread list
max-height: 800px;
border-bottom: 1px solid theme-color("light");
margin: 0;
overflow-y: auto;
list-style: none;

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

@@ -1,6 +1,5 @@
.forum-search {
display: flex;
width: 100%;
margin-top: $baseline;
.search-input {

1
lms/static/sass/elements/_banners.scss
View File

@@ -89,6 +89,7 @@ $full-width-banner-margin: 20px;
.btn-link {
color: $state-info-text-link;
font-weight: bold;
border-color: transparent;
}
}

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

@@ -199,6 +199,7 @@
.btn-link {
color: palette(grayscale, base);
border-color: transparent;
}
}
}
@@ -275,8 +276,14 @@
}
}
.section-tools .course-tool:not(:first-child) {
margin-top: ($baseline / 5);
.section-tools .course-tool {
.course-tool-link:visited {
color: theme-color("primary");
}
&:not(:first-child) {
margin-top: ($baseline / 5);
}
}
}
@@ -328,6 +335,8 @@
margin: 0 0 ($baseline / 2) 0;
.subsection {
@include margin-left(10px);
list-style-type: none;
border: 1px solid transparent;
border-radius: 3px;

4
lms/templates/seq_module.html
View File

@@ -13,11 +13,11 @@
</div>
% endif
<div class="sequence-nav">
<button class="sequence-nav-button button-previous" aria-hidden="true">
<button class="sequence-nav-button button-previous">
<span class="icon fa fa-chevron-prev" aria-hidden="true"></span>
<span class="sequence-nav-button-label">${_('Previous')}</span>
</button>
<button class="sequence-nav-button button-next" aria-hidden="true">
<button class="sequence-nav-button button-next">
<span class="sequence-nav-button-label">${_('Next')}</span>
<span class="icon fa fa-chevron-next" aria-hidden="true"></span>
</button>

2
openedx/features/course_experience/static/course_experience/fixtures/course-home-fragment.html
View File

@@ -65,7 +65,7 @@
<ol class="block-tree" role="tree">
<li aria-expanded="true" class="outline-item focusable section" id="block-v1:W3Cx+HTML5.0x+1T2017+type@chapter+block@451e0388724c4f1fafba1b218ce16582" role="treeitem" tabindex="0">
<div class="section-name">
<h3>Testing</h3>
<h3 class="section-title">Testing</h3>
</div>
<ol class="outline-item focusable" role="group" tabindex="0">
<li class="subsection " role="treeitem" tabindex="-1" aria-expanded="true">

2
openedx/features/course_experience/templates/course_experience/course-outline-fragment.html
View File

@@ -24,7 +24,7 @@ from openedx.core.djangolib.markup import HTML, Text
tabindex="0"
>
<div class="section-name">
<h3>${ section['display_name'] }</h3>
<h3 class="section-title">${ section['display_name'] }</h3>
</div>
<ol class="outline-item focusable" role="group" tabindex="0">
% for subsection in section.get('children', []):