Merge pull request #531 from matematikk-mooc/marius/DIT-33

Marius/dit 33
matematikk-mooc · Jun 3, 2024 · f105de0 · f105de0
2 parents 301abe0 + 07b3b4d
commit f105de0
Show file tree

Hide file tree

Showing 15 changed files with 531 additions and 82 deletions.
diff --git a/src/js/main.js b/src/js/main.js
@@ -1,6 +1,6 @@
 import "../vue/design/override-base-Canvas-elements.scss";
 import "../vue/design/override-login-logout-Canvas-elements.scss";
-
+import "../vue/design/override-mobile.scss";
 import { removeCanvasAnnouncementElements, removeCanvasDiscussionElements } from "./modules/announcements/utils";
 
 import accordion from './modules/accordion.js';

diff --git a/src/vue/components/Button.vue b/src/vue/components/Button.vue
@@ -7,7 +7,7 @@
       { 'btn--dropdown': isDropdown },
       { 'btn--sm': size === 'sm' },
       { 'btn--md': !size || size === 'md' },
-      { 'btn--lg': size === 'lg' }
+      { 'btn--lg': size === 'lg' },
     ]"
   >
     <Icon v-if="type === 'previous'" name="chevron_left" size="1.5em" />

diff --git a/src/vue/components/CardList.vue b/src/vue/components/CardList.vue
@@ -1,7 +1,7 @@
 
 <template>
   <div class="card-container">
-    <div v-for="course in courses" :key="course.id" class="card-container-wrapper">
+    <div class="card-instance"  v-for="course in courses" :key="course.id">
       <Card class="card-item"
         :theme="course.course_settings ? course.course_settings.course_category.category.color_code : 'theme_0'"
         :courseIllustration="course.course_settings ? course.course_settings.image.path : ''"
@@ -28,7 +28,8 @@
           <ModulesList :modules="modules"></ModulesList>
         </template>
         <template v-if="course.enrolled" v-slot:goToCourse>
-          <Button :type="'outlined'" :size="'md'" @click="goToCourse(course.id)">Gå til kompetansepakke</Button>
+          <Button :type="'filled'" :size="'md'" @click="goToCourse(course.id)"><p>
+            Gå til kompetansepakke</p></Button>
         </template>
       </Card>
 
@@ -50,9 +51,6 @@
         <template v-if="(!authorized || !course.enrolled)" v-slot:actions>
           <Button :type="'filled'" :size="'md'" @click="enrollToCourse(course.self_enrollment_code)">Meld deg på</Button>
         </template>
-        <template v-if="(authorized && course.enrolled)" v-slot:actions>
-          <Button :type="'outlined'" :size="'md'" @click="goToCourse(course.id)">Gå til kompetansepakke</Button>
-        </template>
       </Modal>
     </div>
   </div>
@@ -215,11 +213,6 @@ export default {
   }
 }
 
