Build and integrate multiple pages

.eslintrc.json

@@ -0,0 +1,58 @@
+{
+  "extends": "airbnb/legacy",
+  "env": {
+    "jquery": true,
+    "browser": true
+  },
+  "rules": {
+    "max-len": [
+      2,
+      100,
+      2
+    ],
+    "one-var": 0,
+    "one-var-declaration-per-line": 0,
+    "no-unused-vars": 0,
+    "new-cap": 0,
+    "consistent-return": 0,
+    "no-param-reassign": 0,
+    "comma-dangle": 0,
+    "curly": [
+      "error",
+      "multi-line"
+    ],
+    "import/no-unresolved": 0,
+    "no-shadow": [
+      "error",
+      {
+        "allow": [
+          "req",
+          "res",
+          "err"
+        ]
+      }
+    ],
+    "valid-jsdoc": [
+      "error",
+      {
+        "requireReturn": true,
+        "requireReturnType": true,
+        "requireParamDescription": false,
+        "requireReturnDescription": true
+      }
+    ],
+    "require-jsdoc": [
+      "error",
+      {
+        "require": {
+          "FunctionDeclaration": false,
+          "MethodDefinition": true,
+          "ClassDeclaration": true
+        }
+      }
+    ]
+  },
+  "plugins": [
+    "import"
+  ]
+}

.hound.yml

@@ -0,0 +1,6 @@
+eslint:
+  enabled: true
+  config_file: .eslintrc.json
+  ignore_file: .eslintignore
+scss:
+  enabled: false

coursebuilder/assets/css/main.css

@@ -24,43 +24,10 @@
 
 /* Wide-ranging styles. */
 
-html {
-  background: #fff;
-  color: #444;
-  font-size: 13px;
-  line-height: 1.54;
-  padding: 0 15px;
-}
-
-html, input, textarea {
-  font-family: arial,sans-serif;
-}
-
 body, table, fieldset {
   margin: 0;
 }
 
