From 1f71508a537e61b294196fc41d690a3ce96c05e6 Mon Sep 17 00:00:00 2001
From: tutaru99 <simas.raudonis@gmail.com>
Date: Tue, 12 Nov 2024 10:47:44 +0100
Subject: [PATCH] OS2UOL-948: Restyled the buttons for all content types, and
 how they behave in the grid for mobile + tags bar

---
 assets/css/_buttons.css                   |  4 ++--
 components/views/courseView.vue           | 13 +++++-------
 components/views/course_educatorsView.vue | 23 ++++++++++------------
 components/views/exerciseView.vue         | 18 ++++++++---------
 components/views/internshipView.vue       | 24 ++++++++---------------
 components/views/newsView.vue             | 12 +++++-------
 components/views/userView.vue             | 17 ++++++++--------
 7 files changed, 47 insertions(+), 64 deletions(-)

diff --git a/assets/css/_buttons.css b/assets/css/_buttons.css
index 0f3c790..fdf14a2 100644
--- a/assets/css/_buttons.css
+++ b/assets/css/_buttons.css
@@ -46,11 +46,11 @@
   &--secondary {
     background-color: var(--color-tertiary);
     color: var(--color-secondary-lighten-4);
-    border-color:var(--color-tertiary);
+    border-color: var(--color-tertiary);
 
     &:hover {
       background-color: var(--color-tertiary-darken-2);
-      border-color:var(--color-tertiary);
+      border-color: var(--color-tertiary);
       color: var(--color-secondary);
     }
 
diff --git a/components/views/courseView.vue b/components/views/courseView.vue
index 0bfd8d4..9b25ca1 100644
--- a/components/views/courseView.vue
+++ b/components/views/courseView.vue
@@ -587,15 +587,11 @@ const currentUrl = computed(() => {
 
   &__tags-wrapper {
     padding-top: 24px;
-
-    display: flex;
+    display: grid @(--sm) flex;
+    gap: 12px @(--sm) 16px;
     margin-bottom: 32px;
   }
 
-  &__tags-item {
-    margin-right: 16px;
-  }
-
   &__page-heading-wrapper {
     display: grid @(--md) flex;
     justify-content: space-between;
@@ -610,11 +606,12 @@ const currentUrl = computed(() => {
 
   &__page-heading-button-container {
     margin-top: 10px @(--md) 0;
-    display: flex;
+    display: grid @(--sm) flex;
+    gap: 10px @(--sm) 0;
 
     .button {
-      margin-right: 12px @(--md) 0;
       margin-left: 0 @(--md) 12px;
+      white-space: normal @(--sm) nowrap;
     }
   }
 
diff --git a/components/views/course_educatorsView.vue b/components/views/course_educatorsView.vue
index e7752d7..2eba328 100644
--- a/components/views/course_educatorsView.vue
+++ b/components/views/course_educatorsView.vue
@@ -233,17 +233,17 @@ const currentUrl = computed(() => {
                 />
               </div>
 
-              <div class="educators__tags-item" v-if="data?.field_is_free || data?.field_sold_out">
+              <div
+                class="educators__tags-item"
+                v-if="data?.field_is_free || data?.field_sold_out"
+              >
                 <BaseTag
                   :data="{ label: data?.field_sold_out ? 'Udsolgt' : 'Gratis' }"
                   color="secondary"
                 />
               </div>
 
-              <div
-                class="educators__tags-item"
-                v-if="data?.field_banner"
-              >
+              <div class="educators__tags-item" v-if="data?.field_banner">
                 <BaseTag
                   :data="{ label: data?.field_banner }"
                   color="secondary-lighten"
@@ -483,15 +483,11 @@ const currentUrl = computed(() => {
 
   &__tags-wrapper {
     padding-top: 24px;
-
-    display: flex;
+    display: grid @(--sm) flex;
+    gap: 12px @(--sm) 16px;
     margin-bottom: 32px;
   }
 
-  &__tags-item {
-    margin-right: 16px;
-  }
-
   &__page-heading-wrapper {
     display: grid @(--md) flex;
     justify-content: space-between;
@@ -506,11 +502,12 @@ const currentUrl = computed(() => {
 
   &__page-heading-button-container {
     margin-top: 10px @(--md) 0;
-    display: flex;
+    display: grid @(--sm) flex;
+    gap: 10px @(--sm) 0;
 
     .button {
-      margin-right: 12px @(--md) 0;
       margin-left: 0 @(--md) 12px;
+      white-space: normal @(--sm) nowrap;
     }
   }
 
diff --git a/components/views/exerciseView.vue b/components/views/exerciseView.vue
index 6decd12..0cc9610 100644
--- a/components/views/exerciseView.vue
+++ b/components/views/exerciseView.vue
@@ -133,7 +133,10 @@ const currentUrl = computed(() => {
                 />
               </div>
 
-              <div class="exercise__tags-item" v-if="data?.field_focus && !data?.field_banner">
+              <div
+                class="exercise__tags-item"
+                v-if="data?.field_focus && !data?.field_banner"
+              >
                 <BaseTag
                   :data="{ label: data?.field_focus[0] }"
                   color="primary-lighten"
@@ -361,15 +364,11 @@ const currentUrl = computed(() => {
 
   &__tags-wrapper {
     padding-top: 24px;
-
-    display: flex;
+    display: grid @(--sm) flex;
+    gap: 12px @(--sm) 16px;
     margin-bottom: 32px;
   }
 
-  &__tags-item {
-    margin-right: 16px;
-  }
-
   &__page-heading-wrapper {
     display: grid @(--md) flex;
     justify-content: space-between;
@@ -384,11 +383,12 @@ const currentUrl = computed(() => {
 
   &__page-heading-button-container {
     margin-top: 10px @(--md) 0;
-    display: flex;
+    display: grid @(--sm) flex;
+    gap: 10px @(--sm) 0;
 
     .button {
-      margin-right: 12px @(--md) 0;
       margin-left: 0 @(--md) 12px;
+      white-space: normal @(--sm) nowrap;
     }
   }
 
diff --git a/components/views/internshipView.vue b/components/views/internshipView.vue
index 7b2da26..aac7ed1 100644
--- a/components/views/internshipView.vue
+++ b/components/views/internshipView.vue
@@ -161,7 +161,7 @@ const currentUrl = computed(() => {
               </div>
 
               <div
-                class="educators__tags-item"
+                class="internship__tags-item"
                 v-if="data?.field_industry && !data?.field_banner"
               >
                 <BaseTag
@@ -171,16 +171,10 @@ const currentUrl = computed(() => {
               </div>
 
               <div class="internship__tags-item" v-if="data?.field_sold_out">
-                <BaseTag
-                  :data="{ label: 'Udsolgt' }"
-                  color="secondary"
-                />
+                <BaseTag :data="{ label: 'Udsolgt' }" color="secondary" />
               </div>
 
-              <div
-                class="educators__tags-item"
-                v-if="data?.field_banner"
-              >
+              <div class="internship__tags-item" v-if="data?.field_banner">
                 <BaseTag
                   :data="{ label: data?.field_banner }"
                   color="secondary-lighten"
@@ -433,14 +427,11 @@ const currentUrl = computed(() => {
 
   &__tags-wrapper {
     padding-top: 24px;
-    display: flex;
+    display: grid @(--sm) flex;
+    gap: 12px @(--sm) 16px;
     margin-bottom: 32px;
   }
 
-  &__tags-item {
-    margin-right: 16px;
-  }
-
   &__page-heading-wrapper {
     display: grid @(--md) flex;
     justify-content: space-between;
@@ -455,11 +446,12 @@ const currentUrl = computed(() => {
 
   &__page-heading-button-container {
     margin-top: 10px @(--md) 0;
-    display: flex;
+    display: grid @(--sm) flex;
+    gap: 10px @(--sm) 0;
 
     .button {
-      margin-right: 12px @(--md) 0;
       margin-left: 0 @(--md) 12px;
+      white-space: normal @(--sm) nowrap;
     }
   }
 
diff --git a/components/views/newsView.vue b/components/views/newsView.vue
index 1518bf3..d0f0350 100644
--- a/components/views/newsView.vue
+++ b/components/views/newsView.vue
@@ -179,14 +179,11 @@ const practicalInfoData = computed(() => {
 
   &__tags-wrapper {
     padding-top: 24px;
-    display: flex;
+    display: grid @(--sm) flex;
+    gap: 12px @(--sm) 16px;
     margin-bottom: 32px;
   }
 
-  &__tags-item {
-    margin-right: 16px;
-  }
-
   &__page-heading-wrapper {
     display: grid @(--md) flex;
     justify-content: space-between;
@@ -201,11 +198,12 @@ const practicalInfoData = computed(() => {
 
   &__page-heading-button-container {
     margin-top: 10px @(--md) 0;
-    display: flex;
+    display: grid @(--sm) flex;
+    gap: 10px @(--sm) 0;
 
     .button {
-      margin-right: 12px @(--md) 0;
       margin-left: 0 @(--md) 12px;
+      white-space: normal @(--sm) nowrap;
     }
   }
 
diff --git a/components/views/userView.vue b/components/views/userView.vue
index 607a3e8..b15f923 100644
--- a/components/views/userView.vue
+++ b/components/views/userView.vue
@@ -315,7 +315,9 @@ const relatedContent = ref(props.data?.related_content);
                   :key="button"
                 >
                   <NuxtLink
-                    v-if="button?.field_file || button?.field_external_link?.url"
+                    v-if="
+                      button?.field_file || button?.field_external_link?.url
+                    "
                     class="user__info-description__button-item__link button button--ghost"
                     :to="
                       button?.field_file
@@ -357,15 +359,11 @@ const relatedContent = ref(props.data?.related_content);
 
   &__tags-wrapper {
     padding-top: 24px;
-
-    display: flex;
+    display: grid @(--sm) flex;
+    gap: 12px @(--sm) 16px;
     margin-bottom: 32px;
   }
 
-  &__tags-item {
-    margin-right: 16px;
-  }
-
   &__page-heading-wrapper {
     display: grid @(--md) flex;
     justify-content: space-between;
@@ -380,11 +378,12 @@ const relatedContent = ref(props.data?.related_content);
 
   &__page-heading-button-container {
     margin-top: 10px @(--md) 0;
-    display: flex;
+    display: grid @(--sm) flex;
+    gap: 10px @(--sm) 0;
 
     .button {
-      margin-right: 12px @(--md) 0;
       margin-left: 0 @(--md) 12px;
+      white-space: normal @(--sm) nowrap;
     }
   }