Skip to content

E
edx-platform
Commit e255ac1f by Frances Botsford
Options

Initial pass at LMS and Studio RTL

parent f0b7850d
Showing with 374 additions and 239 deletions
cms/envs/common.py
...@@ -307,6 +307,7 @@ STATICFILES_DIRS = [ ...@@ -307,6 +307,7 @@ STATICFILES_DIRS = [
# Locale/Internationalization # Locale/Internationalization
TIME_ZONE = 'America/New_York' # http://en.wikipedia.org/wiki/List_of_tz_zones_by_name 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 LANGUAGE_CODE = 'en' # http://www.i18nguy.com/unicode/language-identifiers.html
LANGUAGES_BIDI = lms.envs.common.LANGUAGES_BIDI
LANGUAGES = lms.envs.common.LANGUAGES LANGUAGES = lms.envs.common.LANGUAGES
LANGUAGE_DICT = dict(LANGUAGES) LANGUAGE_DICT = dict(LANGUAGES)
......
cms/static/sass/_base.scss
...@@ -279,25 +279,25 @@ p, ul, ol, dl { ...@@ -279,25 +279,25 @@ p, ul, ol, dl {
@include clearfix(); @include clearfix();
.page-header { .page-header {
float: left;
width: flex-grid(6,12); width: flex-grid(6,12);
margin-right: flex-gutter(); float: flip(left, right);
#{$margin-right}: flex-gutter();
} }
.nav-actions { .nav-actions {
position: relative; position: relative;
bottom: -($baseline*0.75); bottom: -($baseline*0.75);
float: right;
width: flex-grid(6,12); width: flex-grid(6,12);
text-align: right; float: flip(left, right);
text-align: $right;
.nav-item { .nav-item {
display: inline-block; display: inline-block;
vertical-align: top; vertical-align: top;
margin-right: ($baseline/2); #{$margin-right}: ($baseline/2);
&:last-child { &:last-child {
margin-right: 0; #{$margin-right}: 0;
} }
} }
...@@ -500,21 +500,21 @@ p, ul, ol, dl { ...@@ -500,21 +500,21 @@ p, ul, ol, dl {
.main-column { .main-column {
clear: both; clear: both;
float: left; float: $left;
width: 70%; width: 70%;
} }
.sidebar { .sidebar {
float: right; float: $right;
width: 28%; width: 28%;
} }
.left { .left {
float: left; float: $left;
} }
.right { .right {
float: right; float: $right;
} }
// ==================== // ====================
...@@ -539,7 +539,7 @@ p, ul, ol, dl { ...@@ -539,7 +539,7 @@ p, ul, ol, dl {
.item-actions { .item-actions {
position: absolute; position: absolute;
top: 5px; top: 5px;
right: 5px; #{$right}: 5px;
.edit-button, .edit-button,
.delete-button, .delete-button,
......
cms/static/sass/_config.scss 0 → 100644
// 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;
cms/static/sass/elements/_header.scss
...@@ -27,14 +27,14 @@ ...@@ -27,14 +27,14 @@
} }
.wrapper-l { .wrapper-l {
float: left; float: flip(left, right);
width: flex-grid(7,12); width: flex-grid(7,12);
} }
.wrapper-r { .wrapper-r {
float: right; float: flip(right, left);
width: flex-grid(4,12); width: flex-grid(4,12);
text-align: right; text-align: $right;
} }
.branding, .info-course, .nav-course, .nav-account, .nav-pitch { .branding, .info-course, .nav-course, .nav-account, .nav-pitch {
...@@ -128,8 +128,8 @@ ...@@ -128,8 +128,8 @@
// specific elements - course name/info // specific elements - course name/info
.info-course { .info-course {
margin-right: flex-gutter(); #{$margin-right}: flex-gutter();
border-right: 1px solid $gray-l4; #{$border-right}: 1px solid $gray-l4;
padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0; padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0;
.course-org, .course-number { .course-org, .course-number {
...@@ -144,7 +144,7 @@ ...@@ -144,7 +144,7 @@
} }
.course-org { .course-org {
margin-right: ($baseline/4); #{$margin-right}: ($baseline/4);
} }
.course-title { .course-title {
...@@ -184,7 +184,7 @@ ...@@ -184,7 +184,7 @@
padding: ($baseline*0.75) 0; padding: ($baseline*0.75) 0;
.nav-sub { .nav-sub {
text-align: left; text-align: $left;
} }
.nav-account-help { .nav-account-help {
...@@ -238,7 +238,7 @@ ...@@ -238,7 +238,7 @@
.branding { .branding {
width: 20%; width: 20%;
margin-right: 2%; #{$margin-right}: 2%;
} }
.nav-account { .nav-account {
...@@ -263,7 +263,7 @@ ...@@ -263,7 +263,7 @@
.branding { .branding {
width: 20%; width: 20%;
margin-right: 2%; #{$margin-right}: 2%;
} }
.info-course { .info-course {
......
cms/static/sass/elements/_icons.scss
...@@ -12,14 +12,14 @@ ...@@ -12,14 +12,14 @@
.icon-inline { .icon-inline {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-right: ($baseline/4); #{$margin-right}: ($baseline/4);
} }
// ui - badges // ui - badges
.wrapper-ui-badge { .wrapper-ui-badge {
position: absolute; position: absolute;
top: -1px; top: -1px;
left: ($baseline*1.5); #{$left}: ($baseline*1.5);
width: 100%; width: 100%;
} }
......
cms/static/sass/elements/_navigation.scss
...@@ -34,7 +34,7 @@ nav { ...@@ -34,7 +34,7 @@ nav {
.ui-toggle-dd { .ui-toggle-dd {
@include transition(all $tmg-f2 ease-in-out 0s); @include transition(all $tmg-f2 ease-in-out 0s);
margin-left: ($baseline/10); margin: 0 ($baseline/10);
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
...@@ -148,7 +148,7 @@ nav { ...@@ -148,7 +148,7 @@ nav {
} }
.nav-sub { .nav-sub {
text-align: left; text-align: $left;
// ui triangle/nub // ui triangle/nub
&:after { &:after {
...@@ -167,20 +167,20 @@ nav { ...@@ -167,20 +167,20 @@ nav {
&.ui-right { &.ui-right {
.wrapper-nav-sub { .wrapper-nav-sub {
left: none; #{$left}: none;
right: 0; #{$right}: 0;
} }
.nav-sub { .nav-sub {
// ui triangle/nub // ui triangle/nub
&:after { &:after {
right: $baseline; #{$right}: $baseline;
margin-right: -10px; margin-right: -10px;
} }
&:before { &:before {
right: $baseline; #{$right}: $baseline;
margin-right: -11px; margin-right: -11px;
} }
} }
......
cms/static/sass/elements/_sock.scss
...@@ -35,7 +35,7 @@ ...@@ -35,7 +35,7 @@
[class^="icon-"] { [class^="icon-"] {
@extend %t-icon6; @extend %t-icon6;
margin-right: ($baseline/4); #{$margin-right}: ($baseline/4);
} }
&:hover { &:hover {
...@@ -84,11 +84,11 @@ ...@@ -84,11 +84,11 @@
@include clearfix(); @include clearfix();
.action-item { .action-item {
float: left; float: flip(left, right);
margin-right: ($baseline/2); #{$margin-right}: ($baseline/2);
&:last-child { &:last-child {
margin-right: 0; #{$margin-right}: 0;
} }
.action { .action {
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
[class^="icon-"] { [class^="icon-"] {
@extend %t-icon4; @extend %t-icon4;
vertical-align: middle; vertical-align: middle;
margin-right: $baseline/4; #{$margin-right}: $baseline/4;
} }
......
cms/static/sass/elements/_system-feedback.scss
...@@ -210,7 +210,7 @@ ...@@ -210,7 +210,7 @@
vertical-align: middle; vertical-align: middle;
width: $baseline*17.5; width: $baseline*17.5;
border: 4px solid $black; border: 4px solid $black;
text-align: left; text-align: $left;
.copy { .copy {
border-top: 4px solid $blue; border-top: 4px solid $blue;
...@@ -225,10 +225,10 @@ ...@@ -225,10 +225,10 @@
.nav-item { .nav-item {
display: inline-block; display: inline-block;
margin-right: ($baseline*0.75); #{$margin-right}: ($baseline*0.75);
&:last-child { &:last-child {
margin-right: 0; #{$margin-right}: 0;
} }
} }
...@@ -437,22 +437,22 @@ ...@@ -437,22 +437,22 @@
.copy { .copy {
width: flex-grid(7, 12); width: flex-grid(7, 12);
margin-right: flex-gutter(); #{$margin-right}: flex-gutter();
} }
.nav-actions { .nav-actions {
width: flex-grid(4, 12); width: flex-grid(4, 12);
float: right; float: flip(left, right);
margin-top: ($baseline/4); margin-top: ($baseline/4);
text-align: right; text-align: right;
.nav-item { .nav-item {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-right: ($baseline/2); #{$margin-right}: ($baseline/2);
&:last-child { &:last-child {
margin-right: 0; #{$margin-right}: 0;
} }
} }
} }
...@@ -610,25 +610,25 @@ ...@@ -610,25 +610,25 @@
width: flex-grid(1, 12); width: flex-grid(1, 12);
} }
.copy { .copy {
width: flex-grid(7, 12); width: flex-grid(7, 12);
margin-right: flex-gutter(); #{$margin-right}: flex-gutter();
} }
.nav-actions { .nav-actions {
width: flex-grid(4, 12); width: flex-grid(4, 12);
float: right; float: flip(left, right);
margin-top: ($baseline/2); margin-top: ($baseline/2);
text-align: right; text-align: right;
.nav-item { .nav-item {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-right: ($baseline/2); #{$margin-right}: ($baseline/2);
&:last-child { &:last-child {
margin-right: 0; #{$margin-right}: 0;
} }
.action-primary { .action-primary {
@extend %t-action4; @extend %t-action4;
...@@ -829,7 +829,7 @@ body.uxdesign.alerts { ...@@ -829,7 +829,7 @@ body.uxdesign.alerts {
.content-primary { .content-primary {
@extend %ui-window; @extend %ui-window;
width: flex-grid(12, 12); width: flex-grid(12, 12);
margin-right: flex-gutter(); #{$margin-right}: flex-gutter();
padding: $baseline ($baseline*1.5); padding: $baseline ($baseline*1.5);
> section { > section {
...@@ -856,9 +856,9 @@ body.uxdesign.alerts { ...@@ -856,9 +856,9 @@ body.uxdesign.alerts {
} }
a { a {
float: left; float: flip(left, right);
width: flex-grid(5, 12); width: flex-grid(5, 12);
margin-right: flex-gutter(); #{$margin-right}: flex-gutter();
} }
} }
} }
...@@ -882,7 +882,7 @@ body.uxdesign.alerts { ...@@ -882,7 +882,7 @@ body.uxdesign.alerts {
@include clearfix; @include clearfix;
.alert-message { .alert-message {
float: left; float: flip(left, right);
margin: 4px 0 0 0; margin: 4px 0 0 0;
color: $gray-d3; color: $gray-d3;
} }
...@@ -892,7 +892,7 @@ body.uxdesign.alerts { ...@@ -892,7 +892,7 @@ body.uxdesign.alerts {
} }
.alert-action { .alert-action {
float: right; float: flip(left, right);
&.secondary { &.secondary {
@include orange-button; @include orange-button;
......
cms/static/sass/elements/_system-help.scss
...@@ -24,14 +24,14 @@ ...@@ -24,14 +24,14 @@
@include clearfix(); @include clearfix();
.copy { .copy {
float: left; float: flip(left, right);
width: flex-grid(8,12); width: flex-grid(8,12);
margin-right: flex-gutter(); #{$margin-right}: flex-gutter();
} }
.nav-introduction-supplementary { .nav-introduction-supplementary {
@extend %t-copy-sub2; @extend %t-copy-sub2;
float: right; float: flip(right, left);
width: flex-grid(4,12); width: flex-grid(4,12);
display: block; display: block;
text-align: right; text-align: right;
......
cms/static/sass/style-app-extend1.scss
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
// BASE *default edX offerings* // BASE *default edX offerings*
// ==================== // ====================
// base - utilities // base - utilities
@import 'config';
@import 'variables'; @import 'variables';
@import 'mixins'; @import 'mixins';
@import 'mixins-inherited'; @import 'mixins-inherited';
......
cms/static/sass/style-app.scss
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
// BASE *default edX offerings* // BASE *default edX offerings*
// ==================== // ====================
// base - utilities // base - utilities
@import 'config';
@import 'variables'; @import 'variables';
@import 'mixins'; @import 'mixins';
@import 'mixins-inherited'; @import 'mixins-inherited';
......
cms/static/sass/style-xmodule.scss
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
// BASE *default edX offerings* // BASE *default edX offerings*
// ==================== // ====================
// base - utilities // base - utilities
@import 'config';
@import 'variables'; @import 'variables';
@import 'mixins'; @import 'mixins';
@import 'mixins-inherited'; @import 'mixins-inherited';
......
cms/static/sass/views/_account.scss
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
.action { .action {
@extend %t-action3; @extend %t-action3;
position: absolute; position: absolute;
right: 0; #{$right}: 0;
top: 40%; top: 40%;
} }
} }
...@@ -50,12 +50,10 @@ ...@@ -50,12 +50,10 @@
.content-primary, .content-supplementary { .content-primary, .content-supplementary {
@include box-sizing(border-box); @include box-sizing(border-box);
float: left;
} }
.content-primary { .content-primary {
width: flex-grid(8, 12); @extend %ui-col-wide;
margin-right: flex-gutter();
form { form {
@include box-sizing(border-box); @include box-sizing(border-box);
...@@ -211,7 +209,7 @@ ...@@ -211,7 +209,7 @@
} }
.content-supplementary { .content-supplementary {
width: flex-grid(4, 12); @extend %ui-col-narrow;
.bit { .bit {
@extend %t-copy-sub1; @extend %t-copy-sub1;
...@@ -243,7 +241,7 @@ ...@@ -243,7 +241,7 @@
@extend %t-action3; @extend %t-action3;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; #{$right}: 0;
} }
} }
} }
cms/static/sass/views/_assets.scss
...@@ -5,16 +5,14 @@ ...@@ -5,16 +5,14 @@
.content-primary, .content-supplementary { .content-primary, .content-supplementary {
@include box-sizing(border-box); @include box-sizing(border-box);
float: left;
} }
.content-primary { .content-primary {
width: flex-grid(9, 12); @extend %ui-col-wide;
margin-right: flex-gutter();
} }
.content-supplementary { .content-supplementary {
width: flex-grid(3, 12); @extend %ui-col-narrow;
} }
.nav-actions { .nav-actions {
...@@ -36,10 +34,10 @@ ...@@ -36,10 +34,10 @@
.new-button { .new-button {
@extend %t-action3; @extend %t-action3;
margin-left: $baseline; #{$margin-left}: $baseline;
[class^="icon-"] { [class^="icon-"] {
margin-right: ($baseline/2); #{$margin-right}: ($baseline/2);
} }
} }
} }
...@@ -70,7 +68,7 @@ ...@@ -70,7 +68,7 @@
width: flex-grid(3, 12); width: flex-grid(3, 12);
&.pagination-compact { &.pagination-compact {
text-align: right; text-align: $right;
} }
&.pagination-full { &.pagination-full {
...@@ -136,7 +134,7 @@ ...@@ -136,7 +134,7 @@
.current-page { .current-page {
@extend %ui-depth1; @extend %ui-depth1;
position: absolute; position: absolute;
left: -($baseline/4); #{$left}: -($baseline/4);
} }
.page-divider { .page-divider {
......
cms/static/sass/views/_checklists.scss
...@@ -5,12 +5,10 @@ ...@@ -5,12 +5,10 @@
.content-primary, .content-supplementary { .content-primary, .content-supplementary {
@include box-sizing(border-box); @include box-sizing(border-box);
float: left;
} }
.content-primary { .content-primary {
width: flex-grid(9, 12); @extend %ui-col-wide;
margin-right: flex-gutter();
} }
// checklists - general // checklists - general
...@@ -58,15 +56,16 @@ ...@@ -58,15 +56,16 @@
.checklist-title { .checklist-title {
@include transition(color $tmg-f2 ease-in-out 0s); @include transition(color $tmg-f2 ease-in-out 0s);
width: flex-grid(6, 9); width: flex-grid(6, 9);
margin: 0 flex-gutter() 0 0; margin: 0;
float: left; #{$margin-right}: flex-gutter();
float: flip(left, right);
.ui-toggle-expansion { .ui-toggle-expansion {
@include transition(all $tmg-f2 ease-in-out 0s); @include transition(all $tmg-f2 ease-in-out 0s);
@extend %t-action1; @extend %t-action1;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
margin-right: ($baseline/2); #{$margin-right}: ($baseline/2);
color: $gray-l4; color: $gray-l4;
} }
...@@ -86,9 +85,9 @@ ...@@ -86,9 +85,9 @@
.checklist-status { .checklist-status {
@extend %t-copy-sub1; @extend %t-copy-sub1;
width: flex-grid(3, 9); width: flex-grid(3, 9);
float: right; float: flip(right, left);
margin-top: ($baseline/2); margin-top: ($baseline/2);
text-align: right; text-align: $right;
color: $gray-l2; color: $gray-l2;
...@@ -127,7 +126,7 @@ ...@@ -127,7 +126,7 @@
.action-primary { .action-primary {
@include green-button(); @include green-button();
float: left; float: flip(left, right);
.icon-add { .icon-add {
@extend %t-icon7; @extend %t-icon7;
...@@ -141,7 +140,7 @@ ...@@ -141,7 +140,7 @@
@include grey-button(); @include grey-button();
@extend %t-action3; @extend %t-action3;
@extend %t-regular; @extend %t-regular;
float: right; float: flip(right, left);
.icon-delete { .icon-delete {
@extend %t-icon7; @extend %t-icon7;
...@@ -227,15 +226,16 @@ ...@@ -227,15 +226,16 @@
.task-input { .task-input {
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
float: left; float: flip(left, right);
margin: ($baseline/2) flex-gutter() 0 0; margin-top: ($baseline/2);
#{$margin-right}: flex-gutter();
} }
.task-details { .task-details {
@extend %t-strong; @extend %t-strong;
display: inline-block; display: inline-block;
vertical-align: text-top; vertical-align: text-top;
float: left; float: flip(left, right);
width: flex-grid(6,9); width: flex-grid(6,9);
.task-name { .task-name {
...@@ -264,7 +264,7 @@ ...@@ -264,7 +264,7 @@
@include clearfix(); @include clearfix();
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
float: right; float: flip(right, left);
width: flex-grid(2,9); width: flex-grid(2,9);
margin: ($baseline/2) 0 0 flex-gutter(); margin: ($baseline/2) 0 0 flex-gutter();
opacity: 0.0; opacity: 0.0;
...@@ -336,6 +336,6 @@ ...@@ -336,6 +336,6 @@
} }
.content-supplementary { .content-supplementary {
width: flex-grid(3, 12); @extend %ui-col-narrow;
} }
} }
cms/static/sass/views/_dashboard.scss
...@@ -14,20 +14,18 @@ ...@@ -14,20 +14,18 @@
// ==================== // ====================
// basic layout // basic layout
.content-primary, .content-supplementary { .content-primary, .content-supplementary {
@include box-sizing(border-box); @include box-sizing(border-box);
float: left; }
}
.content-primary { .content-primary {
width: flex-grid(9, 12); @extend %ui-col-wide;
margin-right: flex-gutter(); }
}
.content-supplementary { .content-supplementary {
width: flex-grid(3, 12); @extend %ui-col-narrow;
} }
// ==================== // ====================
......
cms/static/sass/views/_export.scss
...@@ -6,16 +6,14 @@ ...@@ -6,16 +6,14 @@
// UI: basic layout // UI: basic layout
.content-primary, .content-supplementary { .content-primary, .content-supplementary {
@include box-sizing(border-box); @include box-sizing(border-box);
float: left;
} }
.content-primary { .content-primary {
width: flex-grid(9,12); @extend %ui-col-wide;
margin-right: flex-gutter();
} }
.content-supplementary { .content-supplementary {
width: flex-grid(3,12); @extend %ui-col-narrow;
} }
......
cms/static/sass/views/_import.scss
...@@ -5,16 +5,14 @@ ...@@ -5,16 +5,14 @@
.content-primary, .content-supplementary { .content-primary, .content-supplementary {
@include box-sizing(border-box); @include box-sizing(border-box);
float: left;
} }
.content-primary { .content-primary {
width: flex-grid(9,12); @extend %ui-col-wide;
margin-right: flex-gutter();
} }
.content-supplementary { .content-supplementary {
width: flex-grid(3,12); @extend %ui-col-narrow;
} }
// UI: export controls // UI: export controls
......
cms/static/sass/views/_outline.scss
...@@ -70,12 +70,10 @@ ...@@ -70,12 +70,10 @@
.content-primary, .content-primary,
.content-supplementary { .content-supplementary {
@include box-sizing(border-box); @include box-sizing(border-box);
float: left;
} }
.content-primary { .content-primary {
width: flex-grid(9, 12); @extend %ui-col-wide;
margin-right: flex-gutter();
.no-content { .no-content {
@extend %no-content; @extend %no-content;
...@@ -83,7 +81,7 @@ ...@@ -83,7 +81,7 @@
} }
.content-supplementary { .content-supplementary {
width: flex-grid(3, 12); @extend %ui-col-narrow;
} }
......
cms/static/sass/views/_settings.scss
...@@ -5,13 +5,11 @@ ...@@ -5,13 +5,11 @@
.content-primary, .content-supplementary { .content-primary, .content-supplementary {
@include box-sizing(border-box); @include box-sizing(border-box);
float: left;
} }
.content-primary { .content-primary {
@extend %ui-window; @extend %ui-window;
width: flex-grid(9, 12); @extend %ui-col-wide;
margin-right: flex-gutter();
padding: $baseline ($baseline*1.5); padding: $baseline ($baseline*1.5);
} }
...@@ -67,16 +65,17 @@ ...@@ -67,16 +65,17 @@
.title-2 { .title-2 {
width: flex-grid(4, 9); width: flex-grid(4, 9);
margin: 0 flex-gutter() 0 0; margin: 0;
float: left; #{$margin-right}: flex-gutter();
float: flip(left, right);
} }
.tip { .tip {
@extend %t-copy-sub2; @extend %t-copy-sub2;
width: flex-grid(5, 9); width: flex-grid(5, 9);
float: right; float: flip(right, left);
margin-top: ($baseline/2); margin-top: ($baseline/2);
text-align: right; text-align: $right;
color: $gray-l2; color: $gray-l2;
} }
} }
...@@ -372,7 +371,7 @@ ...@@ -372,7 +371,7 @@
} }
.field { .field {
float: left; float: flip(left, right);
width: flex-grid(3, 9); width: flex-grid(3, 9);
margin-bottom: ($baseline/4); margin-bottom: ($baseline/4);
margin-right: flex-gutter(); margin-right: flex-gutter();
...@@ -384,7 +383,7 @@ ...@@ -384,7 +383,7 @@
.tip { .tip {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; #{$right}: 0;
} }
} }
} }
...@@ -598,6 +597,7 @@ ...@@ -598,6 +597,7 @@
.grade-specific-bar { .grade-specific-bar {
height: 50px !important; height: 50px !important;
text-align: left;
} }
.grades { .grades {
...@@ -897,13 +897,13 @@ ...@@ -897,13 +897,13 @@
} }
.content-supplementary { .content-supplementary {
width: flex-grid(3, 12); @extend %ui-col-narrow;
} }
.wrapper-modal-window { .wrapper-modal-window {
.validation-error-modal-content { .validation-error-modal-content {
.error-header { .error-header {
p { p {
strong { strong {
...@@ -911,28 +911,28 @@ ...@@ -911,28 +911,28 @@
} }
} }
} }
hr { hr {
margin: 25px 0; margin: 25px 0;
} }
.error-list { .error-list {
.error-item { .error-item {
.error-item-title { .error-item-title {
color: $error-red; color: $error-red;
} }
.error-item-message { .error-item-message {
width:100%; width:100%;
border: none; border: none;
resize: none; resize: none;
&:focus { &:focus {
outline: 0; outline: 0;
} }
} }
} }
} }
} }
} }
} }
cms/static/sass/views/_static-pages.scss
...@@ -203,7 +203,7 @@ ...@@ -203,7 +203,7 @@
position: absolute; position: absolute;
display: block; display: block;
top: 0; top: 0;
right: 0; #{$right}: 0;
z-index: 11; z-index: 11;
width: 35px; width: 35px;
height: 100%; height: 100%;
...@@ -238,8 +238,8 @@ ...@@ -238,8 +238,8 @@
.component-actions, .component-actions,
.course-nav-item-actions { .course-nav-item-actions {
display: inline-block; display: inline-block;
float: right; float: flip(right, left);
margin-right: ($baseline*2); #{$margin-right}: ($baseline*2);
padding: 8px 0px; padding: 8px 0px;
vertical-align: middle; vertical-align: middle;
text-align: center; text-align: center;
......
cms/static/sass/views/_textbooks.scss
...@@ -5,12 +5,10 @@ ...@@ -5,12 +5,10 @@
.content-primary, .content-supplementary { .content-primary, .content-supplementary {
@include box-sizing(border-box); @include box-sizing(border-box);
float: left;
} }
.content-primary { .content-primary {
width: flex-grid(9, 12); @extend %ui-col-wide;
margin-right: flex-gutter();
.no-textbook-content { .no-textbook-content {
@extend %no-content; @extend %no-content;
...@@ -31,7 +29,7 @@ ...@@ -31,7 +29,7 @@
.textbook-title { .textbook-title {
@extend %t-title4; @extend %t-title4;
@extend %t-strong; @extend %t-strong;
margin-right: ($baseline*14); #{$margin-right}: ($baseline*14);
} }
.ui-toggle-expansion { .ui-toggle-expansion {
...@@ -85,7 +83,7 @@ ...@@ -85,7 +83,7 @@
opacity: 0.0; opacity: 0.0;
position: absolute; position: absolute;
top: $baseline; top: $baseline;
right: $baseline; #{$right}: $baseline;
.action { .action {
display: inline-block; display: inline-block;
...@@ -305,9 +303,9 @@ ...@@ -305,9 +303,9 @@
display: block; display: block;
width: 46%; width: 46%;
border-bottom: none; 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; padding: ($baseline/4) 0 0 0;
float: left; float: $left;
position: relative; position: relative;
input, textarea { input, textarea {
...@@ -318,7 +316,7 @@ ...@@ -318,7 +316,7 @@
@extend %ui-btn-flat-outline; @extend %ui-btn-flat-outline;
position: absolute; position: absolute;
top: 3px; top: 3px;
right: 0; #{$right}: 0;
} }
} }
...@@ -354,6 +352,6 @@ ...@@ -354,6 +352,6 @@
} }
} }
.content-supplementary { .content-supplementary {
width: flex-grid(3, 12); @extend %ui-col-narrow;
} }
} }
cms/static/sass/views/_unit.scss
...@@ -3,5 +3,5 @@ ...@@ -3,5 +3,5 @@
// .view-unit styles will go here once we split it from container // .view-unit styles will go here once we split it from container
.view-unit { .view-unit {
} }
cms/static/sass/views/_updates.scss
...@@ -160,31 +160,31 @@ ...@@ -160,31 +160,31 @@
} }
.course-handouts { .course-handouts {
@extend %ui-window; @extend %ui-window;
width: 30%; width: 30%;
padding: 20px 30px; padding: 20px 30px;
margin: 0; margin: 0;
border-radius: 0 3px 3px 0; border-radius: flip(0 3px 3px 0, 3px 0 0 3px);
border-left: none; #{$border-left}: none;
background: $lightGrey; background: $lightGrey;
.title { .title {
@extend %t-title4; @extend %t-title4;
@extend %t-light; @extend %t-light;
margin-bottom: 24px; margin-bottom: 24px;
} }
.edit-button { .edit-button {
@include white-button(); @include white-button;
@extend %t-action4; @extend %t-action4;
@extend %t-regular; @extend %t-regular;
float: right; float: right;
padding: 3px 10px 4px; padding: 3px 10px 4px;
margin-left: 7px; margin-left: 7px;
.edit-icon, .edit-icon,
.delete-icon { .delete-icon {
margin-right: 4px; #{$margin-right}: 4px;
} }
} }
......
cms/static/sass/views/_users.scss
...@@ -6,16 +6,14 @@ ...@@ -6,16 +6,14 @@
// LAYOUT: page // LAYOUT: page
.content-primary, .content-supplementary { .content-primary, .content-supplementary {
@include box-sizing(border-box); @include box-sizing(border-box);
float: left;
} }
.content-primary { .content-primary {
width: flex-grid(9, 12); @extend %ui-col-wide;
margin-right: flex-gutter();
} }
.content-supplementary { .content-supplementary {
width: flex-grid(3, 12); @extend %ui-col-narrow;
} }
// ELEM: content // ELEM: content
...@@ -123,7 +121,7 @@ ...@@ -123,7 +121,7 @@
// ELEM: item - metadata // ELEM: item - metadata
.item-metadata { .item-metadata {
width: flex-grid(5, 9); width: flex-grid(5, 9);
margin-right: flex-gutter(); #{$margin-right}: flex-gutter();
.user-username, .user-email { .user-username, .user-email {
display: inline-block; display: inline-block;
...@@ -134,7 +132,7 @@ ...@@ -134,7 +132,7 @@
@include transition(color $tmg-f2 ease-in-out 0s); @include transition(color $tmg-f2 ease-in-out 0s);
@extend %t-title4; @extend %t-title4;
@extend %t-strong; @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; color: $gray-d4;
} }
......
cms/templates/base.html
...@@ -8,7 +8,12 @@ ...@@ -8,7 +8,12 @@
<!--[if IE 8]><html class="ie8 lte9 lte8" lang="${LANGUAGE_CODE}"><![endif]--> <!--[if IE 8]><html class="ie8 lte9 lte8" lang="${LANGUAGE_CODE}"><![endif]-->
<!--[if IE 9]><html class="ie9 lte9" lang="${LANGUAGE_CODE}"><![endif]--> <!--[if IE 9]><html class="ie9 lte9" lang="${LANGUAGE_CODE}"><![endif]-->
<!--[if gt IE 9]><!--><html 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 charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title> <title>
...@@ -35,7 +40,7 @@ ...@@ -35,7 +40,7 @@
<%block name="header_extras"></%block> <%block name="header_extras"></%block>
</head> </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> <%block name="view_notes"></%block>
<a class="nav-skip" href="#content">${_("Skip to this view's content")}</a> <a class="nav-skip" href="#content">${_("Skip to this view's content")}</a>
...@@ -341,7 +346,7 @@ ...@@ -341,7 +346,7 @@
% endif % endif
<!-- view --> <!-- 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 %> <% 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" /> <%include file="widgets/header.html" args="online_help_token=online_help_token" />
......
cms/templates/js/asset.underscore
...@@ -14,7 +14,7 @@ ...@@ -14,7 +14,7 @@
<%= date_added %> <%= date_added %>
</td> </td>
<td class="embed-col"> <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>
<td class="embed-col"> <td class="embed-col">
<input type="text" class="embeddable-xml-input" value="<%= external_url %>" readonly> <input type="text" class="embeddable-xml-input" value="<%= external_url %>" readonly>
...@@ -30,4 +30,4 @@ ...@@ -30,4 +30,4 @@
<div class="action-button"><i class="icon-lock"></i><i class="icon-unlock-alt"></i></div> <div class="action-button"><i class="icon-lock"></i><i class="icon-unlock-alt"></i></div>
</li> </li>
</ul> </ul>
</td> </td>
\ No newline at end of file
cms/templates/js/edit-chapter.underscore
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
<div class="input-wrap field text required field-add-chapter-asset chapter<%= order %>-asset <div class="input-wrap field text required field-add-chapter-asset chapter<%= order %>-asset
<% if (error && error.attributes && error.attributes.asset_path) { print('error'); } %>"> <% if (error && error.attributes && error.attributes.asset_path) { print('error'); } %>">
<label for="chapter<%= order %>-asset-path"><%= gettext("Chapter Asset") %></label> <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> <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> <button class="action action-upload"><%= gettext("Upload PDF") %></button>
</div> </div>
......
cms/templates/js/show-textbook.underscore
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<%= chapters.length %> PDF Chapters <%= chapters.length %> PDF Chapters
</a></p> </a></p>
<% } else if(chapters.length === 1) { %> <% } else if(chapters.length === 1) { %>
<p> <p dir="ltr">
<%= chapters.at(0).get("asset_path") %> <%= chapters.at(0).get("asset_path") %>
</p> </p>
<% } %> <% } %>
......
cms/templates/settings.html
...@@ -261,7 +261,7 @@ require(["domReady!", "jquery", "js/models/settings/course_details", "js/views/s ...@@ -261,7 +261,7 @@ require(["domReady!", "jquery", "js/models/settings/course_details", "js/views/s
<div class="wrapper-input"> <div class="wrapper-input">
<div class="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> <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> </div>
<button type="button" class="action action-upload-image">${_("Upload Course Image")}</button> <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 ...@@ -281,7 +281,7 @@ require(["domReady!", "jquery", "js/models/settings/course_details", "js/views/s
</div> </div>
<div class="input"> <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> <span class="tip tip-stacked">${_("Enter your YouTube video's ID (along with any restriction parameters)")}</span>
</div> </div>
</li> </li>
......
cms/templates/settings_graders.html
...@@ -63,7 +63,7 @@ require(["domReady!", "jquery", "js/views/settings/grading", "js/models/settings ...@@ -63,7 +63,7 @@ require(["domReady!", "jquery", "js/views/settings/grading", "js/models/settings
<li class="field" id="field-course-grading-range"> <li class="field" id="field-course-grading-range">
<div class="grade-controls course-grading-range well"> <div class="grade-controls course-grading-range well">
<a href="#" class="new-grade-button"><span class="plus-icon"></span></a> <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"> <div class="grade-bar">
<ol class="increments"> <ol class="increments">
<li class="increment-0">0</li> <li class="increment-0">0</li>
......
common/lib/xmodule/xmodule/css/capa/display.scss
...@@ -81,23 +81,23 @@ div.problem { ...@@ -81,23 +81,23 @@ div.problem {
} }
.indicator_container { .indicator_container {
float: left; float: flip(left, right);
width: 25px; width: 25px;
height: 1px; height: 1px;
margin-right: 15px; #{$margin-right}: 15px;
} }
fieldset { fieldset {
@include box-sizing(border-box); @include box-sizing(border-box);
margin: 0px 0px $baseline; margin: 0px 0px $baseline;
padding-left: $baseline; #{$padding-left}: $baseline;
border-left: 1px solid #ddd; #{$border-left}: 1px solid #ddd;
} }
input[type="radio"], input[type="radio"],
input[type="checkbox"] { input[type="checkbox"] {
float: left; float: flip(left, right);
margin: 4px 8px 0 0; margin: flip(4px 8px 0 0, 4px 0 0 8px);
} }
text { text {
......
common/lib/xmodule/xmodule/css/tabs/tabs.scss
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
.edit-header { .edit-header {
@include box-sizing(border-box); @include box-sizing(border-box);
padding: 18px 0 18px $baseline; padding: 18px $baseline;
top: 0 !important; // ugly override for second level tab override top: 0 !important; // ugly override for second level tab override
right: 0; right: 0;
background-color: $blue; background-color: $blue;
......
common/static/sass/_mixins.scss
// studio - utilities - mixins and extends // 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 // mixins - font sizing
@mixin font-size($sizeValue: 16){ @mixin font-size($sizeValue: 16){
font-size: $sizeValue + px; font-size: $sizeValue + px;
...@@ -87,6 +115,20 @@ ...@@ -87,6 +115,20 @@
width: 100%; 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 // extends - UI - window
%ui-window { %ui-window {
@include clearfix(); @include clearfix();
......
conf/locale/config.yaml
...@@ -86,6 +86,7 @@ locales: ...@@ -86,6 +86,7 @@ locales:
dummy_locales: dummy_locales:
- eo - eo
- fake2 - fake2
- en@rtl
# Directories we don't search for strings. # Directories we don't search for strings.
ignore_dirs: ignore_dirs:
......
lms/djangoapps/courseware/tests/test_i18n.py
...@@ -17,7 +17,7 @@ class I18nTestCase(TestCase): ...@@ -17,7 +17,7 @@ class I18nTestCase(TestCase):
self.assertIn('<html lang="en">', response.content) self.assertIn('<html lang="en">', response.content)
self.assertEqual(response['Content-Language'], 'en') self.assertEqual(response['Content-Language'], 'en')
self.assertTrue(re.search('<body.*class=".*lang_en">', response.content)) self.assertTrue(re.search('<body.*class=".*lang_en">', response.content))
def test_esperanto(self): def test_esperanto(self):
response = self.client.get('/', HTTP_ACCEPT_LANGUAGE='eo') response = self.client.get('/', HTTP_ACCEPT_LANGUAGE='eo')
self.assertIn('<html lang="eo">', response.content) self.assertIn('<html lang="eo">', response.content)
......
lms/envs/common.py
...@@ -671,11 +671,14 @@ FAVICON_PATH = 'images/favicon.ico' ...@@ -671,11 +671,14 @@ FAVICON_PATH = 'images/favicon.ico'
# Locale/Internationalization # Locale/Internationalization
TIME_ZONE = 'America/New_York' # http://en.wikipedia.org/wiki/List_of_tz_zones_by_name 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 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 # Sourced from http://www.localeplanet.com/icu/ and wikipedia
LANGUAGES = ( LANGUAGES = (
('en', u'English'), ('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) ('fake2', u'Fake translations'), # Another dummy language for testing (not pushed to prod)
('am', u'አማርኛ'), # Amharic ('am', u'አማርኛ'), # Amharic
......
lms/static/sass/application-extend1.scss.mako
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
// base - utilities // base - utilities
@import 'base/reset'; @import 'base/reset';
@import 'base/config';
@import 'base/variables'; @import 'base/variables';
@import 'base/mixins'; @import 'base/mixins';
......
lms/static/sass/application-extend2.scss.mako
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
// base - utilities // base - utilities
@import 'base/reset'; @import 'base/reset';
@import 'base/config';
@import 'base/variables'; @import 'base/variables';
@import 'base/mixins'; @import 'base/mixins';
......
lms/static/sass/application.scss.mako
...@@ -11,6 +11,7 @@ ...@@ -11,6 +11,7 @@
// base - utilities // base - utilities
@import 'base/reset'; @import 'base/reset';
@import 'base/config';
@import 'base/variables'; @import 'base/variables';
@import 'base/mixins'; @import 'base/mixins';
......
lms/static/sass/base/_config.scss 0 → 100644
// 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
lms/static/sass/base/_mixins.scss
// lms - utilities - mixins and extends // 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 // mixins - font sizing
@mixin font-size($sizeValue: 16){ @mixin font-size($sizeValue: 16){
font-size: $sizeValue + px; font-size: $sizeValue + px;
......
lms/static/sass/base/_variables.scss
// 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 // base
$baseline: 20px; $baseline: 20px;
......
lms/static/sass/course/_info.scss
...@@ -80,7 +80,7 @@ div.info-wrapper { ...@@ -80,7 +80,7 @@ div.info-wrapper {
section.handouts { section.handouts {
@extend .sidebar; @extend .sidebar;
border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0;
border-left: 1px solid #ddd; #{$border-left}: 1px solid #ddd;
box-shadow: none; box-shadow: none;
font-size: 14px; font-size: 14px;
......
lms/static/sass/course/_profile.scss
...@@ -141,7 +141,7 @@ ...@@ -141,7 +141,7 @@
margin-bottom: lh(); margin-bottom: lh();
h1 { h1 {
float: left; float: $left;
font-size: 1em; font-size: 1em;
font-weight: 100; font-weight: 100;
margin: 0; margin: 0;
...@@ -188,7 +188,7 @@ ...@@ -188,7 +188,7 @@
} }
h2 { h2 {
border-right: 1px dashed #ddd; #{$border-right}: 1px dashed #ddd;
@include box-sizing(border-box); @include box-sizing(border-box);
display: table-cell; display: table-cell;
letter-spacing: 0; letter-spacing: 0;
...@@ -201,7 +201,7 @@ ...@@ -201,7 +201,7 @@
.sections { .sections {
display: table-cell; display: table-cell;
padding-left: flex-gutter(9); #{$padding-left}: flex-gutter(9);
width: flex-grid(7, 9); width: flex-grid(7, 9);
> div { > div {
......
lms/static/sass/course/base/_base.scss
...@@ -6,7 +6,7 @@ body { ...@@ -6,7 +6,7 @@ body {
} }
body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a, label { 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; font-family: $sans-serif;
} }
...@@ -49,7 +49,7 @@ form { ...@@ -49,7 +49,7 @@ form {
form.choicegroup { form.choicegroup {
label { label {
clear: both; clear: both;
float: left; float: $left;
} }
} }
......
lms/static/sass/course/base/_extends.scss
h1.top-header { h1.top-header {
border-bottom: 1px solid $border-color-2; border-bottom: 1px solid $border-color-2;
text-align: left; text-align: $left;
font-size: em(24); font-size: em(24);
font-weight: 100; font-weight: 100;
padding-bottom: lh(); padding-bottom: lh();
......
lms/static/sass/course/base/_mixins.scss
// 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 { @mixin blue-button {
display: block; display: block;
height: 35px; height: 35px;
...@@ -54,4 +80,4 @@ ...@@ -54,4 +80,4 @@
&:hover, &:focus { &:hover, &:focus {
background: -webkit-linear-gradient(top, #888, #666); background: -webkit-linear-gradient(top, #888, #666);
} }
} }
\ No newline at end of file
lms/static/sass/course/courseware/_sidebar.scss
.course-index { .course-index {
@extend .sidebar; @extend .sidebar;
@extend .tran; @extend .tran;
border-radius: 3px 0 0 3px; border-radius: flip(3px 0 0 3px, 0 3px 3px 0);
border-right: 1px solid $border-color-2; #{$border-right}: 1px solid $border-color-2;
#open_close_accordion { #open_close_accordion {
display: none; display: none;
......
lms/static/sass/course/instructor/_instructor.scss
...@@ -185,3 +185,8 @@ ...@@ -185,3 +185,8 @@
} }
.rtl .instructor-dashboard-wrapper .beta-button-wrapper,
.rtl .instructor-dashboard-wrapper .studio-edit-link {
left: 2em;
right: auto;
}
lms/static/sass/course/instructor/_instructor_2.scss
...@@ -785,7 +785,6 @@ section.instructor-dashboard-content-2 { ...@@ -785,7 +785,6 @@ section.instructor-dashboard-content-2 {
.info { .info {
@include box-sizing(border-box); @include box-sizing(border-box);
padding: ($baseline/2); padding: ($baseline/2);
border: 1px solid $light-gray; border: 1px solid $light-gray;
color: $lighter-base-font-color; color: $lighter-base-font-color;
line-height: 1.3em; line-height: 1.3em;
...@@ -1621,3 +1620,8 @@ input[name="subject"] { ...@@ -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;
}
lms/static/sass/course/layout/_courseware_header.scss
...@@ -19,7 +19,7 @@ nav.course-material { ...@@ -19,7 +19,7 @@ nav.course-material {
margin-left: 10px; margin-left: 10px;
li { li {
float: left; float: $left;
list-style: none; list-style: none;
margin-right: 6px; margin-right: 6px;
...@@ -120,7 +120,7 @@ header.global.slim { ...@@ -120,7 +120,7 @@ header.global.slim {
h1.logo { h1.logo {
margin: 0 10px 0 13px; margin: 0 10px 0 13px;
padding-right: 20px; #{$padding-right}: 20px;
&:before { &:before {
@extend %faded-vertical-divider; @extend %faded-vertical-divider;
...@@ -128,7 +128,7 @@ header.global.slim { ...@@ -128,7 +128,7 @@ header.global.slim {
display: block; display: block;
height: 35px; height: 35px;
position: absolute; position: absolute;
right: 3px; #{$right}: 3px;
top: 0; top: 0;
width: 1px; width: 1px;
} }
...@@ -156,7 +156,7 @@ header.global.slim { ...@@ -156,7 +156,7 @@ header.global.slim {
h2 { h2 {
display: block; display: block;
width: 700px; width: 700px;
float: left; float: flip(left, right);
font-size: 0.9em; font-size: 0.9em;
font-weight: 600; font-weight: 600;
color: $lighter-base-font-color; color: $lighter-base-font-color;
......
lms/static/sass/course/layout/_courseware_subnav.scss
...@@ -18,7 +18,7 @@ nav.course-material { ...@@ -18,7 +18,7 @@ nav.course-material {
padding: 10px 0 0 0; padding: 10px 0 0 0;
li { li {
float: left; float: $left;
list-style: none; list-style: none;
a { a {
......
lms/static/sass/multicourse/_course_about.scss
...@@ -295,7 +295,7 @@ ...@@ -295,7 +295,7 @@
} }
.details { .details {
float: left; float: flip(left, right);
margin-right: flex-gutter(); margin-right: flex-gutter();
width: flex-grid(8); width: flex-grid(8);
font: normal 1em/1.6em $serif; font: normal 1em/1.6em $serif;
...@@ -384,7 +384,7 @@ ...@@ -384,7 +384,7 @@
.course-sidebar { .course-sidebar {
@include box-sizing(border-box); @include box-sizing(border-box);
float: left; float: flip(left, right);
width: flex-grid(4); width: flex-grid(4);
> section { > section {
......
lms/static/sass/multicourse/_courses.scss
...@@ -42,14 +42,14 @@ ...@@ -42,14 +42,14 @@
.logo { .logo {
display: inline-block; display: inline-block;
#{$border-right}: 1px solid $light-gray;
height: 80px; height: 80px;
margin-right: 30px; #{$margin-right}: 30px;
padding-right: 30px; #{$padding-right}: 30px;
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
&::after { &::after {
@extend %faded-vertical-divider;
content: ""; content: "";
display: block; display: block;
height: 80px; height: 80px;
......
lms/static/sass/multicourse/_dashboard.scss
...@@ -6,8 +6,9 @@ ...@@ -6,8 +6,9 @@
padding: ($baseline*2) 0 0 0; padding: ($baseline*2) 0 0 0;
.profile-sidebar { .profile-sidebar {
float: left; background: transparent;
margin-right: flex-gutter(); float: flip(left, right);
#{$margin-right}: flex-gutter();
width: flex-grid(3); width: flex-grid(3);
background: transparent; background: transparent;
box-shadow: 0 0 1px $shadow-l1; box-shadow: 0 0 1px $shadow-l1;
...@@ -278,7 +279,7 @@ ...@@ -278,7 +279,7 @@
// course listings // course listings
.my-courses { .my-courses {
float: left; float: flip(left, right);
margin: 0px; margin: 0px;
width: flex-grid(9); width: flex-grid(9);
...@@ -355,7 +356,7 @@ ...@@ -355,7 +356,7 @@
@include transition(all 0.15s linear 0s); @include transition(all 0.15s linear 0s);
overflow: hidden; overflow: hidden;
position: relative; position: relative;
float: left; float: flip(left, right);
height: 100%; height: 100%;
max-height: 100%; max-height: 100%;
width: 200px; width: 200px;
...@@ -374,7 +375,7 @@ ...@@ -374,7 +375,7 @@
.info { .info {
@include clearfix; @include clearfix;
padding: 0 10px 0 230px; padding: flip(0 10px 0 230px, 0 230px 0 10px);
> hgroup { > hgroup {
padding: 0; padding: 0;
...@@ -393,7 +394,7 @@ ...@@ -393,7 +394,7 @@
.date-block { .date-block {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; #{$right}: 0;
font-family: $sans-serif; font-family: $sans-serif;
font-size: 13px; font-size: 13px;
font-style: italic; font-style: italic;
......
lms/static/sass/shared/_course_object.scss
...@@ -5,11 +5,11 @@ ...@@ -5,11 +5,11 @@
.university-column { .university-column {
width: flex-grid(4); width: flex-grid(4);
margin-right: flex-gutter(); #{$margin-right}t: flex-gutter();
float: left; float: left;
&:nth-child(3n+3) { &:nth-child(3n+3) {
margin-right: 0; #{$margin-right}: 0;
} }
} }
...@@ -21,11 +21,11 @@ ...@@ -21,11 +21,11 @@
.courses-listing-item { .courses-listing-item {
width: flex-grid(4); width: flex-grid(4);
margin-right: flex-gutter(); #{$margin-right}: flex-gutter();
float: left; float: flip(left, right);
&:nth-child(3n+3) { &:nth-child(3n+3) {
margin-right: 0; #{$margin-right}: 0;
} }
} }
} }
......
lms/static/sass/shared/_header.scss
...@@ -17,8 +17,8 @@ header.global { ...@@ -17,8 +17,8 @@ header.global {
} }
h1.logo { h1.logo {
float: left; float: flip(left, right);
margin: -2px 39px 0px 0px; margin: flip(-2px 39px 0 0, -2px 0 0 39px);
position: relative; position: relative;
a { a {
...@@ -27,11 +27,11 @@ header.global { ...@@ -27,11 +27,11 @@ header.global {
} }
.left { .left {
float: left; float: flip(left, right);
} }
.guest { .guest {
float: right; float: flip(right, left);
} }
> li { > li {
...@@ -104,7 +104,7 @@ header.global { ...@@ -104,7 +104,7 @@ header.global {
} }
.user { .user {
float: right; float: flip(right,left);
margin-top: 4px; margin-top: 4px;
> .primary { > .primary {
...@@ -194,7 +194,7 @@ header.global { ...@@ -194,7 +194,7 @@ header.global {
height: 0px; height: 0px;
position: absolute; position: absolute;
@include transform(rotate(-45deg)); @include transform(rotate(-45deg));
right: 12px; #{$right}: 12px;
top: -6px; top: -6px;
width: 0px; width: 0px;
} }
...@@ -279,7 +279,7 @@ header.global { ...@@ -279,7 +279,7 @@ header.global {
} }
.nav-courseware { .nav-courseware {
float: right; float: $right;
margin-top: ($baseline/4); margin-top: ($baseline/4);
list-style: none; list-style: none;
......
lms/templates/main.html
...@@ -3,7 +3,12 @@ ...@@ -3,7 +3,12 @@
<!--[if IE 8]><html class="ie ie8 lte9 lte8" lang="${LANGUAGE_CODE}"><![endif]--> <!--[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 IE 9]><html class="ie ie9 lte9" lang="${LANGUAGE_CODE}"><![endif]-->
<!--[if gt IE 9]><!--><html 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 charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<%! from django.utils.translation import ugettext as _ %> <%! from django.utils.translation import ugettext as _ %>
...@@ -117,19 +122,26 @@ ...@@ -117,19 +122,26 @@
</head> </head>
<body class="<%block name='bodyclass'/> lang_${LANGUAGE_CODE}"> <body class="${dir_rtl} <%block name='bodyclass'/> lang_${LANGUAGE_CODE}">
<a class="nav-skip" href="<%block name="nav_skip">#content</%block>">${_("Skip to this view's content")}</a> <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"> <div class="content-wrapper" id="content">
${self.body()} ${self.body()}
<%block name="bodyextra"/> <%block name="bodyextra"/>
</div> </div>
<%include file="${footer_file}" /> % if not suppress_toplevel_navigation:
<%include file="${footer_file}" />
% endif
</div>
<script>window.baseUrl = "${settings.STATIC_URL}";</script> <script>window.baseUrl = "${settings.STATIC_URL}";</script>
% if not disable_courseware_js: % if not disable_courseware_js:
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment