Merge pull request #164 from edx/waheed/add-pattern-library

Added edx pattern library.

Makefile

 .DEFAULT_GOAL := test
+NODE_BIN=./node_modules/.bin
 
 .PHONY: accept clean compile_translations dummy_translations extract_translations fake_translations help html_coverage \
 	migrate pull_translations push_translations quality requirements production-requirements test \
@@ -29,6 +30,7 @@ help:
 	@echo ""
 
 static:
+	$(NODE_BIN)/r.js -o build.js
 	python manage.py collectstatic --noinput
 
 clean_static:
@@ -38,7 +40,11 @@ clean: clean_static
 	find . -name '*.pyc' -delete
 	coverage erase
 
-requirements:
+requirement.js:
+	npm install
+	$(NODE_BIN)/bower install
+
+requirements: requirement.js
 	pip install -r requirements/local.txt --exists-action w
 
 production-requirements:

bower.json

+{
+  "name": "course-discovery",
+  "homepage": "https://github.com/edx/course-discovery",
+  "private": true,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "dependencies": {
+    "edx-pattern-library": "0.16.1"
+  }
+}

build.js

+/* jshint asi:true, expr:true */
+({
+    mainConfigFile: 'course_discovery/static/js/config.js',
+    baseUrl: 'course_discovery/static',
+    dir: 'course_discovery/static/build',
+    removeCombined: true,
+    findNestedDependencies: true,
+
+    // Disable all optimization. django-compressor will handle that for us.
+    optimizeCss: false,
+    optimize: 'none',
+    normalizeDirDefines: 'all',
+    skipDirOptimize: true,
+
+    preserveLicenseComments: true,
+    modules: [
+        {
+            name: 'js/config'
+        },
+    ]
+})

course_discovery/apps/core/context_processors.py

 """ Core context processors. """
 from django.conf import settings
+from django.utils.translation import get_language_bidi
 
 
 def core(_request):
     """ Site-wide context processor. """
     return {
-        'platform_name': settings.PLATFORM_NAME
+        'platform_name': settings.PLATFORM_NAME,
+        'language_bidi': 'rtl' if get_language_bidi() else 'ltr'
     }

course_discovery/apps/core/tests/test_context_processors.py

@@ -13,4 +13,4 @@ class CoreContextProcessorTests(TestCase):
     @override_settings(PLATFORM_NAME=PLATFORM_NAME)
     def test_core(self):
         request = RequestFactory().get('/')
-        self.assertDictEqual(core(request), {'platform_name': PLATFORM_NAME})
+        self.assertDictEqual(core(request), {'platform_name': PLATFORM_NAME, 'language_bidi': 'ltr'})

course_discovery/settings/base.py

