improve view and styling

scout-ch · Apr 21, 2024 · 9ddf790 · 9ddf790
1 parent 7bf5aea
commit 9ddf790
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 39 deletions.
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -52,7 +52,13 @@ const services = serviceEdges.map((service: ServiceConnectionEdges) => {
           </a>
           </td>
           <td>
-           <span class="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded">{service.status}</span>
+            <span class:list={['px-1.5', 'py-0.5', 'rounded', 'text-xs', 
+                              {'bg-green-200': service.status == 'in_production'}, 
+                              {'bg-orange-200': service.status == 'in_progress'},
+                              {'bg-yellow-200': service.status == 'planned'},
+                              {'bg-yellow-200': service.status == 'idea'}]}>
+                              {service.status}
+            </span>
           </td>
           <td>
             {service.product_owner}

diff --git a/src/pages/services/[name].astro b/src/pages/services/[name].astro
@@ -74,7 +74,7 @@ const lastUpdatedValue: string = service?.last_updated ? new Date(service.last_u
 
 <Layout title={service?.name || ""}>
   <main class="container mx-auto py-10">
-    <a class="text-brombeer hover:underscore" href={'/it-landscape/'}>
+    <a class="text-brombeer underline hover:font-medium" href={'/it-landscape/services/'}>
       back
     </a>
     <article class="bg-white shadow-md rounded-xl p-10 max-w-4xl mx-auto">
@@ -83,37 +83,52 @@ const lastUpdatedValue: string = service?.last_updated ? new Date(service.last_u
         >Letztes Update dieser Daten: {lastUpdatedValue}</span
       >
       <TinaMarkdown content={service?.description}/>
-      <dl class="mb-4 mt-3">
-        <dt class="font-bold">Criticality</dt>
-        <dd>
-          {service?.criticality}
-        </dd>
-      </dl>
-      <dl class="mb-4 mt-3">
-        <dt class="font-bold">Product Owner</dt>
-        <dd>
-          {service?.product_owner?.name}
-        </dd>
-      </dl>
-      <dl class="mb-4 mt-3">
-        <dt class="font-bold">Development</dt>
-        <dd>
-          {service?.development}
-        </dd>
-      </dl>
-      <dl class="mb-4 mt-3">
-        <dt class="font-bold">Operations</dt>
-        <dd>
-          {service?.operations}
-        </dd>
-      </dl>
-      <dl class="mb-4 mt-3">
-        <dt class="font-bold">SLA</dt>
+
+      <div class="columns-3 mt-3 gap-1">
+        <dl>
+          <dt class="font-bold">Criticality</dt>
+          <dd>
+            <span class:list={['px-1.5', 'py-0.5', 'rounded', {'bg-red-200': service?.criticality == 'high'}, 
+                              {'bg-orange-200': service?.criticality == 'medium'},
+                              {'bg-yellow-200': service?.criticality == 'low'},]}>
+              {service?.criticality || '-'}
+            </span>
+          </dd>
+        </dl>
+        <dl>
+          <dt class="font-bold">Product Owner</dt>
+          <dd>
+            {service?.product_owner?.name || '-'}
+          </dd>
+        </dl>
+        <dl>
+          <dt class="font-bold">Development</dt>
+          <dd>
+            {service?.development || '-'}
+          </dd>
+        </dl>
+        <dl>
+          <dt class="font-bold">Operations</dt>
+          <dd>
+            {service?.operations || '-'}
+          </dd>
+        </dl>
+        <dl >
+          <dt class="font-bold">SLA</dt>
+          <dd>
+            {service?.has_sla ? 'true' : 'false'}
+          </dd>
+        </dl>
+      </div>
+
+      <dl class="mt-3">
+        <dt class="font-bold">Steckbrief</dt>
         <dd>
-          {service?.has_sla ? 'true' : 'false'}
+          <TinaMarkdown content={service?.strategy_reference}/>
         </dd>
       </dl>
-      <dl class="mb-4 mt-3">
+
+      <dl class="mt-3">
         <dt class="font-bold">Links</dt>
         <dd>
           <ul class="list-disc ps-5">
@@ -130,13 +145,6 @@ const lastUpdatedValue: string = service?.last_updated ? new Date(service.last_u
         </dd>
       </dl>
 
-      <dl class="mb-4 mt-3">
-        <dt class="font-bold">Steckbrief</dt>
-        <dd>
-          <TinaMarkdown content={service?.strategy_reference}/>
-        </dd>
-      </dl>
-
       <dl class="mb-4 mt-3">
         <dt class="font-bold">Abhängigkeiten</dt>
         <dd>
@@ -187,13 +195,25 @@ const lastUpdatedValue: string = service?.last_updated ? new Date(service.last_u
             {
               lifecycles.map((lifecycle) => {
                 return (
-                  <li>{lifecycle!.date}:{" "}{lifecycle?.state}</li>
+                  <li>
+                    {lifecycle!.date}:{" "}
+                    <span class:list={['px-1.5', 'py-0.5', 'rounded', 'text-xs', 
+                              {'bg-green-200': lifecycle?.state == 'in_production'}, 
+                              {'bg-orange-200': lifecycle?.state == 'in_progress'},
+                              {'bg-yellow-200': lifecycle?.state == 'planned'},
+                              {'bg-yellow-200': lifecycle?.state == 'idea'}]}>
+                              {lifecycle?.state}
+                    </span>
+                  </li>
                 );
               })
             }
           </ul>
         </dd>
       </dl>
     </article>
+    <a class="text-brombeer underline hover:font-medium" href={'/it-landscape/services/'}>
+      back
+    </a>
   </main>
 </Layout>
diff --git a/src/pages/services/index.astro b/src/pages/services/index.astro
@@ -52,7 +52,13 @@ const services = serviceEdges.map((service: ServiceConnectionEdges) => {
           </a>
           </td>
           <td>
-           <span class="bg-green-100 text-green-800 text-xs font-medium mr-2 px-2.5 py-0.5 rounded">{service.status}</span>
+            <span class:list={['px-1.5', 'py-0.5', 'rounded', 'text-xs', 
+                              {'bg-green-200': service.status == 'in_production'}, 
+                              {'bg-orange-200': service.status == 'in_progress'},
+                              {'bg-yellow-200': service.status == 'planned'},
+                              {'bg-yellow-200': service.status == 'idea'}]}>
+                              {service.status}
+            </span>
           </td>
           <td>
             {service.product_owner}