increase visibility of separators

.vscode/settings.json

@@ -8,5 +8,8 @@
   "typescript.tsdk": "node_modules/typescript/lib",
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   }
 }

src/components/ChainTiers.vue

@@ -8,7 +8,7 @@
       'q-ma-sm',
       'border',
       'text-center',
-      calculateColBreak()
+      calculateColBreak(),
     ]"
   >
     <div v-if="!colBreak">
@@ -19,8 +19,11 @@
           {{ title }}
         </div>
       </q-card-section>
-
+      <q-separator
-      <q-separator inset class="q-mb-lg" />
+        v-if="leadingSeparator"
+        inset
+        class="q-mb-lg toolbar-background"
+      />
     </div>
 
     <slot></slot>
@@ -31,6 +34,7 @@
 const props = defineProps<{
   title: string;
   colBreak: boolean;
+  leadingSeparator: { type: boolean; required: false; default: true };
 }>();
 
 const calculateColBreak = () => (props.colBreak ? 'hide-item' : '');

src/components/InfoCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <q-list separator class="big-font text-left">
+  <q-list class="big-font text-left">
     <slot></slot>
     <InfoCardItemWorldIcon
       v-for="item in infoCardItemWorldData"
@@ -19,7 +19,7 @@ import InfoCardItem from './InfoCard/InfoCardItem.vue';
 import InfoCardItemWorldIcon from './InfoCard/InfoCardItemWorldIcon.vue';
 import {
   InfoCardItem as InfoCardItemModel,
-  InfoCardItemWorldIcon as InfoCardItemWorldIconModel
+  InfoCardItemWorldIcon as InfoCardItemWorldIconModel,
 } from 'pages/data/models';
 
 defineProps<{

src/components/InfoCard/InfoCardItem.vue

@@ -1,4 +1,5 @@
 <template>
+  <q-separator inset class="q-mb-sm toolbar-background" />
   <q-item>
     <q-item-section avatar>
       <q-img :src="icon" class="info-icon"></q-img>

src/components/InfoCard/InfoCardItemWorldIcon.vue

@@ -1,4 +1,5 @@
 <template>
+  <q-separator inset class="q-mb-sm toolbar-background" />
   <q-item>
     <q-item-section avatar>
       <q-img :src="icon" class="info-icon"></q-img>

src/components/ProductionChain.vue

@@ -4,7 +4,7 @@
     :chain-multiplier="chainMultiplier"
   ></ProductionChainMultiplier>
   <div ref="diagram"></div>
-  <q-separator inset class="q-my-lg" />
+  <q-separator inset class="q-my-lg toolbar-background" />
 </template>
 
 <script setup lang="ts">

src/layouts/MainLayout.vue

@@ -30,7 +30,6 @@
           Navigation
         </q-item-label>
         <q-separator inset class="q-mb-sm" />
-
         <EssentialLink
           v-for="link in linksList"
           :key="link.title"

src/pages/AnnoBase.vue

@@ -8,6 +8,7 @@
         <ChainTiers
           :title="expansionInfoItem.title"
           :col-break="false"
+          :leading-separator="false"
           class="masonry-col item"
         >
           <InfoCard
@@ -22,6 +23,7 @@
           :key="tier.tierName"
           :title="tier.tierName"
           :col-break="tier.colBreak"
+          :leading-separator="true"
           class="masonry-col item"
         >
           <div v-if="!tier.colBreak">
@@ -64,7 +66,7 @@ initialiseMermaid();
 const expansionInfoItem = ref({
   title: 'Base Game',
   icon: icons.siteLogoIcon,
-  text: 'All chains for Base Game consumer goods.'
+  text: 'All chains for Base Game consumer goods.',
 });
 </script>
 
@@ -88,7 +90,7 @@ $column: 3;
 }
 
 .masonry-container {
-  height: 3760px;
+  height: 3755px;
 
   .masonry-col {
     width: 1000px;

src/pages/AnnoMisc.vue

@@ -8,6 +8,7 @@
         <ChainTiers
           :title="expansionInfoItem.title"
           :col-break="false"
+          :leading-separator="false"
           class="masonry-col item"
         >
           <InfoCard
@@ -22,6 +23,7 @@
           :key="tier.tierName"
           :title="tier.tierName"
           :col-break="tier.colBreak"
+          :leading-separator="true"
           class="masonry-col item"
         >
           <div v-if="!tier.colBreak">
@@ -64,7 +66,7 @@ initialiseMermaid();
 const expansionInfoItem = ref({
   title: 'ratios | fuel | materials',
   icon: icons.siteLogoIcon,
-  text: 'All chains for building materials, electricity, fuel and ratios.'
+  text: 'All chains for building materials, electricity, fuel and ratios.',
 });
 </script>
 
@@ -88,7 +90,7 @@ $column: 3;
 }
 
 .masonry-container {
-  height: 4600px;
+  height: 4595px;
 
   .masonry-col {
     width: 1000px;

src/pages/AnnoSeason1.vue

@@ -7,6 +7,7 @@
         <ChainTiers
           :title="expansionInfoItem.title"
           :col-break="false"
+          :leading-separator="false"
           class="masonry-col item"
         >
           <InfoCard
@@ -21,6 +22,7 @@
           :key="tier.tierName"
           :title="tier.tierName"
           :col-break="tier.colBreak"
+          :leading-separator="true"
           class="masonry-col item"
         >
           <div v-if="!tier.colBreak">
@@ -53,7 +55,7 @@ import { productionChainsSeason1 } from './data/production-chains-season-1';
 // Info Card Data
 import {
   season1ItemData,
-  season1ItemWorldData
+  season1ItemWorldData,
 } from 'src/pages/data/info-card';
 
 // Icons
@@ -66,7 +68,7 @@ initialiseMermaid();
 const expansionInfoItem = ref({
   title: 'Season 1',
   icon: icons.passageIcon,
-  text: 'All chains for Season 1 (Sunken Treasures, Botanica & The Passage) consumer goods.'
+  text: 'All chains for Season 1 (Sunken Treasures, Botanica & The Passage) consumer goods.',
 });
 </script>
 
@@ -90,7 +92,7 @@ $column: 2;
 }
 
 .masonry-container {
-  height: 1430px;
+  height: 1420px;
 
   .masonry-col {
     width: 1000px;

src/pages/AnnoSeason2.vue

@@ -8,6 +8,7 @@
         <ChainTiers
           :title="expansionInfoItem.title"
           :col-break="false"
+          :leading-separator="false"
           class="masonry-col item"
         >
           <InfoCard
@@ -22,6 +23,7 @@
           :key="tier.tierName"
           :title="tier.tierName"
           :col-break="tier.colBreak"
+          :leading-separator="true"
           class="masonry-col item"
         >
           <div v-if="!tier.colBreak">
@@ -54,7 +56,7 @@ import { productionChainsSeason2 } from './data/production-chains-season-2';
 // Info Card Data
 import {
   season2ItemData,
-  season2ItemWorldData
+  season2ItemWorldData,
 } from 'src/pages/data/info-card';
 
 // Icons
@@ -67,7 +69,7 @@ initialiseMermaid();
 const expansionInfoItem = ref({
   title: 'Season 2',
   icon: icons.landOfLionsIcon,
-  text: 'All chains for Season 2 (Seat of Power, Bright Harvest & Land of Lions) consumer goods.'
+  text: 'All chains for Season 2 (Seat of Power, Bright Harvest & Land of Lions) consumer goods.',
 });
 </script>
 
@@ -91,7 +93,7 @@ $column: 3;
 }
 
 .masonry-container {
-  height: 2780px;
+  height: 2765px;
 
   .masonry-col {
     width: 1000px;

src/pages/AnnoSeason3.vue

@@ -9,6 +9,7 @@
         <ChainTiers
           :title="expansionInfoItem.title"
           :col-break="false"
+          :leading-separator="false"
           class="masonry-col item"
         >
           <InfoCard
@@ -23,6 +24,7 @@
           :key="tier.tierName"
           :title="tier.tierName"
           :col-break="tier.colBreak"
+          :leading-separator="true"
           class="masonry-col item"
         >
           <div v-if="!tier.colBreak">
@@ -55,7 +57,7 @@ import { productionChainsSeason3 } from './data/production-chains-season-3';
 // Info Card Data
 import {
   season3ItemData,
-  season3ItemWorldData
+  season3ItemWorldData,
 } from 'src/pages/data/info-card';
 
 // Icons
@@ -68,7 +70,7 @@ initialiseMermaid();
 const expansionInfoItem = ref({
   title: 'Season 3',
   icon: icons.highLifeIcon,
-  text: 'All chains for Season 3 (Docklands, Tourist Season & The High Life) consumer goods.'
+  text: 'All chains for Season 3 (Docklands, Tourist Season & The High Life) consumer goods.',
 });
 </script>
 
@@ -92,7 +94,7 @@ $column: 4;
 }
 
 .masonry-container {
-  height: 8220px;
+  height: 8190px;
 
   .masonry-col {
     width: 1000px;

src/pages/AnnoSeason4.vue

@@ -8,6 +8,7 @@
         <ChainTiers
           :title="expansionInfoItem.title"
           :col-break="false"
+          :leading-separator="false"
           class="masonry-col item"
         >
           <InfoCard
@@ -22,6 +23,7 @@
           :key="tier.tierName"
           :title="tier.tierName"
           :col-break="tier.colBreak"
+          :leading-separator="true"
           class="masonry-col item"
         >
           <div v-if="!tier.colBreak">
@@ -54,7 +56,7 @@ import { productionChainsSeason4 } from './data/production-chains-season-4';
 // Info Card Data
 import {
   season4ItemData,
-  season4ItemWorldData
+  season4ItemWorldData,
 } from 'src/pages/data/info-card';
 
 // Icons
@@ -67,7 +69,7 @@ initialiseMermaid();
 const expansionInfoItem = ref({
   title: 'Season 4',
   icon: icons.newWorldRisingIcon,
-  text: 'All chains for Season 4 (Seeds of Change, Empire of the Skies & New World Rising) consumer goods.'
+  text: 'All chains for Season 4 (Seeds of Change, Empire of the Skies & New World Rising) consumer goods.',
 });
 </script>
 
@@ -91,7 +93,7 @@ $column: 3;
 }
 
 .masonry-container {
-  height: 5860px;
+  height: 5855px;
 
   .masonry-col {
     width: 1000px;