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

Make the discussion board responsive

Browse Source 
LEARNER-1923
This commit is contained in:
Andy Armstrong
2017-10-16 15:39:32 -04:00
parent 80126fc79f
commit d18022bb5d
49 changed files with 314 additions and 178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -44,6 +44,16 @@
border-bottom: 1px solid $border-color;
padding: 20px;
.page-header-search {
@include media-breakpoint-up(md) {
margin-right: $baseline;
}
.search-form {
display: flex;
}
}
.page-header-main {
flex-grow: 1; // This column should consume all the available space
}

2
lms/static/sass/bootstrap/_legacy.scss
View File

@@ -65,6 +65,8 @@ $success-color: theme-color("success") !default;
$success-color-hover: theme-color("success") !default;
$lms-hero-color: #005e90 !default;
$lms-purchase-color: theme-color("success") !default;
$border-color-2: $gray-400 !default;
$link-hover: #065683 !default; // wcag2a compliant
// Blacks
$black: rgb(0, 0, 0) !default;

2
lms/static/sass/course/_info.scss
View File

@@ -5,7 +5,7 @@ $notification-highlight-border-color: $uxpl-green-base !default;
$lms-border-color: $uxpl-gray-background !default;
$notification-background: rgb(255, 255, 255) !default
.home {
.home {
@include clearfix();
max-width: 1140px;

6
lms/static/sass/discussion/_build-discussion.scss
View File

@@ -6,6 +6,12 @@
// Set the relative path to the static root
$static-path: '../..';
// Bootstrap support for use with shared partials
@import 'bootstrap/theme';
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import "bootstrap/scss/mixins/breakpoints";
// Styles for discussions
@import "utilities/variables-v1";
@import "mixins";

6
lms/static/sass/discussion/_build.scss
View File

@@ -4,6 +4,12 @@
// Set the relative path to the static root
$static-path: '../..' !default;
// Bootstrap support for use with shared partials
@import 'bootstrap/theme';
@import 'bootstrap/scss/functions';
@import 'bootstrap/scss/variables';
@import "bootstrap/scss/mixins/breakpoints";
// Configuration
@import '../config';
@import 'base/variables';

15
lms/static/sass/discussion/_discussion.scss
View File

@@ -5,10 +5,16 @@
.discussion-body {
@include clearfix();
width: 100%;
border: none;
background: transparent;
box-shadow: none;
@include media-breakpoint-up(md) {
display: flex;
flex-direction: row-reverse;
}
.bottom-post-status {
padding: 30px;
font-size: $forum-x-large-font-size;
@@ -33,7 +39,7 @@
.discussion-reply-new {
@include clearfix();
@include transition(opacity .2s linear 0s);
@include transition(opacity 0.2s linear 0s);
h4 {
font-size: $forum-large-font-size;
@@ -89,7 +95,6 @@
margin-top: $baseline;
margin-bottom: $baseline;
}
}
.discussion-show {
@@ -101,8 +106,8 @@
text-align: center;
&.shown {
background-color: $btn-default-background-color;
color: $uxpl-primary-blue;
background-color: theme-color("inverse");
color: theme-color("primary");
}
}
@@ -154,7 +159,7 @@ section.discussion-pagination {
font-size: $forum-base-font-size;
font-weight: 700;
line-height: 32px;
color: $gray-d3;
color: theme-color("gray-dark");
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}
}

20
lms/static/sass/discussion/_layouts.scss
View File

@@ -1,6 +1,4 @@
// Layouts for discussion pages
@import '../course/base/extends';
.discussion-user-profile-board {
.discussion-profile-title {
margin-bottom: $baseline / 5;
@@ -27,8 +25,24 @@
}
}
.forum-nav {
@include media-breakpoint-up(md) {
// Note: a single width setting is not obeyed by a flex layout
min-width: 300px;
max-width: 300px;
}
}
.discussion-column {
min-height: 500px;
flex-grow: 1; // This column should consume all the available space
margin-bottom: $baseline;
@include media-breakpoint-up(md) {
@include margin-left($baseline);
min-height: 500px;
margin-bottom: 0;
}
.new-post-article {
margin-top: -$baseline;

4
lms/static/sass/discussion/_mixins.scss
View File

@@ -20,7 +20,7 @@
border-color: #aaa;
background-color: $white;
color: $dark-gray;
color: theme-color("gray-dark");
&:hover, &:focus {
background-color: $white;
@@ -38,7 +38,7 @@
height: 125px;
background: $forum-color-background;
font-size: $forum-base-font-size;
font-family: $sans-serif;
font-family: $font-family-sans-serif;
line-height: 1.6;
}

48
lms/static/sass/discussion/elements/_actions.scss
View File

@@ -75,7 +75,7 @@
width: 100%;
border-radius: $forum-border-radius;
margin: ($baseline/4) 0 0 0;
border: 1px solid $gray-l3;
border: 1px solid $forum-color-border;
padding: ($baseline/2) ($baseline*0.75);
background: $forum-color-background;
@@ -96,13 +96,13 @@
&::after {
@include margin-right(1px);
border-color: $transparent;
border-color: transparent;
border-bottom-color: $white;
border-width: 6px;
}
&::before {
border-color: $transparent;
border-color: transparent;
border-bottom-color: $forum-color-border;
border-width: 7px;
}
@@ -128,7 +128,7 @@
display: inline-block;
border: 1px solid transparent;
border-radius: $forum-border-radius;
color: $gray-l1;
color: theme-color("secondary");
.action-icon {
display: inline-block;
@@ -138,7 +138,7 @@
border: 1px solid $forum-color-border;
border-radius: $forum-border-radius;
text-align: center;
color: $gray-l1;
color: theme-color("secondary");
.icon {
@include margin-right(0);
@@ -168,13 +168,13 @@
// specific button styles
&.action-follow {
.action-label {
color: $blue-d1;
color: theme-color("primary");
}
&.is-checked, &:hover, &:focus {
.action-icon {
background-color: $forum-color-following;
border: 1px solid $blue-d1;
border: 1px solid theme-color("primary");
color: $white;
}
}
@@ -191,17 +191,17 @@
&.is-checked, &:hover, &:focus {
.action-icon {
background-color: $green-d1;
border: 1px solid $green-d2;
background-color: $green;
border: 1px solid $green;
color: $white;
}
}
&:hover, &:focus {
border-color: $green-d2;
border-color: $green;
.action-label {
color: $green-d2;
color: $green;
}
}
}
@@ -209,18 +209,18 @@
&.action-endorse {
&.is-checked, &:hover, &:focus {
.action-icon {
background-color: $blue-d1;
border: 1px solid $blue-d2;
background-color: theme-color("primary");
border: 1px solid theme-color("primary");
color: $white;
}
}
&:hover, &:focus {
border-color: $blue-d2;
border-color: theme-color("primary");
background-color: $forum-color-background;
.action-label {
color: $blue-d2;
color: theme-color("primary");
}
}
}
@@ -228,18 +228,18 @@
&.action-answer {
&.is-checked, &:hover, &:focus {
.action-icon {
border: 1px solid $green-d1;
background-color: $green-d1;
border: 1px solid $green;
background-color: $green;
color: $white;
}
}
&:hover, &:focus {
border-color: $green-d1;
border-color: $green;
background-color: $forum-color-background;
.action-label {
color: $green-d2;
color: $green;
}
}
}
@@ -249,13 +249,13 @@
position: relative;
&:hover, &:focus {
border-color: $gray;
border-color: theme-color("dark");
background-color: $forum-color-background;
.action-icon {
border: 1px solid $gray;
background-color: $gray;
color: $white;
border: 1px solid theme-color("dark");
background-color: theme-color("dark");
color: theme-color("inverse");
}
.action-label {
@@ -280,7 +280,7 @@
width: 100%;
padding: ($baseline/10) 0;
white-space: nowrap;
color: $gray-l1;
color: theme-color("secondary");
&:hover, &:focus {
color: $link-color;

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

@@ -141,7 +141,7 @@
> form > input[type="button"] {
border: 1px solid #888;
font-family: $sans-serif;
font-family: $font-family-sans-serif;
font-size: $forum-x-large-font-size;
}

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

@@ -3,39 +3,16 @@
@import '../../edx-pattern-library-shims/base/variables';
.forum-nav {
border: 1px solid #aaa;
border-radius: $forum-border-radius;
}
// ------
// Discussion Forums Page Header
// ------
.discussion-board > .page-header {
$searchBoxPadding: rem($baseline / 2 + 2);
$searchBoxHeight: (rem($baseline) + ($searchBoxPadding * 2));
div {
display: inline-block;
vertical-align: middle;
}
.has-breadcrumbs .breadcrumbs {
margin-bottom: ($baseline / 2);
font-size: font-size(base);
font-weight: font-weight(semi-bold);
line-height: $base-line-height;
}
.page-header-main {
line-height: $searchBoxHeight;
}
.page-header-secondary > .form-actions > button {
// Overrides base size set in lms/static/sass/shared-v2/_layouts.scss
// Done to match size of UXPL's search box. This is bad, I know.
height: $searchBoxHeight !important;
}
}
// -----------
@@ -43,7 +20,7 @@
// -----------
.forum-nav-browse-menu-wrapper {
border-bottom: 1px solid $forum-color-border;
background: $gray-l5;
background: theme-color("light");
}
.forum-nav-browse-filter {
@@ -113,13 +90,18 @@
}
.forum-nav-browse-menu {
@include padding-left(0);
margin: 0;
font-size: $forum-base-font-size;
overflow-y: scroll;
list-style: none;
max-height: 600px;
}
.forum-nav-browse-submenu {
list-style: none;
margin: 0;
padding: 0;
li {
@@ -139,7 +121,7 @@
font-size: $forum-small-font-size;
border-bottom: 1px solid $forum-color-border;
background-color: $gray-l5;
background-color: theme-color("light");
padding: ($baseline/4) ($baseline/2);
color: $black;
}
@@ -318,7 +300,7 @@
margin: 0 ($baseline / 4);
// 125 is the width we need to save for the "X new" comments indicator - and we want to clip the preview
// at the same length whether there are unread comments for this story or not.
max-width: calc(100% - 125px);
max-width: calc(100% - 75px);
flex-grow: 1; // This column should consume all the available space
}
@@ -327,7 +309,7 @@
@include text-align(right);
min-width: 90px;
min-width: 40px;
white-space: nowrap;
}
@@ -367,7 +349,7 @@
border-radius: $forum-border-radius;
padding: ($baseline/10) ($baseline/5);
min-width: 2em; // Fit most comment counts but allow expansion if necessary
background-color: $gray-l4;
background-color: theme-color("light");
// Speech bubble tail
&::after {
@@ -383,13 +365,13 @@
border-style: solid;
@include border-width(0, ($baseline/4), ($baseline/4), 0);
@include border-color(transparent, $gray-l4, transparent, transparent);
@include border-color(transparent, $forum-color-border, transparent, transparent);
}
}
.forum-nav-load-more {
border-bottom: 1px solid $forum-color-border;
background-color: $gray-l5;
background-color: theme-color("light");
}
%forum-nav-load-more-content {

44
lms/static/sass/discussion/lms-discussion-bootstrap.scss Normal file
View File

@@ -0,0 +1,44 @@
// ------------------------------
// LMS discussion main styling
// Set the relative path to the static root
$static-path: '../..';
// Bootstrap theme
@import 'bootstrap/theme';
@import 'bootstrap/scss/bootstrap';
// Legacy support
@import '../bootstrap/legacy';
// Base
@import '../bootstrap/base';
@import '../bootstrap/variables';
// Elements
@import '../bootstrap/header';
@import '../bootstrap/footer';
@import '../bootstrap/navigation';
@import '../bootstrap/layouts';
@import '../bootstrap/components';
@import '../course/layout/courseware_preview';
// Discussion variables
@import 'utilities/variables-bootstrap';
@import 'utilities/v1-compatibility';
// Discussion styling
@import 'mixins';
@import 'discussion'; // Process old file after definitions but before everything else, partial is deprecated.
@import 'layouts';
@import 'elements/actions';
@import 'elements/editor';
@import 'elements/labels';
@import 'elements/navigation';
@import 'views/home';
@import 'views/thread';
@import 'views/create-edit-post';
@import 'views/response';
@import 'views/search';
@import 'views/inline';
@import 'utilities/shame';

10
lms/static/sass/discussion/utilities/_shame.scss
View File

@@ -24,6 +24,7 @@
// Override global label rules
.forum-nav-browse-filter label {
margin-bottom: 0;
width: 100%;
}
// Override global input rules
@@ -37,15 +38,6 @@
font-size: $forum-small-font-size !important;
}
// Override global ul rules
.forum-nav-browse-menu, .forum-nav-browse-submenu {
margin: 0;
}
.forum-nav-browse-menu {
@include padding-left(0);
}
// --------------------------------
// navigation - sort and filter bar
// --------------------------------

2
lms/static/sass/discussion/utilities/_v1-compatibility.scss
View File

@@ -58,7 +58,7 @@
// copy
%t-copy {
font-family: $f-sans-serif;
font-family: $font-family-sans-serif;
}
%t-copy-sub1 {

49
lms/static/sass/discussion/utilities/_variables-bootstrap.scss Normal file
View File

@@ -0,0 +1,49 @@
// discussion - utilities - variables
// ====================
// base color variables
$forum-color-primary: theme-color("primary") !default;
$forum-color-copy-light: rgb(65, 65, 65) !default;
$forum-color-background-light: rgb(245, 245, 245) !default;
// contextual color variables
$forum-color-background: theme-color("inverse");
$forum-color-active-thread: $forum-color-primary !default;
$forum-color-hover: rgb(6, 86, 131) !default;
$forum-color-active-text: $white !default;
$forum-color-pinned: rgb(152, 44, 98) !default;
$forum-color-reported: rgb(152, 44, 98) !default;
$forum-color-closed: $black !default;
$forum-color-following: $forum-color-primary !default;
$forum-color-staff: $forum-color-primary !default;
$forum-color-community-ta: $green !default;
$forum-color-marked-answer: theme-color("success") !default;
$forum-color-border: $gray-300 !default;
$forum-color-error: theme-color("danger") !default;
$forum-color-hover-thread: $forum-color-background-light !default;
$forum-color-reading-thread: $forum-color-background-light !default;
$forum-color-read-post: $forum-color-copy-light !default;
$forum-color-never-read-post: $forum-color-primary !default;
$forum-color-editor-preview-label: $forum-color-copy-light !default;
$forum-color-response-count: $forum-color-copy-light !default;
$forum-color-navigation-bar: $forum-color-background-light !default;
$forum-color-count: $forum-color-copy-light !default;
$forum-color-background-label: $gray-700 !default;
// post images
$post-image-dimension: ($baseline*3) !default; // image size + margin
$response-image-dimension: ($baseline*2.5) !default; // image size + margin
$comment-image-dimension: ($baseline*2) !default; // image size + margin
// action-dropdown
$actions-dropdown-width: 145px; // best estimate in RU
$actions-dropdown-offset: 100px; // actions dropdown expanded more menu
// font sizes
$forum-base-font-size: 14px;
$forum-x-large-font-size: 21px;
$forum-large-font-size: 16px;
$forum-small-font-size: 12px;
// borders
$forum-border-radius: 3px;

4
lms/static/sass/discussion/utilities/_variables-v1.scss
View File

@@ -47,7 +47,3 @@ $forum-small-font-size: 12px;
// borders
$forum-border-radius: 3px;
// btn colors
$uxpl-primary-blue: rgb(0, 117, 180) !default;
$btn-default-background-color: $white;

4
lms/static/sass/discussion/utilities/_variables-v2.scss
View File

@@ -47,7 +47,3 @@ $forum-small-font-size: font-size(x-small);
// borders
$forum-border-radius: $component-border-radius;
// btn colors
$uxpl-primary-blue: palette(primary, base) !default;
$btn-default-background-color: $lms-container-background-color;

6
lms/static/sass/discussion/views/_create-edit-post.scss
View File

@@ -132,9 +132,9 @@
width: 100%;
height: 40px;
box-shadow: 0 1px 3px $shadow-l1 inset;
color: $dark-gray;
color: theme-color("gray-dark");
font-size: $forum-large-font-size;
font-family: $sans-serif;
font-family: $font-family-sans-serif;
}
}
@@ -151,7 +151,7 @@
.post-type-label {
@include margin-right($baseline);
color: $gray-d3;
color: theme-color("gray-dark");
}
input[type=text].field-input {

15
lms/static/sass/discussion/views/_home.scss
View File

@@ -5,6 +5,13 @@
.view-discussion-home {
@include padding-left($baseline);
display: none;
// Only show this component for large sizes
@include media-breakpoint-up(lg) {
display: block;
}
section {
border-bottom: 1px solid $forum-color-border;
}
@@ -154,9 +161,9 @@
}
.helpgrid-row-navigation {
.fa-bars {color: $light-gray;}
.fa-search {color: $light-gray;}
.fa-sort {color: $light-gray;}
.fa-bars {color: theme-color("light");}
.fa-search {color: $gray-300;}
.fa-sort {color: $gray-300;}
}
.helpgrid-row-participation {
@@ -167,6 +174,6 @@
.helpgrid-row-notification {
.fa-square {color: $green;}
.fa-envelope {color: $light-gray;}
.fa-envelope {color: $gray-300;}
}
}

2
lms/static/sass/discussion/views/_inline.scss
View File

@@ -42,7 +42,7 @@
top: $baseline / 2;
position: absolute;
color: $uxpl-primary-blue;
color: theme-color("primary");
&:hover,
&:focus {

7
lms/static/sass/discussion/views/_response.scss
View File

@@ -20,8 +20,7 @@
// wrapper - response plus comment area
.forum-response {
@include animation(fadeIn .3s);
animation: fadeIn 0.3s;
position: relative;
margin: $baseline 0;
border: 1px solid $forum-color-border;
@@ -76,7 +75,7 @@
display: block;
padding: ($baseline/2) $baseline;
width: 100%;
background: $gray-l6;
background: theme-color("lightest");
box-shadow: 0 1px 3px -1px $shadow inset;
}
@@ -146,7 +145,7 @@
@include border-radius(0, 0, $forum-border-radius, $forum-border-radius);
background: $gray-l6;
background: theme-color("lightest");
box-shadow: 0 1px 3px -1px $shadow inset;
> li {

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

@@ -1,9 +1,13 @@
.forum-search {
@include margin-left($baseline);
display: inline-block;
display: flex;
.search-input {
width: input-width(short);
}
.search-button {
margin-left: 0;
}
}

2
lms/static/sass/discussion/views/_thread.scss
View File

@@ -43,7 +43,7 @@
display: block;
margin-bottom: $baseline;
font-size: $forum-x-large-font-size;
color: $gray-d3;
color: theme-color("gray-dark");
font-weight: 600;
}

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

@@ -41,7 +41,7 @@
@include float(right);
@include text-align(right);
display: inline-block;
display: flex;
vertical-align: text-bottom;
.form-actions {