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 = [
# 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)
......
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,
......
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 @@
}
.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 {
......
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%;
}
......
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;
}
}
......
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;
}
......
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;
......
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;
......
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';
......
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';
......
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';
......
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;
}
}
}
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 {
......
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;
}
}
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;
}
// ====================
......
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;
}
......
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
......
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;
}
......
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;
}
}
}
}
}
}
}
}
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;
......
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;
}
}
cms/static/sass/views/_unit.scss
......@@ -3,5 +3,5 @@
// .view-unit styles will go here once we split it from container
.view-unit {
}
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;
.title {
@extend %t-title4;
@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;
@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;
}
}
......
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;
}
......
cms/templates/base.html
......@@ -8,7 +8,12 @@
<!--[if IE 8]><html class="ie8 lte9 lte8" lang="${LANGUAGE_CODE}"><![endif]-->
<!--[if IE 9]><html class="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,chrome=1">
<title>
......@@ -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" />
......
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>
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>
......
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>
<% } %>
......
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>
......
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>
......
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 {
......
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;
......
common/static/sass/_mixins.scss
// 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();
......
conf/locale/config.yaml
......@@ -86,6 +86,7 @@ locales:
dummy_locales:
- eo
- fake2
- en@rtl
# Directories we don't search for strings.
ignore_dirs:
......
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)
......
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
......
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';
......
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';
......
lms/static/sass/application.scss.mako
......@@ -11,6 +11,7 @@
// base - utilities
@import 'base/reset';
@import 'base/config';
@import 'base/variables';
@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
// ====================
// 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;
......
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
$baseline: 20px;
......
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;
......
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 {
......
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;
}
}
......
lms/static/sass/course/base/_extends.scss
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();
......
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 {
display: block;
height: 35px;
......@@ -54,4 +80,4 @@
&:hover, &:focus {
background: -webkit-linear-gradient(top, #888, #666);
}
}
\ No newline at end of file
}
lms/static/sass/course/courseware/_sidebar.scss
.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;
......
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;
}
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;
}
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;
......
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 {
......
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 {
......
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;
......
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;
......
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;
}
}
}
......
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;
......
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,19 +122,26 @@
</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>
<div class="content-wrapper" id="content">
${self.body()}
<%block name="bodyextra"/>
</div>
<%include file="${footer_file}" />
% if not suppress_toplevel_navigation:
<%include file="${footer_file}" />
% endif
</div>
<script>window.baseUrl = "${settings.STATIC_URL}";</script>
% 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