@@ -40,6 +40,7 @@ THIRD_PARTY_APPS = (
     'simple_history',
     'guardian',
     'dry_rest_permissions',
+    'compressor',
 )
 
 PROJECT_APPS = (
@@ -131,6 +132,27 @@ STATICFILES_DIRS = (
     root('static'),
 )
 
+STATICFILES_FINDERS = (
+    'django.contrib.staticfiles.finders.FileSystemFinder',
+    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
+    'compressor.finders.CompressorFinder',
+)
+
+COMPRESS_PRECOMPILERS = (
+    ('text/x-scss', 'django_libsass.SassCompiler'),
+)
+
+# Enable offline compression of CSS/JS
+COMPRESS_ENABLED = True
+COMPRESS_OFFLINE = True
+
+# Minify CSS
+COMPRESS_CSS_FILTERS = [
+    'compressor.filters.css_default.CssAbsoluteFilter',
+    'compressor.filters.cssmin.CSSMinFilter',
+]
+
+
 # TEMPLATE CONFIGURATION
 # See: https://docs.djangoproject.com/en/1.8/ref/settings/#templates
 TEMPLATES = [
@@ -337,3 +359,7 @@ ORGANIZATIONS_API_URL = 'http://127.0.0.1:8000/api/organizations/v0/'
 PROGRAMS_API_URL = 'http://127.0.0.1:8003/api/v1/'
 MARKETING_API_URL = 'http://example.org/api/catalog/v2/'
 MARKETING_URL_ROOT = 'http://example.org/'
+
+COMPRESS_PRECOMPILERS = (
+    ('text/x-scss', 'django_libsass.SassCompiler'),
+)

course_discovery/static/js/config.js

+require.config({
+    baseUrl: '/static/',
+    paths: {},
+    shim: {}
+});

course_discovery/static/sass/_base.scss

+// ------------------------------
+// // edX Course Discovery: Base
+
+// About: Base resets and definitons (using shared resources from elements when appropriate).
+
+// ------------------------------
+// #RESET
+// ------------------------------
+
+// ------------------------------
+// #BASE
+// ------------------------------
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    background: palette(grayscale-cool, xx-light);
+}
+
+// ------------------------------
+// #TYPOGRAPHY
+// ------------------------------

course_discovery/static/sass/_build.scss

+// ------------------------------
+// edX Course Discovery: Shared Build
+
+// About: Shared sass compilation between LTR/RTL produced stylesheets
+
+// #CONFIG:         app-centric configuration/overrides
+// #LIB:            third party libraries and dependencies
+// #EXTENSIONS:     add-ons and further customizations
+
+// ------------------------------
+// #CONFIG
+// ------------------------------
+@import 'config';
+
+// ------------------------------
+// #LIB
+// ------------------------------
+@import "lib";
+@import '../bower_components/edx-pattern-library/pattern-library/sass/edx-pattern-library';

course_discovery/static/sass/_config.scss

+// ------------------------------
+// edX Course Discovery: Config
+
+// About: variable and configuration overrides
+
+// ------------------------------
+// #VARIABLES
+// ------------------------------
+$pattern-library-path: '../bower_components/edx-pattern-library' !default;

course_discovery/static/sass/_lib.scss

+// ------------------------------
+// edX Course Discovery: Third Party Libraries
+
+// About: third party libraries and dependencies import
+
+@import '../bower_components/bourbon/app/assets/stylesheets/bourbon';
+@import '../bower_components/susy/sass/susy';
+@import '../bower_components/breakpoint-sass/stylesheets/breakpoint';

course_discovery/static/sass/_ltr.scss

+// ------------------------------
+// edX Pattern Library Site: LTR directional settings & support
+
+// About: Sass partial for defining settings and utilities for LTR-centric layouts.
+
+// #SETTINGS
+// #LIB
+
+
+// ----------------------------
+// #SETTINGS
+// ----------------------------
+$layout-direction: ltr;
+
+
+// ----------------------------
+// #LIB
+// ----------------------------
+@import '../bower_components/bi-app-sass/bi-app/bi-app-ltr';

course_discovery/static/sass/_rtl.scss

+// ------------------------------
+// edX Pattern Library Site: RTL directional settings & support
+
+// About: Sass partial for defining settings and utilities for RTL-centric layouts.
+
+// #SETTINGS
+// #LIB
+
+
+// ----------------------------
+// #SETTINGS
+// ----------------------------
+$layout-direction: rtl;
+
+
+// ----------------------------
+// #LIB
+// ----------------------------
+@import '../bower_components/bi-app-sass/bi-app/bi-app-rtl';

course_discovery/static/sass/main-ltr.scss

+// ------------------------------
+// edX Course Discovery: Main Style Compile - LTR
+
+// About: Main left-to-right Sass compile for the edX Course Discovery styling.
+
+// ------------------------------
+// #CONFIG - layout direction
+// ------------------------------
+@import "ltr";
+
+// ------------------------------
+// #BUILD
+// ------------------------------
+@import 'build';

course_discovery/static/sass/main-rtl.scss

+// ------------------------------
+// edX Course Discovery: Main Style Compile - RTL
+
+// About: Main left-to-right Sass compile for the edX Course Discovery styling.
+
+// ------------------------------
+// #CONFIG - layout direction
+// ------------------------------
+@import "rtl";
+
+// ------------------------------
+// #BUILD
+// ------------------------------
+@import 'build';

course_discovery/templates/base.html

+{# Base template for edX-specific pages. #}
+
+{% load compress %}
+{% load i18n %}
+{% load staticfiles %}
+
+<!DOCTYPE html>
+<html>
+<head lang="{{ language_code }}">
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}{% endblock title %}</title>
+    {% compress css %}
+        <link rel="stylesheet" href="{% static 'sass/main-'|add:language_bidi|add:'.scss' %}" type="text/x-scss">
+    {% endcompress %}
+</head>
+
+<body>
+{% block content %}
+
+{% endblock content %}
+</body>
+</html>

gulpfile.js

+'use strict';
+
+var gulp = require('gulp'),
+    jscs = require('gulp-jscs'),
+    path = require('path'),
+    paths = {
+        spec: [
+            'course_discovery/static/js/**/*.js',
+            'course_discovery/static/templates/**/*.js'
+        ],
+        lint: [
+            'build.js',
+            'gulpfile.js',
+            'course_discovery/static/js/**/*.js',
+            'course_discovery/static/js/test/**/*.js'
+        ]
+    };
+
+/**
+ * Runs the JavaScript Code Style (JSCS) linter.
+ *
+ * http://jscs.info/
+ */
+gulp.task('jscs', function () {
+    return gulp.src(paths.lint)
+        .pipe(jscs());
+});
+
+/**
+ * Monitors the source and test files, running tests
+ * and linters when changes detected.
+ */
+gulp.task('watch', function () {
+    gulp.watch(paths.spec, ['jscs']);
+});

package.json

+{
+  "name": "course-discovery",
+  "license": "AGPL-3.0",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/edx/course-discovery"
+  },
+  "dependencies": {
+    "bower": "^1.7.9",
+    "requirejs": "^2.2.0"
+  },
+  "devDependencies": {
+    "gulp": "^3.9.1",
+    "gulp-jscs": "4.0.0"
+  }
+}

requirements/base.txt

@@ -3,6 +3,7 @@ django==1.8.13
 django-extensions==1.6.7
 django-guardian==1.4.4
 django-haystack==2.4.1
+django-libsass==0.7
 django-simple-history==1.8.1
 django-sortedm2m==1.3.0
 django-waffle==0.11.1