From 2da5578c43cc21981b83e151cecc26eba650b399 Mon Sep 17 00:00:00 2001
From: alan <alanlici0@gmail.com>
Date: Fri, 27 Jun 2025 12:37:41 +0200
Subject: [PATCH] MarkedBanners + SystemBanners (Improved SystemBanners)

---
 .../src/App.vue                               |  2 -
 .../src/components/MarkedsBanner.vue          |  2 +-
 .../src/components/SystemBanner.vue           | 47 ++++++++++++-------
 .../vite.config.js                            |  1 -
 4 files changed, 30 insertions(+), 22 deletions(-)

diff --git a/gca-admin-gurusoft-message-dashboard/src/App.vue b/gca-admin-gurusoft-message-dashboard/src/App.vue
index f1f56e8..87a17de 100644
--- a/gca-admin-gurusoft-message-dashboard/src/App.vue
+++ b/gca-admin-gurusoft-message-dashboard/src/App.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="app">
-    <!-- System-wide banners -->
     <SystemBanner />
 
-    <!-- Main page content -->
     <router-view />
   </div>
 </template>
diff --git a/gca-admin-gurusoft-message-dashboard/src/components/MarkedsBanner.vue b/gca-admin-gurusoft-message-dashboard/src/components/MarkedsBanner.vue
index f72bcef..a5ff384 100644
--- a/gca-admin-gurusoft-message-dashboard/src/components/MarkedsBanner.vue
+++ b/gca-admin-gurusoft-message-dashboard/src/components/MarkedsBanner.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container mt-4">
-    <h2 class="mb-3">Markedsføringsbannere</h2>
+    <h2 class="mb-3">Markeds Banner</h2>
 
     <div class="scroll-box border rounded p-3 mx-auto">
       <div class="d-flex flex-row gap-3 scroll-content">
diff --git a/gca-admin-gurusoft-message-dashboard/src/components/SystemBanner.vue b/gca-admin-gurusoft-message-dashboard/src/components/SystemBanner.vue
index 4570940..a2cced4 100644
--- a/gca-admin-gurusoft-message-dashboard/src/components/SystemBanner.vue
+++ b/gca-admin-gurusoft-message-dashboard/src/components/SystemBanner.vue
@@ -5,31 +5,36 @@
         <div
             v-for="banner in activeBanners"
             :key="banner.id"
-            class="alert alert-danger border-danger banner-drop d-flex align-items-start shadow-sm border-start border-4"
+            class="alert alert-danger border-danger banner-drop d-flex justify-content-between align-items-start shadow-sm small-banner"
             role="alert"
             @click="goToBannerPage"
             style="cursor: pointer"
         >
           <div class="flex-grow-1">
-            <h5 class="mb-1 fw-bold">{{ banner.title }}</h5>
-            <p class="text-muted mb-1" style="font-size: 0.85rem;">
+            <div class="d-flex flex-row justify-content-between align-items-center flex-wrap">
+              <span class="me-3">{{ banner.text }}</span>
+              <div class="text-end">
+                <a
+                    v-if="banner.link"
+                    :href="banner.link"
+                    class="alert-link d-block"
+                    target="_blank"
+                    rel="noopener"
+                    @click.stop
+                >
+                  Mer info
+                </a>
+                <span class="badge bg-light text-dark mt-1 d-block">{{ banner.type }}</span>
+              </div>
+            </div>
+            <div class="text-muted mt-1" style="font-size: 0.75rem;">
               {{ formatDate(banner.updated) }}
-            </p>
-            <p class="mb-1">{{ banner.text }}</p>
-            <a
-                v-if="banner.link"
-                :href="banner.link"
-                class="alert-link d-block mt-2"
-                target="_blank"
-                rel="noopener"
-                @click.stop
-            >
-              Mer info
-            </a>
+            </div>
           </div>
+
           <button
               type="button"
-              class="btn-close ms-3 mt-1"
+              class="btn-close ms-3"
               aria-label="Close"
               @click.stop="banner.dismissed = true"
           ></button>
@@ -39,6 +44,7 @@
   </div>
 </template>
 
+
 <script setup>
 import { ref, onMounted, computed } from 'vue'
 import { useRouter } from 'vue-router'
@@ -108,13 +114,18 @@ const goToBannerPage = (event) => {
 .alert-wrapper {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.5rem;
+}
+
+.small-banner {
+  padding: 0.5rem 1rem;
+  font-size: 0.9rem;
 }
 
 .banner-drop {
   animation: dropDown 0.6s ease-out forwards;
   opacity: 0;
-  transform: translateY(-30px);
+  transform: translateY(-20px);
 }
 
 @keyframes dropDown {
diff --git a/gca-admin-gurusoft-message-dashboard/vite.config.js b/gca-admin-gurusoft-message-dashboard/vite.config.js
index 4217010..0336b15 100644
--- a/gca-admin-gurusoft-message-dashboard/vite.config.js
+++ b/gca-admin-gurusoft-message-dashboard/vite.config.js
@@ -4,7 +4,6 @@ import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import vueDevTools from 'vite-plugin-vue-devtools'
 
-// https://vite.dev/config/
 export default defineConfig({
   plugins: [
     vue(),