diff --git a/cms/static/sass/_base_rtl.scss b/cms/static/sass/_base_rtl.scss new file mode 100644 index 000000000000..ff768165f7ee --- /dev/null +++ b/cms/static/sass/_base_rtl.scss @@ -0,0 +1,28 @@ +// studio - base styling +// ==================== + +@import "base"; + +.wrapper-mast { + .mast { + &.has-actions { + .page-header{ + float: right; + } + .nav-actions { + float: left; + text-align: left; + } + } + } +} + +.item-details { + float: right; +} + +.item-actions { + right: auto; + left: 5px; + float: left!important; +} \ No newline at end of file diff --git a/cms/static/sass/_mixins_rtl.scss b/cms/static/sass/_mixins_rtl.scss new file mode 100644 index 000000000000..2027ebc81aee --- /dev/null +++ b/cms/static/sass/_mixins_rtl.scss @@ -0,0 +1,260 @@ +// studio - utilities - mixins and extends +// ==================== + +// mixins - font sizing +@mixin font-size($sizeValue: 16){ + font-size: $sizeValue + px; + font-size: ($sizeValue/10) + rem; +} + +// mixins - line height +@mixin line-height($fontSize: auto){ + line-height: ($fontSize*1.48) + px; + line-height: (($fontSize/10)*1.48) + rem; +} + +// ==================== + +// mixins - sizing +@mixin size($width: $baseline, $height: $baseline) { + height: $height; + width: $width; +} + +// mixins - sizing +@mixin square($size: $baseline) { + @include size($size); +} + +// ==================== + +// mixins - placeholder styling +@mixin placeholder($color) { + :-moz-placeholder { + color: $color; + } + ::-webkit-input-placeholder { + color: $color; + } + :-ms-input-placeholder { + color: $color; + } +} + +// ==================== + +// extends - UI - used for page/view-level wrappers (for centering/grids) +%ui-wrapper { + @include clearfix(); + @include box-sizing(border-box); + width: 100%; +} + +// extends - UI - window +%ui-window { + @include clearfix(); + border-radius: 3px; + box-shadow: 0 1px 1px $shadow-l1; + margin-bottom: $baseline; + border: 1px solid $gray-l2; + background: $white; +} + +// extends - UI - visual link +%ui-fake-link { + cursor: pointer; +} + +// extends - UI - functional disable +%ui-disabled { + pointer-events: none; + outline: none; +} + +// extends - UI - depth levels +%ui-depth0 { z-index: 0; } +%ui-depth1 { z-index: 10; } +%ui-depth2 { z-index: 100; } +%ui-depth3 { z-index: 1000; } +%ui-depth4 { z-index: 10000; } +%ui-depth5 { z-index: 100000; } + + +// extends - UI - buttons +%ui-btn { + @include box-sizing(border-box); + @include transition(color 0.25s ease-in-out 0s, border-color 0.25s ease-in-out 0s, background 0.25s ease-in-out 0s, box-shadow 0.25s ease-in-out 0s); + display: inline-block; + cursor: pointer; + + &:hover, &:active { + + } + + &.disabled, &[disabled], &.is-disabled { + cursor: default; + pointer-events: none; + opacity: 0.5; + } + + .icon-inline { + display: inline-block; + vertical-align: middle; + margin-right: ($baseline/4); + } +} + +// pill button +%ui-btn-pill { + border-radius: ($baseline/5); +} + +%ui-btn-rounded { + border-radius: ($baseline/2); +} + +// primary button +%ui-btn-primary { + @extend %ui-btn; + @extend %ui-btn-pill; + padding:($baseline/2) $baseline; + border-width: 1px; + border-style: solid; + line-height: 1.5em; + text-align: center; + + &:hover, &:active { + box-shadow: 0 2px 1px $shadow-l1; + } + + &.current, &.active { + box-shadow: inset 1px 1px 2px $shadow-d1; + + &:hover, &:active { + box-shadow: inset 1px 1px 1px $shadow-d1; + } + } +} + +// secondary button +%ui-btn-secondary { + @extend %ui-btn; + @extend %ui-btn-pill; + border-width: 1px; + border-style: solid; + padding:($baseline/2) $baseline; + background: transparent; + line-height: 1.5em; + text-align: center; + + &:hover, &:active { + + } + + &.current, &.active { + + } +} + +%ui-btn-flat-outline { + @extend %t-action4; + @include transition(all .15s); + font-weight: 600; + text-align: center; + border-radius: ($baseline/4); + border: 1px solid $blue-l2; + padding: 1px ($baseline/2) 2px ($baseline/2); + background-color: $white; + color: $blue-l2; + + &:hover { + border: 1px solid $blue; + background-color: $blue; + color: $white; + } + + &.is-disabled, + &[disabled="disabled"]{ + border: 1px solid $gray-l2; + background-color: $gray-l4; + color: $gray-l2; + pointer-events: none; + } +} + +// button with no button shell until hover for understated actions +%ui-btn-non { + @include transition(all .15s); + border: none; + border-radius: ($baseline/4); + background: none; + padding: 3px ($baseline/2); + vertical-align: middle; + color: $gray-l1; + + &:hover { + background-color: $gray-l1; + color: $white; + } + + span { + @extend %cont-text-sr; + } +} + +// extends - UI archetypes - well +%ui-well { + box-shadow: inset 0 1px 2px 1px $shadow; + padding: ($baseline*0.75) $baseline; +} + +// ==================== + +// extends - content - removes list styling/spacing when using uls, ols for navigation and less content-centric cases +%cont-no-list { + list-style: none; + margin: 0; + padding: 0; + text-indent: 0; + text-align: right; + + li { + margin: 0; + padding: 0; + } +} + +// extends - content - image-replacement hidden text +%cont-text-hide { + text-indent: 100%; + white-space: nowrap; + overflow: hidden; +} + +// extends - content - hidden elems - screenreaders +%cont-text-sr { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +// extends - content - wrapping +%cont-text-wrap { + text-wrap: wrap; + white-space: pre-wrap; + white-space: -moz-pre-wrap; + word-wrap: break-word; +} + +// extends - content - text overflow by ellipsis +%cont-truncated { + @include box-sizing(border-box); + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} diff --git a/cms/static/sass/_reset_rtl.scss b/cms/static/sass/_reset_rtl.scss new file mode 100644 index 000000000000..64af39b6b14e --- /dev/null +++ b/cms/static/sass/_reset_rtl.scss @@ -0,0 +1,165 @@ +// studio - utilities - reset +// ==================== + +// not ready for this yet, but this should be done as things get cleaner +// * { +// @include box-sizing(border-box); +// } + +// better text rendering/kerning through SVG +* { + text-rendering: optimizeLegibility; +} + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, figcaption, figure, +footer, header, hgroup, menu, nav, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + direction: rtl; +} + +html,body { + height: 100%; +} + +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} + +ins { + text-decoration: none; +} +del { + text-decoration: line-through; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +abbr[title] { + border-bottom: none; + text-decoration: none; + cursor: help; +} + +// ==================== + +// grandfathered styles + +// reset styles to remove ui-lightness jquery ui theme from the tabs component (used in the add component problem tab menu) +.ui-tabs { + padding: 0; + white-space: normal; +} + +.ui-corner-all, .ui-corner-bottom, .ui-corner-left, ui-corner-top, .ui-corner-br, .ui-corner-right { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + border-top-right-radius: 0; + border-top-left-radius: 0; +} + + +.ui-widget-content { + border: 0; + background: none; +} +.ui-widget { + font-family: 'Open Sans', sans-serif; + font-size: 16px; +} + +.ui-widget-header { + border:none; + background: none; +} + +.ui-tabs .ui-tabs-nav { + padding: 0; +} + +.ui-tabs .ui-tabs-nav li { + margin: 0; + padding: 0; + border: none; + top: 0; + margin: 0; + float: none; + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.ui-tabs-nav { + + li { + top: 0; + margin: 0; + } + a { + float: none; + font-weight: normal; + } +} + +.ui-tabs .ui-tabs-panel { + padding: 0; +} + +// reapplying the tab styles from unit.scss after removing jquery ui ui-lightness styling +.problem-type-tabs { + border:none; + list-style-type: none; + width: 100%; + @include linear-gradient(top, rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); + //background-color: $lightBluishGrey; + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 -1px 0 rgba(0, 0, 0, 0.2) inset; + + li:first-child { + margin-left: 20px; + } + li { + opacity: 0.8; + + &:ui-state-active { + background-color: rgba(255, 255, 255, .3); + opacity: 1.0; + font-weight: 400; + } + a:focus { + outline: none; + border: 0px; + } + } +} diff --git a/cms/static/sass/assets/_graphics_rtl.scss b/cms/static/sass/assets/_graphics_rtl.scss new file mode 100644 index 000000000000..2b5ada408ffe --- /dev/null +++ b/cms/static/sass/assets/_graphics_rtl.scss @@ -0,0 +1,12 @@ +@import "graphics"; + +.drag-handle { + float: left; + margin-left: 0; + margin-right: 10px; +} + +.new-folder-icon { + margin-right: 0; + margin-left: 8px; +} \ No newline at end of file diff --git a/cms/static/sass/elements/_footer_rtl.scss b/cms/static/sass/elements/_footer_rtl.scss new file mode 100644 index 000000000000..d8ea06818a72 --- /dev/null +++ b/cms/static/sass/elements/_footer_rtl.scss @@ -0,0 +1,4 @@ +// studio - elements - global footer +// ==================== + +@import "footer"; \ No newline at end of file diff --git a/cms/static/sass/elements/_header_rtl.scss b/cms/static/sass/elements/_header_rtl.scss new file mode 100644 index 000000000000..a7f97e56ead1 --- /dev/null +++ b/cms/static/sass/elements/_header_rtl.scss @@ -0,0 +1,14 @@ +// studio - elements - global header +// ==================== + +@import "header"; + +.wrapper-header { + .wrapper-l { + float: right; + } + .wrapper-r { + float: left; + text-align: left; + } +} \ No newline at end of file diff --git a/cms/static/sass/style-app-extend1-rtl.scss b/cms/static/sass/style-app-extend1-rtl.scss new file mode 100644 index 000000000000..f9f546edcf63 --- /dev/null +++ b/cms/static/sass/style-app-extend1-rtl.scss @@ -0,0 +1,54 @@ +// studio - css architecture +// ==================== + +// libs and resets *do not edit* +@import 'bourbon/bourbon'; // lib - bourbon + +// VENDOR + REBASE *referenced/used vendor presentation and reset* +// ==================== +@import 'reset_rtl'; + +// BASE *default edX offerings* +// ==================== +// base - utilities +@import 'variables'; +@import 'mixins_rtl'; +@import 'mixins-inherited'; + +// base - assets +@import 'assets/fonts'; +@import 'assets/graphics_rtl'; // sprites, basic img/figure/svg styling +@import 'assets/anims'; // animations + +// base - starter +@import 'base_rtl'; + +// base - elements +@import 'elements/typography'; +@import 'elements/icons'; // references to icons used +@import 'elements/controls'; // buttons, link styles, sliders, etc. + +// base - specific views +@import 'views/account_rtl'; +@import 'views/assets'; +@import 'views/updates'; +@import 'views/dashboard_rtl'; +@import 'views/export'; +@import 'views/index'; +@import 'views/import'; +@import 'views/outline_rtl'; +@import 'views/settings'; +@import 'views/static-pages_rtl'; +@import 'views/subsection_rtl'; +@import 'views/unit_rtl'; +@import 'views/users'; +@import 'views/checklists'; +@import 'views/textbooks'; + +// base - contexts +@import 'contexts/ie'; // ie-specific rules (mostly for known/older bugs) + +// temp - inherited +@import 'assets/content-types'; + +@import 'shame'; // shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/) diff --git a/cms/static/sass/style-app-rtl.scss b/cms/static/sass/style-app-rtl.scss new file mode 100644 index 000000000000..63bb2d1bac11 --- /dev/null +++ b/cms/static/sass/style-app-rtl.scss @@ -0,0 +1,41 @@ +// studio - css architecture +// ==================== + +// libs and resets *do not edit* +@import 'bourbon/bourbon'; // lib - bourbon + +// VENDOR + REBASE *referenced/used vendor presentation and reset* +// ==================== +@import 'reset'; + +// BASE *default edX offerings* +// ==================== +// base - utilities +@import 'variables'; +@import 'mixins'; +@import 'mixins-inherited'; + +// base - assets +@import 'assets/fonts'; +@import 'assets/graphics'; // sprites, basic img/figure/svg styling +@import 'assets/anims'; // animations + +// base - starter +@import 'base'; + +// base - elements +@import 'elements/typography'; +@import 'elements/icons'; // references to icons used +@import 'elements/controls'; // buttons, link styles, sliders, etc. +@import 'elements/navigation'; // all archetypes of navigation +@import 'elements/forms'; +@import 'elements/header_rtl'; +@import 'elements/footer_rtl'; +@import 'elements/sock'; +@import 'elements/tender-widget'; +@import 'elements/system-feedback'; // alerts, notifications, states +@import 'elements/system-help'; // help UI +@import 'elements/modal'; // interstitial UI, dialogs, modal windows +@import 'elements/vendor'; // overrides to vendor-provided styling +@import 'elements/uploads'; +@import 'elements/edit_dialog'; diff --git a/cms/static/sass/style-xmodule-rtl.scss b/cms/static/sass/style-xmodule-rtl.scss new file mode 100644 index 000000000000..4be3e2e1803a --- /dev/null +++ b/cms/static/sass/style-xmodule-rtl.scss @@ -0,0 +1,35 @@ +// studio - xmodule architecture +// ==================== + +// libs and resets *do not edit* +@import 'bourbon/bourbon'; // lib - bourbon + +// VENDOR + REBASE *referenced/used vendor presentation and reset* +// ==================== +@import 'reset'; + +// BASE *default edX offerings* +// ==================== +// base - utilities +@import 'variables'; +@import 'mixins'; +@import 'mixins-inherited'; + +// base - assets +@import 'assets/fonts'; +@import 'assets/graphics_rtl'; // sprites, basic img/figure/svg styling +@import 'assets/anims'; // animations + +// base - starter +@import 'base_rtl'; + +// base - elements +@import 'elements/typography'; +@import 'elements/icons'; // references to icons used +@import 'elements/controls'; // buttons, link styles, sliders, etc. +@import 'elements/navigation'; // all archetypes of navigation + +// xmodule +@import 'xmodule/modules/css/module-styles.scss'; +@import 'xmodule/descriptors/css/module-styles.scss'; +@import 'elements/xmodules'; // styling for Studio-specific contexts diff --git a/cms/static/sass/views/_account_rtl.scss b/cms/static/sass/views/_account_rtl.scss new file mode 100644 index 000000000000..852374b62c38 --- /dev/null +++ b/cms/static/sass/views/_account_rtl.scss @@ -0,0 +1,28 @@ +// studio - views - sign up/in +// ==================== + +@import "account"; + +.view-signup, .view-signin { + .content-primary { + margin-right: 0; + margin-left: flex-gutter(); + } + .content-primary, .content-supplementary { + float: right; + } + .content { + header { + .action { + right: auto; + left: 0; + } + } + } + #field-password { + .action-forgotpassword { + right: auto; + left: 0; + } + } +} \ No newline at end of file diff --git a/cms/static/sass/views/_dashboard_rtl.scss b/cms/static/sass/views/_dashboard_rtl.scss new file mode 100644 index 000000000000..6d46f6da488b --- /dev/null +++ b/cms/static/sass/views/_dashboard_rtl.scss @@ -0,0 +1,21 @@ +// studio - views - user dashboard +// ==================== + +@import "dashboard"; + +.view-dashboard { + .content .notice-incontext { + &.has-actions, &.list-notices .notice-item.has-actions { + .list-actions { + text-align: left; + } + } + } + .list-courses { + .course-item { + .course-actions { + text-align: left; + } + } + } +} \ No newline at end of file diff --git a/cms/static/sass/views/_outline_rtl.scss b/cms/static/sass/views/_outline_rtl.scss new file mode 100644 index 000000000000..60c8e96c9625 --- /dev/null +++ b/cms/static/sass/views/_outline_rtl.scss @@ -0,0 +1,42 @@ +// studio - views - course outline +// ==================== + +@import "outline"; + +.view-outline { + .branch { + .section-item { + .details { + float: right; + } + .gradable-status { + float: left; + right: auto; + left: 50px; + } + } + } + .courseware-section { + header { + .expand-collapse-icon { + float: right; + margin: 25px 16px 16px 6px; + } + } + .section-published-date { + right: auto; + left: 80px; + } + } +} + +.item-actions { + right: auto; + left: 5px; +} + +.drag-handle { + float: left; + margin-left: 0; + margin-right: 11px; +} \ No newline at end of file diff --git a/cms/static/sass/views/_static-pages_rtl.scss b/cms/static/sass/views/_static-pages_rtl.scss new file mode 100644 index 000000000000..b874e56d4fdc --- /dev/null +++ b/cms/static/sass/views/_static-pages_rtl.scss @@ -0,0 +1,4 @@ +// studio - views - course static pages +// ==================== + +@import "static-pages"; \ No newline at end of file diff --git a/cms/static/sass/views/_subsection_rtl.scss b/cms/static/sass/views/_subsection_rtl.scss new file mode 100644 index 000000000000..8ab662d0d65c --- /dev/null +++ b/cms/static/sass/views/_subsection_rtl.scss @@ -0,0 +1,4 @@ +// studio - views - course subsection +// ==================== + +@import "subsection"; \ No newline at end of file diff --git a/cms/static/sass/views/_unit_rtl.scss b/cms/static/sass/views/_unit_rtl.scss new file mode 100644 index 000000000000..16da7837a8dd --- /dev/null +++ b/cms/static/sass/views/_unit_rtl.scss @@ -0,0 +1,11 @@ +// studio - views - unit +// ==================== + +@import "unit"; + +.component-edit-header { + .nav-edit-modes { + right: auto; + left: 0; + } +} \ No newline at end of file diff --git a/cms/templates/base.html b/cms/templates/base.html index 625777fe23d6..7a456a0c0f55 100644 --- a/cms/templates/base.html +++ b/cms/templates/base.html @@ -1,5 +1,5 @@ ## -*- coding: utf-8 -*- -<%! from django.utils.translation import ugettext as _ %> +<%! from django.utils.translation import ugettext as _, get_language_bidi %> <%namespace name='static' file='static_content.html'/> @@ -8,8 +8,9 @@ - + + <%block name="title"></%block> | % if context_course: @@ -23,9 +24,15 @@ <meta name="path_prefix" content="${EDX_ROOT_URL}"> <%static:css group='style-vendor'/> + % if get_language_bidi(): + <%static:css group='style-app-rtl'/> + <%static:css group='style-app-extend1-rtl'/> + <%static:css group='style-xmodule-rtl'/> + % else: <%static:css group='style-app'/> <%static:css group='style-app-extend1'/> <%static:css group='style-xmodule'/> + % endif <%include file="widgets/segment-io.html" /> diff --git a/cms/templates/component.html b/cms/templates/component.html index 954aaf5c331b..a0fbfd05a852 100644 --- a/cms/templates/component.html +++ b/cms/templates/component.html @@ -1,6 +1,10 @@ <%! from django.utils.translation import ugettext as _ %> <%namespace name='static' file='static_content.html'/> +<style> + .CodeMirror pre {direction: ltr!important;} +</style> + <div class="wrapper wrapper-component-editor"> <div class="component-editor"> <div class="component-edit-header"> diff --git a/cms/templates/unit.html b/cms/templates/unit.html index 40aaee6b2c32..959d441aab6e 100644 --- a/cms/templates/unit.html +++ b/cms/templates/unit.html @@ -1,7 +1,7 @@ <%inherit file="base.html" /> <%! from django.core.urlresolvers import reverse -from django.utils.translation import ugettext as _ +from django.utils.translation import ugettext as _, get_language from xmodule.modulestore.django import loc_mapper %> <%namespace name='static' file='static_content.html'/> diff --git a/cms/templates/widgets/header.html b/cms/templates/widgets/header.html index ac9067e6be9e..39dbac4aedd6 100644 --- a/cms/templates/widgets/header.html +++ b/cms/templates/widgets/header.html @@ -3,6 +3,8 @@ from django.core.urlresolvers import reverse from django.utils.translation import ugettext as _ from xmodule.modulestore.django import loc_mapper + from django.utils import translation + from django.utils.translation import get_language_bidi %> <div class="wrapper-header wrapper" id="view-top"> @@ -38,7 +40,7 @@ <h2 class="info-course"> </h2> <nav class="nav-course nav-dd ui-left"> - <h2 class="sr">${_("{course_name}'s Navigation:").format(course_name=context_course.display_name_with_default)}</h2> + <h2 class="sr">${_(u"{course_name}'s Navigation:").format(course_name=context_course.display_name_with_default)}</h2> <ol> <li class="nav-item nav-course-courseware"> <h3 class="title"><span class="label"><span class="label-prefix sr">${_("Course")} </span>${_("Content")}</span> <i class="icon-caret-down ui-toggle-dd"></i></h3> @@ -117,8 +119,11 @@ <h3 class="title"><span class="label">${_("Tools")}</span> <i class="icon-caret- % if user.is_authenticated(): <nav class="nav-account nav-is-signedin nav-dd ui-right"> <h2 class="sr">${_("Help & Account Navigation")}</h2> - - <ol> + % if get_language_bidi(): + <ol style="margin: 0 0 0 90px"> + % else: + <ol style="margin: 0 80px 0 0"> + % endif <li class="nav-item nav-account-help"> <h3 class="title"><span class="label">${_("Help")}</span> <i class="icon-caret-down ui-toggle-dd"></i></h3> @@ -161,7 +166,7 @@ <h3 class="title"><span class="label"><span class="label-prefix sr">${_("Current % else: <nav class="nav-not-signedin nav-pitch"> <h2 class="sr">${_("You're not currently signed in")}</h2> - <ol> + <ol style="float: right; margin-right: 15px; margin-left: 15px"> <li class="nav-item nav-not-signedin-hiw"> <a href="/">${_("How Studio Works")}</a> </li> @@ -180,3 +185,5 @@ <h2 class="sr">${_("You're not currently signed in")}</h2> </div> </header> </div> + + diff --git a/cms/templates/widgets/metadata-edit.html b/cms/templates/widgets/metadata-edit.html index 4ce5f3bfeb4b..0bdf56cfa138 100644 --- a/cms/templates/widgets/metadata-edit.html +++ b/cms/templates/widgets/metadata-edit.html @@ -5,7 +5,7 @@ import hashlib import copy import json - hlskey = hashlib.md5(module.location.url()).hexdigest() + hlskey = hashlib.md5(module.location.url().encode('utf-8')).hexdigest() %> ## js templates diff --git a/lms/static/sass/_discussion_rtl.scss b/lms/static/sass/_discussion_rtl.scss new file mode 100644 index 000000000000..e8dbdbc61c93 --- /dev/null +++ b/lms/static/sass/_discussion_rtl.scss @@ -0,0 +1,58 @@ +@import "_discussion.scss"; + +.container .discussion-body { + .sidebar { + float: right; + } + .discussion-column { + float: left; + } + .sort-bar { + .sort-label { + float: right; + } + li { + float: right; + } + } + .browse-search { + .home, .browse, .search { + float: right; + } + .home { + box-shadow: 1px 0 0 #AAAAAA inset; + border-radius: 0; + border-top-right-radius: 3px; + } + .browse { + box-shadow: 1px 0 0 #AAAAAA inset; + border-radius: 0; + } + .search { + border-top-left-radius: 3px; + } + } +} + +body.discussion { + .course-tabs .right { + float: left; + } + .new-post-article { + .left-column { + float: right; + } + .right-column { + float: left; + } + } + .new-post-form { + .submit { + float: right; + } + .new-post-cancel { + float: right; + margin: 10px 15px 0 0; + } + } +} diff --git a/lms/static/sass/application-extend1-rtl.scss.mako b/lms/static/sass/application-extend1-rtl.scss.mako new file mode 100644 index 000000000000..174d7f2f12db --- /dev/null +++ b/lms/static/sass/application-extend1-rtl.scss.mako @@ -0,0 +1,61 @@ +## NOTE: This Sass infrastructure is redundant, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx + + +// lms - css application architecture (platform) +// ==================== + +// libs and resets *do not edit* +@import 'bourbon/bourbon'; // lib - bourbon + +// BASE *default edX offerings* +// ==================== + +// base - utilities +@import 'base/variables'; +@import 'base/reset'; +@import 'base/mixins'; + +## THEMING +## ------- +## Set up this file to import an edX theme library if the environment +## indicates that a theme should be used. The assumption is that the +## theme resides outside of this main edX repository, in a directory +## called themes/<theme-name>/, with its base Sass file in +## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry +## point can be used to @import in as many other things as needed. +% if env['FEATURES'].get("USE_CUSTOM_THEME", False): + // import theme's Sass overrides + @import '${env.get('THEME_NAME')}'; +% endif + +@import 'base/base_rtl'; + +// base - assets +@import 'base/font_face'; +@import 'base/extends'; +@import 'base/animations'; + +// base - starter +@import 'base/base_rtl'; + +// base - elements +@import 'elements/typography'; +@import 'elements/controls'; + +// shared - platform +@import 'multicourse/home'; +@import 'multicourse/dashboard_rtl'; +@import 'multicourse/account_rtl'; +@import 'multicourse/courses'; +@import 'multicourse/course_about'; +@import 'multicourse/jobs'; +@import 'multicourse/media-kit'; +@import 'multicourse/about_pages'; +@import 'multicourse/press_release'; +@import 'multicourse/password_reset'; +@import 'multicourse/error-pages'; +@import 'multicourse/help'; +@import 'multicourse/edge'; + +## NOTE: needed here for cascade and dependency purposes, but not a great permanent solution +@import 'shame'; // shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/) diff --git a/lms/static/sass/application-extend1.scss.mako b/lms/static/sass/application-extend1.scss.mako index cb993e14b6c5..9995d875d366 100644 --- a/lms/static/sass/application-extend1.scss.mako +++ b/lms/static/sass/application-extend1.scss.mako @@ -11,8 +11,8 @@ // ==================== // base - utilities -@import 'base/reset'; @import 'base/variables'; +@import 'base/reset'; @import 'base/mixins'; ## THEMING diff --git a/lms/static/sass/application-extend2-rtl.scss.mako b/lms/static/sass/application-extend2-rtl.scss.mako new file mode 100644 index 000000000000..18641c7d32d7 --- /dev/null +++ b/lms/static/sass/application-extend2-rtl.scss.mako @@ -0,0 +1,54 @@ +## NOTE: This Sass infrastructure is redundant, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx + + +// lms - css application architecture (platform) +// ==================== + +// libs and resets *do not edit* +@import 'bourbon/bourbon'; // lib - bourbon + +// BASE *default edX offerings* +// ==================== + +// base - utilities +@import 'base/variables'; +@import 'base/reset'; +@import 'base/mixins'; + +## THEMING +## ------- +## Set up this file to import an edX theme library if the environment +## indicates that a theme should be used. The assumption is that the +## theme resides outside of this main edX repository, in a directory +## called themes/<theme-name>/, with its base Sass file in +## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry +## point can be used to @import in as many other things as needed. +% if env['FEATURES'].get("USE_CUSTOM_THEME", False): + // import theme's Sass overrides + @import '${env.get('THEME_NAME')}'; +% endif + +@import 'base/base_rtl'; + +// base - assets +@import 'base/font_face'; +@import 'base/extends'; +@import 'base/animations'; + +// base - starter +@import 'base/base_rtl'; + +// base - elements +@import 'elements/typography'; +@import 'elements/controls'; + +// base - specific views +@import 'views/verification'; +@import 'views/shoppingcart'; + +// applications +@import 'discussion_rtl'; +@import 'news'; + +## NOTE: needed here for cascade and dependency purposes, but not a great permanent solution +@import 'shame'; // shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/) diff --git a/lms/static/sass/application-extend2.scss.mako b/lms/static/sass/application-extend2.scss.mako index cfb6a1b69869..47dc4bf3d996 100644 --- a/lms/static/sass/application-extend2.scss.mako +++ b/lms/static/sass/application-extend2.scss.mako @@ -11,8 +11,8 @@ // ==================== // base - utilities -@import 'base/reset'; @import 'base/variables'; +@import 'base/reset'; @import 'base/mixins'; ## THEMING diff --git a/lms/static/sass/application-rtl.scss.mako b/lms/static/sass/application-rtl.scss.mako new file mode 100644 index 000000000000..88b9cedd9074 --- /dev/null +++ b/lms/static/sass/application-rtl.scss.mako @@ -0,0 +1,55 @@ +## Note: This Sass infrastructure is repeated in application-extend1 and application-extend2, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx + +// lms - css application architecture +// ==================== + +// libs and resets *do not edit* +@import 'bourbon/bourbon'; // lib - bourbon + +// BASE *default edX offerings* +// ==================== + +// base - utilities +@import 'base/variables'; +@import 'base/reset'; +@import 'base/mixins'; + +## THEMING +## ------- +## Set up this file to import an edX theme library if the environment +## indicates that a theme should be used. The assumption is that the +## theme resides outside of this main edX repository, in a directory +## called themes/<theme-name>/, with its base Sass file in +## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry +## point can be used to @import in as many other things as needed. +% if env['FEATURES'].get("USE_CUSTOM_THEME", False): + // import theme's Sass overrides + @import '${env.get('THEME_NAME')}'; +% endif + +@import 'base/base_rtl'; + +// base - assets +@import 'base/font_face'; +@import 'base/extends'; +@import 'base/animations'; + +// base - starter +@import 'base/base_rtl'; + +// base - elements +@import 'elements/typography'; +@import 'elements/controls'; + +// shared - course +@import 'shared/forms'; +@import 'shared/footer_rtl'; +@import 'shared/header_rtl'; +@import 'shared/course_object_rtl'; +@import 'shared/course_filter'; +@import 'shared/modal'; +@import 'shared/activation_messages'; +@import 'shared/unsubscribe'; + +## NOTE: needed here for cascade and dependency purposes, but not a great permanent solution +@import 'shame'; // shame file - used for any bad-form/orphaned scss that knowingly violate edX FED architecture/standards (see - http://csswizardry.com/2013/04/shame-css/) diff --git a/lms/static/sass/application.scss.mako b/lms/static/sass/application.scss.mako index 5365ec52ac85..57d23d9a3d18 100644 --- a/lms/static/sass/application.scss.mako +++ b/lms/static/sass/application.scss.mako @@ -10,8 +10,8 @@ // ==================== // base - utilities -@import 'base/reset'; @import 'base/variables'; +@import 'base/reset'; @import 'base/mixins'; ## THEMING diff --git a/lms/static/sass/base/_base_rtl.scss b/lms/static/sass/base/_base_rtl.scss new file mode 100644 index 000000000000..4384f6de68dd --- /dev/null +++ b/lms/static/sass/base/_base_rtl.scss @@ -0,0 +1,11 @@ +@import "_base.scss"; + +html, body { + background: $body-bg; + font-family: $sans-serif; + font-size: 1em; + font-style: normal; + line-height: 1em; + direction: rtl; + //-webkit-font-smoothing: antialiased; +} diff --git a/lms/static/sass/course-rtl.scss.mako b/lms/static/sass/course-rtl.scss.mako new file mode 100644 index 000000000000..1e840809e110 --- /dev/null +++ b/lms/static/sass/course-rtl.scss.mako @@ -0,0 +1,72 @@ +@import 'bourbon/bourbon'; + +@import 'base/variables'; +@import 'base/reset'; +@import 'base/font_face'; +@import 'base/mixins'; + +## THEMING +## ------- +## Set up this file to import an edX theme library if the environment +## indicates that a theme should be used. The assumption is that the +## theme resides outside of this main edX repository, in a directory +## called themes/<theme-name>/, with its base Sass file in +## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry +## point can be used to @import in as many other things as needed. +% if env['FEATURES'].get("USE_CUSTOM_THEME", False): + // import theme's Sass overrides + @import '${env.get('THEME_NAME')}'; +% endif + +@import 'base/base_rtl'; +@import 'base/extends'; +@import 'base/animations'; +@import 'shared/tooltips'; + +// Course base / layout styles +@import 'course/layout/courseware_header_rtl'; +@import 'course/layout/footer'; +@import 'course/base/mixins'; +@import 'course/base/base_rtl'; +@import 'course/base/extends'; +@import 'xmodule/modules/css/module-styles.scss'; + +// courseware +@import 'course/courseware/courseware'; +@import 'course/courseware/sidebar'; +@import 'course/courseware/amplifier'; +@import 'course/layout/calculator'; +@import 'course/layout/timer'; +@import 'course/layout/chat'; + +// course-specific courseware (all styles in these files should be gated by a +// course-specific class). This should be replaced with a better way of +// providing course-specific styling. +@import "course/courseware/courses/_cs188.scss"; + +// wiki +@import "course/wiki/basic-html"; +@import "course/wiki/sidebar"; +@import "course/wiki/create"; +@import "course/wiki/wiki"; +@import "course/wiki/table"; + +// pages +@import "course/info"; +@import "course/syllabus"; // TODO arjun replace w/ custom tabs, see courseware/courses.py +@import "course/textbook"; +@import "course/profile"; +@import "course/gradebook"; +@import "course/tabs"; +@import "course/staff_grading"; +@import "course/rubric"; +@import "course/open_ended_grading"; + +// instructor +@import "course/instructor/instructor"; +@import "course/instructor/instructor_2"; +@import "course/instructor/email"; +@import "xmodule/descriptors/css/module-styles.scss"; + +// discussion +@import "course/discussion/form-wmd-toolbar"; diff --git a/lms/static/sass/course.scss.mako b/lms/static/sass/course.scss.mako index 2cdd1c20318f..bdd5ca83a298 100644 --- a/lms/static/sass/course.scss.mako +++ b/lms/static/sass/course.scss.mako @@ -1,8 +1,8 @@ @import 'bourbon/bourbon'; +@import 'base/variables'; @import 'base/reset'; @import 'base/font_face'; -@import 'base/variables'; @import 'base/mixins'; ## THEMING diff --git a/lms/static/sass/course/base/_base_rtl.scss b/lms/static/sass/course/base/_base_rtl.scss new file mode 100644 index 000000000000..9681d0a0fac3 --- /dev/null +++ b/lms/static/sass/course/base/_base_rtl.scss @@ -0,0 +1,6 @@ +@import "_base.scss"; + +body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a, label { + text-align: right; + font-family: $sans-serif; +} \ No newline at end of file diff --git a/lms/static/sass/course/layout/_courseware_header_rtl.scss b/lms/static/sass/course/layout/_courseware_header_rtl.scss new file mode 100644 index 000000000000..e3ff900a081b --- /dev/null +++ b/lms/static/sass/course/layout/_courseware_header_rtl.scss @@ -0,0 +1,31 @@ +@import "_courseware_header.scss"; + +header.global.slim { + h1.logo { + padding-left: 20px; + padding-right: 0; + } + + &:before { + right: auto; + left: 3px; + } + &:after { + right: auto; + left: 3px; + } + h2 { + float: right; + text-align: right; + } +} + +nav.course-material { + ol.course-tabs { + li { + float: right; + margin-left: 6px; + margin-right: 0; + } + } +} \ No newline at end of file diff --git a/lms/static/sass/multicourse/_account_rtl.scss b/lms/static/sass/multicourse/_account_rtl.scss new file mode 100644 index 000000000000..37b411ea28a5 --- /dev/null +++ b/lms/static/sass/multicourse/_account_rtl.scss @@ -0,0 +1,11 @@ +@import "account"; + +.login, .register, .passwordreset, #forgot-password-modal #password-reset { + form { + .field-group { + .field { + float: right; + } + } + } +} \ No newline at end of file diff --git a/lms/static/sass/multicourse/_dashboard_rtl.scss b/lms/static/sass/multicourse/_dashboard_rtl.scss new file mode 100644 index 000000000000..da994b1f19c9 --- /dev/null +++ b/lms/static/sass/multicourse/_dashboard_rtl.scss @@ -0,0 +1,40 @@ +// lms - views - user/student dashboard +// ==================== + +@import "_dashboard.scss"; + +.dashboard { + .profile-sidebar { + float: right; + margin-left: 1.69492%; + margin-right: 0; + } + .my-courses { + .course { + .cover { + float: right; + } + .info { + padding: 0 230px 0 10px; + } + .info > hgroup { + .date-block { + left: 0; + right: auto; + } + } + .info .enter-course { + float: right; + } + } + a.email-settings { + float: left; + margin-left: 10px; + margin-right: 0; + } + a.unenroll, .dashboard .my-courses a.email-settings { + float: left; + } + } + +} diff --git a/lms/static/sass/shared/_course_object_rtl.scss b/lms/static/sass/shared/_course_object_rtl.scss new file mode 100644 index 000000000000..bc051f81adf4 --- /dev/null +++ b/lms/static/sass/shared/_course_object_rtl.scss @@ -0,0 +1,273 @@ +.highlighted-courses, .find-courses { + .courses { + @include clearfix; + padding: 40px 0px 15px; + + .university-column { + width: flex-grid(4); + margin-right: flex-gutter(); + float: left; + + &:nth-child(3n+3) { + margin-right: 0; + } + } + + .courses-listing { + @include clearfix(); + margin: 0; + padding: 0; + list-style: none; + + .courses-listing-item { + width: flex-grid(4); + margin-left: 1.13%; + float: right; + + &:nth-child(3n+3) { + margin-right: 0; + } + } + } + + .course { + background: $body-bg; + border: 1px solid $border-color-1; + border-radius: 2px; + @include box-sizing(border-box); + box-shadow: 0 1px 10px 0 rgba(0,0,0, 0.15), inset 0 0 0 1px rgba(255,255,255, 0.9); + margin-bottom: 30px; + position: relative; + width: 100%; + @include transition(all 0.15s linear 0s); + + .status { + background: $link-color; + color: white; + font-size: 10px; + left: 10px; + padding: 2px 10px; + border-radius: 2px; + position: absolute; + text-transform: uppercase; + top: -6px; + z-index: 100; + } + + .status:after { + border-bottom: 6px solid shade($link-color, 50%); + border-right: 6px solid transparent; + content: ""; + display: block; + height: 0; + position: absolute; + right: -6px; + top: 0; + width: 0; + } + + a { + position: relative; + display: block; + } + + a:hover { + text-decoration: none; + } + + .meta-info { + background: $dark-trans-bg; + bottom: 6px; + border: 1px solid rgba(0,0,0, 0.5); + @include border-right-radius(2px); + box-shadow: 0 1px 5px 0 rgba(0,0,0, 0.15); + @include clearfix; + position: absolute; + right: -4px; + @include transition(all 0.15s linear 0s); + + p { + color: rgb(255,255,255); + font-style: italic; + line-height: 1.2em; + padding: 4px 12px 5px; + } + } + + .inner-wrapper { + border: 1px solid $border-color-4; + height: 100%; + height: 200px; + overflow: hidden; + position: relative; + } + + header.course-preview { + left: 0px; + position: absolute; + top: 0px; + width: 100%; + z-index: 3; + + // > a { + @include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.85))); + box-shadow: inset 0 -1px 0 0 rgba(255,255,255, 0.2); + border-bottom: 1px solid rgba(150,150,150, 0.7); + display: block; + height: 50px; + + &:hover { + @include background-image(linear-gradient(-90deg, rgba(255,255,255, 1), rgba(255,255,255, 0.8))); + text-decoration: none; + + .info-link { + color: $link-color; + opacity: 1.0; + } + + h2 { + color: $link-color; + } + } + + hgroup { + left: 0px; + padding: 0px 10px; + position: absolute; + right: 60px; + top: 0px; + + h2 { + color: $base-font-color; + display: table-cell; + font-family: $sans-serif; + font-size: 0.8em; + font-weight: 700; + height: 48px; + letter-spacing: 0px; + margin-bottom: 0px; + padding-top: 0px; + text-shadow: 0 1px rgba(255,255,255, 0.6); + text-overflow: ellipsis; + text-transform: none; + vertical-align: middle; + + .course-number { + font-weight: 700; + text-transform: none; + } + } + } + + .info-link { + border-left: 1px solid rgba(150,150,150, 0.5); + @include box-sizing(border-box); + color: $base-font-color; + display: inline-block; + font: bold 1.6em/1.2em $sans-serif; + height: 100%; + opacity: 0.6; + padding-top: 10px; + position: absolute; + right: 0px; + text-align: center; + text-shadow: 0 1px rgba(255,255,255, 0.6); + top: 0px; + width: 60px; + vertical-align: middle; + } + + } + // } + + .info { + background: $content-wrapper-bg; + height: 220px + 130px; + left: 0px; + position: absolute; + top: 0px; + @include transition(all 0.15s linear 0s); + width: 100%; + overflow: hidden; + + .cover-image { + height: 200px; + overflow: hidden; + width: 100%; + + img { + display: block; + min-height: 100%; + width: 100%; + } + } + + .desc { + @include box-sizing(border-box); + height: 120px; + overflow: hidden; + padding: 10px 10px 12px 10px; + position: relative; + width: 100%; + + section { + color: $base-font-color; + font: normal 1em/1.6em $serif; + margin: 0px; + height: 100%; + overflow: hidden; + text-overflow: ellipsis; + } + } + + .bottom { + @include box-sizing(border-box); + padding: 0px 10px 10px 10px; + width: 100%; + + .university { + border-right: 1px solid $border-color-2; + color: $lighter-base-font-color; + letter-spacing: 1px; + margin-right: 10px; + padding-right: 10px; + + &:hover { + color: $link-color; + } + } + + .start-date { + color: $lighter-base-font-color; + letter-spacing: 1px; + } + } + } + + &:hover { + background: $course-profile-bg; + border-color: $border-color-1; + box-shadow: 0 1px 16px 0 rgba($shadow-color, 0.4); + + .info { + top: -150px; + } + + .meta-info { + opacity: 0; + } + } + } + } + + .university-courses { + .course { + width: flex-grid(4); + margin-right: flex-gutter(); + float: left; + &:nth-child(3n+3) { + margin-right: 0; + } + } + } +} diff --git a/lms/static/sass/shared/_footer_rtl.scss b/lms/static/sass/shared/_footer_rtl.scss new file mode 100644 index 000000000000..a3f530db7923 --- /dev/null +++ b/lms/static/sass/shared/_footer_rtl.scss @@ -0,0 +1,32 @@ +@import "footer"; + +.wrapper-footer { + footer { + .colophon { + margin-right: flex-gutter(); + margin-left: 0; + float: left; + + .nav-colophon { + li { + float: left; + margin-right: ($baseline*0.75); + margin-left: 0; + } + } + } + .references { + float: right; + + .nav-social { + text-align: right; + } + .copyright { + text-align: right; + } + .nav-legal { + text-align: right; + } + } + } +} diff --git a/lms/static/sass/shared/_header_rtl.scss b/lms/static/sass/shared/_header_rtl.scss new file mode 100644 index 000000000000..df77fb7c9eb5 --- /dev/null +++ b/lms/static/sass/shared/_header_rtl.scss @@ -0,0 +1,22 @@ +@import "header"; + +header.global { + h1.logo { + float: right; + margin: -2px 0 0px 39px; + } + + ol { + &.left { + float: right; + } + + &.user { + float: left; + } + } + + .nav-courseware { + float: left; + } +} diff --git a/lms/templates/courseware/course_navigation.html b/lms/templates/courseware/course_navigation.html index 05189edfd15a..d2bac99bb108 100644 --- a/lms/templates/courseware/course_navigation.html +++ b/lms/templates/courseware/course_navigation.html @@ -1,6 +1,8 @@ ## mako <%! from django.utils.translation import ugettext as _ %> <%page args="active_page=None" /> +<%! from django.utils.translation import get_language_bidi %> + <% if active_page is None and active_page_context is not UNDEFINED: @@ -39,8 +41,8 @@ <%block name="extratabs" /> % if masquerade is not UNDEFINED: % if staff_access and masquerade is not None: - <li style="float:right"><a href="#" id="staffstatus">${_("Staff view")}</a></li> - % endif + <li style='float:${"left" if get_language_bidi() else "right"}'><a href="#" id="staffstatus">${_("Staff view")}</a></li> + % endif % endif </ol> </div> diff --git a/lms/templates/courseware/courseware-error.html b/lms/templates/courseware/courseware-error.html index 843c7122ab58..db4d2989547c 100644 --- a/lms/templates/courseware/courseware-error.html +++ b/lms/templates/courseware/courseware-error.html @@ -1,12 +1,18 @@ <%! from django.utils.translation import ugettext as _ %> +<%! from django.utils.translation import get_language_bidi %> + <%inherit file="/main.html" /> <%namespace name='static' file='../static_content.html'/> <%block name="bodyclass">courseware</%block> <%block name="pagetitle">${_("Courseware")}</%block> <%block name="headextra"> -<%static:css group='style-course-vendor'/> -<%static:css group='style-course'/> + <%static:css group='style-course-vendor'/> + % if get_language_bidi(): + <%static:css group='style-course-rtl'/> + % else: + <%static:css group='style-course'/> + % endif </%block> <%include file="/courseware/course_navigation.html" args="active_page='courseware'" /> diff --git a/lms/templates/courseware/courseware.html b/lms/templates/courseware/courseware.html index d1ce55a50b3f..b4ccd470356f 100644 --- a/lms/templates/courseware/courseware.html +++ b/lms/templates/courseware/courseware.html @@ -1,5 +1,7 @@ <%! from django.utils.translation import ugettext as _ %> <%! from microsite_configuration import page_title_breadcrumbs %> +<%! from django.utils.translation import get_language_bidi %> + <%inherit file="/main.html" /> <%namespace name='static' file='/static_content.html'/> <%def name="course_name()"> @@ -16,8 +18,12 @@ <%block name="headextra"> -<%static:css group='style-course-vendor'/> -<%static:css group='style-course'/> + <%static:css group='style-course-vendor'/> + % if get_language_bidi(): + <%static:css group='style-course-rtl'/> + % else: + <%static:css group='style-course'/> + % endif <%block name="nav_skip">#course-content diff --git a/lms/templates/courseware/gradebook.html b/lms/templates/courseware/gradebook.html index 4b1175590b90..4040eb44b266 100644 --- a/lms/templates/courseware/gradebook.html +++ b/lms/templates/courseware/gradebook.html @@ -1,4 +1,5 @@ <%! from django.utils.translation import ugettext as _ %> +<%! from django.utils.translation import get_language_bidi %> <%inherit file="/main.html" /> <%! from django.core.urlresolvers import reverse %> <%namespace name='static' file='/static_content.html'/> @@ -11,8 +12,12 @@ <%block name="headextra"> -<%static:css group='style-course-vendor'/> -<%static:css group='style-course'/> + <%static:css group='style-course-vendor'/> + % if get_language_bidi(): + <%static:css group='style-course-rtl'/> + % else: + <%static:css group='style-course'/> + % endif +