dtomlinson/anno-production-chain-renderer
1
0
Fork 0
mirror of https://github.com/dtomlinson91/anno-production-chain-renderer.git synced 2025-12-21 22:05:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

increase visibility of separators

Browse Source
This commit is contained in:
Daniel Tomlinson
2023-12-18 00:15:13 +00:00
parent aea08460d9
commit 3c50651a67
13 changed files with 43 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.vscode/settings.json vendored
View File

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

10
src/components/ChainTiers.vue
View File

@@ -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 inset class="q-mb-lg" />
<q-separator
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' : '');

4
src/components/InfoCard.vue
View File

@@ -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<{

1
src/components/InfoCard/InfoCardItem.vue
View File

@@ -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>

1
src/components/InfoCard/InfoCardItemWorldIcon.vue
View File

@@ -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>

2
src/components/ProductionChain.vue
View File

@@ -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">

1
src/layouts/MainLayout.vue
View File

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

6
src/pages/AnnoBase.vue
View File

@@ -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;

6
src/pages/AnnoMisc.vue
View File

@@ -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;

8
src/pages/AnnoSeason1.vue
View File

@@ -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;

8
src/pages/AnnoSeason2.vue
View File

@@ -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;

8
src/pages/AnnoSeason3.vue
View File

@@ -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;

8
src/pages/AnnoSeason4.vue
View File

@@ -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;