diff --git a/cms/envs/common.py b/cms/envs/common.py
index 3e1cfe2f71..a2c471a180 100644
--- a/cms/envs/common.py
+++ b/cms/envs/common.py
@@ -307,6 +307,7 @@ STATICFILES_DIRS = [
# Locale/Internationalization
TIME_ZONE = 'America/New_York' # http://en.wikipedia.org/wiki/List_of_tz_zones_by_name
LANGUAGE_CODE = 'en' # http://www.i18nguy.com/unicode/language-identifiers.html
+LANGUAGES_BIDI = lms.envs.common.LANGUAGES_BIDI
LANGUAGES = lms.envs.common.LANGUAGES
LANGUAGE_DICT = dict(LANGUAGES)
diff --git a/cms/static/sass/_base.scss b/cms/static/sass/_base.scss
index 547d9b2e39..10650d8afa 100644
--- a/cms/static/sass/_base.scss
+++ b/cms/static/sass/_base.scss
@@ -279,25 +279,25 @@ p, ul, ol, dl {
@include clearfix();
.page-header {
- float: left;
width: flex-grid(6,12);
- margin-right: flex-gutter();
+ float: flip(left, right);
+ #{$margin-right}: flex-gutter();
}
.nav-actions {
position: relative;
bottom: -($baseline*0.75);
- float: right;
width: flex-grid(6,12);
- text-align: right;
+ float: flip(left, right);
+ text-align: $right;
.nav-item {
display: inline-block;
vertical-align: top;
- margin-right: ($baseline/2);
+ #{$margin-right}: ($baseline/2);
&:last-child {
- margin-right: 0;
+ #{$margin-right}: 0;
}
}
@@ -500,21 +500,21 @@ p, ul, ol, dl {
.main-column {
clear: both;
- float: left;
+ float: $left;
width: 70%;
}
.sidebar {
- float: right;
+ float: $right;
width: 28%;
}
.left {
- float: left;
+ float: $left;
}
.right {
- float: right;
+ float: $right;
}
// ====================
@@ -539,7 +539,7 @@ p, ul, ol, dl {
.item-actions {
position: absolute;
top: 5px;
- right: 5px;
+ #{$right}: 5px;
.edit-button,
.delete-button,
diff --git a/cms/static/sass/_config.scss b/cms/static/sass/_config.scss
new file mode 100644
index 0000000000..c00a518ca7
--- /dev/null
+++ b/cms/static/sass/_config.scss
@@ -0,0 +1,6 @@
+// studio - config
+// ====================
+
+// setting the layout to handle right to left languages
+// false= lang direction left to right (eg. english); true = rtl (eg. arabic)
+$rtl: false;
diff --git a/cms/static/sass/elements/_header.scss b/cms/static/sass/elements/_header.scss
index cbe02a029b..8e65dc2a8b 100644
--- a/cms/static/sass/elements/_header.scss
+++ b/cms/static/sass/elements/_header.scss
@@ -27,14 +27,14 @@
}
.wrapper-l {
- float: left;
+ float: flip(left, right);
width: flex-grid(7,12);
}
.wrapper-r {
- float: right;
+ float: flip(right, left);
width: flex-grid(4,12);
- text-align: right;
+ text-align: $right;
}
.branding, .info-course, .nav-course, .nav-account, .nav-pitch {
@@ -128,8 +128,8 @@
// specific elements - course name/info
.info-course {
- margin-right: flex-gutter();
- border-right: 1px solid $gray-l4;
+ #{$margin-right}: flex-gutter();
+ #{$border-right}: 1px solid $gray-l4;
padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0;
.course-org, .course-number {
@@ -144,7 +144,7 @@
}
.course-org {
- margin-right: ($baseline/4);
+ #{$margin-right}: ($baseline/4);
}
.course-title {
@@ -184,7 +184,7 @@
padding: ($baseline*0.75) 0;
.nav-sub {
- text-align: left;
+ text-align: $left;
}
.nav-account-help {
@@ -238,7 +238,7 @@
.branding {
width: 20%;
- margin-right: 2%;
+ #{$margin-right}: 2%;
}
.nav-account {
@@ -263,7 +263,7 @@
.branding {
width: 20%;
- margin-right: 2%;
+ #{$margin-right}: 2%;
}
.info-course {
diff --git a/cms/static/sass/elements/_icons.scss b/cms/static/sass/elements/_icons.scss
index 937366c003..1f782e8317 100644
--- a/cms/static/sass/elements/_icons.scss
+++ b/cms/static/sass/elements/_icons.scss
@@ -12,14 +12,14 @@
.icon-inline {
display: inline-block;
vertical-align: middle;
- margin-right: ($baseline/4);
+ #{$margin-right}: ($baseline/4);
}
// ui - badges
.wrapper-ui-badge {
position: absolute;
top: -1px;
- left: ($baseline*1.5);
+ #{$left}: ($baseline*1.5);
width: 100%;
}
diff --git a/cms/static/sass/elements/_navigation.scss b/cms/static/sass/elements/_navigation.scss
index 98932abb10..33569702a5 100644
--- a/cms/static/sass/elements/_navigation.scss
+++ b/cms/static/sass/elements/_navigation.scss
@@ -34,7 +34,7 @@ nav {
.ui-toggle-dd {
@include transition(all $tmg-f2 ease-in-out 0s);
- margin-left: ($baseline/10);
+ margin: 0 ($baseline/10);
display: inline-block;
vertical-align: middle;
}
@@ -148,7 +148,7 @@ nav {
}
.nav-sub {
- text-align: left;
+ text-align: $left;
// ui triangle/nub
&:after {
@@ -167,20 +167,20 @@ nav {
&.ui-right {
.wrapper-nav-sub {
- left: none;
- right: 0;
+ #{$left}: none;
+ #{$right}: 0;
}
.nav-sub {
// ui triangle/nub
&:after {
- right: $baseline;
+ #{$right}: $baseline;
margin-right: -10px;
}
&:before {
- right: $baseline;
+ #{$right}: $baseline;
margin-right: -11px;
}
}
diff --git a/cms/static/sass/elements/_sock.scss b/cms/static/sass/elements/_sock.scss
index d29077f642..8c362f971e 100644
--- a/cms/static/sass/elements/_sock.scss
+++ b/cms/static/sass/elements/_sock.scss
@@ -35,7 +35,7 @@
[class^="icon-"] {
@extend %t-icon6;
- margin-right: ($baseline/4);
+ #{$margin-right}: ($baseline/4);
}
&:hover {
@@ -84,11 +84,11 @@
@include clearfix();
.action-item {
- float: left;
- margin-right: ($baseline/2);
+ float: flip(left, right);
+ #{$margin-right}: ($baseline/2);
&:last-child {
- margin-right: 0;
+ #{$margin-right}: 0;
}
.action {
@@ -98,7 +98,7 @@
[class^="icon-"] {
@extend %t-icon4;
vertical-align: middle;
- margin-right: $baseline/4;
+ #{$margin-right}: $baseline/4;
}
diff --git a/cms/static/sass/elements/_system-feedback.scss b/cms/static/sass/elements/_system-feedback.scss
index bf9ec1b05a..93a0cfb46c 100644
--- a/cms/static/sass/elements/_system-feedback.scss
+++ b/cms/static/sass/elements/_system-feedback.scss
@@ -210,7 +210,7 @@
vertical-align: middle;
width: $baseline*17.5;
border: 4px solid $black;
- text-align: left;
+ text-align: $left;
.copy {
border-top: 4px solid $blue;
@@ -225,10 +225,10 @@
.nav-item {
display: inline-block;
- margin-right: ($baseline*0.75);
+ #{$margin-right}: ($baseline*0.75);
&:last-child {
- margin-right: 0;
+ #{$margin-right}: 0;
}
}
@@ -437,22 +437,22 @@
.copy {
width: flex-grid(7, 12);
- margin-right: flex-gutter();
+ #{$margin-right}: flex-gutter();
}
.nav-actions {
width: flex-grid(4, 12);
- float: right;
+ float: flip(left, right);
margin-top: ($baseline/4);
text-align: right;
.nav-item {
display: inline-block;
vertical-align: middle;
- margin-right: ($baseline/2);
+ #{$margin-right}: ($baseline/2);
&:last-child {
- margin-right: 0;
+ #{$margin-right}: 0;
}
}
}
@@ -610,25 +610,25 @@
width: flex-grid(1, 12);
}
- .copy {
- width: flex-grid(7, 12);
- margin-right: flex-gutter();
- }
+ .copy {
+ width: flex-grid(7, 12);
+ #{$margin-right}: flex-gutter();
+ }
- .nav-actions {
- width: flex-grid(4, 12);
- float: right;
- margin-top: ($baseline/2);
- text-align: right;
+ .nav-actions {
+ width: flex-grid(4, 12);
+ float: flip(left, right);
+ margin-top: ($baseline/2);
+ text-align: right;
- .nav-item {
- display: inline-block;
- vertical-align: middle;
- margin-right: ($baseline/2);
+ .nav-item {
+ display: inline-block;
+ vertical-align: middle;
+ #{$margin-right}: ($baseline/2);
- &:last-child {
- margin-right: 0;
- }
+ &:last-child {
+ #{$margin-right}: 0;
+ }
.action-primary {
@extend %t-action4;
@@ -829,7 +829,7 @@ body.uxdesign.alerts {
.content-primary {
@extend %ui-window;
width: flex-grid(12, 12);
- margin-right: flex-gutter();
+ #{$margin-right}: flex-gutter();
padding: $baseline ($baseline*1.5);
> section {
@@ -856,9 +856,9 @@ body.uxdesign.alerts {
}
a {
- float: left;
+ float: flip(left, right);
width: flex-grid(5, 12);
- margin-right: flex-gutter();
+ #{$margin-right}: flex-gutter();
}
}
}
@@ -882,7 +882,7 @@ body.uxdesign.alerts {
@include clearfix;
.alert-message {
- float: left;
+ float: flip(left, right);
margin: 4px 0 0 0;
color: $gray-d3;
}
@@ -892,7 +892,7 @@ body.uxdesign.alerts {
}
.alert-action {
- float: right;
+ float: flip(left, right);
&.secondary {
@include orange-button;
diff --git a/cms/static/sass/elements/_system-help.scss b/cms/static/sass/elements/_system-help.scss
index 0538bf6f7d..a35f240c60 100644
--- a/cms/static/sass/elements/_system-help.scss
+++ b/cms/static/sass/elements/_system-help.scss
@@ -24,14 +24,14 @@
@include clearfix();
.copy {
- float: left;
+ float: flip(left, right);
width: flex-grid(8,12);
- margin-right: flex-gutter();
+ #{$margin-right}: flex-gutter();
}
.nav-introduction-supplementary {
@extend %t-copy-sub2;
- float: right;
+ float: flip(right, left);
width: flex-grid(4,12);
display: block;
text-align: right;
diff --git a/cms/static/sass/style-app-extend1.scss b/cms/static/sass/style-app-extend1.scss
index 924b7c114f..981e9e226f 100644
--- a/cms/static/sass/style-app-extend1.scss
+++ b/cms/static/sass/style-app-extend1.scss
@@ -11,6 +11,7 @@
// BASE *default edX offerings*
// ====================
// base - utilities
+@import 'config';
@import 'variables';
@import 'mixins';
@import 'mixins-inherited';
diff --git a/cms/static/sass/style-app.scss b/cms/static/sass/style-app.scss
index d84d1cfd27..0ff2381a3d 100644
--- a/cms/static/sass/style-app.scss
+++ b/cms/static/sass/style-app.scss
@@ -11,6 +11,7 @@
// BASE *default edX offerings*
// ====================
// base - utilities
+@import 'config';
@import 'variables';
@import 'mixins';
@import 'mixins-inherited';
diff --git a/cms/static/sass/style-xmodule.scss b/cms/static/sass/style-xmodule.scss
index 330dca99d8..a2ff505729 100644
--- a/cms/static/sass/style-xmodule.scss
+++ b/cms/static/sass/style-xmodule.scss
@@ -11,6 +11,7 @@
// BASE *default edX offerings*
// ====================
// base - utilities
+@import 'config';
@import 'variables';
@import 'mixins';
@import 'mixins-inherited';
diff --git a/cms/static/sass/views/_account.scss b/cms/static/sass/views/_account.scss
index adf68981d7..eab6d498bc 100644
--- a/cms/static/sass/views/_account.scss
+++ b/cms/static/sass/views/_account.scss
@@ -37,7 +37,7 @@
.action {
@extend %t-action3;
position: absolute;
- right: 0;
+ #{$right}: 0;
top: 40%;
}
}
@@ -50,12 +50,10 @@
.content-primary, .content-supplementary {
@include box-sizing(border-box);
- float: left;
}
.content-primary {
- width: flex-grid(8, 12);
- margin-right: flex-gutter();
+ @extend %ui-col-wide;
form {
@include box-sizing(border-box);
@@ -211,7 +209,7 @@
}
.content-supplementary {
- width: flex-grid(4, 12);
+ @extend %ui-col-narrow;
.bit {
@extend %t-copy-sub1;
@@ -243,7 +241,7 @@
@extend %t-action3;
position: absolute;
top: 0;
- right: 0;
+ #{$right}: 0;
}
}
}
diff --git a/cms/static/sass/views/_assets.scss b/cms/static/sass/views/_assets.scss
index e1df5d107f..c61f8bd1e2 100644
--- a/cms/static/sass/views/_assets.scss
+++ b/cms/static/sass/views/_assets.scss
@@ -5,16 +5,14 @@
.content-primary, .content-supplementary {
@include box-sizing(border-box);
- float: left;
}
.content-primary {
- width: flex-grid(9, 12);
- margin-right: flex-gutter();
+ @extend %ui-col-wide;
}
.content-supplementary {
- width: flex-grid(3, 12);
+ @extend %ui-col-narrow;
}
.nav-actions {
@@ -36,10 +34,10 @@
.new-button {
@extend %t-action3;
- margin-left: $baseline;
+ #{$margin-left}: $baseline;
[class^="icon-"] {
- margin-right: ($baseline/2);
+ #{$margin-right}: ($baseline/2);
}
}
}
@@ -70,7 +68,7 @@
width: flex-grid(3, 12);
&.pagination-compact {
- text-align: right;
+ text-align: $right;
}
&.pagination-full {
@@ -136,7 +134,7 @@
.current-page {
@extend %ui-depth1;
position: absolute;
- left: -($baseline/4);
+ #{$left}: -($baseline/4);
}
.page-divider {
diff --git a/cms/static/sass/views/_checklists.scss b/cms/static/sass/views/_checklists.scss
index 8a246d49f4..d616f69f21 100644
--- a/cms/static/sass/views/_checklists.scss
+++ b/cms/static/sass/views/_checklists.scss
@@ -5,12 +5,10 @@
.content-primary, .content-supplementary {
@include box-sizing(border-box);
- float: left;
}
.content-primary {
- width: flex-grid(9, 12);
- margin-right: flex-gutter();
+ @extend %ui-col-wide;
}
// checklists - general
@@ -58,15 +56,16 @@
.checklist-title {
@include transition(color $tmg-f2 ease-in-out 0s);
width: flex-grid(6, 9);
- margin: 0 flex-gutter() 0 0;
- float: left;
+ margin: 0;
+ #{$margin-right}: flex-gutter();
+ float: flip(left, right);
.ui-toggle-expansion {
@include transition(all $tmg-f2 ease-in-out 0s);
@extend %t-action1;
display: inline-block;
vertical-align: middle;
- margin-right: ($baseline/2);
+ #{$margin-right}: ($baseline/2);
color: $gray-l4;
}
@@ -86,9 +85,9 @@
.checklist-status {
@extend %t-copy-sub1;
width: flex-grid(3, 9);
- float: right;
+ float: flip(right, left);
margin-top: ($baseline/2);
- text-align: right;
+ text-align: $right;
color: $gray-l2;
@@ -127,7 +126,7 @@
.action-primary {
@include green-button();
- float: left;
+ float: flip(left, right);
.icon-add {
@extend %t-icon7;
@@ -141,7 +140,7 @@
@include grey-button();
@extend %t-action3;
@extend %t-regular;
- float: right;
+ float: flip(right, left);
.icon-delete {
@extend %t-icon7;
@@ -227,15 +226,16 @@
.task-input {
display: inline-block;
vertical-align: text-top;
- float: left;
- margin: ($baseline/2) flex-gutter() 0 0;
+ float: flip(left, right);
+ margin-top: ($baseline/2);
+ #{$margin-right}: flex-gutter();
}
.task-details {
@extend %t-strong;
display: inline-block;
vertical-align: text-top;
- float: left;
+ float: flip(left, right);
width: flex-grid(6,9);
.task-name {
@@ -264,7 +264,7 @@
@include clearfix();
display: inline-block;
vertical-align: middle;
- float: right;
+ float: flip(right, left);
width: flex-grid(2,9);
margin: ($baseline/2) 0 0 flex-gutter();
opacity: 0.0;
@@ -336,6 +336,6 @@
}
.content-supplementary {
- width: flex-grid(3, 12);
+ @extend %ui-col-narrow;
}
}
diff --git a/cms/static/sass/views/_dashboard.scss b/cms/static/sass/views/_dashboard.scss
index 167cdde7bb..433df2c777 100644
--- a/cms/static/sass/views/_dashboard.scss
+++ b/cms/static/sass/views/_dashboard.scss
@@ -14,20 +14,18 @@
// ====================
- // basic layout
- .content-primary, .content-supplementary {
- @include box-sizing(border-box);
- float: left;
- }
+ // basic layout
+ .content-primary, .content-supplementary {
+ @include box-sizing(border-box);
+ }
- .content-primary {
- width: flex-grid(9, 12);
- margin-right: flex-gutter();
- }
+ .content-primary {
+ @extend %ui-col-wide;
+ }
- .content-supplementary {
- width: flex-grid(3, 12);
- }
+ .content-supplementary {
+ @extend %ui-col-narrow;
+ }
// ====================
diff --git a/cms/static/sass/views/_export.scss b/cms/static/sass/views/_export.scss
index 34cef96d04..0c5e9c5216 100644
--- a/cms/static/sass/views/_export.scss
+++ b/cms/static/sass/views/_export.scss
@@ -6,16 +6,14 @@
// UI: basic layout
.content-primary, .content-supplementary {
@include box-sizing(border-box);
- float: left;
}
.content-primary {
- width: flex-grid(9,12);
- margin-right: flex-gutter();
+ @extend %ui-col-wide;
}
.content-supplementary {
- width: flex-grid(3,12);
+ @extend %ui-col-narrow;
}
diff --git a/cms/static/sass/views/_import.scss b/cms/static/sass/views/_import.scss
index 106a67f00f..1355032ecb 100644
--- a/cms/static/sass/views/_import.scss
+++ b/cms/static/sass/views/_import.scss
@@ -5,16 +5,14 @@
.content-primary, .content-supplementary {
@include box-sizing(border-box);
- float: left;
}
.content-primary {
- width: flex-grid(9,12);
- margin-right: flex-gutter();
+ @extend %ui-col-wide;
}
.content-supplementary {
- width: flex-grid(3,12);
+ @extend %ui-col-narrow;
}
// UI: export controls
diff --git a/cms/static/sass/views/_outline.scss b/cms/static/sass/views/_outline.scss
index e57569ac45..e96255c153 100644
--- a/cms/static/sass/views/_outline.scss
+++ b/cms/static/sass/views/_outline.scss
@@ -70,12 +70,10 @@
.content-primary,
.content-supplementary {
@include box-sizing(border-box);
- float: left;
}
.content-primary {
- width: flex-grid(9, 12);
- margin-right: flex-gutter();
+ @extend %ui-col-wide;
.no-content {
@extend %no-content;
@@ -83,7 +81,7 @@
}
.content-supplementary {
- width: flex-grid(3, 12);
+ @extend %ui-col-narrow;
}
diff --git a/cms/static/sass/views/_settings.scss b/cms/static/sass/views/_settings.scss
index 0d22c1284f..c85e862410 100644
--- a/cms/static/sass/views/_settings.scss
+++ b/cms/static/sass/views/_settings.scss
@@ -5,13 +5,11 @@
.content-primary, .content-supplementary {
@include box-sizing(border-box);
- float: left;
}
.content-primary {
@extend %ui-window;
- width: flex-grid(9, 12);
- margin-right: flex-gutter();
+ @extend %ui-col-wide;
padding: $baseline ($baseline*1.5);
}
@@ -67,16 +65,17 @@
.title-2 {
width: flex-grid(4, 9);
- margin: 0 flex-gutter() 0 0;
- float: left;
+ margin: 0;
+ #{$margin-right}: flex-gutter();
+ float: flip(left, right);
}
.tip {
@extend %t-copy-sub2;
width: flex-grid(5, 9);
- float: right;
+ float: flip(right, left);
margin-top: ($baseline/2);
- text-align: right;
+ text-align: $right;
color: $gray-l2;
}
}
@@ -372,7 +371,7 @@
}
.field {
- float: left;
+ float: flip(left, right);
width: flex-grid(3, 9);
margin-bottom: ($baseline/4);
margin-right: flex-gutter();
@@ -384,7 +383,7 @@
.tip {
position: absolute;
top: 0;
- right: 0;
+ #{$right}: 0;
}
}
}
@@ -598,6 +597,7 @@
.grade-specific-bar {
height: 50px !important;
+ text-align: left;
}
.grades {
@@ -897,13 +897,13 @@
}
.content-supplementary {
- width: flex-grid(3, 12);
+ @extend %ui-col-narrow;
}
-
+
.wrapper-modal-window {
-
+
.validation-error-modal-content {
-
+
.error-header {
p {
strong {
@@ -911,28 +911,28 @@
}
}
}
-
+
hr {
margin: 25px 0;
}
-
+
.error-list {
.error-item {
.error-item-title {
color: $error-red;
}
-
+
.error-item-message {
width:100%;
border: none;
resize: none;
-
+
&:focus {
outline: 0;
}
}
}
- }
+ }
}
}
}
diff --git a/cms/static/sass/views/_static-pages.scss b/cms/static/sass/views/_static-pages.scss
index 2900f44ae7..97b2689198 100644
--- a/cms/static/sass/views/_static-pages.scss
+++ b/cms/static/sass/views/_static-pages.scss
@@ -203,7 +203,7 @@
position: absolute;
display: block;
top: 0;
- right: 0;
+ #{$right}: 0;
z-index: 11;
width: 35px;
height: 100%;
@@ -238,8 +238,8 @@
.component-actions,
.course-nav-item-actions {
display: inline-block;
- float: right;
- margin-right: ($baseline*2);
+ float: flip(right, left);
+ #{$margin-right}: ($baseline*2);
padding: 8px 0px;
vertical-align: middle;
text-align: center;
diff --git a/cms/static/sass/views/_textbooks.scss b/cms/static/sass/views/_textbooks.scss
index 47ca0b578e..c21160cf6e 100644
--- a/cms/static/sass/views/_textbooks.scss
+++ b/cms/static/sass/views/_textbooks.scss
@@ -5,12 +5,10 @@
.content-primary, .content-supplementary {
@include box-sizing(border-box);
- float: left;
}
.content-primary {
- width: flex-grid(9, 12);
- margin-right: flex-gutter();
+ @extend %ui-col-wide;
.no-textbook-content {
@extend %no-content;
@@ -31,7 +29,7 @@
.textbook-title {
@extend %t-title4;
@extend %t-strong;
- margin-right: ($baseline*14);
+ #{$margin-right}: ($baseline*14);
}
.ui-toggle-expansion {
@@ -85,7 +83,7 @@
opacity: 0.0;
position: absolute;
top: $baseline;
- right: $baseline;
+ #{$right}: $baseline;
.action {
display: inline-block;
@@ -305,9 +303,9 @@
display: block;
width: 46%;
border-bottom: none;
- margin: 0 ($baseline*0.75) 0 0;
+ margin: flip(0 ($baseline*0.75) 0 0, 0 0 0 ($baseline*0.75));
padding: ($baseline/4) 0 0 0;
- float: left;
+ float: $left;
position: relative;
input, textarea {
@@ -318,7 +316,7 @@
@extend %ui-btn-flat-outline;
position: absolute;
top: 3px;
- right: 0;
+ #{$right}: 0;
}
}
@@ -354,6 +352,6 @@
}
}
.content-supplementary {
- width: flex-grid(3, 12);
+ @extend %ui-col-narrow;
}
}
diff --git a/cms/static/sass/views/_unit.scss b/cms/static/sass/views/_unit.scss
index 4a3467a675..9ceb0ee843 100644
--- a/cms/static/sass/views/_unit.scss
+++ b/cms/static/sass/views/_unit.scss
@@ -3,5 +3,5 @@
// .view-unit styles will go here once we split it from container
.view-unit {
-
+
}
diff --git a/cms/static/sass/views/_updates.scss b/cms/static/sass/views/_updates.scss
index 2b29a0703c..29c4dc5df5 100644
--- a/cms/static/sass/views/_updates.scss
+++ b/cms/static/sass/views/_updates.scss
@@ -160,31 +160,31 @@
}
.course-handouts {
- @extend %ui-window;
- width: 30%;
- padding: 20px 30px;
- margin: 0;
- border-radius: 0 3px 3px 0;
- border-left: none;
- background: $lightGrey;
+ @extend %ui-window;
+ width: 30%;
+ padding: 20px 30px;
+ margin: 0;
+ border-radius: flip(0 3px 3px 0, 3px 0 0 3px);
+ #{$border-left}: none;
+ background: $lightGrey;
- .title {
- @extend %t-title4;
+ .title {
+ @extend %t-title4;
@extend %t-light;
margin-bottom: 24px;
- }
+ }
- .edit-button {
- @include white-button();
+ .edit-button {
+ @include white-button;
@extend %t-action4;
@extend %t-regular;
- float: right;
+ float: right;
padding: 3px 10px 4px;
margin-left: 7px;
.edit-icon,
.delete-icon {
- margin-right: 4px;
+ #{$margin-right}: 4px;
}
}
diff --git a/cms/static/sass/views/_users.scss b/cms/static/sass/views/_users.scss
index aa2d21b038..2108877c07 100644
--- a/cms/static/sass/views/_users.scss
+++ b/cms/static/sass/views/_users.scss
@@ -6,16 +6,14 @@
// LAYOUT: page
.content-primary, .content-supplementary {
@include box-sizing(border-box);
- float: left;
}
.content-primary {
- width: flex-grid(9, 12);
- margin-right: flex-gutter();
+ @extend %ui-col-wide;
}
.content-supplementary {
- width: flex-grid(3, 12);
+ @extend %ui-col-narrow;
}
// ELEM: content
@@ -123,7 +121,7 @@
// ELEM: item - metadata
.item-metadata {
width: flex-grid(5, 9);
- margin-right: flex-gutter();
+ #{$margin-right}: flex-gutter();
.user-username, .user-email {
display: inline-block;
@@ -134,7 +132,7 @@
@include transition(color $tmg-f2 ease-in-out 0s);
@extend %t-title4;
@extend %t-strong;
- margin: 0 ($baseline/2) ($baseline/10) 0;
+ margin: flip(0 ($baseline/2) ($baseline/10) 0, 0 0 ($baseline/10) ($baseline/2));
color: $gray-d4;
}
diff --git a/cms/templates/base.html b/cms/templates/base.html
index 11c9d320aa..77438e7fda 100644
--- a/cms/templates/base.html
+++ b/cms/templates/base.html
@@ -8,7 +8,12 @@
-
+<%
+ # This should be done someplace more central.
+ from django.utils.translation import get_language_bidi
+ dir_rtl = 'rtl' if get_language_bidi() else 'ltr'
+%>
+
@@ -35,7 +40,7 @@
<%block name="header_extras"></%block>
</head>
- <body class="<%block name='bodyclass'></%block> hide-wip lang_${LANGUAGE_CODE}">
+ <body class="${dir_rtl} <%block name='bodyclass'></%block> hide-wip lang_${LANGUAGE_CODE}">
<%block name="view_notes"></%block>
<a class="nav-skip" href="#content">${_("Skip to this view's content")}</a>
@@ -341,7 +346,7 @@
% endif
<!-- view -->
- <div class="wrapper wrapper-view">
+ <div class="wrapper wrapper-view" dir="${dir_rtl}">
<% online_help_token = self.online_help_token() if hasattr(self, 'online_help_token') else None %>
<%include file="widgets/header.html" args="online_help_token=online_help_token" />
diff --git a/cms/templates/js/asset.underscore b/cms/templates/js/asset.underscore
index e38794af77..8e86eb9594 100644
--- a/cms/templates/js/asset.underscore
+++ b/cms/templates/js/asset.underscore
@@ -14,7 +14,7 @@
<%= date_added %>
</td>
<td class="embed-col">
- <input type="text" class="embeddable-xml-input" value="<%= portable_url %>" readonly>
+ <input type="text" class="embeddable-xml-input" value="<%= portable_url %>" readonly dir="ltr">
</td>
<td class="embed-col">
<input type="text" class="embeddable-xml-input" value="<%= external_url %>" readonly>
@@ -30,4 +30,4 @@
<div class="action-button"><i class="icon-lock"></i><i class="icon-unlock-alt"></i></div>
</li>
</ul>
-</td>
\ No newline at end of file
+</td>
diff --git a/cms/templates/js/edit-chapter.underscore b/cms/templates/js/edit-chapter.underscore
index 34f42daa64..7a6e723e92 100644
--- a/cms/templates/js/edit-chapter.underscore
+++ b/cms/templates/js/edit-chapter.underscore
@@ -7,7 +7,7 @@
<div class="input-wrap field text required field-add-chapter-asset chapter<%= order %>-asset
<% if (error && error.attributes && error.attributes.asset_path) { print('error'); } %>">
<label for="chapter<%= order %>-asset-path"><%= gettext("Chapter Asset") %></label>
- <input id="chapter<%= order %>-asset-path" name="chapter<%= order %>-asset-path" class="chapter-asset-path" placeholder="<%= _.str.sprintf(gettext("path/to/introductionToCookieBaking-CH%d.pdf"), order) %>" value="<%= asset_path %>" type="text">
+ <input id="chapter<%= order %>-asset-path" name="chapter<%= order %>-asset-path" class="chapter-asset-path" placeholder="<%= _.str.sprintf(gettext("path/to/introductionToCookieBaking-CH%d.pdf"), order) %>" value="<%= asset_path %>" type="text" dir="ltr">
<span class="tip tip-stacked"><%= gettext("upload a PDF file or provide the path to a Studio asset file") %></span>
<button class="action action-upload"><%= gettext("Upload PDF") %></button>
</div>
diff --git a/cms/templates/js/show-textbook.underscore b/cms/templates/js/show-textbook.underscore
index 1767340723..db63aaeb8e 100644
--- a/cms/templates/js/show-textbook.underscore
+++ b/cms/templates/js/show-textbook.underscore
@@ -12,7 +12,7 @@
<%= chapters.length %> PDF Chapters
</a></p>
<% } else if(chapters.length === 1) { %>
- <p>
+ <p dir="ltr">
<%= chapters.at(0).get("asset_path") %>
</p>
<% } %>
diff --git a/cms/templates/settings.html b/cms/templates/settings.html
index bbeaad3d90..905ff06601 100644
--- a/cms/templates/settings.html
+++ b/cms/templates/settings.html
@@ -261,7 +261,7 @@ require(["domReady!", "jquery", "js/models/settings/course_details", "js/views/s
<div class="wrapper-input">
<div class="input">
- <input type="text" class="long new-course-image-url" id="course-image-url" value="" placeholder="Your course image URL" autocomplete="off" />
+ <input type="text" dir="ltr" class="long new-course-image-url" id="course-image-url" value="" placeholder="Your course image URL" autocomplete="off" />
<span class="tip tip-stacked">${_("Please provide a valid path and name to your course image (Note: only JPEG or PNG format supported)")}</span>
</div>
<button type="button" class="action action-upload-image">${_("Upload Course Image")}</button>
@@ -281,7 +281,7 @@ require(["domReady!", "jquery", "js/models/settings/course_details", "js/views/s
</div>
<div class="input">
- <input type="text" class="long new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="your YouTube video's ID" autocomplete="off" />
+ <input type="text" dir="ltr" class="long new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="your YouTube video's ID" autocomplete="off" />
<span class="tip tip-stacked">${_("Enter your YouTube video's ID (along with any restriction parameters)")}</span>
</div>
</li>
diff --git a/cms/templates/settings_graders.html b/cms/templates/settings_graders.html
index c8687b1a8c..9c26972bb4 100644
--- a/cms/templates/settings_graders.html
+++ b/cms/templates/settings_graders.html
@@ -63,7 +63,7 @@ require(["domReady!", "jquery", "js/views/settings/grading", "js/models/settings
<li class="field" id="field-course-grading-range">
<div class="grade-controls course-grading-range well">
<a href="#" class="new-grade-button"><span class="plus-icon"></span></a>
- <div class="grade-slider">
+ <div class="grade-slider" dir="ltr">
<div class="grade-bar">
<ol class="increments">
<li class="increment-0">0</li>
diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss
index d9db33cb99..4d2f141bd3 100644
--- a/common/lib/xmodule/xmodule/css/capa/display.scss
+++ b/common/lib/xmodule/xmodule/css/capa/display.scss
@@ -81,23 +81,23 @@ div.problem {
}
.indicator_container {
- float: left;
+ float: flip(left, right);
width: 25px;
height: 1px;
- margin-right: 15px;
+ #{$margin-right}: 15px;
}
fieldset {
@include box-sizing(border-box);
margin: 0px 0px $baseline;
- padding-left: $baseline;
- border-left: 1px solid #ddd;
+ #{$padding-left}: $baseline;
+ #{$border-left}: 1px solid #ddd;
}
input[type="radio"],
input[type="checkbox"] {
- float: left;
- margin: 4px 8px 0 0;
+ float: flip(left, right);
+ margin: flip(4px 8px 0 0, 4px 0 0 8px);
}
text {
diff --git a/common/lib/xmodule/xmodule/css/tabs/tabs.scss b/common/lib/xmodule/xmodule/css/tabs/tabs.scss
index 3dd0440160..bca3f3ef5e 100644
--- a/common/lib/xmodule/xmodule/css/tabs/tabs.scss
+++ b/common/lib/xmodule/xmodule/css/tabs/tabs.scss
@@ -23,7 +23,7 @@
.edit-header {
@include box-sizing(border-box);
- padding: 18px 0 18px $baseline;
+ padding: 18px $baseline;
top: 0 !important; // ugly override for second level tab override
right: 0;
background-color: $blue;
diff --git a/common/static/sass/_mixins.scss b/common/static/sass/_mixins.scss
index ff3e1a56ad..55d61c4ab9 100644
--- a/common/static/sass/_mixins.scss
+++ b/common/static/sass/_mixins.scss
@@ -1,6 +1,34 @@
// studio - utilities - mixins and extends
// ====================
+// right to left mixins and variables
+// thanks to https://gist.github.com/Integralist/7269907
+@function flip($value_ltr, $value_rtl) {
+ @if $rtl { @return $value_rtl; }
+ @else { @return $value_ltr; }
+}
+
+$padding-left: padding-left;
+$padding-right: padding-right;
+$margin-left: margin-left;
+$margin-right: margin-right;
+$border-left: border-left;
+$border-right: border-right;
+$left: left;
+$right: right;
+
+@if $rtl {
+ $padding-left: padding-right;
+ $padding-right: padding-left;
+ $margin-left: margin-right;
+ $margin-right: margin-left;
+ $border-left: border-right;
+ $border-right: border-left;
+ $left: right;
+ $right: left;
+}
+
+
// mixins - font sizing
@mixin font-size($sizeValue: 16){
font-size: $sizeValue + px;
@@ -87,6 +115,20 @@
width: 100%;
}
+// layout placeholders
+%ui-col-wide {
+ width: flex-grid(9, 12);
+ #{$margin-right}: flex-gutter();
+ float: flip(left, right);
+}
+
+%ui-col-narrow {
+ width: flex-grid(3, 12);
+ float: flip(left, right);
+}
+
+
+
// extends - UI - window
%ui-window {
@include clearfix();
diff --git a/conf/locale/config.yaml b/conf/locale/config.yaml
index f833ef8664..38d4947aa8 100644
--- a/conf/locale/config.yaml
+++ b/conf/locale/config.yaml
@@ -86,6 +86,7 @@ locales:
dummy_locales:
- eo
- fake2
+ - en@rtl
# Directories we don't search for strings.
ignore_dirs:
diff --git a/lms/djangoapps/courseware/tests/test_i18n.py b/lms/djangoapps/courseware/tests/test_i18n.py
index 22331c4399..88843689cb 100644
--- a/lms/djangoapps/courseware/tests/test_i18n.py
+++ b/lms/djangoapps/courseware/tests/test_i18n.py
@@ -17,7 +17,7 @@ class I18nTestCase(TestCase):
self.assertIn('<html lang="en">', response.content)
self.assertEqual(response['Content-Language'], 'en')
self.assertTrue(re.search('<body.*class=".*lang_en">', response.content))
-
+
def test_esperanto(self):
response = self.client.get('/', HTTP_ACCEPT_LANGUAGE='eo')
self.assertIn('<html lang="eo">', response.content)
diff --git a/lms/envs/common.py b/lms/envs/common.py
index 755dd8ef3d..ca8eb6247f 100644
--- a/lms/envs/common.py
+++ b/lms/envs/common.py
@@ -671,11 +671,14 @@ FAVICON_PATH = 'images/favicon.ico'
# Locale/Internationalization
TIME_ZONE = 'America/New_York' # http://en.wikipedia.org/wiki/List_of_tz_zones_by_name
LANGUAGE_CODE = 'en' # http://www.i18nguy.com/unicode/language-identifiers.html
+# these languages display right to left
+LANGUAGES_BIDI = ("en@rtl", "he", "ar", "fa")
# Sourced from http://www.localeplanet.com/icu/ and wikipedia
LANGUAGES = (
('en', u'English'),
- ('eo', u'Dummy Language (Esperanto)'), # Dummy language used for testing
+ ('en@rtl', u'English (right-to-left)'),
+ ('eo', u'Dummy Language (Esperanto)'), # Dummy languaged used for testing
('fake2', u'Fake translations'), # Another dummy language for testing (not pushed to prod)
('am', u'አማርኛ'), # Amharic
diff --git a/lms/static/sass/application-extend1.scss.mako b/lms/static/sass/application-extend1.scss.mako
index 88af68783f..ead0570306 100644
--- a/lms/static/sass/application-extend1.scss.mako
+++ b/lms/static/sass/application-extend1.scss.mako
@@ -12,6 +12,7 @@
// base - utilities
@import 'base/reset';
+@import 'base/config';
@import 'base/variables';
@import 'base/mixins';
diff --git a/lms/static/sass/application-extend2.scss.mako b/lms/static/sass/application-extend2.scss.mako
index d3094326d0..5a086c934f 100644
--- a/lms/static/sass/application-extend2.scss.mako
+++ b/lms/static/sass/application-extend2.scss.mako
@@ -12,6 +12,7 @@
// base - utilities
@import 'base/reset';
+@import 'base/config';
@import 'base/variables';
@import 'base/mixins';
diff --git a/lms/static/sass/application.scss.mako b/lms/static/sass/application.scss.mako
index 5365ec52ac..041f9b02b0 100644
--- a/lms/static/sass/application.scss.mako
+++ b/lms/static/sass/application.scss.mako
@@ -11,6 +11,7 @@
// base - utilities
@import 'base/reset';
+@import 'base/config';
@import 'base/variables';
@import 'base/mixins';
diff --git a/lms/static/sass/base/_config.scss b/lms/static/sass/base/_config.scss
new file mode 100644
index 0000000000..df6dbdda08
--- /dev/null
+++ b/lms/static/sass/base/_config.scss
@@ -0,0 +1,7 @@
+// lms - config
+// ====================
+// TODO: make the RTL variable work here for LMS and xmodules
+// setting the layout to handle right to left languages
+// false= lang direction left to right (eg. english); true = rtl (eg. arabic)
+//$rtl: true;
+// does not work here - is in LMS variables
diff --git a/lms/static/sass/base/_mixins.scss b/lms/static/sass/base/_mixins.scss
index f6cbd3ce5f..42af15e675 100644
--- a/lms/static/sass/base/_mixins.scss
+++ b/lms/static/sass/base/_mixins.scss
@@ -1,6 +1,33 @@
// lms - utilities - mixins and extends
// ====================
+// right to left mixins and variables
+// thanks to https://gist.github.com/Integralist/7269907
+@function flip($value_ltr, $value_rtl) {
+ @if $rtl { @return $value_rtl; }
+ @else { @return $value_ltr; }
+}
+
+$padding-left: padding-left;
+$padding-right: padding-right;
+$margin-left: margin-left;
+$margin-right: margin-right;
+$border-left: border-left;
+$border-right: border-right;
+$left: left;
+$right: right;
+
+@if $rtl {
+ $padding-left: padding-right;
+ $padding-right: padding-left;
+ $margin-left: margin-right;
+ $margin-right: margin-left;
+ $border-left: border-right;
+ $border-right: border-left;
+ $left: right;
+ $right: left;
+}
+
// mixins - font sizing
@mixin font-size($sizeValue: 16){
font-size: $sizeValue + px;
diff --git a/lms/static/sass/base/_variables.scss b/lms/static/sass/base/_variables.scss
index 2cb199f4c7..e6756c98d8 100644
--- a/lms/static/sass/base/_variables.scss
+++ b/lms/static/sass/base/_variables.scss
@@ -1,3 +1,10 @@
+// lms variables
+
+// setting the layout to handle right to left languages
+// false= lang direction left to right (eg. english); true = rtl (eg. arabic)
+$rtl: false;
+
+
// base
$baseline: 20px;
diff --git a/lms/static/sass/course/_info.scss b/lms/static/sass/course/_info.scss
index eaea329131..bfb5438107 100644
--- a/lms/static/sass/course/_info.scss
+++ b/lms/static/sass/course/_info.scss
@@ -80,7 +80,7 @@ div.info-wrapper {
section.handouts {
@extend .sidebar;
border-radius: 0 4px 4px 0;
- border-left: 1px solid #ddd;
+ #{$border-left}: 1px solid #ddd;
box-shadow: none;
font-size: 14px;
diff --git a/lms/static/sass/course/_profile.scss b/lms/static/sass/course/_profile.scss
index fc1253f915..26a90fabc8 100644
--- a/lms/static/sass/course/_profile.scss
+++ b/lms/static/sass/course/_profile.scss
@@ -141,7 +141,7 @@
margin-bottom: lh();
h1 {
- float: left;
+ float: $left;
font-size: 1em;
font-weight: 100;
margin: 0;
@@ -188,7 +188,7 @@
}
h2 {
- border-right: 1px dashed #ddd;
+ #{$border-right}: 1px dashed #ddd;
@include box-sizing(border-box);
display: table-cell;
letter-spacing: 0;
@@ -201,7 +201,7 @@
.sections {
display: table-cell;
- padding-left: flex-gutter(9);
+ #{$padding-left}: flex-gutter(9);
width: flex-grid(7, 9);
> div {
diff --git a/lms/static/sass/course/base/_base.scss b/lms/static/sass/course/base/_base.scss
index 0363936c8c..c9fd7e4dbe 100644
--- a/lms/static/sass/course/base/_base.scss
+++ b/lms/static/sass/course/base/_base.scss
@@ -6,7 +6,7 @@ body {
}
body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a, label {
- text-align: left;
+ text-align: $left;
font-family: $sans-serif;
}
@@ -49,7 +49,7 @@ form {
form.choicegroup {
label {
clear: both;
- float: left;
+ float: $left;
}
}
diff --git a/lms/static/sass/course/base/_extends.scss b/lms/static/sass/course/base/_extends.scss
index b9fa8f7ef6..934e9e45d1 100644
--- a/lms/static/sass/course/base/_extends.scss
+++ b/lms/static/sass/course/base/_extends.scss
@@ -1,6 +1,6 @@
h1.top-header {
border-bottom: 1px solid $border-color-2;
- text-align: left;
+ text-align: $left;
font-size: em(24);
font-weight: 100;
padding-bottom: lh();
diff --git a/lms/static/sass/course/base/_mixins.scss b/lms/static/sass/course/base/_mixins.scss
index 766b656afb..dd8b98eea5 100644
--- a/lms/static/sass/course/base/_mixins.scss
+++ b/lms/static/sass/course/base/_mixins.scss
@@ -1,3 +1,29 @@
+// right to left mixins and variables
+@function flip($value_ltr, $value_rtl) {
+ @if $rtl { @return $value_rtl; }
+ @else { @return $value_ltr; }
+}
+
+$padding-left: padding-left;
+$padding-right: padding-right;
+$margin-left: margin-left;
+$margin-right: margin-right;
+$border-left: border-left;
+$border-right: border-right;
+$left: left;
+$right: right;
+
+@if $rtl {
+ $padding-left: padding-right;
+ $padding-right: padding-left;
+ $margin-left: margin-right;
+ $margin-right: margin-left;
+ $border-left: border-right;
+ $border-right: border-left;
+ $left: right;
+ $right: left;
+}
+
@mixin blue-button {
display: block;
height: 35px;
@@ -54,4 +80,4 @@
&:hover, &:focus {
background: -webkit-linear-gradient(top, #888, #666);
}
-}
\ No newline at end of file
+}
diff --git a/lms/static/sass/course/courseware/_sidebar.scss b/lms/static/sass/course/courseware/_sidebar.scss
index 12588657b3..716b084d90 100644
--- a/lms/static/sass/course/courseware/_sidebar.scss
+++ b/lms/static/sass/course/courseware/_sidebar.scss
@@ -1,8 +1,8 @@
.course-index {
@extend .sidebar;
@extend .tran;
- border-radius: 3px 0 0 3px;
- border-right: 1px solid $border-color-2;
+ border-radius: flip(3px 0 0 3px, 0 3px 3px 0);
+ #{$border-right}: 1px solid $border-color-2;
#open_close_accordion {
display: none;
diff --git a/lms/static/sass/course/instructor/_instructor.scss b/lms/static/sass/course/instructor/_instructor.scss
index 03211f7b45..278c36bd13 100644
--- a/lms/static/sass/course/instructor/_instructor.scss
+++ b/lms/static/sass/course/instructor/_instructor.scss
@@ -185,3 +185,8 @@
}
+.rtl .instructor-dashboard-wrapper .beta-button-wrapper,
+.rtl .instructor-dashboard-wrapper .studio-edit-link {
+ left: 2em;
+ right: auto;
+}
diff --git a/lms/static/sass/course/instructor/_instructor_2.scss b/lms/static/sass/course/instructor/_instructor_2.scss
index 7ae6a4fc6e..9bc7d3f227 100644
--- a/lms/static/sass/course/instructor/_instructor_2.scss
+++ b/lms/static/sass/course/instructor/_instructor_2.scss
@@ -785,7 +785,6 @@ section.instructor-dashboard-content-2 {
.info {
@include box-sizing(border-box);
padding: ($baseline/2);
-
border: 1px solid $light-gray;
color: $lighter-base-font-color;
line-height: 1.3em;
@@ -1621,3 +1620,8 @@ input[name="subject"] {
}
}
+.rtl .instructor-dashboard-wrapper-2 .olddash-button-wrapper,
+.rtl .instructor-dashboard-wrapper-2 .studio-edit-link {
+ left: 2em;
+ right: auto;
+}
diff --git a/lms/static/sass/course/layout/_courseware_header.scss b/lms/static/sass/course/layout/_courseware_header.scss
index 7b60475182..288d3a50e1 100644
--- a/lms/static/sass/course/layout/_courseware_header.scss
+++ b/lms/static/sass/course/layout/_courseware_header.scss
@@ -19,7 +19,7 @@ nav.course-material {
margin-left: 10px;
li {
- float: left;
+ float: $left;
list-style: none;
margin-right: 6px;
@@ -120,7 +120,7 @@ header.global.slim {
h1.logo {
margin: 0 10px 0 13px;
- padding-right: 20px;
+ #{$padding-right}: 20px;
&:before {
@extend %faded-vertical-divider;
@@ -128,7 +128,7 @@ header.global.slim {
display: block;
height: 35px;
position: absolute;
- right: 3px;
+ #{$right}: 3px;
top: 0;
width: 1px;
}
@@ -156,7 +156,7 @@ header.global.slim {
h2 {
display: block;
width: 700px;
- float: left;
+ float: flip(left, right);
font-size: 0.9em;
font-weight: 600;
color: $lighter-base-font-color;
diff --git a/lms/static/sass/course/layout/_courseware_subnav.scss b/lms/static/sass/course/layout/_courseware_subnav.scss
index eaffa28668..2fbb149bf8 100644
--- a/lms/static/sass/course/layout/_courseware_subnav.scss
+++ b/lms/static/sass/course/layout/_courseware_subnav.scss
@@ -18,7 +18,7 @@ nav.course-material {
padding: 10px 0 0 0;
li {
- float: left;
+ float: $left;
list-style: none;
a {
diff --git a/lms/static/sass/multicourse/_course_about.scss b/lms/static/sass/multicourse/_course_about.scss
index b6188b300e..e7446be9be 100644
--- a/lms/static/sass/multicourse/_course_about.scss
+++ b/lms/static/sass/multicourse/_course_about.scss
@@ -295,7 +295,7 @@
}
.details {
- float: left;
+ float: flip(left, right);
margin-right: flex-gutter();
width: flex-grid(8);
font: normal 1em/1.6em $serif;
@@ -384,7 +384,7 @@
.course-sidebar {
@include box-sizing(border-box);
- float: left;
+ float: flip(left, right);
width: flex-grid(4);
> section {
diff --git a/lms/static/sass/multicourse/_courses.scss b/lms/static/sass/multicourse/_courses.scss
index fe4c4d62a1..be433464c3 100644
--- a/lms/static/sass/multicourse/_courses.scss
+++ b/lms/static/sass/multicourse/_courses.scss
@@ -42,14 +42,14 @@
.logo {
display: inline-block;
+ #{$border-right}: 1px solid $light-gray;
height: 80px;
- margin-right: 30px;
- padding-right: 30px;
+ #{$margin-right}: 30px;
+ #{$padding-right}: 30px;
position: relative;
vertical-align: middle;
&::after {
- @extend %faded-vertical-divider;
content: "";
display: block;
height: 80px;
diff --git a/lms/static/sass/multicourse/_dashboard.scss b/lms/static/sass/multicourse/_dashboard.scss
index 50be4fc573..9438440050 100644
--- a/lms/static/sass/multicourse/_dashboard.scss
+++ b/lms/static/sass/multicourse/_dashboard.scss
@@ -6,8 +6,9 @@
padding: ($baseline*2) 0 0 0;
.profile-sidebar {
- float: left;
- margin-right: flex-gutter();
+ background: transparent;
+ float: flip(left, right);
+ #{$margin-right}: flex-gutter();
width: flex-grid(3);
background: transparent;
box-shadow: 0 0 1px $shadow-l1;
@@ -278,7 +279,7 @@
// course listings
.my-courses {
- float: left;
+ float: flip(left, right);
margin: 0px;
width: flex-grid(9);
@@ -355,7 +356,7 @@
@include transition(all 0.15s linear 0s);
overflow: hidden;
position: relative;
- float: left;
+ float: flip(left, right);
height: 100%;
max-height: 100%;
width: 200px;
@@ -374,7 +375,7 @@
.info {
@include clearfix;
- padding: 0 10px 0 230px;
+ padding: flip(0 10px 0 230px, 0 230px 0 10px);
> hgroup {
padding: 0;
@@ -393,7 +394,7 @@
.date-block {
position: absolute;
top: 0;
- right: 0;
+ #{$right}: 0;
font-family: $sans-serif;
font-size: 13px;
font-style: italic;
diff --git a/lms/static/sass/shared/_course_object.scss b/lms/static/sass/shared/_course_object.scss
index b234086e1d..edaa3d6ac6 100644
--- a/lms/static/sass/shared/_course_object.scss
+++ b/lms/static/sass/shared/_course_object.scss
@@ -5,11 +5,11 @@
.university-column {
width: flex-grid(4);
- margin-right: flex-gutter();
+ #{$margin-right}t: flex-gutter();
float: left;
&:nth-child(3n+3) {
- margin-right: 0;
+ #{$margin-right}: 0;
}
}
@@ -21,11 +21,11 @@
.courses-listing-item {
width: flex-grid(4);
- margin-right: flex-gutter();
- float: left;
+ #{$margin-right}: flex-gutter();
+ float: flip(left, right);
&:nth-child(3n+3) {
- margin-right: 0;
+ #{$margin-right}: 0;
}
}
}
diff --git a/lms/static/sass/shared/_header.scss b/lms/static/sass/shared/_header.scss
index 912f1e81a8..66297d1648 100644
--- a/lms/static/sass/shared/_header.scss
+++ b/lms/static/sass/shared/_header.scss
@@ -17,8 +17,8 @@ header.global {
}
h1.logo {
- float: left;
- margin: -2px 39px 0px 0px;
+ float: flip(left, right);
+ margin: flip(-2px 39px 0 0, -2px 0 0 39px);
position: relative;
a {
@@ -27,11 +27,11 @@ header.global {
}
.left {
- float: left;
+ float: flip(left, right);
}
.guest {
- float: right;
+ float: flip(right, left);
}
> li {
@@ -104,7 +104,7 @@ header.global {
}
.user {
- float: right;
+ float: flip(right,left);
margin-top: 4px;
> .primary {
@@ -194,7 +194,7 @@ header.global {
height: 0px;
position: absolute;
@include transform(rotate(-45deg));
- right: 12px;
+ #{$right}: 12px;
top: -6px;
width: 0px;
}
@@ -279,7 +279,7 @@ header.global {
}
.nav-courseware {
- float: right;
+ float: $right;
margin-top: ($baseline/4);
list-style: none;
diff --git a/lms/templates/main.html b/lms/templates/main.html
index 68573776ff..adbae61990 100644
--- a/lms/templates/main.html
+++ b/lms/templates/main.html
@@ -3,7 +3,12 @@
<!--[if IE 8]><html class="ie ie8 lte9 lte8" lang="${LANGUAGE_CODE}"><![endif]-->
<!--[if IE 9]><html class="ie ie9 lte9" lang="${LANGUAGE_CODE}"><![endif]-->
<!--[if gt IE 9]><!--><html lang="${LANGUAGE_CODE}"><!--<![endif]-->
-<head>
+<%
+ # This should be done someplace more central.
+ from django.utils.translation import get_language_bidi
+ dir_rtl = 'rtl' if get_language_bidi() else 'ltr'
+%>
+<head dir="${dir_rtl}">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<%! from django.utils.translation import ugettext as _ %>
@@ -117,20 +122,27 @@
</head>
-<body class="<%block name='bodyclass'/> lang_${LANGUAGE_CODE}">
- <a class="nav-skip" href="<%block name="nav_skip">#content</%block>">${_("Skip to this view's content")}</a>
+<body class="${dir_rtl} <%block name='bodyclass'/> lang_${LANGUAGE_CODE}">
+ <div class="window-wrap" dir="${dir_rtl}">
+ <a class="nav-skip" href="<%block name="nav_skip">#content</%block>">${_("Skip to this view's content")}</a>
- <%include file="mathjax_accessible.html" />
+ <%include file="mathjax_accessible.html" />
- <%include file="${header_file}" />
+ % if not suppress_toplevel_navigation:
+ <%include file="${header_file}" />
+ %endif
+
+ <div class="content-wrapper" id="content">
+ ${self.body()}
+ <%block name="bodyextra"/>
+ </div>
+
+ % if not suppress_toplevel_navigation:
+ <%include file="${footer_file}" />
+ % endif
- <div class="content-wrapper" id="content">
- ${self.body()}
- <%block name="bodyextra"/>
</div>
- <%include file="${footer_file}" />
-
<script>window.baseUrl = "${settings.STATIC_URL}";</script>
% if not disable_courseware_js:
<%static:js group='application'/>