From 38758c360a4821278830313ade9801ec51a94d97 Mon Sep 17 00:00:00 2001
From: VIktorGrev <viktog2210@gmail.com>
Date: Fri, 3 May 2024 21:20:40 +0200
Subject: [PATCH] feat: Adding styling on navbar
---
src/components/BaseComponents/NavBar.vue | 12 +++++++++---
src/views/BasePageView.vue | 6 ++++++
2 files changed, 15 insertions(+), 3 deletions(-)
diff --git a/src/components/BaseComponents/NavBar.vue b/src/components/BaseComponents/NavBar.vue
index 9af55cb..0893ea1 100644
--- a/src/components/BaseComponents/NavBar.vue
+++ b/src/components/BaseComponents/NavBar.vue
@@ -36,7 +36,7 @@
<img src="@/assets/icons/storefront.svg">Butikk
</router-link>
</li>
- <li class="nav-item dropdown">
+ <li class="nav-item dropdown d-flex flex-column">
<a data-mdb-dropdown-init class=" nav-link dropdown-toggle hidden-arrow notification" href="#" id="navbarDropdownMenuLink"
role="button" data-bs-toggle="dropdown" aria-expanded="false">
<img src="/src/assets/icons/bell-white.svg">
@@ -51,7 +51,7 @@
<img :src="notificationImageMapper[String(item.notificationType)]" alt="Varslingsikon" class="notification-icon">
</div>
<div class="flex-grow-1 ms-3">
- <div class="not-item dropdown-item">{{item.message}}</div>
+ <div class="not-item dropdown-item text-wrap">{{item.message}}</div>
</div>
</router-link>
</li>
@@ -60,7 +60,7 @@
<li>Ingen varslinger</li>
</ul>
</li>
- <li v-if="userStore.isLoggedIn" class="nav-item dropdown">
+ <li v-if="userStore.isLoggedIn" class="nav-item dropdown d-flex flex-column">
<a
data-cy="user"
:class="['nav-link', 'dropdown-toggle', 'username-text', 'text-white', { 'underline-active': !isAnyActivePage() }]"
@@ -463,6 +463,12 @@ onMounted(() => {
margin: 0 140px;
}
+@media (max-width: 768px) {
+ .container-fluid {
+ margin: 0 20px;
+ }
+}
+
#logo {
font-size: 2.5rem;
height: 100%;
diff --git a/src/views/BasePageView.vue b/src/views/BasePageView.vue
index 78e96a6..09d2485 100644
--- a/src/views/BasePageView.vue
+++ b/src/views/BasePageView.vue
@@ -18,4 +18,10 @@ import { useUserInfoStore } from '@/stores/UserStore';
min-height: 700px;
margin: 0 140px;
}
+
+@media (max-width: 768px) {
+ #minHeight {
+ margin: 0 20px;
+ }
+}
</style>
\ No newline at end of file
--
GitLab