dtomlinson/anno-production-chain-renderer
1
0
Fork 0
mirror of https://github.com/dtomlinson91/anno-production-chain-renderer.git synced 2025-12-22 14:25: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

78
src/pages/AnnoBase.vue
View File

@@ -1,41 +1,41 @@
<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>
<div class="flex-break 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>
<div class="flex-break 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 productionChainsBase"
: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
:item-data="itemDataBase"
:item-world-data="worldItemDataBase"
>
<InfoCardItem v-bind="expansionInfoItem"></InfoCardItem>
</InfoCard>
</ChainTiers>
<ChainTiers
v-for="tier in productionChainsBase"
: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>
@@ -71,7 +71,7 @@ const expansionInfoItem = ref({
<style lang="scss">
// Masonry Layout - 5 cols
$column: 6;
$column: 4;
.flex-break {
flex: 1 0 100% !important;
@@ -89,15 +89,17 @@ $column: 6;
}
.masonry-container {
height: 2850px;
height: 4100px;
.masonry-col {
width: 1000px;
padding: 1px;
}
padding: 10px;
}
.custom-width {
width: 6100px;
width: 4200px;
}
</style>