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

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/components/mediaLibrary/OverviewCard.vue
View File

@ -13,8 +13,8 @@ const props = withDefaults(defineProps<Props>(), {
</script> </script>
<template> <template>
<div class="bg-white p-8 flex justify-between"> <div class="bg-white lg:pb-8 pb-4 p-8 flex justify-between flex-col lg:flex-row">
<div> <div class="mb-4 lg:mb-0">
<h3 class="mb-4">{{ title }}</h3> <h3 class="mb-4">{{ title }}</h3>
<p class="mb-4">{{ description }}</p> <p class="mb-4">{{ description }}</p>
<router-link <router-link
@ -29,7 +29,7 @@ const props = withDefaults(defineProps<Props>(), {
<div <div
v-if="icon" v-if="icon"
:class="[`bg-${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>
</div> </div>
</template> </template>

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

@ -2,10 +2,10 @@
import CompetenceProgress from "@/components/competences/CompetenceProgress.vue"; import CompetenceProgress from "@/components/competences/CompetenceProgress.vue";
import PerformanceCriteriaRow from "@/components/competences/PerformanceCriteriaRow.vue"; import PerformanceCriteriaRow from "@/components/competences/PerformanceCriteriaRow.vue";
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue"; import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import { useCompetenceStore } from "@/stores/competence"; import {useCompetenceStore} from "@/stores/competence";
import _ from "lodash"; import _ from "lodash";
import * as log from "loglevel"; import * as log from "loglevel";
import { computed } from "vue"; import {computed} from "vue";
log.debug("CompetenceIndexPage created"); log.debug("CompetenceIndexPage created");
@ -60,7 +60,7 @@ const countStatus = computed(() => {
:items="competenceStore.availableCircles" :items="competenceStore.availableCircles"
></ItDropdownSelect> ></ItDropdownSelect>
</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">
<div> <div>
<h3 class="pb-4 border-b">Letzte verbesserte Kompetenzen</h3> <h3 class="pb-4 border-b">Letzte verbesserte Kompetenzen</h3>
<ul> <ul>
@ -90,7 +90,7 @@ const countStatus = computed(() => {
</router-link> </router-link>
</div> </div>
</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> <h3 class="pb-4 lg:pb-0 mb-4 border-b lg:border-0">Einschätzungen</h3>
<ul <ul
class="flex flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-8 mb-6" 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> <it-icon-arrow-right></it-icon-arrow-right>
</router-link> </router-link>
</div> </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"> <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> <it-icon-smiley-thinking class="w-11 h-11 mr-5"></it-icon-smiley-thinking>
<h3>«Das muss ich nochmals anschauen»</h3> <h3>«Das muss ich nochmals anschauen»</h3>

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

@ -1,11 +1,11 @@
<script setup lang="ts"> <script setup lang="ts">
import { default as PerformanceCriteriaRow } from "@/components/competences/PerformanceCriteriaRow.vue"; import {default as PerformanceCriteriaRow} from "@/components/competences/PerformanceCriteriaRow.vue";
import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue"; import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
import { useCompetenceStore } from "@/stores/competence"; import {useCompetenceStore} from "@/stores/competence";
import type { CourseCompletionStatus } from "@/types"; import type {CourseCompletionStatus} from "@/types";
import * as log from "loglevel"; import * as log from "loglevel";
import type { Ref } from "vue"; import type {Ref} from "vue";
import { computed, ref } from "vue"; import {computed, ref} from "vue";
log.debug("CompetencesMainView created"); log.debug("CompetencesMainView created");
@ -27,11 +27,11 @@ const shownCriteria = computed(() => {
class="btn-text inline-flex items-center pl-0" class="btn-text inline-flex items-center pl-0"
:to="`${competenceStore.competenceProfilePage?.frontend_url}`" :to="`${competenceStore.competenceProfilePage?.frontend_url}`"
> >
<it-icon-arrow-left /> <it-icon-arrow-left/>
<span>zurück</span> <span>zurück</span>
</router-link> </router-link>
</nav> </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> <h1>Einschätzungen</h1>
<ItDropdownSelect <ItDropdownSelect
v-model="competenceStore.selectedCircle" v-model="competenceStore.selectedCircle"