ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Style mobile competence page

This commit is contained in:
Christian Cueni 2022-10-20 14:51:44 +02:00
parent 4635435ce3
commit 74ec62493e
1 changed files with 9 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/pages/competence/CompetenceIndexPage.vue
View File

@ -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>