From 8e3a5ddc3f297248b4f9999618b511ee70d56b6d Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Mon, 18 Sep 2023 21:51:00 +0200
Subject: [PATCH] Cleaned layout (titles, rules, stores)

---
 src/components/YrhButton.vue                 |  2 +-
 src/components/YrhHeading.vue                | 17 ++++++++++++++---
 src/components/YrhNav.vue                    |  7 +++----
 src/components/datas/YrhStatusCard.vue       |  7 ++++---
 src/components/datas/items/ItemSelection.vue |  4 +---
 src/main.ts                                  |  2 --
 src/views/DataView.vue                       |  3 ---
 src/views/HomeView.vue                       | 10 ++++++----
 src/views/datas/ItemsView.vue                | 15 +++++++++++++--
 9 files changed, 42 insertions(+), 25 deletions(-)

diff --git a/src/components/YrhButton.vue b/src/components/YrhButton.vue
index 93cd998..b721c25 100644
--- a/src/components/YrhButton.vue
+++ b/src/components/YrhButton.vue
@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { computed, ref } from 'vue'
 import { useElementHover, useFocus } from '@vueuse/core'
+import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
diff --git a/src/components/YrhHeading.vue b/src/components/YrhHeading.vue
index fa7aaab..3e20046 100644
--- a/src/components/YrhHeading.vue
+++ b/src/components/YrhHeading.vue
@@ -1,7 +1,18 @@
+<script lang="ts" setup>
+import { useSlots } from 'vue'
+
+const slots = useSlots()
+</script>
+
 <template>
-  <h1 class="text-4xl tracking-wider">
-    <slot />
-  </h1>
+  <div class="flex items-end">
+    <h1 class="text-4xl tracking-wider">
+      <slot />
+    </h1>
+    <span v-if="slots.subtitle" class="ml-2 text-lg font-medium">
+      <slot name="subtitle" />
+    </span>
+  </div>
 </template>
 
 <style scoped>
diff --git a/src/components/YrhNav.vue b/src/components/YrhNav.vue
index 72c2578..afff92c 100644
--- a/src/components/YrhNav.vue
+++ b/src/components/YrhNav.vue
@@ -1,11 +1,10 @@
 <script lang="ts" setup>
-import { ref, watch } from 'vue'
-import type { Ref } from 'vue'
+import type { MenuItem } from '@/models/YrhNavItem'
+import { useBannerStore } from '@/stores/banner'
 import { storeToRefs } from 'pinia'
+import { ref } from 'vue'
 import YrhButton from './YrhButton.vue'
 