-h1, h2, h3, h4, blockquote, q, .gcb-nav ul {
-  font-family: "open sans",arial,sans-serif;
-}
-
-ul, ol {
-  margin: 10px 10px 10px 30px;
-  padding: 0;
-}
-
-a {
-  color: #15c;
-  text-decoration: none;
-}
-
-a:visited {
-  color: #7847b2;
-}
-
-a:focus, a:hover, a:active {
-  text-decoration: underline;
-}
 
 form label, form p, form input, form textarea, form select {
   margin: 0 0 5px;
@@ -247,9 +214,6 @@ th, td, .th, .td {
 }
 
 .gcb-breadcrumb {
-  font-size: 11px;
-  margin: 0 0 20px;
-  min-height: 28px;
   overflow: hidden;
 }
 
@@ -286,43 +250,6 @@ th, td, .th, .td {
   font-family: "open sans",arial,sans-serif;
 }
 
-.gcb-button {
-  background-color: #666;
-  background-image: -moz-linear-gradient(top,#777,#555);
-  background-image: -webkit-linear-gradient(top,#777,#555);
-  background-image: linear-gradient(top,#777,#555);
-  background-position: left bottom;
-  background-repeat: repeat-x;
-  border: 1px solid #505050;
-  -moz-border-radius: 2px;
-  -webkit-border-radius: 2px;
-  border-radius: 2px;
-  -moz-box-shadow: 0 1px 1px rgba(0,0,0,.2);
-  -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2);
-  box-shadow: 0 1px 1px rgba(0,0,0,.2);
-  color: white;
-  display: inline-block;
-  font-family: "open sans",arial,sans-serif;
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 1.54;
-  padding: 4px 7px;
-  text-align: center;
-  text-shadow: 0 1px rgba(0,0,0,.1);
-  -moz-transition: all .218s ease-in;
-  -webkit-transition: all .218s ease-in;
-  transition: all .218s ease-in;
-}
-
-.gcb-button[disabled], .gcb-button[disabled]:hover {
-  background: none;
-  background-image: -moz-linear-gradient(top,rgba(226,226,226,.14),rgba(34,34,34,.14));
-  background-image: -webkit-linear-gradient(top,rgba(226,226,226,.14),rgba(34,34,34,.14));
-  background-image: linear-gradient(top,rgba(226,226,226,.14),rgba(34,34,34,.14));
-  border-color: #f3f3f3;
-  color: #b8b8b8;
-}
-
 .gcb-button-large {
   width: 200px;
   height: 48px;
@@ -331,39 +258,6 @@ th, td, .th, .td {
   margin: 12px;
 }
 
-a.gcb-button {
-  color: #fff !important;
-  text-decoration: none;
-}
-
-button.gcb-button {
-  margin: 0;
-  overflow: visible;
-  white-space: normal;
-}
-
-button.gcb-button::-moz-focus-inner {
-  border: 0;
-  padding: 0;
-}
-
-.gcb-button:hover, .gcb-button:focus {
-  border-color: #404040;
-  background-image: -moz-linear-gradient(top,#444,#111);
-  background-image: -webkit-linear-gradient(top,#444,#111);
-  background-image: linear-gradient(top,#444,#111);
-}
-
-.gcb-button:focus {
-  outline: 0;
-}
-
-.gcb-button:active {
-  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
-  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
-  box-shadow: inset 0 1px 2px rgba(0,0,0,.3);
-}
-
 a.gcb-button-action, button.gcb-button-action {
   float: right;
   margin-left: 8px;
@@ -794,8 +688,7 @@ table.gcb-student-data-table {
 
 /* A box that surrounds read-only assessments. */
 .gcb-border-box {
-  border: 1px solid black;
-  margin: 20px;
+  margin: 20px 0;
   padding: 10px;
 }
 
@@ -902,9 +795,6 @@ div#base-before-navbar-ends {
   font-size: xx-small;
 }
 
-.gcb-last-location {
-  background-color: #DEF;
-}
 
 /*
  * Extra CSS for views/unit.html in order to suppress everything (all navigation

coursebuilder/modules/assessments/templates/assessment_page.html

@@ -47,8 +47,46 @@
 
 {% block main_content %}
   <div id="gcb-main">
-    <div class="gcb-article">
-        {{ main_content }}
+
+    <div id="course-page" class="page-wrapper active-page">
+      <div class="green-section">
+        <div class="course-links">
+          <button class="course-bookmark waves-effect waves-light btn">
+            <i class="material-icons">star_border</i> BOOKMARK
+          </button>
+          <button class="course-share waves-effect waves-light btn">
+            <i class="material-icons">share</i>
+            SHARE
+          </button>
+        </div>
+
+        <h2>Assessment</h2>
+        <h3>
+          <ul id="gcb-breadcrumb" class="gcb-breadcrumb">
+            {# I18N: Navigation breadcrumb. #}
+            <li><a href="course">{{ gettext('Course') }}</a></li>
+            <li>Activity</li>
+          </ul>
+        </h3>
+
+      </div>
+
+
+      <div class="course-content">
+        <div class="row">
+
+          <div class="course-card m12">
+            <div class="card">
+
+              <div class="gcb-article">
+                {{ main_content }}
+              </div>
+
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
+
   </div>
 {% endblock %}

coursebuilder/modules/explorer/_static/components/course-cards/course-card-grouper.html

@@ -8,11 +8,8 @@ <h2>No courses</h2>
     </template>
 
                 <div id="library">
-                  <template is="dom-if" if="[[otherCourses.length]]">
-
                     <course-cards courses="[[openCourses]]"></course-cards>
                     <course-cards courses="[[otherCourses]]"></course-cards>
-                  </template>
                 </div>
 
   </template>

coursebuilder/modules/explorer/_static/js/main.js

@@ -1,50 +1,50 @@
-$(document).ready(function(){
+$(document).ready(function documentReady() {
   $(".button-collapse").sideNav();
-  
+
   $('.awards-carousel').owlCarousel({
-    loop:true,
-    margin:10,
-    nav:true,
+    loop: true,
+    margin: 10,
+    nav: true,
     dots: false,
     navText: ['<i class="ion-ios-arrow-left"></i>', '<i class="ion-ios-arrow-right"></i>'],
-    responsive:{
-      0:{
-        items:1
+    responsive: {
+      0: {
+        items: 1
       },
-      600:{
-        items:2
+      600: {
+        items: 2
       },
-      1000:{
-        items:4
+      1000: {
+        items: 4
       }
     }
   });
-  
+
   $('.how-carousel').owlCarousel({
-    loop:true,
-    margin:10,
-    nav:true,
+    loop: true,
+    margin: 10,
+    nav: true,
     navText: ['<i class="ion-ios-arrow-left"></i>', '<i class="ion-ios-arrow-right"></i>'],
-    items: 1,
+    items: 1
   });
 
 
-    function showPage(pageName) {
-        $('.page-wrapper').hide();
-        $('#' + pageName).show();
-    }
+  function showPage(pageName) {
+    $('.page-wrapper').hide();
+    $('#' + pageName).show();
+  }
 
-    var pageLinks = ['explorer', 'certification', 'homepage', 'tools', 'partners', 'feedback'];
+  var pageLinks = ['explorer', 'certification', 'homepage', 'tools', 'partners', 'feedback'];
 
-    pageLinks.forEach(function (name) {
-        $('a[href="#!' + name + '"]').on('click', function () {
-            showPage(name);
-        });
+  pageLinks.forEach(function addLinks(name) {
+    $('a[href="#!' + name + '"]').on('click', function showPageEvent() {
+      showPage(name);
+    });
 
-        if (window.location.href.substr(-name.length) === name) {
-            showPage(name);
-        }
-    })
+    if (window.location.href.substr(-name.length) === name) {
+      showPage(name);
+    }
+  });
 
-    $('select').material_select();
+  $('select').material_select();
 });