Skip to content

E
edx-platform
Commit a0caf13d by Brian Talbot
Options

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

parent 12d1992e
Showing with 426 additions and 46 deletions
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 0 → 100644
// ------------------------------
// 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 0 → 100644
// ------------------------------
// 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 0 → 100644
// ------------------------------
// 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 0 → 100755
// ------------------------------------------
// 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 0 → 100755
// ------------------------------------------
// 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 0 → 100755
// ------------------------------------------
// 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 0 → 100755
// ------------------------------------------
// 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 0 → 100755
// ------------------------------------------
// 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>
......
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