Merge pull request #339 from matematikk-mooc/KURSP-916-override-Canva…

…s-base

KURSP-916: Component placements

src/js/main.js

@@ -1,3 +1,5 @@
+import "../vue/design/override-base-Canvas-elements.scss";
+
 import accordion from './modules/accordion.js';
 import announcements from './modules/announcements.js';
 import api from './api/api.js';

src/vue/components/course-modules/CourseModule.vue

@@ -129,6 +129,8 @@ const toggleActiveModule = ({moduleId, isOpen}) => {
       letter-spacing:0.063rem ;
       display:flex;
       align-items: center;
+      white-space: normal !important;
+      word-wrap: break-word !important;
     }
 
     &--active {
@@ -151,7 +153,7 @@ const toggleActiveModule = ({moduleId, isOpen}) => {
   &__child-nodes {
     list-style-type: none;
     background: map-get($color-palette-slate, background, 200);
-    padding: 0.2rem 0 0.2rem 1.5rem;  
+    padding: 0.2rem 0 0.2rem 1.5rem;
     margin:0;
     @include hide-show-effect;
     &--hidden{
@@ -160,8 +162,3 @@ const toggleActiveModule = ({moduleId, isOpen}) => {
   }
 }
 </style>
-
-
-
-
-

src/vue/design/override-base-Canvas-elements.scss

@@ -0,0 +1,96 @@
+@import "colors.scss";
+
+.ic-app-course-menu {
+    width: fit-content !important;
+    position: relative !important;
+}
+
+#left-side {
+    width: fit-content !important;
+    padding-right: 2rem !important;
+    padding-top: 1rem !important;
+    border: none !important;
+
+}
+
+body.with-left-side:not(.useFullWidth) {
+    #application.ic-app {
+      #main {
+        min-width: auto;
+        margin: 0 auto;
+      }
+    }
+  }
+
+#right-side {
+    display: none !important;
+}
+
+.ic-Layout-wrapper {
+    margin-left: auto !important;
+    display: flex !important;
+    flex-direction: column !important;
+    max-width: 60% !important;
+    min-height: 0;
+
+}
+
+.ic-Layout-watermark {
+    display: none !important;
+}
+
+
+#application.ic-app {
+    .ic-app-nav-toggle-and-crumbs {
+      display: none; // Hide toggling of menu
+    }
+    margin-left: auto !important;
+    margin-right: auto !important;
+    justify-content: center !important;
+
+    display: flex !important;
+    flex-direction: column !important;
+  }
+
+.ic-app-main-content {
+    margin-top: 1rem !important;
+    width: fit-content !important;
+    min-height: 85vh !important;
+}
+
+.ic-Layout-columns{
+    width: 100% !important;
+    display: flex!important;
+    flex-direction: row-reverse;
+    align-content: flex-start;
+}
+#right-side.ic-app-main-content__secondary{
+    display: hidden !important;
+}
+.ic-Layout-contentWrapper{
+    min-width:1000px !important;
+    max-width: 85% !important;
+    padding-right: 4rem !important;
+
+}
+
+.with-left-side {
+    #main {
+      margin-left: 0;
+    }
+
+    #wrapper {
+      margin-left: auto;
+    }
+  }
+
+  @media screen and (max-width: 1240px) {
+    #wrapper {
+      margin: 10px;
+    }
+
+    .with-left-side #wrapper {
+
+      margin-left: 10px;
+    }
+  }