From e5cdd35e95ec72b8152627d5d1d1a956344edd61 Mon Sep 17 00:00:00 2001
From: Daniel Egger <daniel.egger@gmail.com>
Date: Tue, 11 Oct 2022 14:22:32 +0200
Subject: [PATCH] Mobile Anpassungen Kompetenzprofil

---
 client/src/components/ui/ItDropdown.vue            |  2 +-
 client/src/components/ui/ItDropdownSelect.vue      |  2 +-
 client/src/pages/StyleGuidePage.vue                | 14 +++++++++-----
 .../src/pages/competence/CompetenceIndexPage.vue   |  3 ++-
 client/src/pages/competence/CompetenceListPage.vue |  1 +
 .../pages/competence/PerformanceCriteriaPage.vue   |  1 +
 6 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/client/src/components/ui/ItDropdown.vue b/client/src/components/ui/ItDropdown.vue
index 46e5b2f3..6d9f291d 100644
--- a/client/src/components/ui/ItDropdown.vue
+++ b/client/src/components/ui/ItDropdown.vue
@@ -29,7 +29,7 @@ const emit = defineEmits<{
       leave-to-class="transform scale-95 opacity-0"
     >
       <MenuItems
-        class="absolute mt-2 px-6 w-56 origin-top-right divide-y divide-gray-500 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
+        class="absolute mt-2 px-6 w-56 w-max-full origin-top-right divide-y divide-gray-500 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none"
         :class="[align === 'left' ? 'left-0' : 'right-0']"
       >
         <div v-for="section in listItems" :key="section" class="">
diff --git a/client/src/components/ui/ItDropdownSelect.vue b/client/src/components/ui/ItDropdownSelect.vue
index 52be98e7..55b1c929 100644
--- a/client/src/components/ui/ItDropdownSelect.vue
+++ b/client/src/components/ui/ItDropdownSelect.vue
@@ -38,7 +38,7 @@ const dropdownSelected = computed({
 
 <template>
   <Listbox v-model="dropdownSelected" as="div">
-    <div class="mt-1 relative w-96">
+    <div class="mt-1 relative w-full">
       <ListboxButton
         class="bg-white relative w-full border border-gray-500 pl-5 pr-10 py-3 text-left cursor-default font-bold"
       >
diff --git a/client/src/pages/StyleGuidePage.vue b/client/src/pages/StyleGuidePage.vue
index 3c22d326..24247a61 100644
--- a/client/src/pages/StyleGuidePage.vue
+++ b/client/src/pages/StyleGuidePage.vue
@@ -356,15 +356,19 @@ function log(data: any) {
 
     <h2 class="mt-8 mb-8">Dropdown (Work-in-progress)</h2>
 
-    <ItDropdownSelect v-model="state.dropdownSelected" :items="state.dropdownValues">
+    <ItDropdownSelect
+      v-model="state.dropdownSelected"
+      class="w-full lg:w-96 mt-4 lg:mt-0"
+      :items="state.dropdownValues"
+    >
     </ItDropdownSelect>
     {{ state.dropdownSelected }}
 
     <h2 class="mt-8 mb-8">Checkbox</h2>
 
     <ItCheckbox v-model="state.checkboxValue" :disabled="false" class=""
-      >Label</ItCheckbox
-    >
+      >Label
+    </ItCheckbox>
 
     <ItCheckbox disabled class="mt-4">Disabled</ItCheckbox>
 
@@ -376,8 +380,8 @@ function log(data: any) {
         :list-items="dropdownData"
         :align="'left'"
         @select="log"
-        >Click Me</ItDropdown
-      >
+        >Click Me
+      </ItDropdown>
     </div>
   </main>
 </template>
diff --git a/client/src/pages/competence/CompetenceIndexPage.vue b/client/src/pages/competence/CompetenceIndexPage.vue
index 9bbbffdb..c91726a4 100644
--- a/client/src/pages/competence/CompetenceIndexPage.vue
+++ b/client/src/pages/competence/CompetenceIndexPage.vue
@@ -56,6 +56,7 @@ const countStatus = computed(() => {
       <h1>Kompetenzprofil</h1>
       <ItDropdownSelect
         v-model="competenceStore.selectedCircle"
+        class="w-full lg:w-96 mt-4 lg:mt-0"
         :items="competenceStore.availableCircles"
       ></ItDropdownSelect>
     </div>
@@ -112,7 +113,7 @@ const countStatus = computed(() => {
         </li>
         <li class="flex-1">
           <h5 class="text-gray-700 mb-4">Nicht eingeschätzt</h5>
-          <div class="flex flex-row items-center border-r">
+          <div class="flex flex-row items-center">
             <it-icon-smiley-neutral class="w-16 h-16"></it-icon-smiley-neutral>
             <p class="text-7xl font-bold inline-block ml-4">
               {{ countStatus.unknown }}
diff --git a/client/src/pages/competence/CompetenceListPage.vue b/client/src/pages/competence/CompetenceListPage.vue
index 89b22693..2a9f2630 100644
--- a/client/src/pages/competence/CompetenceListPage.vue
+++ b/client/src/pages/competence/CompetenceListPage.vue
@@ -24,6 +24,7 @@ const competenceStore = useCompetenceStore();
       <h1>Kompetenzen</h1>
       <ItDropdownSelect
         v-model="competenceStore.selectedCircle"
+        class="w-full lg:w-96 mt-4 lg:mt-0"
         :items="competenceStore.availableCircles"
       ></ItDropdownSelect>
     </div>
diff --git a/client/src/pages/competence/PerformanceCriteriaPage.vue b/client/src/pages/competence/PerformanceCriteriaPage.vue
index bb2e8c9b..d0ffb1d1 100644
--- a/client/src/pages/competence/PerformanceCriteriaPage.vue
+++ b/client/src/pages/competence/PerformanceCriteriaPage.vue
@@ -34,6 +34,7 @@ const shownCriteria = computed(() => {
       <h1>Einschätzungen</h1>
       <ItDropdownSelect
         v-model="competenceStore.selectedCircle"
+        class="w-full lg:w-96 mt-4 lg:mt-0"
         :items="competenceStore.availableCircles"
       ></ItDropdownSelect>
     </div>