add miligram to a better design

2023-07-26 17:43:21 +02:00
parent 00ccbe21a7
commit 1f49b0f755
13 changed files with 159 additions and 63 deletions
--- a/core.css
+++ b/core.css
@@ -1,8 +1,8 @@
-@import url("https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Noto+Serif&display=swap');

 :root {
-  --background-color: #002992;
-  --background-color-no-focus: #abbbdf;
+  --primary-color: #002992;
+  --primary-color-no-focus: #abbbdf;
  --color: white;
 }

@@ -12,13 +12,13 @@

 body {
  font-size: 28px;
-  font-family: "Noto Serif", serif;
+  font-family: 'Noto Serif', serif;
  margin: 0;
 }

 header {
  text-align: center;
-  color: var(--background-color);
+  color: var(--primary-color);
 }

 main {
--- a/feature-flow.css
+++ b/feature-flow.css
@@ -4,6 +4,12 @@
  --feature-item-height: 70px;
 }

+.row {
+  display: flex;
+  gap: 1rem;
+  padding: 0 1rem;
+}
+
 ul {
  list-style: none;
  padding: 0;
@@ -11,8 +17,8 @@ ul {

 .bin {
  margin-top: 1rem;
-  border: 3px solid var(--background-color);
-  color: var(--background-color);
+  border: 3px solid var(--primary-color);
+  color: var(--primary-color);
  background-color: white;
  min-height: var(--feature-item-height);
  display: flex;
@@ -27,7 +33,7 @@ ul {
 }

 .blue-bin {
-  background-color: var(--background-color);
+  background-color: var(--primary-color);
  color: white;
  font-size: 18pt;
 }
@@ -43,3 +49,33 @@ ul {
  font-family: 'Cutive Mono', monospace;
  font-weight: bold;
 }
+
+/* Miligram reset */
+
+.button,
+button,
+input[type='button'],
+input[type='reset'],
+input[type='submit'] {
+  background-color: var(--primary-color);
+  border: 0.1rem solid var(--primary-color);
+}
+
+.button.button-outline,
+button.button-outline,
+input[type='button'].button-outline,
+input[type='reset'].button-outline,
+input[type='submit'].button-outline {
+  background-color: transparent;
+  color: var(--primary-color);
+}
+
+.button.button-clear,
+button.button-clear,
+input[type='button'].button-clear,
+input[type='reset'].button-clear,
+input[type='submit'].button-clear {
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--primary-color);
+}
--- a/feature-flow.html
+++ b/feature-flow.html
@@ -10,6 +10,18 @@
    My understanding of how a feature flow
    can help team prioritize."
    />
+    <!-- CSS Reset -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css"
+    />
+
+    <!-- Milligram CSS -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/milligram/1.4.1/milligram.css"
+    />
+
    <link rel="stylesheet" href="core.css" />
    <link rel="stylesheet" href="feature-flow.css" />
    <link rel="icon" href="people-improvement.svg" />
--- a/index.css
+++ b/index.css
@@ -11,15 +11,15 @@ li {
 }

 .focusable {
-  background-color: var(--background-color);
+  background-color: var(--primary-color);
 }

 .focusable.no-focus {
-  background-color: var(--background-color-no-focus);
+  background-color: var(--primary-color-no-focus);
 }

 .text-hide {
-  color: var(--background-color);
+  color: var(--primary-color);
 }

 .customer-satisfaction-roof {
--- a/index.html
+++ b/index.html
@@ -56,7 +56,7 @@
              cx="696.5"
              cy="295.5"
              r="88.5"
-              fill="var(--background-color)"
+              fill="var(--primary-color)"
            />
            <rect
              x="537"
@@ -64,7 +64,7 @@
              width="319"
              height="408"
              rx="106"
-              fill="var(--background-color)"
+              fill="var(--primary-color)"
            />
            <rect
              x="593"
@@ -72,21 +72,21 @@
              width="207"
              height="408"
              rx="103.5"
-              fill="var(--background-color)"
+              fill="var(--primary-color)"
            />
            <path
              d="M657 1177L732 1220.3L732 1133.7L657 1177Z"
-              fill="var(--background-color)"
+              fill="var(--primary-color)"
            />
            <path
              d="M746 107L671 63.6987V150.301L746 107Z"
-              fill="var(--background-color)"
+              fill="var(--primary-color)"
            />
            <circle
              cx="696.5"
              cy="643.5"
              r="535"
-              stroke="var(--background-color)"
+              stroke="var(--primary-color)"
              stroke-width="23"
            />
          </svg>
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
  "license": "ISC",
  "dependencies": {
    "comlink": "^4.4.1",
+    "milligram": "^1.4.1",
    "pinia": "^2.1.4",
    "vue": "^3.3.4",
    "vue-starport": "^0.3.0"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ dependencies:
  comlink:
    specifier: ^4.4.1
    version: 4.4.1
+  milligram:
+    specifier: ^1.4.1
+    version: 1.4.1
  pinia:
    specifier: ^2.1.4
    version: 2.1.4(typescript@5.1.6)(vue@3.3.4)
@@ -695,6 +698,12 @@ packages:
    dependencies:
      '@jridgewell/sourcemap-codec': 1.4.15

+  /milligram@1.4.1:
+    resolution: {integrity: sha512-RCgh/boHhcXWOUfKJWm3RJRoUeaEguoipDg0mJ31G0tFfvcpWMUlO1Zlqqr12K4kAXfDlllaidu0x7PaL2PTFg==}
+    dependencies:
+      normalize.css: 8.0.1
+    dev: false
+
  /mlly@1.4.0:
    resolution: {integrity: sha512-ua8PAThnTwpprIaU47EPeZ/bPUVp2QYBbWMphUQpVdBI3Lgqzm5KZQ45Agm3YJedHXaIHl6pBGabaLSUPPSptg==}
    dependencies:
@@ -718,6 +727,10 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: true

+  /normalize.css@8.0.1:
+    resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==}
+    dev: false
+
  /p-limit@4.0.0:
    resolution: {integrity: sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==}
    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
--- a/src/modules/feature/FeatureStep.vue
+++ b/src/modules/feature/FeatureStep.vue
@@ -90,7 +90,7 @@ const isLive = computed(

  header {
    padding: 0.5rem;
-    border: solid 2px var(--background-color);
+    border: solid 2px var(--primary-color);
    margin-top: 1rem;
  }

@@ -106,7 +106,7 @@ const isLive = computed(

  h5 {
    margin: 0;
-    background-color: var(--background-color);
+    background-color: var(--primary-color);
    padding: 0.35rem;
    text-align: center;
    color: white;
--- a/src/modules/feature/FeatureSteps.vue
+++ b/src/modules/feature/FeatureSteps.vue
@@ -32,7 +32,7 @@ const pushAndProblemSolving20Percent = () => {
      {{ featureStore.meanLeadTime }} days | Total days:
      {{ featureStore.meta.totalDays }}
    </div>
-    <div>
+    <div class="row">
      <button @click="featureStore.nextDay('push')">push system</button>
      <button @click="featureStore.nextDay('pull')">pull system</button>
      <button @click="pushAndProblemSolving20Percent">
@@ -69,7 +69,7 @@ pre {
  flex-wrap: wrap;
  align-items: stretch;
  margin: 0 1rem;
-  border: 3px solid var(--background-color);
+  border: 3px solid var(--primary-color);

  li:first-child {
    margin-left: 1rem;
@@ -88,7 +88,7 @@ pre {
    flex: 1;
    min-height: 100%;
    margin: 0;
-    color: var(--background-color);
+    color: var(--primary-color);
    display: flex;
    flex-direction: column;
  }
--- a/src/modules/simulation/SimulationControls.vue
+++ b/src/modules/simulation/SimulationControls.vue
@@ -6,32 +6,56 @@ const NUMBER_OF_SIMULATION = 1000

 <template>
  <div class="simulation-controls">
-    <button @click="simulationStore.simulate('push')">
-      simulate push system
-    </button>
-    <button @click="simulationStore.simulate('pull')">
-      simulate pull system
-    </button>
-    <button @click="simulationStore.simulate('problem-solving')">
-      simulate pull and problem solving
-    </button>
-    <button
-      @click="simulationStore.multiSimulation(NUMBER_OF_SIMULATION, 'push')"
-    >
-      simulate {{ NUMBER_OF_SIMULATION }} push system
-    </button>
-    <button
-      @click="simulationStore.multiSimulation(NUMBER_OF_SIMULATION, 'pull')"
-    >
-      simulate {{ NUMBER_OF_SIMULATION }} pull system
-    </button>
-    <button
-      @click="
-        simulationStore.multiSimulation(NUMBER_OF_SIMULATION, 'problem-solving')
-      "
-    >
-      simulate {{ NUMBER_OF_SIMULATION }} pull and problem solving
-    </button>
-    <button @click="simulationStore.clearDashboard()">clear dashboard</button>
+    <div class="row">
+      <button
+        class="button button-outline"
+        @click="simulationStore.simulate('push')"
+      >
+        simulate push system
+      </button>
+      <button
+        class="button button-outline"
+        @click="simulationStore.simulate('pull')"
+      >
+        simulate pull system
+      </button>
+      <button
+        class="button button-outline"
+        @click="simulationStore.simulate('problem-solving')"
+      >
+        simulate pull and problem solving
+      </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,
+            'problem-solving'
+          )
+        "
+      >
+        simulate {{ NUMBER_OF_SIMULATION }} pull and problem solving
+      </button>
+      <button
+        class="button button-clear"
+        @click="simulationStore.clearDashboard()"
+      >
+        clear dashboard
+      </button>
+    </div>
  </div>
 </template>
--- a/src/modules/simulation/SimulationDashboard.vue
+++ b/src/modules/simulation/SimulationDashboard.vue
@@ -6,9 +6,12 @@ const simulationStore = useSimulationStore()

 <template>
  <div class="simulation-dashboard">
-    Dashboard ({{ simulationStore.simulationsDone }} /
-    {{ simulationStore.requestedSimulation }}
-    simulations)
+    <h3>Dashboard</h3>
+    <h4>
+      ({{ simulationStore.simulationsDone }} /
+      {{ simulationStore.requestedSimulation }}
+      simulations)
+    </h4>
    <table>
      <thead>
        <tr>
@@ -21,37 +24,37 @@ const simulationStore = useSimulationStore()
      <tbody>
        <tr>
          <td>lead time</td>
-          <td>
+          <td class="numeric">
            {{ simulationStore.meanPushLeadTime }}
          </td>
-          <td>
+          <td class="numeric">
            {{ simulationStore.meanPullLeadTime }}
          </td>
-          <td>
+          <td class="numeric">
            {{ simulationStore.meanPullDPSLeadTime }}
          </td>
        </tr>
        <tr>
          <td>Complexity</td>
-          <td>
+          <td class="numeric">
            {{ simulationStore.meanPushComplexity }}
          </td>
-          <td>
+          <td class="numeric">
            {{ simulationStore.meanPullComplexity }}
          </td>
-          <td>
+          <td class="numeric">
            {{ simulationStore.meanPullDPSComplexity }}
          </td>
        </tr>
        <tr>
          <td>Quality issue</td>
-          <td>
+          <td class="numeric">
            {{ simulationStore.meanPushQuality }}
          </td>
-          <td>
+          <td class="numeric">
            {{ simulationStore.meanPullQuality }}
          </td>
-          <td>
+          <td class="numeric">
            {{ simulationStore.meanPullDPSQuality }}
          </td>
        </tr>
@@ -62,6 +65,10 @@ const simulationStore = useSimulationStore()

 <style scoped lang="scss">
 .simulation-dashboard {
-  color: var(--background-color);
+  color: var(--primary-color);
+}
+
+td.numeric {
+  text-align: right;
 }
 </style>
--- a/src/modules/simulation/simulation-store.ts
+++ b/src/modules/simulation/simulation-store.ts
@@ -104,6 +104,9 @@ export const useSimulationStore = defineStore('dashboard', {
    },
    clearDashboard() {
      this.dashboards = []
+      this.mean.push = newMean()
+      this.mean.pull = newMean()
+      this.mean['problem-solving'] = newMean()
    }
  },
  getters: {
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -2,7 +2,7 @@ export const getMean = (data: number[]) =>
  Math.round(100 * (sumElements(data) / data.length)) / 100

 export const getRound = (data: number, total: number) =>
-  Math.round(100 * (data / total)) / 100
+  (Math.round(100 * (data / total)) / 100 || 0).toFixed(2)

 export const clone = (data: any) => JSON.parse(JSON.stringify(data))