Merge pull request #545 from matematikk-mooc/aj/DIT-267-002

DIT-267: Fix width issue for featured enroll popup
matematikk-mooc · Jul 15, 2024 · 5392b98 · 5392b98
2 parents 2527b3f + 9467411
commit 5392b98
Show file tree

Hide file tree

Showing 7 changed files with 508 additions and 1,517 deletions.
diff --git a/package.json b/package.json
@@ -38,12 +38,11 @@
     "glob": "^10.2.6",
     "html-webpack-plugin": "^5.5.1",
     "mini-css-extract-plugin": "^2.7.6",
-    "node-sass": "^9.0.0",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "replace-in-file-webpack-plugin": "^1.0.6",
-    "sass": "^1.68.0",
+    "sass": "^1.77.6",
     "sass-loader": "^13.3.2",
     "storybook": "^7.5.1",
     "storybook-addon-sass-postcss": "^0.1.3",
@@ -89,5 +88,6 @@
     "svg-tags": "^1.0.0",
     "vue-style-loader": "^4.1.3",
     "vuex": "^4.1.0"
-  }
+  },
+  "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/src/vue/components/CardList.vue b/src/vue/components/CardList.vue
@@ -21,7 +21,7 @@
           <Button :fullWidth="true" :type="'filled'" :size="'md'" @click="enrollToCourse(course.self_enrollment_code)">Meld deg på</Button>
         </template>
         <template v-if="!authorized" v-slot:leftButton>
-          <RegisterChoice :selfEnrollmentCode="course.self_enrollment_code"></RegisterChoice>
+          <RegisterChoice :fullWidth="true" :selfEnrollmentCode="course.self_enrollment_code"></RegisterChoice>
         </template>
         <template v-if="(!authorized || !course.enrolled)" v-slot:rightButton>
           <Button :fullWidth="true" :type="'outlined'" :size="'md'" @click="handleModal(course)">Les mer</Button>

diff --git a/src/vue/components/CircularProgressBar.vue b/src/vue/components/CircularProgressBar.vue
@@ -21,7 +21,7 @@
             />
 
             <!-- Percentage text -->
-            <text x="18" :y="isFinished ? 25.35 : 21.35" class="percentage" :fill="isFinished ? 'white' : 'black'" :font-size="isFinished ? '20px' : '10px'">
+            <text x="18" :y="isFinished ? 23.35 : 21.35" class="percentage" :fill="isFinished ? 'white' : 'black'" :font-size="isFinished ? '14px' : '10px'">
                 {{ isFinished ? "✔" : `${percentage}%` }}
             </text>
         </svg>

diff --git a/src/vue/components/NotLoggedInIntro.vue b/src/vue/components/NotLoggedInIntro.vue
@@ -11,8 +11,8 @@
       <h1>Vår nyeste kompetansepakke</h1>
 
       <CardHighlighted class="card-highlighted"
-        :theme="newestCourse.course_settings ? newestCourse.course_settings.course_category.category.color_code : 'theme_0'"
-        :courseIllustration="newestCourse.course_settings ? newestCourse.course_settings.image.path : ''"
+        :theme="newestCourse.course_settings ? newestCourse.course_settings?.course_category?.category.color_code : 'theme_0'"
+        :courseIllustration="newestCourse.course_settings ? newestCourse.course_settings?.image.path : ''"
         :label="newestCourse.name"
         :filters="newestCourse.course_settings ? newestCourse.course_settings.course_filter : []"
       >
@@ -23,7 +23,7 @@
         <template v-slot:description>{{ truncateString(newestCourse.public_description) }}</template>
 
         <template v-slot:leftButton>
-          <RegisterChoice :selfEnrollmentCode="newestCourse.self_enrollment_code"></RegisterChoice>
+          <RegisterChoice :fullWidth="true" :selfEnrollmentCode="newestCourse.self_enrollment_code"></RegisterChoice>
         </template>
         <template  v-slot:rightButton>
           <Button :fullWidth="true" :type="'outlined'" :size="'md'" @click="handleModal()">Les mer</Button>
@@ -32,10 +32,10 @@
 
       <Modal :is-open="isModalOpen" @close="closeModal()">
         <template v-slot:header>
-          <div class="course-illustration-box" :class="newestCourse.course_settings ? newestCourse.course_settings.course_category.category.color_code : 'theme_0'">
+          <div class="course-illustration-box" :class="newestCourse.course_settings ? newestCourse.course_settings?.course_category?.category.color_code : 'theme_0'">
             <img
               class="course-illustration-box-image"
-              :src="newestCourse.course_settings ? newestCourse.course_settings.image.path : ''"
+              :src="newestCourse.course_settings ? newestCourse.course_settings?.image.path : ''"
               alt=""
             />
           </div>
@@ -98,9 +98,9 @@ export default {
     },
     newCourseFlag() {
     if (this.newestCourse.course_settings) {
-      console.log(this.newestCourse.course_settings.course_category.new)
-      if (this.newestCourse.course_settings.course_category) {
-        return this.newestCourse.course_settings.course_category.new;
+      console.log(this.newestCourse.course_settings?.course_category.new)
+      if (this.newestCourse.course_settings?.course_category) {
+        return this.newestCourse.course_settings?.course_category.new;
       }
     }
       return false;

diff --git a/src/vue/components/login-choice/RegisterChoice.vue b/src/vue/components/login-choice/RegisterChoice.vue
@@ -1,6 +1,6 @@
 <template>
 
-    <Button :fullWidth="true" :type="'filled'" :size="'md'" @click="openModal">Meld deg på</Button>
+    <Button :fullWidth="fullWidth" :type="'filled'" :size="'md'" @click="openModal">Meld deg på</Button>
     <Modal :is-open="modalOpen" @close="closeModal">
         <template v-slot:header>
             <h1>Meld deg på kompetansepakken</h1>
@@ -35,7 +35,8 @@
       },
       props: {
         forwardTo: String,
-        selfEnrollmentCode: String
+        selfEnrollmentCode: String,
+        fullWidth: Boolean
       },
       data () {
         return {

diff --git a/src/vue/components/modal/Modal.vue b/src/vue/components/modal/Modal.vue
@@ -72,7 +72,7 @@ const closeModal = () => {
     max-height: 80vh;
     &__close-button{
       position:absolute;
-      z-index:1010;
+      z-index:999;
       right: 0.5rem;
       top: 0.5rem;
     }