clunky progress stub

Author: rnarius

app.js

@@ -35,6 +35,14 @@ main {
   max-width: 80ch;
 }
 
+.kern-link .kern-icon.status--started {
+  background-color: var(--kern-color-feedback-warning);
+}
+
+.kern-link .kern-icon.status--done {
+  background-color: var(--kern-color-feedback-success);
+}
+
 footer {
   margin-block-start: 6rem;
   background: var(--kern-color-layout-background-hued);

public/css/main.css

@@ -0,0 +1,6 @@
+<div class="kern-stack kern-gap-xl">
+  <div class="kern-stack">
+    <h2 class="kern-heading-x-large">Ihr Kombi-Antrag</h2>
+    {{>tasklist interactive=true}}
+  </div>
+</div>

views/antrag.html

@@ -13,11 +13,19 @@
     </a>
     {{> header}}
     <div class="kern-container kern-py-xl">
-      <div class="kern-stack kern-gap-xl">
+      <div class="kern-flex-md">
+        <div class="kern-stack kern-gap-xl kern-flex-1">
+          {{#unless start}}
+          <div>{{> back url=url}}</div>
+          {{/unless}}
+          <main id="content">{{{body}}}</main>
+        </div>
         {{#unless start}}
-        <div>{{> back url=url}}</div>
+        <aside class="">
+          <a href="/antrag" class="kern-link">Zur Übersicht</a>
+          {{> tree items=links}}
+        </aside>
         {{/unless}}
-        <main id="content">{{{body}}}</main>
       </div>
     </div>
     {{> footer}}

views/layouts/main.html

@@ -5,7 +5,7 @@
       <div class="kern-task-list__title" id="task1-title">
         {{#if interactive}}
         <a
-          href="/person/name"
+          href="/person/staatsangehoerigkeit"
           class="kern-link kern-link--stretched"
           aria-describedby="task1-status"
         >

views/partials/tasklist.html

@@ -0,0 +1,11 @@
+{{#if started}} {{#unless done}}
+<span
+  class="status--started kern-icon kern-icon--warning kern-icon--small"
+  aria-hidden="true"
+></span>
+{{/unless}} {{/if}} {{#if done}}
+<span
+  class="status--done kern-icon kern-icon--success kern-icon--small"
+  aria-hidden="true"
+></span>
+{{/if}}

views/partials/tree-link-status.html

@@ -0,0 +1,9 @@
+{{#unless active}}
+<a class="kern-link" href="{{ href }}"
+  >{{name}} {{> tree-link-status started=started done=done}}</a
+>
+{{else}}
+<p class="kern-body kern-body--bold">
+  {{name}} {{> tree-link-status started=started done=done}}
+</p>
+{{/unless}}

views/partials/tree-link.html

@@ -0,0 +1,5 @@
+<ol>
+  {{#each items}}
+  <li>{{> tree-link}} {{#if items}} {{> tree}} {{/if}}</li>
+  {{/each}}
+</ol>

views/partials/tree.html

@@ -1,5 +1,6 @@
 <div class="kern-stack">
   <div>
+    <p class="kern-preline">Bearbeiten</p>
     <h2 class="kern-heading-x-large">Wie heißen Sie?</h2>
   </div>
   <form