separator and styling items

src/modules/FlowArticle.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import SeparatorIcon from '@/icons/SeparatorIcon.vue'
 import FlowHypothesis from '@/modules/article/FlowHypothesis.vue'
 import FlowIntro from '@/modules/article/FlowIntro.vue'
 import FeatureSteps from '@/modules/feature/FeatureSteps.vue'
@@ -10,11 +11,14 @@ import SimulationDashboard from '@/modules/simulation/SimulationDashboard.vue'
 <template>
   <div class="flow-article">
     <FlowIntro class="text" />
-    <hr />
+    <SeparatorIcon />
     <FlowHypothesis class="text" />
+    <SeparatorIcon />
     <FeatureSteps alias="introducing" />
+    <SeparatorIcon />
     <FlowDashboard />
     <FeatureSteps alias="playground" />
+    <SeparatorIcon />
     <SimulationControls />
     <SimulationDashboard />
   </div>
@@ -23,6 +27,12 @@ import SimulationDashboard from '@/modules/simulation/SimulationDashboard.vue'
 <style lang="scss">
 .flow-article {
   color: black;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 1080px;
+  margin: auto;
 
   .text {
     font-size: 16pt;

src/modules/feature/FeatureItem.vue

@@ -12,14 +12,12 @@ const hasQualityIssues = computed(() => props.feature.qualityIssue > 0)
 <template>
   <div class="feature-item bin" :class="{ live: isLive }">
     <div>
-      {{ feature.name }}
+      <span class="numeric">({{ feature.complexity }})</span> {{ feature.name }}
     </div>
     <div class="numeric">
-      ({{ feature.complexity }}) | [{{ feature.leadTime }}]
-      <div class="indicator">
-        <div v-if="hasQualityIssues" class="red-bin">
-          {{ feature.qualityIssue }} 🔴
-        </div>
+      {{ feature.leadTime }}d
+      <div v-if="hasQualityIssues" class="red-bin">
+        {{ feature.qualityIssue }}
       </div>
     </div>
   </div>
@@ -42,18 +40,11 @@ const hasQualityIssues = computed(() => props.feature.qualityIssue > 0)
     opacity: 0;
   }
 
-  .indicator {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    gap: 0.2rem;
-    flex-wrap: wrap;
-  }
-
   .red-bin {
-    border: 2px solid #ff7979;
+    --warning-color: #ca0e0e;
+    border: 2px solid var(--warning-color);
     padding: 0 0.5rem 0.1rem;
+    color: var(--warning-color);
   }
 }
 </style>

src/modules/feature/FeatureSteps.vue

@@ -28,13 +28,14 @@ onMounted(() => featureStore.initBoard(NUMBER_OF_FEATURES))
 <style scoped lang="scss">
 .features-steps {
   display: flex;
-  flex: 1;
   gap: 1rem;
   flex-wrap: wrap;
   align-items: stretch;
   margin: 0 1rem;
   border: 3px solid var(--primary-color);
-  min-height: 50vh;
+  height: 50vh;
+  width: 100%;
+  overflow-y: hidden;
 
   li:first-child {
     margin-left: 1rem;

src/modules/simulation/SimulationControls.vue

@@ -1,7 +1,16 @@
 <script setup lang="ts">
+import { Strategy } from '@/modules/lean/strategy'
 import { useSimulationStore } from '@/modules/simulation/simulation-store'
 const simulationStore = useSimulationStore()
-const NUMBER_OF_SIMULATION = 1000
+const NUMBER_OF_SIMULATION = 400
+
+const strategies: Strategy[] = ['push', 'pull', 'push-dps', 'pull-dps']
+
+const simulateEverything = () => {
+  strategies.forEach((strategy) =>
+    simulationStore.multiSimulation(NUMBER_OF_SIMULATION, strategy)
+  )
+}
 </script>
 
 <template>
@@ -23,43 +32,18 @@ const NUMBER_OF_SIMULATION = 1000
         class="button button-outline"
         @click="simulationStore.multiSimulation(1, 'push-dps')"
       >
-        simulate push and problem solving
+        simulate push with DPS
       </button>
       <button
         class="button button-outline"
         @click="simulationStore.multiSimulation(1, 'pull-dps')"
       >
-        simulate pull and problem solving
+        simulate pull with DPS
       </button>
     </div>
     <div class="row">
-      <button
-        class="button button-outline"
-        @click="simulationStore.multiSimulation(NUMBER_OF_SIMULATION, 'push')"
-      >
-        simulate {{ NUMBER_OF_SIMULATION }} push system
-      </button>
-      <button
-        class="button button-outline"
-        @click="simulationStore.multiSimulation(NUMBER_OF_SIMULATION, 'pull')"
-      >
-        simulate {{ NUMBER_OF_SIMULATION }} pull system
-      </button>
-      <button
-        class="button button-outline"
-        @click="
-          simulationStore.multiSimulation(NUMBER_OF_SIMULATION, 'push-dps')
-        "
-      >
-        simulate {{ NUMBER_OF_SIMULATION }} push and problem solving
-      </button>
-      <button
-        class="button button-outline"
-        @click="
-          simulationStore.multiSimulation(NUMBER_OF_SIMULATION, 'pull-dps')
-        "
-      >
-        simulate {{ NUMBER_OF_SIMULATION }} pull and problem solving
+      <button class="button button-outline" @click="simulateEverything">
+        simulate {{ NUMBER_OF_SIMULATION }} simulations for each system
       </button>
       <button
         class="button button-clear"

src/modules/simulation/SimulationDashboard.vue

@@ -11,9 +11,10 @@ const strategies: Strategy[] = ['push', 'pull', 'push-dps', 'pull-dps']
   <div class="simulation-dashboard">
     <h3>Simulation dashboard</h3>
     <h4>
-      ({{ simulationStore.simulationsDone }} /
-      {{ simulationStore.requestedSimulation }}
-      simulations)
+      {{ simulationStore.simulationsDone }}/{{
+        simulationStore.requestedSimulation
+      }}
+      simulations
     </h4>
     <table>
       <thead>
@@ -58,6 +59,7 @@ const strategies: Strategy[] = ['push', 'pull', 'push-dps', 'pull-dps']
 <style scoped lang="scss">
 .simulation-dashboard {
   color: var(--primary-color);
+  width: 100%;
 
   table {
     padding: 1rem;