-.card-container-wrapper {
-  position: relative;
-  align-self: stretch;
-}
-
 .course-illustration-box {
   z-index: 100;
   position: relative;

diff --git a/src/vue/components/ModulesList.vue b/src/vue/components/ModulesList.vue
@@ -1,8 +1,8 @@
 <template>
   <div class="modules-list">
-   <h3>Moduler:</h3> 
-    <ul v-for="m in modulesList" :key="m.id">
-      <li>
+  <h3>Moduler:</h3> 
+    <ul>
+      <li v-for="m in modulesList" :key="m.id">
         {{m.name}}
       </li>
     </ul>

diff --git a/src/vue/components/course-page-banner/CoursePageBanner.vue b/src/vue/components/course-page-banner/CoursePageBanner.vue
@@ -92,7 +92,7 @@ export default {
 
 .course-page__banner {
   width: 100%;
-  max-width: 2100px;
+  max-width: 131.25rem;
   height: 12rem;
   padding: 0 1rem 0 1rem;
   display: flex;
@@ -111,17 +111,18 @@ export default {
       width: 100%;
     }
 
-    @media screen and (max-width: 1100px) {
+    @media screen and (max-width: 68.75rem) {
       display: none;
     }
   }
 
   &__title {
     font-family: Montserrat;
-    font-size: 36px;
+    font-size: 2.25rem;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
+    color: black;
     margin: 0 1rem 0 1rem;
   }
 
@@ -130,8 +131,16 @@ export default {
     flex-direction: column;
     gap: 1rem;
     justify-content: center;
-    align-items: flex-end;
     margin-right: 1rem;
+    button {
+      height: 3rem;
+      &:hover {
+        background-color: #00468e;
+      }
+    }
+    .dropdown {
+      width: 100%;
+    }
   }
 }
 </style>
diff --git a/src/vue/components/dropdown/Dropdown.vue b/src/vue/components/dropdown/Dropdown.vue
@@ -0,0 +1,102 @@
+<template>
+  <div class="dropdown-container desktop-hide">
+    <button aria-label="Åpne nedtrekksmeny" @click="handleFocus" class="dropdown-toggle-button">
+        <Icon :name="iconType"/>
+    </button>
+    <ul class="dropdown-list" v-show="showMenu">
+        <li v-if="admin"><a @click="handleLinkClick" class="dropdown-item" :href="adminLink">Administrator <Icon name="chevron_right" size="22"/></a> </li>
+        <li v-if="logged_in"><a  @click="handleLinkClick" class="dropdown-item" :href="settingsLink">Innstillinger <Icon name="chevron_right" size="22"/></a> </li>
+        <li v-if="!logged_in"><a class="dropdown-item" :href="loginLink"> Logg inn <Icon name="chevron_right" size="22"/></a></li>  
+        <li v-if="logged_in"><a class="dropdown-item" :href="logoutLink"> Logg ut <Icon name="chevron_right" size="22"/></a></li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Icon from "../icon/Icon.vue";
+
+const domain = window.location.origin;
+const loginLink = domain + "/login/canvas"
+const logoutLink = domain + "/logout"
+const settingsLink = domain + "/profile/settings"
+const adminLink = domain + "/accounts"
+const showMenu = ref(false);
+
+const props = defineProps({
+iconType: String,
+backgroundColor: String,
+showMenu: Boolean,
+logged_in: Boolean,
+admin: Boolean,
+});
+
+const handleFocus = () => {
+  showMenu.value = !showMenu.value;
+};
+const handleLinkClick = () => {
+    showMenu.value = false;
+};
+</script>
+
+<style scoped lang="scss">
+@import "../../design/colors.scss";
+
+.dropdown-toggle-button {
+  height: 3.75rem;
+  width: 3.75rem;
+  border: none;
+  padding: 0.125rem;
+  z-index: 1020;
+  background-color: v-bind(backgroundColor);
+  color: $color-black;
+  font-size: 2rem;
+  border-radius: 0 !important;
+  cursor: pointer;
+  transition: all 0.2s ease;
+    &:hover {
+        background-color: #94CAAE;
+    }
+    &:focus {
+        background-color: #7DBF9D;
+    }
+}
+
+.dropdown-list {
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: unset !important;
+  margin-top: 3.6875rem !important;
+  width: 13.75rem;
+  z-index: 2000;
+  box-shadow: rgba(50, 50, 93, 0.25) 0rem .8125rem 1.6875rem -0.3125rem, rgba(0, 0, 0, 0.3) 0rem .5rem 1rem -0.5rem;
+  transition: all 0.2s ease;
+  .dropdown-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    height: 100%;
+    padding: 1rem;
+    background-color: $color-white ;
+    color: black;
+    font-size: .875rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    &:hover {
+      background-color: #E3F2EB;
+      font-weight:bold;
+      text-decoration:none;
+    }
+    .material-icon {
+      display:flex;
+      color: #94CAAE;
+    }
+  }
+}
+
+// Hides the dropdown list when the focus is not within the dropdown or button
+div:not(:focus-within) ul {
+  display: none;
+}
+</style>
diff --git a/src/vue/components/footer/PageFooter.vue b/src/vue/components/footer/PageFooter.vue
@@ -12,20 +12,27 @@
           <div class="main-content--header">
             Kompetansepakker er levert av Utdanningsdirektoratet
           </div>
-
           <div class="page-footer--link-container">
             <PageFooterLink :url="'https://kompetanseudirno.azureedge.net/udirdesign/omkompetanseudirno.html'"><template v-slot:footerlink>Om kompetansepakker</template></PageFooterLink>
-            <div class="page-footer--divider"></div>
+            <div class="page-footer--divider mobile-hide"></div>
             <PageFooterLink :url="'mailto:[email protected]'"><template v-slot:footerlink>Kontakt</template></PageFooterLink>
-            <div class="page-footer--divider"></div>
-            <PageFooterLink :url="'https://kompetanseudirno.azureedge.net/udirdesign/privacypolicy.html?v=1_0'"><template v-slot:footerlink>Personvernerklæring</template></PageFooterLink>
-            <div class="page-footer--divider"></div>
-            <span class="page-footer--accessibility-declaration">
+            <div class="page-footer--divider mobile-hide"></div>
+              <PageFooterLink :url="'https://kompetanseudirno.azureedge.net/udirdesign/privacypolicy.html?v=1_0'"><template v-slot:footerlink>Personvernerklæring</template></PageFooterLink>
+              <div class="page-footer--divider mobile-hide"></div>
+            <span class="mobile-hide">
+              <span class="page-footer--accessibility-declaration mobile-accessibility-container ">
+                Tilgjengelighetserklæring på
+              </span>
+              <PageFooterLink aria-label="Tilgjengelighetserklæring på bokmål" :type="'open-in-new'" :url="'https://uustatus.no/nb/erklaringer/publisert/2796ebc6-161f-4dc9-9429-70d7dd136431'"><template v-slot:footerlink>Bokmål</template></PageFooterLink>
+              <PageFooterLink aria-label="Tilgjengelighetserklæring på nynorsk" :type="'open-in-new'" :url="'https://uustatus.no/nn/erklaringer/publisert/2796ebc6-161f-4dc9-9429-70d7dd136431'"><template v-slot:footerlink>Nynorsk</template></PageFooterLink>
+            </span>
+          </div>
+          <div class="mobile-accessibility-container page-footer--link-container desktop-hide"> 
               Tilgjengelighetserklæring på
+            <span class="mobile-accessibility-links">
+              <PageFooterLink aria-label="Tilgjengelighetserklæring på bokmål" :type="'open-in-new'" :url="'https://uustatus.no/nb/erklaringer/publisert/2796ebc6-161f-4dc9-9429-70d7dd136431'"><template v-slot:footerlink>Bokmål</template></PageFooterLink>
+              <PageFooterLink aria-label="Tilgjengelighetserklæring på nynorsk" :type="'open-in-new'" :url="'https://uustatus.no/nn/erklaringer/publisert/2796ebc6-161f-4dc9-9429-70d7dd136431'"><template v-slot:footerlink>Nynorsk</template></PageFooterLink>
             </span>
-
-            <PageFooterLink aria-label="Tilgjengelighetserklæring på bokmål" :type="'open-in-new'" :url="'https://uustatus.no/nb/erklaringer/publisert/2796ebc6-161f-4dc9-9429-70d7dd136431'"><template v-slot:footerlink>Bokmål</template></PageFooterLink>
-            <PageFooterLink aria-label="Tilgjengelighetserklæring på nynorsk" :type="'open-in-new'" :url="'https://uustatus.no/nn/erklaringer/publisert/2796ebc6-161f-4dc9-9429-70d7dd136431'"><template v-slot:footerlink>Nynorsk</template></PageFooterLink>
           </div>
         </div>
       </div>
@@ -38,8 +45,8 @@ import License from './License.vue'
 const server = SERVER;
 
 const { hasLicense } = defineProps(['hasLicense']);
-
 </script>
+
 <style lang="scss">
 @import '../../design/colors.scss';
 
@@ -107,5 +114,8 @@ const { hasLicense } = defineProps(['hasLicense']);
     margin: 0 1.5rem -0.25rem 1.5rem;
     border-right: 0.0625rem solid $color-white;
   }