-import { useBannerStore } from '@/stores/banner'
-import type { MenuItem } from '@/models/YrhNavItem'
 const { bannerText } = storeToRefs(useBannerStore())
 
 const props = defineProps<{
diff --git a/src/components/datas/YrhStatusCard.vue b/src/components/datas/YrhStatusCard.vue
index a5ecefa..b3823a8 100644
--- a/src/components/datas/YrhStatusCard.vue
+++ b/src/components/datas/YrhStatusCard.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { useStatusStore } from '@/stores/datas/statusStore'
-import YrhCard from '../YrhCard.vue'
 import { storeToRefs } from 'pinia'
+import YrhCard from '../YrhCard.vue'
 
 const { androidData } = storeToRefs(useStatusStore())
 </script>
@@ -50,7 +50,7 @@ const { androidData } = storeToRefs(useStatusStore())
         <span> {{ androidData.defenseRaw || 0 }} </span>
       </div>
 
-      <div class="mt-2 opacity-25 flex justify-around">
+      <div class="mt-2 text-y-beige-500 flex justify-around">
         <font-awesome-icon :icon="['far', 'square']" />
         <font-awesome-icon :icon="['far', 'square']" />
         <font-awesome-icon :icon="['far', 'square']" />
@@ -68,9 +68,10 @@ const { androidData } = storeToRefs(useStatusStore())
       </div>
       <hr class="mt-2 mb-0 border-t-2 border-y-beige-500" />
     </template>
+
     <template #footer>
       <div class="h-full grid place-items-center">
-        <span class="text-sm uppercase">No error</span>
+        <span class="text-xs uppercase">No error</span>
       </div>
     </template>
   </YrhCard>
diff --git a/src/components/datas/items/ItemSelection.vue b/src/components/datas/items/ItemSelection.vue
index 8c235e5..53289f4 100644
--- a/src/components/datas/items/ItemSelection.vue
+++ b/src/components/datas/items/ItemSelection.vue
@@ -1,8 +1,6 @@
 <script lang="ts" setup>
-import type { GameItem } from '@/models/YrhGameItem'
-
 import YrhButton from '@/components/YrhButton.vue'
-
+import type { GameItem } from '@/models/YrhGameItem'
 import { useItemStore } from '@/stores/datas/itemStore'
 import { storeToRefs } from 'pinia'
 
diff --git a/src/main.ts b/src/main.ts
index 2fb4722..11405c5 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,8 +1,6 @@
 import './assets/main.scss'
-
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'
-
 import App from './App.vue'
 import router from './router'
 
diff --git a/src/views/DataView.vue b/src/views/DataView.vue
index e43708b..aecdf33 100644
--- a/src/views/DataView.vue
+++ b/src/views/DataView.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import YrhBanner from '@/components/YrhBanner.vue'
-import YrhHeading from '@/components/YrhHeading.vue'
 import { useBannerStore } from '@/stores/banner'
 import { storeToRefs } from 'pinia'
 
@@ -9,8 +8,6 @@ const { bannerText } = storeToRefs(useBannerStore())
 
 <template>
   <main class="container max-h-screen grid grid-rows-[auto_1fr_auto] overflow-auto">
-    <YrhHeading> ANDROID DATA </YrhHeading>
-
     <RouterView v-slot="{ Component }">
       <Transition name="fade" mode="out-in">
         <component :is="Component" />
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 89b7155..a078b08 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -1,13 +1,11 @@
 <script lang="ts" setup>
-import { ref } from 'vue'
-
 import YrhBanner from '@/components/YrhBanner.vue'
 import YrhHeading from '@/components/YrhHeading.vue'
 import YrhNav from '@/components/YrhNav.vue'
-
+import type { MenuItem } from '@/models/YrhNavItem'
 import { useBannerStore } from '@/stores/banner'
 import { storeToRefs } from 'pinia'
-import type { MenuItem } from '@/models/YrhNavItem'
+import { ref, onMounted } from 'vue'
 
 const { bannerText } = storeToRefs(useBannerStore())
 
@@ -62,6 +60,10 @@ const activeRoute = ref<string | null>('')
 function switchActiveRoute(key: string | null) {
   activeRoute.value = key
 }
+
+onMounted(() => {
+  bannerText.value = null
+})
 </script>
 
 <template>
diff --git a/src/views/datas/ItemsView.vue b/src/views/datas/ItemsView.vue
index a13ca61..c41da76 100644
--- a/src/views/datas/ItemsView.vue
+++ b/src/views/datas/ItemsView.vue
@@ -1,12 +1,15 @@
 <script lang="ts" setup>
-import { computed } from 'vue'
 import YrhCard from '@/components/YrhCard.vue'
+import YrhHeading from '@/components/YrhHeading.vue'
+import YrhStatusCard from '@/components/datas/YrhStatusCard.vue'
 import ItemSelection from '@/components/datas/items/ItemSelection.vue'
+import { useBannerStore } from '@/stores/banner'
 import { useItemStore } from '@/stores/datas/itemStore'
 import { storeToRefs } from 'pinia'
-import YrhStatusCard from '@/components/datas/YrhStatusCard.vue'
+import { computed, onMounted } from 'vue'
 
 const { currentItem, availableItems } = storeToRefs(useItemStore())
+const { bannerText } = storeToRefs(useBannerStore())
 
 const currentItemImage = computed(() => {
   switch (currentItem.value?.category) {
@@ -20,9 +23,17 @@ const currentItemImage = computed(() => {
       return null
   }
 })
+
+onMounted(() => {
+  bannerText.value = 'Select item'
+})
 </script>
 
 <template>
+  <YrhHeading>
+    ITEMS
+    <template #subtitle> All items </template>
+  </YrhHeading>
   <section class="grid grid-cols-3 gap-x-10 my-14 overflow-auto">
     <div class="items-container max-h-full overflow-hidden">
       <ItemSelection :items="availableItems" />