Merge pull request #563 from matematikk-mooc/marius/DIT-251

DIT-251: LoggedoutPage.
matematikk-mooc · Nov 7, 2024 · 79106f4 · 79106f4
2 parents 9d11438 + 70cd20f
commit 79106f4
Show file tree

Hide file tree

Showing 6 changed files with 61 additions and 26 deletions.
diff --git a/src/vue/components/Banner.vue b/src/vue/components/Banner.vue
@@ -38,25 +38,21 @@ const server= SERVER
   border-radius: 20px;
   word-break: break-word;
   img {
-    width: 10.173rem;
-    height: 10.294rem;
+    width: webkit-fill-available;
+    height: webkit-fill-available;
     flex-grow: 0;
     object-fit: contain;
   }
 
   .before-login-image-left {
     position: relative;
     bottom: -3rem;
-    @media screen and (max-width: 1000px){
-      display: none;
-    }
+
   }
   .before-login-image-right {
     position: relative;
     bottom: -3rem;
-    @media screen and (max-width: 1000px){
-      display: none;
-    }
+
   }
   .caption {
     position: relative;

diff --git a/src/vue/components/Card.vue b/src/vue/components/Card.vue
@@ -81,7 +81,8 @@ export default {
 
 .card-box {
   position: relative;
-  width: 24rem;
+  width: 100%;
+  max-width: 24rem;
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;

diff --git a/src/vue/components/CardHighlighted.vue b/src/vue/components/CardHighlighted.vue
@@ -66,6 +66,9 @@ export default {
     border-radius: 0.5rem;
     box-shadow: 0 0.25rem 0.25rem 0 rgba(0, 0, 0, 0.25);
     background-color: $card-background-color;
+    @media (max-width: 30rem) {
+        width: unset;
+    }
 
     .card-highlighted-illustration-box {
         position: relative;

diff --git a/src/vue/components/NotLoggedInIntro.vue b/src/vue/components/NotLoggedInIntro.vue
@@ -8,7 +8,7 @@
     </div>
 
     <div class="intro-news">
-      <h1>Vår nyeste kompetansepakke</h1>
+      <h2>Vår nyeste kompetansepakke</h2>
 
       <CardHighlighted class="card-highlighted"
         :theme="newestCourse.course_settings ? newestCourse.course_settings?.course_category?.category.color_code : 'theme_0'"
@@ -172,15 +172,13 @@ export default {
 <style scoped lang="scss">
 @import '../design/_card-themes.scss';
 .intro-container {
-  width: 100%;
-  box-sizing: border-box;
-  padding: 0.5rem 6rem 0.5rem 9rem;
-  margin-top: 1rem;
-  margin-bottom: 20px;
-  display: inline-grid;
-  grid-template-columns: auto auto;
+  display: flex;
   justify-content: center;
+  margin-top: 2rem;
+  margin-bottom: 20px;
+  width: 100%;
   gap: 3rem;
+  box-sizing: border-box;
   @media screen and (max-width: 1000px){
     display: flex;
     flex-direction: column;
@@ -195,11 +193,14 @@ export default {
 .intro-news {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
+  align-items: center;
   justify-content: flex-start;
-  h1 {
-    font-size: 1.375rem;
+  h2 {
+    font-size: 1.5rem;
     line-height: 2.5rem;
+    @media (max-width: 30rem) {
+      font-size: 1.250rem;
+    }
   }
 }
 

diff --git a/src/vue/components/header/NavBar.vue b/src/vue/components/header/NavBar.vue
@@ -5,9 +5,11 @@
       Gå til hovedinnhold
     </a>
     <PageHeader :logged_in="logged_in" :admin="admin"></PageHeader>
-    <nav class="page--nav-bar">
-      <NavBarLinks :logged_in="logged_in"></NavBarLinks>
-    </nav>
+    <span class="nav-bar-container" :class="{ logged_out: !logged_in }">
+      <nav class="page--nav-bar">
+        <NavBarLinks :logged_in="logged_in"></NavBarLinks>
+      </nav>
+    </span>
   </div>
 </template>
 <script setup>
@@ -21,6 +23,12 @@ const {logged_in, admin, mainContentId} = defineProps(['logged_in', 'admin', 'ma
 <style lang="scss">
 @import '../../design/colors.scss';
 
+.nav-bar-container {
+  width: 100%;
+}
+.logged_out {
+  display: none;
+}
 .header--nav-container {
   width: 100%;
   flex-grow: 0;
@@ -30,6 +38,7 @@ const {logged_in, admin, mainContentId} = defineProps(['logged_in', 'admin', 'ma
   align-items: flex-start;
   box-sizing: border-box;
   padding: 0;
+  border-bottom: 1px solid black;
   .skip-to-content-link {
   left: 50%;
   position: absolute;

diff --git a/src/vue/pages/NotLoggedInPage.vue b/src/vue/pages/NotLoggedInPage.vue
@@ -57,21 +57,46 @@ const onSelectedFiltersUpdate = (updatedFilters) => {
 .not-logged-in-page--header {
   width: 100%;
   box-sizing: border-box;
-  max-width: 1500px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  .intro-text {
+      border-radius: 10px;
+      background: #dff4ff;
+      padding: 16px;
+    }
+  @media (max-width: 30rem) {
+    h1 {
+      font-size: 22px;
+      text-align: center;
+      line-height: normal;
+      padding: 1rem
+    };
+    .intro-text {
+      margin-top: unset;
+      font-size: 1.125rem;
+      font-weight: normal;
+      line-height: normal;
+      border-radius: 20px;
+      background: #dff4ff;
+      padding: 16px;
+    }
+  }
+
 }
 .not-logged-in-page--content {
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
-  margin-left: 1.5rem;
   h2 {
-    font-size: 2rem;
+    font-size: 1.5rem;
     margin: 1.5rem 0 1.5rem 0;
+    @media (max-width: 30rem) {
+      font-size: 1.250rem;
+      margin: 1rem 0 1rem 0;
+    }
   }
 }
 .not-logged-in-page--layout {