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

move each season into own page, fix ratios

Browse Source
This commit is contained in:
Daniel Tomlinson
2023-12-09 03:01:04 +00:00
parent 51ca9e7c47
commit dbb449ee82
15 changed files with 318 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
src/pages/AnnoSeason1.vue
View File

@@ -1,38 +1,36 @@
<template>
<q-page class="custom-width">
<div class="column masonry-container">
<div class="flex-break hidden item"></div>
<div class="flex-break item"></div>
<div class="flex-break item"></div>
<ChainTiers
:title="expansionInfoItem.title"
:col-break="false"
class="masonry-col item"
>
<InfoCard
:item-data="itemDataBase"
:item-world-data="worldItemDataBase"
<div class="box-container">
<div class="column masonry-container box-border">
<div class="flex-break hidden item"></div>
<div class="flex-break item"></div>
<ChainTiers
:title="expansionInfoItem.title"
:col-break="false"
class="masonry-col item"
>
<InfoCardItem v-bind="expansionInfoItem"></InfoCardItem>
</InfoCard>
</ChainTiers>
<ChainTiers
v-for="tier in productionChainsSeason1"
:key="tier.tierName"
:title="tier.tierName"
:col-break="tier.colBreak"
class="masonry-col item"
>
<div v-if="!tier.colBreak">
<ProductionChain
v-for="chain in tier.productionChains"
:key="chain.productionChain"
:production-chain="chain.productionChain"
:chain-multiplier="chain.chainMultiplier"
:mermaid-definition="chain.mermaidDefinition"
></ProductionChain>
</div>
</ChainTiers>
<InfoCard>
<InfoCardItem v-bind="expansionInfoItem"></InfoCardItem>
</InfoCard>
</ChainTiers>
<ChainTiers
v-for="tier in productionChainsSeason1"
:key="tier.tierName"
:title="tier.tierName"
:col-break="tier.colBreak"
class="masonry-col item"
>
<div v-if="!tier.colBreak">
<ProductionChain
v-for="chain in tier.productionChains"
:key="chain.productionChain"
:production-chain="chain.productionChain"
:chain-multiplier="chain.chainMultiplier"
:mermaid-definition="chain.mermaidDefinition"
></ProductionChain>
</div>
</ChainTiers>
</div>
</div>
</q-page>
</template>
@@ -49,9 +47,6 @@ import InfoCardItem from 'components/InfoCard/InfoCardItem.vue';
// Production Chain Data
import { productionChainsSeason1 } from './data/production-chains-season-1';
// Info Card Data
import { itemDataBase, worldItemDataBase } from 'src/pages/data/info-card';
// Icons
import * as icons from './data/icons';
@@ -68,7 +63,7 @@ const expansionInfoItem = ref({
<style lang="scss">
// Masonry Layout - 5 cols
$column: 3;
$column: 2;
.flex-break {
flex: 1 0 100% !important;
@@ -86,15 +81,17 @@ $column: 3;
}
.masonry-container {
height: 1400px;
height: 1430px;
.masonry-col {
width: 1000px;
padding: 1px;
}
padding: 10px;
}
.custom-width {
width: 3100px;
width: 2150px;
}
</style>