Skip to content

E
edx-platform
Commit a6bbe8a3 by Andy Armstrong
Options

Fix RTL issues with discussion sass 

TNL-4709
parent 6aaf442d
Showing with 60 additions and 52 deletions
lms/static/sass/course/courseware/_courseware.scss
...@@ -31,10 +31,10 @@ html.video-fullscreen { ...@@ -31,10 +31,10 @@ html.video-fullscreen {
@extend %t-copy-sub2; @extend %t-copy-sub2;
@include float(right); @include float(right);
@include margin-left($baseline/2); @include margin-left($baseline/2);
@include text-align(right);
padding: ($baseline/4) ($baseline/2); padding: ($baseline/4) ($baseline/2);
border-radius: ($baseline/4); border-radius: ($baseline/4);
background-color: $light-gray1; background-color: $light-gray1;
text-align: right;
text-transform: uppercase; text-transform: uppercase;
color: $staff-color; color: $staff-color;
...@@ -48,11 +48,11 @@ html.video-fullscreen { ...@@ -48,11 +48,11 @@ html.video-fullscreen {
.content-wrapper { .content-wrapper {
.container-footer { .container-footer {
@include text-align(right);
margin: 0 auto; margin: 0 auto;
max-width: grid-width(12); max-width: grid-width(12);
min-width: 760px; min-width: 760px;
color: $gray; color: $gray;
text-align: $bi-app-right;
} }
} }
...@@ -188,12 +188,12 @@ html.video-fullscreen { ...@@ -188,12 +188,12 @@ html.video-fullscreen {
} }
} }
.proctored-exam-select-code { .proctored-exam-select-code {
margin-left: 30px; @include margin-left(30px);
} }
.exam-action-button { .exam-action-button {
@extend %t-weight4; @extend %t-weight4;
margin-right: $baseline; @include margin-right($baseline);
background-image: none; background-image: none;
box-shadow: none; box-shadow: none;
text-shadow: none; text-shadow: none;
...@@ -293,8 +293,8 @@ html.video-fullscreen { ...@@ -293,8 +293,8 @@ html.video-fullscreen {
} }
} }
> .fa { > .fa {
@include right(35px);
position: absolute; position: absolute;
right: 35px;
top: 50%; top: 50%;
font-size: 30px; font-size: 30px;
margin-top: -15px; margin-top: -15px;
...@@ -365,11 +365,11 @@ html.video-fullscreen { ...@@ -365,11 +365,11 @@ html.video-fullscreen {
} }
a.contest-review { a.contest-review {
float: right; @include float(right);
@include text-align(right);
font-size: 12px; font-size: 12px;
margin: 0; margin: 0;
width: 20%; width: 20%;
text-align: right;
} }
p { p {
margin-bottom: ($baseline/20); margin-bottom: ($baseline/20);
...@@ -455,11 +455,11 @@ html.video-fullscreen { ...@@ -455,11 +455,11 @@ html.video-fullscreen {
} }
h2 { h2 {
float: right; @include float(right);
@include text-align(right);
@include border-right(0);
@include padding-right(0);
margin: 12px 0 0; margin: 12px 0 0;
text-align: right;
padding-right: 0;
border-right: 0;
font-size: em(14, 24); font-size: em(14, 24);
} }
} }
...@@ -476,12 +476,12 @@ html.video-fullscreen { ...@@ -476,12 +476,12 @@ html.video-fullscreen {
} }
ul { ul {
@include padding-left(1em);
list-style: disc outside none; list-style: disc outside none;
padding-left: 1em;
&.discussion-errors { &.discussion-errors {
@include padding-left(2em);
list-style: none; list-style: none;
padding-left: 2em;
} }
&.admin-actions { &.admin-actions {
...@@ -490,7 +490,7 @@ html.video-fullscreen { ...@@ -490,7 +490,7 @@ html.video-fullscreen {
} }
nav.sequence-nav ul li.prev { nav.sequence-nav ul li.prev {
left: 4px; @include left(4px);
} }
nav.sequence-bottom { nav.sequence-bottom {
...@@ -531,14 +531,14 @@ html.video-fullscreen { ...@@ -531,14 +531,14 @@ html.video-fullscreen {
list-style: none; list-style: none;
li { li {
@include float(left);
@include margin-right(flex-gutter(9));
width: flex-grid(3, 9); width: flex-grid(3, 9);
float: left;
margin-right: flex-gutter(9);
margin-bottom: lh(); margin-bottom: lh();
line-height: lh(); line-height: lh();
&:nth-child(3n) { &:nth-child(3n) {
margin-right: 0; @include margin-right(0);
} }
&:nth-child(3n+1) { &:nth-child(3n+1) {
......
lms/static/sass/discussion/_discussion.scss
...@@ -123,14 +123,18 @@ body.discussion { ...@@ -123,14 +123,18 @@ body.discussion {
} }
.wmd-spacer1 { .wmd-spacer1 {
@include left(50px); // Note: the WMD toolbar does not support RTL so this is hard-coded to the left
left: 50px;
} }
.wmd-spacer2 { .wmd-spacer2 {
@include left(175px); // Note: the WMD toolbar does not support RTL so this is hard-coded to the left
left: 175px;
} }
.wmd-spacer3 { .wmd-spacer3 {
@include left(300px); // Note: the WMD toolbar does not support RTL so this is hard-coded to the left
left: 300px;
} }
.wmd-prompt-background { .wmd-prompt-background {
...@@ -404,9 +408,10 @@ section.discussion-pagination { ...@@ -404,9 +408,10 @@ section.discussion-pagination {
ol { ol {
li { li {
@include padding-right($baseline/2);
list-style: none; list-style: none;
display: inline-block; display: inline-block;
padding-right: 0.5em;
&.current-page span { &.current-page span {
display: inline-block; display: inline-block;
height: 35px; height: 35px;
...@@ -444,9 +449,9 @@ section.discussion-pagination { ...@@ -444,9 +449,9 @@ section.discussion-pagination {
} }
.load-response-button { .load-response-button {
@include text-align(left);
position: relative; position: relative;
margin: ($baseline/2) 0; margin: ($baseline/2) 0;
width: 100%; width: 100%;
text-align: left;
} }
} }
lms/static/sass/discussion/_mixins.scss
...@@ -27,10 +27,10 @@ ...@@ -27,10 +27,10 @@
} }
@mixin discussion-wmd-input { @mixin discussion-wmd-input {
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
box-sizing: border-box; box-sizing: border-box;
margin-top: 0; margin-top: 0;
border: 1px solid $forum-color-border; border: 1px solid $forum-color-border;
border-radius: $forum-border-radius $forum-border-radius 0 0;
padding: ($baseline/2); padding: ($baseline/2);
width: 100%; width: 100%;
height: 125px; height: 125px;
...@@ -42,8 +42,8 @@ ...@@ -42,8 +42,8 @@
} }
@mixin discussion-wmd-preview-container { @mixin discussion-wmd-preview-container {
box-sizing: border-box;
@include border-radius(0, 0, $forum-border-radius, $forum-border-radius); @include border-radius(0, 0, $forum-border-radius, $forum-border-radius);
box-sizing: border-box;
border: 1px solid $gray-l1; border: 1px solid $gray-l1;
border-top: none; border-top: none;
width: 100%; width: 100%;
......
lms/static/sass/discussion/elements/_actions.scss
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
} }
.action-label { .action-label {
padding-right: 0px; @include padding-right(0);
} }
&:hover { &:hover {
...@@ -53,10 +53,10 @@ ...@@ -53,10 +53,10 @@
.actions-dropdown { .actions-dropdown {
@extend %ui-no-list; @extend %ui-no-list;
@extend %ui-depth1; @extend %ui-depth1;
@include right(0);
display: none; display: none;
position: absolute; position: absolute;
top: 100%; top: 100%;
right: 0;
pointer-events: none; pointer-events: none;
min-width: ($baseline*6.5); min-width: ($baseline*6.5);
...@@ -79,8 +79,8 @@ ...@@ -79,8 +79,8 @@
// ui triangle/nub // ui triangle/nub
&:after, &:after,
&:before { &:before {
@include right(6px);
bottom: 100%; bottom: 100%;
right: 6px;
border: solid transparent; border: solid transparent;
content: " "; content: " ";
height: 0; height: 0;
...@@ -90,10 +90,10 @@ ...@@ -90,10 +90,10 @@
} }
&:after { &:after {
@include margin-right(1px);
border-color: $transparent; border-color: $transparent;
border-bottom-color: $white; border-bottom-color: $white;
border-width: 6px; border-width: 6px;
@include margin-right(1px);
} }
&:before { &:before {
...@@ -153,7 +153,7 @@ ...@@ -153,7 +153,7 @@
} }
.action-icon { .action-icon {
border-radius: 0 $forum-border-radius $forum-border-radius 0; @include border-radius(0, $forum-border-radius, $forum-border-radius, 0);
} }
} }
......
lms/static/sass/discussion/elements/_editor.scss
...@@ -52,9 +52,9 @@ ...@@ -52,9 +52,9 @@
} }
.wmd-input { .wmd-input {
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
width: 100%; width: 100%;
height: 150px; height: 150px;
border-radius: $forum-border-radius $forum-border-radius 0 0;
font-style: normal; font-style: normal;
font-size: $forum-base-font-size; font-size: $forum-base-font-size;
font-family: Monaco, 'Lucida Console', monospace; font-family: Monaco, 'Lucida Console', monospace;
...@@ -111,13 +111,17 @@ ...@@ -111,13 +111,17 @@
} }
.wmd-spacer1 { .wmd-spacer1 {
// Note: the WMD toolbar does not support RTL so this is hard-coded to the left
left: 50px; left: 50px;
} }
.wmd-spacer2 { .wmd-spacer2 {
// Note: the WMD toolbar does not support RTL so this is hard-coded to the left
left: 175px; left: 175px;
} }
.wmd-spacer3 { .wmd-spacer3 {
// Note: the WMD toolbar does not support RTL so this is hard-coded to the left
left: 300px; left: 300px;
} }
......
lms/static/sass/discussion/elements/_navigation.scss
...@@ -44,11 +44,11 @@ ...@@ -44,11 +44,11 @@
} }
.forum-nav-browse-filter .icon { .forum-nav-browse-filter .icon {
@include right($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding
font-size: $forum-small-font-size; font-size: $forum-small-font-size;
position: absolute; position: absolute;
margin-top: -6px; margin-top: -6px;
top: 50%; top: 50%;
right: ($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding
} }
.forum-nav-browse-filter-input { .forum-nav-browse-filter-input {
...@@ -56,6 +56,7 @@ ...@@ -56,6 +56,7 @@
} }
.forum-nav-browse-title { .forum-nav-browse-title {
@include text-align(left);
display: block; display: block;
width: 100%; width: 100%;
border: 0; border: 0;
...@@ -66,7 +67,6 @@ ...@@ -66,7 +67,6 @@
box-shadow: none; box-shadow: none;
background-image: none; background-image: none;
color: $link-color; color: $link-color;
text-align: left;
&:hover, &:hover,
&:focus { &:focus {
...@@ -95,7 +95,7 @@ ...@@ -95,7 +95,7 @@
li { li {
.forum-nav-browse-title { .forum-nav-browse-title {
padding-left: $baseline; @include padding-left($baseline);
} }
} }
} }
...@@ -105,13 +105,13 @@ ...@@ -105,13 +105,13 @@
// ------------------- // -------------------
.forum-nav-refine-bar { .forum-nav-refine-bar {
@include clearfix(); @include clearfix();
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
@include text-align(right);
font-size: $forum-small-font-size; font-size: $forum-small-font-size;
border-bottom: 1px solid $forum-color-border; border-bottom: 1px solid $forum-color-border;
background-color: $gray-l5; background-color: $gray-l5;
padding: ($baseline/4) ($baseline/2); padding: ($baseline/4) ($baseline/2);
color: $black; color: $black;
text-align: right;
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
} }
.forum-nav-filter-main { .forum-nav-filter-main {
...@@ -150,8 +150,8 @@ ...@@ -150,8 +150,8 @@
// Thread list // Thread list
// ----------- // -----------
.forum-nav-thread-list { .forum-nav-thread-list {
@include padding-left(0);
margin: 0; margin: 0;
padding-left: 0;
overflow-y: scroll; overflow-y: scroll;
list-style: none; list-style: none;
...@@ -201,7 +201,7 @@ ...@@ -201,7 +201,7 @@
color: $base-font-color; color: $base-font-color;
&:after { &:after {
border-right-color: $forum-color-border; @include border-right-color($forum-color-border);
} }
} }
...@@ -261,9 +261,9 @@ ...@@ -261,9 +261,9 @@
} }
.forum-nav-thread-title { .forum-nav-thread-title {
@include margin-left(0);
font-size: $forum-base-font-size; font-size: $forum-base-font-size;
display: block; display: block;
margin-left: 0;
} }
%forum-nav-thread-wrapper-2-content { %forum-nav-thread-wrapper-2-content {
......
lms/static/sass/discussion/utilities/_developer.scss
...@@ -62,8 +62,8 @@ body.discussion { ...@@ -62,8 +62,8 @@ body.discussion {
// alert controls // alert controls
.search-alert-controls { .search-alert-controls {
@include text-align(right);
width: 28%; width: 28%;
text-align: right;
.control { .control {
@include transition(none); @include transition(none);
......
lms/static/sass/discussion/utilities/_shame.scss
...@@ -47,7 +47,7 @@ ...@@ -47,7 +47,7 @@
} }
.forum-nav-browse-menu { .forum-nav-browse-menu {
padding-left: 0; @include padding-left(0);
} }
// -------------------------------- // --------------------------------
...@@ -102,7 +102,7 @@ li[class*=forum-nav-thread-label-] { ...@@ -102,7 +102,7 @@ li[class*=forum-nav-thread-label-] {
// Override global ul rules // Override global ul rules
.topic-menu { .topic-menu {
padding-left: 0; @include padding-left(0);
} }
.topic-menu, .topic-submenu { .topic-menu, .topic-submenu {
...@@ -129,7 +129,6 @@ li[class*=forum-nav-thread-label-] { ...@@ -129,7 +129,6 @@ li[class*=forum-nav-thread-label-] {
// Override courseware // Override courseware
.post-actions-list, .response-actions-list, .comment-actions-list { .post-actions-list, .response-actions-list, .comment-actions-list {
@extend %t-copy-sub2; @extend %t-copy-sub2;
padding-left: 0 !important;
} }
// Override global span // Override global span
......
lms/static/sass/discussion/views/_create-edit-post.scss
...@@ -204,11 +204,11 @@ ...@@ -204,11 +204,11 @@
position: relative; position: relative;
.topic-menu-wrapper { .topic-menu-wrapper {
box-sizing: border-box;
@extend %ui-depth4; @extend %ui-depth4;
@include left(0);
box-sizing: border-box;
position: absolute; position: absolute;
top: 40px; top: 40px;
left: 0;
width: 100%; width: 100%;
background: $forum-color-background; background: $forum-color-background;
box-shadow: 0 2px 1px $shadow; box-shadow: 0 2px 1px $shadow;
...@@ -231,15 +231,15 @@ ...@@ -231,15 +231,15 @@
} }
.topic-menu { .topic-menu {
@include margin-left($baseline/2);
overflow-y: scroll; overflow-y: scroll;
max-height: 400px; max-height: 400px;
list-style: none; list-style: none;
margin-left: ($baseline/2);
} }
.topic-submenu { .topic-submenu {
@include margin-left($baseline);
list-style: none; list-style: none;
margin-left: $baseline;
} }
.topic-title { .topic-title {
......
lms/static/sass/discussion/views/_home.scss
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
// home - layout // home - layout
.container .view-discussion-home { .container .view-discussion-home {
padding-left: $baseline; @include padding-left($baseline);
section { section {
border-bottom: 1px solid $forum-color-border; border-bottom: 1px solid $forum-color-border;
......
lms/static/sass/discussion/views/_response.scss
...@@ -96,9 +96,9 @@ ...@@ -96,9 +96,9 @@
// CASE: banner - staff response // CASE: banner - staff response
.staff-banner { .staff-banner {
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0); @include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
@include left(0);
position: absolute; position: absolute;
top: 0; top: 0;
left: 0;
width: 100%; width: 100%;
height: 14px; height: 14px;
padding: 1px ($baseline/4); padding: 1px ($baseline/4);
...@@ -111,14 +111,14 @@ ...@@ -111,14 +111,14 @@
// CASE: banner - community TA response // CASE: banner - community TA response
.community-ta-banner{ .community-ta-banner{
@include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
@include left(0);
position: absolute; position: absolute;
top: 0; top: 0;
left: 0;
width: 100%; width: 100%;
height: 14px; height: 14px;
padding: 1px ($baseline/4); padding: 1px ($baseline/4);
box-sizing: border-box; box-sizing: border-box;
border-radius: $forum-border-radius $forum-border-radius 0 0;
background: $forum-color-community-ta; background: $forum-color-community-ta;
font-size: $forum-small-font-size; font-size: $forum-small-font-size;
font-weight: 700; font-weight: 700;
...@@ -138,7 +138,7 @@ ...@@ -138,7 +138,7 @@
// +comments styling // +comments styling
.container .discussion-body .comments { .container .discussion-body .comments {
@extend %ui-no-list; @extend %ui-no-list;
border-radius: 0 0 $forum-border-radius $forum-border-radius; @include border-radius(0, 0, $forum-border-radius, $forum-border-radius);
background: $gray-l6; background: $gray-l6;
box-shadow: 0 1px 3px -1px $shadow inset; box-shadow: 0 1px 3px -1px $shadow inset;
......
lms/static/sass/discussion/views/_search.scss
.forum-search { .forum-search {
@include margin-left($baseline);
display: inline-block; display: inline-block;
margin-left: $baseline;
.search-input { .search-input {
width: input-width(short); width: input-width(short);
......
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