From c3b5aa5b52f19d804adb0260a0f769ecb63e01f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Malin=20Haugland=20H=C3=B8li?= <malin.holi@gmail.com>
Date: Thu, 2 May 2024 13:01:40 +0200
Subject: [PATCH] refactor: :sparkles: Add sti decoration to certain pages
---
src/App.vue | 73 +++++++++++++++++++++++++++++++++++++----------------
1 file changed, 51 insertions(+), 22 deletions(-)
diff --git a/src/App.vue b/src/App.vue
index 6cd1e8f..9dcd40d 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,29 +14,58 @@ const showNavBar = computed(() => {
route.path.startsWith('/konfigurasjon')
)
})
-</script>
-
-<template>
- <NavBarComponent v-if="showNavBar" />
- <main class="mb-10">
- <RouterView />
- </main>
-</template>
+const showSti = computed(() => {
+ return !(
+ route.path == '/' ||
+ route.path == '/registrer' ||
+ route.path == '/logginn' ||
+ route.path == '/forgotPassword' ||
+ route.path.startsWith('/konfigurasjon') ||
+ route.path == '/hjem' ||
+ route.path == '/profil'
+ )
+})
-<style>
-nav {
- display: flex;
- justify-content: center;
- gap: 1rem;
- margin: 1rem 0;
-}
+const backgroundImageStyle = computed(() => {
+ if (showSti.value) {
+ return {
+ backgroundImage: "url('src/assets/sti.png')"
+ }
+ } else {
+ return {
+ backgroundImage: "none"
+ }
+ }
+})
-nav a.router-link-exact-active {
- color: var(--color-text);
-}
+</script>
-nav a.router-link-exact-active:hover {
- background-color: transparent;
-}
-</style>
+<template>
+ <div
+ class="min-h-screen bg-left-bottom bg-phone md:bg-pc bg-no-repeat"
+ :style="backgroundImageStyle">
+ <NavBarComponent v-if="showNavBar" />
+
+ <main class="mb-10 ">
+ <RouterView />
+ </main>
+ </div>
+ </template>
+
+ <style>
+ nav {
+ display: flex;
+ justify-content: center;
+ gap: 1rem;
+ margin: 1rem 0;
+ }
+
+ nav a.router-link-exact-active {
+ color: var(--color-text);
+ }
+
+ nav a.router-link-exact-active:hover {
+ background-color: transparent;
+ }
+ </style>
\ No newline at end of file
--
GitLab