Fixes to make the latest Canvas release work with our design.

matematikk-mooc · Feb 20, 2017 · 007589b · 007589b
2 parents 9013988 + ee3fc56
commit 007589b
Show file tree

Hide file tree

Showing 12 changed files with 75 additions and 80 deletions.
diff --git a/gruntcss.css b/gruntcss.css
@@ -1,2 +1 @@
-@import "http://localhost:9000/mmooc-min-dev.css";
-
+@import "http://localhost:9000/mmooc-min-dev.css";
diff --git a/gruntjs.js b/gruntjs.js
@@ -1,6 +1,3 @@
-jQuery( document ).ready(function( $ ) {
-
-    $.getScript("http://localhost:9000/mmooc-min.js");
-
-});
-
+jQuery( document ).ready(function( $ ) {
+    $.getScript("http://localhost:9000/mmooc-min.js");
+});
diff --git a/src/css/framework/canvas-footer-newui.less b/src/css/framework/canvas-footer-newui.less
@@ -70,7 +70,7 @@
         top: 60px;
         display: block;
         clear: both;
-        width:900px;
+//        width:900px;
         margin-left:0;
 
         .mmooc-license {

diff --git a/src/css/framework/canvas-framework-newui.less b/src/css/framework/canvas-framework-newui.less
@@ -2,7 +2,6 @@ body.with-left-side:not(.useFullWidth) {
     #application.ic-app {
 
         #main {
-            width:900px;
             min-width:auto;
         }
     }
@@ -11,18 +10,16 @@ body.with-left-side:not(.useFullWidth) {
 
 #application.ic-app {
 
-    #wrapper-container {
-        margin-left: 0;
+    #wrapper {
+        margin-left: 50px;
         max-width: inherit;
 
-        #wrapper {
             display: block;
             // outline: 1px solid red;
 
             // #main {
             //     float: left;
             // }
-        }
 
         #left-side {
             width: 238px;

diff --git a/src/css/framework/canvas-framework.less b/src/css/framework/canvas-framework.less
@@ -86,8 +86,7 @@ body.no-headers #content, body.embedded #content {
 }
 
 #mmooc-course-tabs-container-inner {
-    margin: 0 auto;
-    max-width: 1200px;
+    padding-left: 50px;
 }
 
 @media screen and (max-width: 1240px) {
@@ -154,7 +153,6 @@ body.no-headers #content, body.embedded #content {
 
 #wrapper {
     max-width: 1200px;
-    margin: 0 auto;
 }
 
 .full-width #wrapper {

diff --git a/src/css/framework/canvas-header-newui.less b/src/css/framework/canvas-header-newui.less
@@ -69,62 +69,47 @@
         }
     }
 
+
     #header.ic-app-header {
         height: 75px;
         width: 100%;
         border-bottom: 5px solid #47899f;
         position: relative;
-        z-index: 100;
-
-        .ic-app-header__layout {
-            max-width: 1200px;
-            margin: 0 auto;
-
-            @media screen and (max-width: 1240px) {
-                margin: 0 10px;
-            }
-
-
-            .ic-app-header__primary {
-                display: block;
-                width: 100%;
-                overflow-y: inherit;
-                background-color: transparent;
-
-                .ic-app-header__secondary-navigation {
-                    display: none;
-                }
-
-                .ic-app-header__logomark-container {
+        overflow-y: visible;
+
+       .ic-app-header__secondary-navigation {
+            display: none;
+        }
+
+       .ic-app-header__main-navigation {
+       padding-left: 50px;
+        .ic-app-header__logomark-container {
                     width: 240px;
                     float: left;
                     padding: 0;
                     background-color: transparent;
-
-                    .ic-app-header__logomark {
-                        background-image: url("https://server/bitmaps/mmooc-logo.png");
-                        width: 240px;
-                        background-size: contain;
-                        -webkit-transform: scale3d(1, 1, 1);
-                        transform: scale3d(1, 1, 1);
-                        margin: 0;
-
-                        // bottom: 17px;
-
-                        @media screen and (max-width: 1050px) {
-                            top: -23px;
-                            position: relative;
-                        }
-
-                        @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
-                            background-image: url("https://server/bitmaps/[email protected]");
-                        }
-                    }
+
+            .ic-app-header__logomark {
+                background-image: url("https://server/bitmaps/mmooc-logo.png");
+                width: 240px;
+                background-size: contain;
+                -webkit-transform: scale3d(1, 1, 1);
+                transform: scale3d(1, 1, 1);
+                margin: 0;
+
+                // bottom: 17px;
+
+                @media screen and (max-width: 1050px) {
+                    top: -23px;
+                    position: relative;
+                }
+
+                @media (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 1.5dppx) {
+                    background-image: url("https://server/bitmaps/[email protected]");
                 }
             }
-
         }
+      }
     }
-
 
 }
diff --git a/src/css/framework/canvas-header.less b/src/css/framework/canvas-header.less
@@ -23,7 +23,6 @@
 
 #header-inner, .with-left-side #header-inner, .with-right-side #header-inner, .with-right-side.with-left-side #header-inner {
     max-width: 1200px;