+  .page-footer--link {
+    text-underline-offset: 2px;
+  }
 }
 </style>
diff --git a/src/vue/components/header/NavBar.vue b/src/vue/components/header/NavBar.vue
@@ -1,9 +1,9 @@
 <template>
   <div class="header--nav-container">
     <!-- this gives users using screenreader, the opportunity to skip all navigation and go right to content -->
-     <a class="skip-to-content-link" :href="mainContentId">
+    <a class="skip-to-content-link" :href="mainContentId">
       Gå til hovedinnhold
-</a>
+    </a>
     <PageHeader :logged_in="logged_in" :admin="admin"></PageHeader>
     <nav class="page--nav-bar">
       <NavBarLinks :logged_in="logged_in"></NavBarLinks>

diff --git a/src/vue/components/header/NavBarLinks.vue b/src/vue/components/header/NavBarLinks.vue
@@ -3,20 +3,20 @@
     <ul class="nav-bar__link-list">
       <li class="nav-bar__list-item" v-if="logged_in">
         <span>
-          <a class="nav-bar__link" :href="myCourses">Mine kompetansepakker</a>
+          <a class="nav-bar__link " :class="(currentPage === 'courses') ? 'active' : '' " :href="myCourses">Mine kompetansepakker</a>
         </span>
       </li>
       <li class="nav-bar__list-item" v-if="logged_in">
         <span>
