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

Style competence mobile views

This commit is contained in:
Christian Cueni 2022-10-03 16:25:01 +02:00 committed by Daniel Egger
parent 9fe5c689a3
commit 3fa0521623
3 changed files with 11 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/components/competences/LeistungskriteriumRow.vue
View File

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

2
client/src/pages/CompetencePerfomanceCriteriaView.vue
View File

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

12
client/src/pages/CompetencesMainView.vue
View File

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