-    margin: 0 auto;
 }
 
 @media screen and (max-width: 1240px) {
@@ -34,10 +33,8 @@
 
 
 #user-menu {
-    position: absolute;
-    bottom: 14px;
-    margin-bottom: 0;
-    right: 0;
+    float: right;
+    padding-top: 27px;
 }
 
 #menu {

diff --git a/src/css/pages/canvas-login-newui.less b/src/css/pages/canvas-login-newui.less
@@ -1,10 +1,11 @@
-body.ic-Login-Body {
-    background-color: @darkTealColor !important;
-    background-image: none           !important;
+body.ic-Login-Body, .body--login-confirmation {
 
     #application.ic-app {
 
-        .ic-Login__header__logo {
+        .ic-Login__container {
+            background-color: @darkTealColor;
+        }
+        .ic-Login-header__logo {
             background-image: url("https://server/bitmaps/mmooc-logo.png") !important;
             background-size: contain;
             background-repeat: no-repeat;
@@ -15,6 +16,10 @@ body.ic-Login-Body {
                 display: none;
             }
         }
+
+        #main.ic-Layout-columns {
+//            background-color: @darkTealColor;
+        }
 
         .ic-Login__actions {
             margin-top: 25px;
@@ -29,5 +34,13 @@ body.ic-Login-Body {
             }
 
         }
+        .ic-Login-confirmation__header {
+            background: @darkTealColor url("https://server/bitmaps/mmooc-logo.png") 18px no-repeat !important;
+            padding: 30px;
+            img {
+                display: none;
+            }
+        }
+
     }
 }
diff --git a/src/css/setup/variables.less b/src/css/setup/variables.less
@@ -1,6 +1,7 @@
 @backgroundColor: #EAEAEA;
 @textColor: #373737;
 @linkColor: #034961;
+@linkColorOnDarkBackground: #ffffff;
 
 @darkTealColor: #034961;
 @darkTealGradientStart:#327D96;

diff --git a/src/js/modules/enroll.js b/src/js/modules/enroll.js
@@ -84,18 +84,26 @@ this.mmooc.enroll = function() {
             $("body").append("<div class='mmooc-modal-overlay'></div>");
             $("body").append("<div class='mmooc-modal'></div>");
         },
+        handleEnrollClick: function(e, html) {
+            $(".mmooc-modal").html(html);
+            $(".mmooc-modal-overlay").show();
+            $(".mmooc-modal").show();
+            $(".mmooc-modal .modal-back").click(function(e) {
+                e.preventDefault();
+                $(".mmooc-modal-overlay").hide();
+                $(".mmooc-modal").hide();
+            });
+        },
         setClickHandlers: function() {
+            $(".notenrolled").click(function(e) {
+                e.preventDefault();
+                var html = $(this).next().html();
+                mmooc.enroll.handleEnrollClick(e, html);
+            });
             $(".all-courses-show-modal").click(function(e) {
                 e.preventDefault();
                 var html = $(this).parent().next().html();
-                $(".mmooc-modal").html(html);
-                $(".mmooc-modal-overlay").show();
-                $(".mmooc-modal").show();
-                $(".mmooc-modal .modal-back").click(function(e) {
-                    e.preventDefault();
-                    $(".mmooc-modal-overlay").hide();
-                    $(".mmooc-modal").hide();
-                });
+                mmooc.enroll.handleEnrollClick(e, html);
             });
             $(".mmooc-modal-overlay").click(function(e) {
                 e.preventDefault();

diff --git a/src/js/modules/footer.js b/src/js/modules/footer.js
@@ -15,7 +15,7 @@ this.mmooc.footer = function() {
            var relativeUrl = window.location.pathname;
            var hideCustomFooterLicence = false; //License should not be displayed on the '/courses' or '/' page or the login or logout page.
 
-           if ((relativeUrl == '/courses') || (relativeUrl == '/courses/') || (relativeUrl == '/') || (relativeUrl == '/login/canvas') || (relativeUrl == '/logout')) {
+           if ((relativeUrl == '/courses') || (relativeUrl == '/courses/') || (relativeUrl == '/') || (relativeUrl == '/login/canvas') ||  (relativeUrl.indexOf("enroll") !== -1) || (relativeUrl == '/logout')) {
                hideCustomFooterLicence = true;
            }
 

diff --git a/src/templates/modules/allcourseslist.hbs b/src/templates/modules/allcourseslist.hbs
@@ -1,7 +1,7 @@
 <h2>{{title}}</h2>
 <ul>
     {{#each courses}}
-        <li class="{{#if enrolled}}enrolled{{/if}}">{{#unless enrolled}}<a class="all-courses-show-modal" href="#">{{/unless}}{{name}}{{#unless enrolled}}</a>{{/unless}}</li>
+        <li class="{{#if enrolled}}enrolled{{else}}notenrolled{{/if}}">{{#unless enrolled}}<a class="all-courses-show-modal" href="#">{{/unless}}{{name}}{{#unless enrolled}}</a>{{/unless}}</li>
         {{#unless enrolled}}
           <div class="all-courses-modal modal-course-{{id}}">
               <div class="modal-content">
Original file line number	Diff line number	Diff line change
		@@ -1,2 +1 @@
		@import "http://localhost:9000/mmooc-min-dev.css";

		@import "http://localhost:9000/mmooc-min-dev.css";