From 74ec62493e0f2e409849d33acc4f0a863c215110 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Thu, 20 Oct 2022 14:51:44 +0200
Subject: [PATCH] Style mobile competence page

---
 .../src/pages/competence/CompetenceIndexPage.vue   | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/client/src/pages/competence/CompetenceIndexPage.vue b/client/src/pages/competence/CompetenceIndexPage.vue
index 8faf7c45..fc5681de 100644
--- a/client/src/pages/competence/CompetenceIndexPage.vue
+++ b/client/src/pages/competence/CompetenceIndexPage.vue
@@ -91,18 +91,22 @@ const countStatus = computed(() => {
       </div>
     </div>
     <div class="bg-white p-8 mb-8">
-      <h3 class="mb-4">Einschätzungen</h3>
+      <h3 class="pb-4 lg:pb-0 mb-4 border-b lg:border-0">Einschätzungen</h3>
       <ul
         class="flex flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-8 mb-6"
       >
-        <li class="inline-block mb-4 lg:mb-0 lg:border-r lg: flex-1">
+        <li
+          class="inline-block pb-4 lg:pb-0 mb-4 border-b lg:border-b-0 lg:mb-0 lg:border-r flex-1"
+        >
           <h5 class="text-gray-700 mb-4">«Das muss ich nochmals anschauen»</h5>
           <div class="flex flex-row items-center">
             <it-icon-smiley-thinking class="w-16 h-16"></it-icon-smiley-thinking>
             <p class="text-7xl font-bold inline-block ml-4">{{ countStatus.fail }}</p>
           </div>
         </li>
-        <li class="inline-block mb-4 lg:mb-0 lg:border-r lg: flex-1">
+        <li
+          class="inline-block pb-4 lg:pb-0 mb-4 border-b lg:border-b-0 lg:mb-0 lg:border-r flex-1"
+        >
           <h5 class="text-gray-700 mb-4">«Ja, ich kann das»</h5>
           <div class="flex flex-row items-center">
             <it-icon-smiley-happy class="w-16 h-16"></it-icon-smiley-happy>
@@ -111,7 +115,7 @@ const countStatus = computed(() => {
             </p>
           </div>
         </li>
-        <li class="flex-1">
+        <li class="pb-4 lg:pb-0 border-b lg:border-b-0 lg:mb-0flex-1">
           <h5 class="text-gray-700 mb-4">Nicht eingeschätzt</h5>
           <div class="flex flex-row items-center">
             <it-icon-smiley-neutral class="w-16 h-16"></it-icon-smiley-neutral>
@@ -129,7 +133,7 @@ const countStatus = computed(() => {
         <it-icon-arrow-right></it-icon-arrow-right>
       </router-link>
     </div>
-    <div class="bg-white p-8">
+    <div v-if="failedCriteria.length > 0" class="bg-white p-8">
       <div class="border-b flex flex-row items-center pb-4 mb-4">
         <it-icon-smiley-thinking class="w-11 h-11 mr-5"></it-icon-smiley-thinking>
         <h3>«Das muss ich nochmals anschauen»</h3>