Style mobile Mediathek overview

This commit is contained in:
Christian Cueni 2022-10-20 16:21:25 +02:00
parent 74ec62493e
commit f6114c78e7
3 changed files with 15 additions and 15 deletions

View File

@ -13,8 +13,8 @@ const props = withDefaults(defineProps<Props>(), {
</script>
<template>
<div class="bg-white p-8 flex justify-between">
<div>
<div class="bg-white lg:pb-8 pb-4 p-8 flex justify-between flex-col lg:flex-row">
<div class="mb-4 lg:mb-0">
<h3 class="mb-4">{{ title }}</h3>
<p class="mb-4">{{ description }}</p>
<router-link
@ -29,7 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
<div
v-if="icon"
:class="[`bg-${icon}`]"
class="hidden lg:block bg-contain bg-no-repeat bg-right w-2/6 -mr-8"
class="lg:block bg-contain bg-no-repeat bg-left lg:bg-right h-32 lg:w-2/6 -ml-8 lg:ml-0 lg:-mr-8"
></div>
</div>
</template>

View File

@ -60,7 +60,7 @@ const countStatus = computed(() => {
:items="competenceStore.availableCircles"
></ItDropdownSelect>
</div>
<div class="bg-white p-8 mb-8">
<div class="bg-white px-8 py-4 lg:py-8 l mb-4 lg:mb-8">
<div>
<h3 class="pb-4 border-b">Letzte verbesserte Kompetenzen</h3>
<ul>
@ -90,7 +90,7 @@ const countStatus = computed(() => {
</router-link>
</div>
</div>
<div class="bg-white p-8 mb-8">
<div class="bg-white px-8 py-4 lg:py-8 l mb-4 lg:mb-8">
<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"
@ -133,7 +133,7 @@ const countStatus = computed(() => {
<it-icon-arrow-right></it-icon-arrow-right>
</router-link>
</div>
<div v-if="failedCriteria.length > 0" class="bg-white p-8">
<div v-if="failedCriteria.length > 0" class="bg-white px-8 py-4 lg:py-8 l mb-4 lg:mb-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>

View File

@ -31,7 +31,7 @@ const shownCriteria = computed(() => {
<span>zurück</span>
</router-link>
</nav>
<div class="flex flex-col lg:flex-row items-center justify-between mb-10">
<div class="flex flex-col lg:flex-row items-center justify-between mb-4 lg:mb-10">
<h1>Einschätzungen</h1>
<ItDropdownSelect
v-model="competenceStore.selectedCircle"