From 3fa05216232212cfd0903af17814d8ab63432e00 Mon Sep 17 00:00:00 2001
From: Christian Cueni <christian.cueni@iterativ.ch>
Date: Mon, 3 Oct 2022 16:25:01 +0200
Subject: [PATCH] Style competence mobile views

---
 .../components/competences/LeistungskriteriumRow.vue |  6 ++++--
 .../src/pages/CompetencePerfomanceCriteriaView.vue   |  2 +-
 client/src/pages/CompetencesMainView.vue             | 12 ++++++------
 3 files changed, 11 insertions(+), 9 deletions(-)

diff --git a/client/src/components/competences/LeistungskriteriumRow.vue b/client/src/components/competences/LeistungskriteriumRow.vue
index 3ee3b366..e3c1265b 100644
--- a/client/src/components/competences/LeistungskriteriumRow.vue
+++ b/client/src/components/competences/LeistungskriteriumRow.vue
@@ -23,16 +23,18 @@ const props = withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-  <div class="flex flex-row items-center justify-between">
+  <div class="flex flex-col lg:flex-row lg:items-center justify-between">
+    <div class="flex flex-row items-center">
     <div v-if="showState" class="h-8 w-8 mr-4">
       <it-icon-smiley-happy v-if="state === 'done'"></it-icon-smiley-happy>
       <it-icon-smiley-thinking v-else-if="state === 'notDone'"></it-icon-smiley-thinking>
       <it-icon-smiley-neutral v-else></it-icon-smiley-neutral>
     </div>
-    <div class="pr-5 mr-10">
+    <div class="pr-5 lg:mr-10 mb-4 lg:mb-0">
       <h4 class="text-bold mb-2">{{title}}</h4>
       <p>Lerneinheit: <a :href="unitUrl">{{unit}}</a></p>
     </div>
+    </div>
     <span class="whitespace-nowrap">Sich nochmals einschätzen</span>
   </div>
 </template>
diff --git a/client/src/pages/CompetencePerfomanceCriteriaView.vue b/client/src/pages/CompetencePerfomanceCriteriaView.vue
index cf0200a2..c4d225ce 100644
--- a/client/src/pages/CompetencePerfomanceCriteriaView.vue
+++ b/client/src/pages/CompetencePerfomanceCriteriaView.vue
@@ -102,7 +102,7 @@ const shownCriteria = computed(() => {
       <!--        :items="mediaStore.availableLearningPaths"></ItDropdownSelect>-->
     </div>
     <div class="bg-white p-8">
-      <div class="border-b border-gray-500 flex flex-row items-center pb-4 mb-4">
+      <div class="border-b border-gray-500 flex flex-col lg:flex-row lg:items-center pb-4 mb-4">
         <button
           @click="activeState = UserCriteriaState.Nok"
           :class="{'bg-gray-200': activeState === UserCriteriaState.Nok}"
diff --git a/client/src/pages/CompetencesMainView.vue b/client/src/pages/CompetencesMainView.vue
index bec1fa4a..893cd6a2 100644
--- a/client/src/pages/CompetencesMainView.vue
+++ b/client/src/pages/CompetencesMainView.vue
@@ -186,8 +186,8 @@ const nokCriteria = [
         <ul>
           <li
             v-for="competence in lastCompetences" :key="competence.description"
-            class="py-4 flex flex-col lg:flex-row items-center border-b border-gray-500 last:mb-8">
-            <p class="w-1/4 inline-block mr-5">{{competence.description}}</p>
+            class="py-4 flex flex-col lg:flex-row lg:items-center border-b border-gray-500 last:mb-8">
+            <p class="mb-4 lg:mb-0 lg:w-1/4 inline-block lg:mr-5">{{competence.description}}</p>
             <ComptenceProgress
               :total="7"
               :done="3"
@@ -206,15 +206,15 @@ const nokCriteria = [
     </div>
     <div class="bg-white p-8 mb-8">
       <h3 class="mb-4">Einschätzungen</h3>
-       <ul class="flex flex-col lg:flex-row items-center mb-6">
-         <li class="inline-block pr-12 mr-12 border-r border-gray-500">
+       <ul class="flex flex-col lg:flex-row lg:items-center mb-6">
+         <li class="inline-block pr-12 lg:mr-12 mb-4 lg:mb-0 lg:border-r lg:border-gray-500">
            <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">{{summary.nok}}</p>
            </div>
          </li>
-         <li class="inline-block pr-12 mr-12 border-r border-gray-500">
+         <li class="inline-block pr-12 lg:mr-12 mb-4 lg:mb-0 lg:border-r lg:border-gray-500">
            <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>
@@ -240,7 +240,7 @@ const nokCriteria = [
     <div class="bg-white p-8">
       <div class="border-b border-gray-500 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 class="pb-4">«Das muss ich nochmals anschauen»</h3>
+        <h3>«Das muss ich nochmals anschauen»</h3>
       </div>
        <ul class="mb-6">
           <li