From e255ac1f29007345781e569c2baa7f7eae3d4c88 Mon Sep 17 00:00:00 2001 From: Frances Botsford Date: Tue, 18 Feb 2014 11:14:54 -0500 Subject: [PATCH] Initial pass at LMS and Studio RTL --- cms/envs/common.py | 1 + cms/static/sass/_base.scss | 22 ++++---- cms/static/sass/_config.scss | 6 ++ cms/static/sass/elements/_header.scss | 18 +++--- cms/static/sass/elements/_icons.scss | 4 +- cms/static/sass/elements/_navigation.scss | 12 ++-- cms/static/sass/elements/_sock.scss | 10 ++-- .../sass/elements/_system-feedback.scss | 56 +++++++++---------- cms/static/sass/elements/_system-help.scss | 6 +- cms/static/sass/style-app-extend1.scss | 1 + cms/static/sass/style-app.scss | 1 + cms/static/sass/style-xmodule.scss | 1 + cms/static/sass/views/_account.scss | 10 ++-- cms/static/sass/views/_assets.scss | 14 ++--- cms/static/sass/views/_checklists.scss | 30 +++++----- cms/static/sass/views/_dashboard.scss | 22 ++++---- cms/static/sass/views/_export.scss | 6 +- cms/static/sass/views/_import.scss | 6 +- cms/static/sass/views/_outline.scss | 6 +- cms/static/sass/views/_settings.scss | 36 ++++++------ cms/static/sass/views/_static-pages.scss | 6 +- cms/static/sass/views/_textbooks.scss | 16 +++--- cms/static/sass/views/_unit.scss | 2 +- cms/static/sass/views/_updates.scss | 28 +++++----- cms/static/sass/views/_users.scss | 10 ++-- cms/templates/base.html | 11 +++- cms/templates/js/asset.underscore | 4 +- cms/templates/js/edit-chapter.underscore | 2 +- cms/templates/js/show-textbook.underscore | 2 +- cms/templates/settings.html | 4 +- cms/templates/settings_graders.html | 2 +- .../lib/xmodule/xmodule/css/capa/display.scss | 12 ++-- common/lib/xmodule/xmodule/css/tabs/tabs.scss | 2 +- common/static/sass/_mixins.scss | 42 ++++++++++++++ conf/locale/config.yaml | 1 + lms/djangoapps/courseware/tests/test_i18n.py | 2 +- lms/envs/common.py | 5 +- lms/static/sass/application-extend1.scss.mako | 1 + lms/static/sass/application-extend2.scss.mako | 1 + lms/static/sass/application.scss.mako | 1 + lms/static/sass/base/_config.scss | 7 +++ lms/static/sass/base/_mixins.scss | 27 +++++++++ lms/static/sass/base/_variables.scss | 7 +++ lms/static/sass/course/_info.scss | 2 +- lms/static/sass/course/_profile.scss | 6 +- lms/static/sass/course/base/_base.scss | 4 +- lms/static/sass/course/base/_extends.scss | 2 +- lms/static/sass/course/base/_mixins.scss | 28 +++++++++- .../sass/course/courseware/_sidebar.scss | 4 +- .../sass/course/instructor/_instructor.scss | 5 ++ .../sass/course/instructor/_instructor_2.scss | 6 +- .../course/layout/_courseware_header.scss | 8 +-- .../course/layout/_courseware_subnav.scss | 2 +- .../sass/multicourse/_course_about.scss | 4 +- lms/static/sass/multicourse/_courses.scss | 6 +- lms/static/sass/multicourse/_dashboard.scss | 13 +++-- lms/static/sass/shared/_course_object.scss | 10 ++-- lms/static/sass/shared/_header.scss | 14 ++--- lms/templates/main.html | 32 +++++++---- 59 files changed, 373 insertions(+), 236 deletions(-) create mode 100644 cms/static/sass/_config.scss create mode 100644 lms/static/sass/base/_config.scss 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'/>