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

add latest

Browse Source
This commit is contained in:
Daniel Tomlinson
2022-09-25 02:59:03 +01:00
parent af4c812aea
commit 6330fc41e6
33 changed files with 145 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/components/DiagramRenderer.vue
View File

@@ -1,10 +1,16 @@
<template>
<div class="row">
<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>
<ChainTiers
v-for="tier in productionChains"
:key="tier.tierName"
:title="tier.tierName"
:col-width="tier.width"
class="masonry-col item"
>
<ProductionChain
v-for="chain in tier.productionChains"
@@ -38,4 +44,30 @@ onMounted(() => {
});
</script>
<style lang="scss"></style>
<style lang="scss">
// Masonry Layout
.flex-break {
flex: 1 0 100% !important;
width: 0 !important;
}
$x: 5;
@for $i from 1 through ($x - 1) {
.masonry-container > .item:nth-child(#{$x}n + #{$i}) {
order: #{$i};
}
}
.masonry-container > .item:nth-child(#{$x}n) {
order: #{$x};
}
.masonry-container {
height: 10000px;
.masonry-col {
width: 1000px;
padding: 1px;
}
}
</style>