-          <a class="nav-bar__link" :href="allCourses">Alle tilgjengelige kompetansepakker</a>
+          <a class="nav-bar__link " :class="(currentPage === 'all_courses') ? 'active' : '' " :href="allCourses" >Alle tilgjengelige kompetansepakker</a>
         </span>
       </li>
     </ul>
   </div>
 </template>
 <script setup>
   const {logged_in} = defineProps(['logged_in'])
-
+  const currentPage = window.location.href.split("/").pop();
   const domain = window.location.origin;
   const myCourses = domain + "/courses"
   const allCourses = domain + "/search/all_courses"

diff --git a/src/vue/components/header/PageHeader.vue b/src/vue/components/header/PageHeader.vue
@@ -1,13 +1,15 @@
 <template>
   <header class="header__content">
+    <!-- Header -->
     <div class="header-brand">Kompetanseportalen</div>
-    <ul class="header__link-list">
+    <Dropdown :logged_in="logged_in" :admin="admin" :backgroundColor="'white'"  :iconType="'hamburger'" :icon="'settings'" :link="settingsLink"></Dropdown>
+    <!-- Navbar -->
+    <ul class="header__link-list mobile-hide">
       <li class="header__list-item" v-if="admin">
         <span>
           <a class="header__link" :href="adminLink">Administrator</a>
         </span>
       </li>
-
       <li class="header__list-item" v-if="!logged_in">
         <span>
           <LoginChoice></LoginChoice>
@@ -29,7 +31,7 @@
 
 <script setup>
   import LoginChoice from '../login-choice/LoginChoice.vue';
-
+  import Dropdown from '../dropdown/Dropdown.vue'
   const {logged_in, admin} = defineProps(['logged_in', 'admin'])
   const domain = window.location.origin;
   const loginLink = domain + "/login/canvas"

diff --git a/src/vue/components/icon-button/IconButton.vue b/src/vue/components/icon-button/IconButton.vue
@@ -24,8 +24,8 @@ const handleClick = () => {
   z-index: 1020;
   padding: 0.125rem;
   font-size: 2rem;
-  height: 2.5rem;
-  width: 2.5rem;
+  height: 2.75rem;
+  width: 2.75rem;
   cursor: pointer;
   transition: all 0.2s ease;
   border-radius: 70%;