certificates: prepping sass + vendor code to compile LTR/RTL options

lms/djangoapps/certificates/migrations/0020_certificatehtmlviewconfiguration_data.py

@@ -14,7 +14,7 @@ class Migration(DataMigration):
         json_config = """{
             {
     "default": {
-        "accomplishment_class_append": "accomplishment--certificate",
+        "accomplishment_class_append": "accomplishment-certificate",
         "certificate_verify_url_prefix": "https://verify-test.edx.org/cert/",
         "certificate_verify_url_suffix": "/verify.html",
         "company_about_url": "http://www.edx.org/about-us",
@@ -22,7 +22,7 @@ class Migration(DataMigration):
         "company_privacy_url": "http://www.edx.org/edx-privacy-policy",
         "company_tos_url": "http://www.edx.org/edx-terms-service",
         "company_verified_certificate_url": "http://www.edx.org/verified-certificate",
-        "document_stylesheet_url_application": "/static/certificates/css/style-application.css",
+        "document_stylesheet_url_application": "/static/certificates/css/main-ltr.css",
         "logo_src": "/static/certificates/images/logo-edx.svg",
         "logo_url": "http://www.edx.org"
     },

lms/djangoapps/certificates/tests/factories.py

@@ -32,7 +32,7 @@ class CertificateHtmlViewConfigurationFactory(DjangoModelFactory):
                 "company_privacy_url": "http://www.edx.org/edx-privacy-policy",
                 "company_tos_url": "http://www.edx.org/edx-terms-service",
                 "company_verified_certificate_url": "http://www.edx.org/verified-certificate",
-                "document_stylesheet_url_application": "/static/certificates/css/style-application.css",
+                "document_stylesheet_url_application": "/static/certificates/css/main-ltr.css",
                 "logo_src": "/static/certificates/images/logo-edx.svg",
                 "logo_url": "http://www.edx.org"
             },

lms/static/certificates/sass/main.scss → lms/static/certificates/sass/_build.scss

 // ------------------------------
-// Open edX Certificates: Main Style Compile
+// Open edX Certificates: Shared Build Compile
 
-// About: Sass compile for Open edX certificates. This does not contain styles for other Open edX products/experiences (e.g. account/onboarding).
-
-// ------------------------------
-// #VENDOR
-// ------------------------------
-@import '../vendor/bourbon/bourbon';
-@import '../vendor/neat/neat';
 @import '../vendor/normalize/normalize';
 
 // ------------------------------
 // #UTILITIES
 // ------------------------------
-@import 'utilities/variables';
 @import 'utilities/mixins';
 
 // ------------------------------
@@ -51,5 +43,3 @@
 // #SHAME
 // ------------------------------
 @import 'utilities/shame';
-
-

lms/static/certificates/sass/components/_footer.scss

@@ -49,55 +49,54 @@
 .footer-app-nav {
   @include span-columns(8 of 12);
   @include omega();
-  text-align: right;
+  @include text-align(right);
 
   @include media($bp-large) {
     @include fill-parent;
-    text-align: left;
+    @include text-align(left);
   }
 
   @include media($bp-medium) {
     @include fill-parent;
-    text-align: left;
+    @include text-align(left);
   }
 
   @include media($bp-small) {
     @include fill-parent;
-    text-align: left;
+    @include text-align(left);
   }
 
   .list {
     display: inline-block;
     vertical-align: middle;
-    margin-right: ($baseline-h*2);
+    @include margin-right($baseline-h*2);
 
     &:last-child {
-      margin-right: 0;
+      @include margin-right(0);
     }
 
     @include media($bp-large) {
       @include fill-parent;
       margin: 0 0 $baseline-v 0;
-      text-align: left;
+      @include text-align(left);
     }
 
     @include media($bp-medium) {
       @include fill-parent;
       margin: 0 0 $baseline-v 0;
-      text-align: left;
+      @include text-align(left);
     }
 
     @include media($bp-small) {
       @include fill-parent;
       margin: 0 0 $baseline-v 0;
-      text-align: left;
-    }
+      @include text-align(left);    }
   }
 
   .nav-item {
     @extend %t-action5;
     display: inline-block;
-    margin-right: ($baseline-h/2);
+    @include margin-right($baseline-h/2);
 
     @include media($bp-large) {
       @include font-size(14);

lms/static/certificates/sass/components/_header.scss

@@ -29,7 +29,7 @@
   .logo {
     display: inline-block;
     vertical-align: middle;
-    margin-right: ($baseline-h);
+    @include margin-right($baseline-h);
   }
 
   .title-sub {

lms/static/certificates/sass/main-ltr.scss

+// ------------------------------
+// Open edX Certificates: Main Style Compile (LTR)
+
+// About: Sass compile for Open edX certificates. This does not contain styles for other Open edX products/experiences (e.g. account/onboarding).
+
+// ------------------------------
+// #VENDOR
+// ------------------------------
+@import '../vendor/bourbon/bourbon';
+@import '../vendor/neat/neat';
+@import '../vendor/bi-app/bi-app-ltr';   // LTR support
+
+// ------------------------------
+// #UTILITIES
+// ------------------------------
+@import 'utilities/variables';
+
+@import 'build';
+

lms/static/certificates/sass/main-rtl.scss

+// ------------------------------
+// Open edX Certificates: Main Style Compile (RTL)
+
+// About: Sass compile for Open edX certificates. This does not contain styles for other Open edX products/experiences (e.g. account/onboarding).
+
+// ------------------------------
+// #VENDOR
+// ------------------------------
+@import '../vendor/bourbon/bourbon';
+@import '../vendor/neat/neat';
+@import '../vendor/bi-app/bi-app-rtl';   // RTL support
+
+// ------------------------------
+// #UTILITIES
+// ------------------------------
+@import 'utilities/variables';
+@import 'utilities/variables-rtl';
+
+@import 'build';
+

lms/static/certificates/sass/utilities/_mixins.scss

@@ -19,10 +19,10 @@
 
   &:first-child {
     margin-top: 0;
-    margin-left: 0;
+    @include margin-left(0);
     border: none;
     padding-top: 0;
-    padding-left: 0;
+    @include padding-left(0);
   }
 }
 
@@ -31,10 +31,10 @@
 
   &:last-child {
     margin-bottom: 0;
-    margin-right: 0;
+    @include margin-left(0);
     border: none;
     padding-bottom: 0;
-    padding-right: 0;
+    @include padding-right(0);
   }
 }
 

lms/static/certificates/sass/utilities/_variables-rtl.scss

+// ------------------------------
+// Open edX Certificates: Variables  (RTL)
+
+// grid
+$default-layout-direction: RTL !global;

lms/static/certificates/sass/utilities/_variables.scss

 // ------------------------------
-// Open edX Certificates: Variables
+// Open edX Certificates: Variables (LTR)
 
 // units
 $baseline-v: 20px;                                                  // vertical baseline
@@ -103,6 +103,7 @@ $f-monospace: 'Bitstream Vera Sans Mono', Consolas, Courier, monospace;
 // grid
 @import "neat/neat-helpers";
 
+$default-layout-direction: LTR !global;
 $max-width: 1280px;
 $grid-columns: 12;                                                  // make grid 12 columns
 $column: ($baseline-v*4.25);                                               // columns

lms/static/certificates/sass/views/_certificate.scss

@@ -59,6 +59,7 @@
 
     .title {
       @extend %t-title-6;
+      @include text-align(left);
 
       @include media($bp-xlarge) {
         @include span-columns(9 of 12);

lms/static/certificates/sass/views/_valid.scss

@@ -27,25 +27,25 @@
   .accomplishment-statement {
     @extend %trans-size;
     @include span-columns(8 of 12);
-    @include pad(0 $baseline-h 0 0);
-    border-right: 1px solid $gray-l5;
+    @include padding-right($baseline-h);
+    @include border-right(1px solid $gray-l5);
 
     @include media($bp-large) {
       @include fill-parent;
-      @include pad(0);
-      border-right: none;
+      @include padding-right(0);
+      @include border-right(none);
     }
 
     @include media($bp-medium) {
       @include fill-parent;
-      @include pad(0);
-      border-right: none;
+      @include padding-right(0);
+      @include border-right(none);
     }
 
     @include media($bp-small) {
       @include fill-parent;
-      @include pad(0);
-      border-right: none;
+      @include padding-right(0);
+      @include border-right(none);
     }
 
     [class^="copy-"] {

lms/static/certificates/sass/views/_validate.scss

@@ -114,7 +114,7 @@
         display: inline-block;
         vertical-align: top;
         max-width: 10%;
-        margin-right: ($baseline-h/2);
+        @include margin-right($baseline-h/2);
         color: $gray-l3;
       }
 
@@ -207,7 +207,7 @@
         display: inline-block;
         vertical-align: top;
         max-width: 10%;
-        margin-right: ($baseline-h/2);
+        @include margin-right($baseline-h/2);
         color: $gray-l4;
       }
 

lms/static/certificates/vendor/bi-app/_bi-app-ltr.scss

+// ------------------------------------------
+// left to right module
+// authors: 
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license 
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+@import 'variables-ltr';
+@import 'mixins';
\ No newline at end of file

lms/static/certificates/vendor/bi-app/_bi-app-rtl.scss

+// ------------------------------------------
+// right to left module
+// authors: 
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license 
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+@import 'variables-rtl';
+@import 'mixins';
\ No newline at end of file

lms/static/certificates/vendor/bi-app/_mixins.scss

+// ------------------------------------------
+// bi app mixins
+// authors: 
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license 
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+// ------------------------------------------
+// Table of contents
+// ------------------------------------------
+// padding
+// margin
+// float
+// text align
+// clear
+// left / right
+// border
+//  - width
+//  - style
+//  - color
+//  - generic
+//  - radius
+// ltr / rtl contents
+// ------------------------------------------
+
+// generic mixin for properties with values
+// (top right bottom left)
+// ------------------------------------------
+@mixin bi-app-compact($property, $top, $right, $bottom, $left) {
+  @if $bi-app-direction == ltr {
+    #{$property}: $top $right $bottom $left;
+  } @else {
+    #{$property}: $top $left $bottom $right;
+  }
+}
+
+// padding
+// ------------------------------------------
+@mixin padding-left($distance) {
+  padding-#{$bi-app-left}: $distance;
+}
+
+@mixin padding-right($distance) {
+  padding-#{$bi-app-right}: $distance;
+}
+
+@mixin padding($top, $right, $bottom, $left) {
+  @include bi-app-compact(padding, $top, $right, $bottom, $left);
+}
+
+// margin
+// ------------------------------------------
+@mixin margin-left($distance) {
+  margin-#{$bi-app-left}: $distance;
+}
+
+@mixin margin-right($distance) {
+  margin-#{$bi-app-right}: $distance;
+}
+
+@mixin margin($top, $right, $bottom, $left) {
+  @include bi-app-compact(margin, $top, $right, $bottom, $left);
+}
+
+// float
+// ------------------------------------------
+@mixin bi-app-float-left {
+  float: $bi-app-left;
+}
+
+@mixin bi-app-float-right {
+  float: $bi-app-right;
+}
+
+@mixin float($direction) {
+  @if $direction == left {
+    @include bi-app-float-left;
+  } @else if $direction == right {
+    @include bi-app-float-right;
+  } @else {
+    float: $direction;
+  }
+}
+
+// text align
+// ------------------------------------------
+@mixin bi-app-text-align-left {
+  text-align: $bi-app-left;
+}
+
+@mixin bi-app-text-align-right {
+  text-align: $bi-app-right;
+}
+
+@mixin text-align($direction) {
+  @if $direction == left {
+    @include bi-app-text-align-left;
+  } @else if $direction == right {
+    @include bi-app-text-align-right;
+  } @else {
+    text-align: $direction;
+  }
+}
+
+// clear
+// ------------------------------------------
+@mixin bi-app-clear-left {
+  clear: $bi-app-left;
+}
+
+@mixin bi-app-clear-right {
+  clear: $bi-app-right;
+}
+
+@mixin clear($direction) {
+  @if $direction == left {
+    @include bi-app-clear-left;
+  } @else if $direction == right {
+    @include bi-app-clear-right;
+  } @else {
+    clear: $direction;
+  }
+}
+
+// left / right
+// ------------------------------------------
+@mixin left($distance) {
+  @if $bi-app-direction == ltr {
+    left: $distance;
+  } @else if $bi-app-direction == rtl {
+    right: $distance;
+  }
+}
+
+@mixin right($distance) {
+  @if $bi-app-direction == ltr {
+    right: $distance;
+  } @else if $bi-app-direction == rtl {
+    left: $distance;
+  }
+}
+
+// border
+// ------------------------------------------
+
+// width
+@mixin border-left-width($width) {
+  border-#{$bi-app-left}-width: $width;
+}
+
+@mixin border-right-width($width) {
+  border-#{$bi-app-right}-width: $width;
+}
+
+@mixin border-width($top, $right, $bottom, $left) {
+  @include bi-app-compact(border-width, $top, $right, $bottom, $left);
+}
+
+// style
+@mixin border-left-style($style) {
+  border-#{$bi-app-left}-style: $style;
+}
+
+@mixin border-right-style($style) {
+  border-#{$bi-app-right}-style: $style;
+}
+
+@mixin border-style($top, $right, $bottom, $left) {
+  @include bi-app-compact(border-style, $top, $right, $bottom, $left);
+}
+
+// color
+@mixin border-left-color($color) {
+  border-#{$bi-app-left}-color: $color;
+}
+
+@mixin border-right-color($color) {
+  border-#{$bi-app-right}-color: $color;
+}
+
+@mixin border-color($top, $right, $bottom, $left) {
+  @include bi-app-compact(border-color, $top, $right, $bottom, $left);
+}
+
+// generic
+@mixin border-left($border-style) {
+  border-#{$bi-app-left}: $border-style;
+}
+
+@mixin border-right($border-style) {
+  border-#{$bi-app-right}: $border-style;
+}
+
+// radius
+@mixin border-top-left-radius($radius) {
+  -webkit-border-top-#{$bi-app-left}-radius: $radius;
+     -moz-border-top#{$bi-app-left}-radius: $radius;
+          border-top-#{$bi-app-left}-radius: $radius;
+}
+
+@mixin border-top-right-radius($radius) {
+  -webkit-border-top-#{$bi-app-right}-radius: $radius;
+     -moz-border-top#{$bi-app-right}-radius: $radius;
+          border-top-#{$bi-app-right}-radius: $radius;
+}
+
+@mixin border-bottom-left-radius($radius) {
+  -webkit-border-bottom-#{$bi-app-left}-radius: $radius;
+     -moz-border-bottom#{$bi-app-left}-radius: $radius;
+          border-bottom-#{$bi-app-left}-radius: $radius;
+}
+
+@mixin border-bottom-right-radius($radius) {
+  -webkit-border-bottom-#{$bi-app-right}-radius: $radius;
+     -moz-border-bottom#{$bi-app-right}-radius: $radius;
+          border-bottom-#{$bi-app-right}-radius: $radius;
+}
+
+@mixin border-right-radius($radius) {
+  @include border-top-right-radius($radius);
+  @include border-bottom-right-radius($radius);
+}
+
+@mixin border-left-radius($radius) {
+  @include border-top-left-radius($radius);
+  @include border-bottom-left-radius($radius);
+}
+
+@mixin border-top-radius($radius) {
+  @include border-top-left-radius($radius);
+  @include border-top-right-radius($radius);
+}
+
+@mixin border-bottom-radius($radius) {
+  @include border-bottom-left-radius($radius);
+  @include border-bottom-right-radius($radius);
+}
+
+@mixin border-radius($topLeft, $topRight: null, $bottomRight: null, $bottomLeft: null) {
+  @if $topRight != null {
+    @include border-top-left-radius($topLeft);
+    @include border-top-right-radius($topRight);
+    @include border-bottom-right-radius($bottomRight);
+    @include border-bottom-left-radius($bottomLeft);
+  } @else {
+    -webkit-border-radius: $topLeft;
+       -moz-border-radius: $topLeft;
+        -ms-border-radius: $topLeft;
+         -o-border-radius: $topLeft;
+            border-radius: $topLeft;
+  }
+}
+
+// Returns "en" or "ar", useful for image suffixes.
+// Usage: background-image: url(/img/header-#{lang()}.png);
+@function lang() {
+  @if $bi-app-direction == ltr {
+    @return 'en';
+  } @else {
+    @return 'ar';
+  }
+}
+
+// Support for "direction" declaration (renders ltr/rtl).
+// Useful for form elements as they swap the text-indent property and align the text accordingly.
+@mixin direction {
+  direction: $bi-app-direction;
+}
+
+// Inverts a percentage value. Example: 97% becames 3%.
+// Useful for background-position.
+@function bi-app-invert-percentage($percentage) {
+  @if $bi-app-direction == rtl {
+    @return 100% - $percentage;
+  } @else {
+    @return $percentage;
+  }
+}
+
+// ltr / rtl contents
+// ------------------------------------------
+@mixin ltr {
+  @if $bi-app-direction == ltr {
+    @content;
+  }
+}
+
+@mixin rtl {
+  @if $bi-app-direction == rtl {
+    @content;
+  }
+}

lms/static/certificates/vendor/bi-app/_variables-ltr.scss

+// ------------------------------------------
+// left to right variables to be used by bi-app mixins
+// authors: 
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license 
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+// namespacing variables with bi-app to
+// avoid conflicting with other global variables
+$bi-app-left 				    : left;
+$bi-app-right 				  : right;
+$bi-app-direction 			: ltr;
+$bi-app-invert-direction: rtl;
\ No newline at end of file

lms/static/certificates/vendor/bi-app/_variables-rtl.scss

+// ------------------------------------------
+// right to left variables to be used by bi-app mixins
+// authors: 
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license 
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+// namespacing variables with bi-app to
+// avoid conflicting with other global variables
+$bi-app-left 				    : right;
+$bi-app-right           : left;
+$bi-app-direction 			: rtl;
+$bi-app-invert-direction: ltr;
\ No newline at end of file

lms/templates/certificates/certificate-base.html

@@ -17,11 +17,6 @@
 
         <title>${document_title}</title>
 
-        <!-- TODO: add description -->
-        <meta name="description" content="">
-
-        <!-- TODO: add google analytics -->
-
         <%include file="_assets-primary.html" />
     </head>