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

Add wrapper component for a question summary 

Also add mobile version of the horizontal bar chart
This commit is contained in:
Ramon Wenger 2023-01-19 18:40:37 +01:00 committed by Christian Cueni
parent 2fd6201350
commit c509deb092
5 changed files with 71 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
client/src/components/ui/HorizontalBarChart.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<QuestionSummary :title="props.title" :text="props.text">
<div <div
class="mb-10 grid grid-cols-horizontal-bar-chart grid-rows-horizontal-bar-chart overflow-hidden pt-[10px] grid-areas-horizontal-bar-chart" class="mb-10 grid grid-cols-horizontal-bar-chart-slim grid-rows-horizontal-bar-chart overflow-hidden pt-[10px] grid-areas-horizontal-bar-chart md:grid-cols-horizontal-bar-chart"
> >
<div class="-mt-[10px] flex flex-col justify-between pb-[30px] grid-in-y-axis"> <div class="-mt-[10px] flex flex-col justify-between pb-[30px] grid-in-y-axis">
<span <span
@ -25,15 +26,23 @@
class="relative self-end bg-green-500 grid-in-right-chart" class="relative self-end bg-green-500 grid-in-right-chart"
:style="greenStyle" :style="greenStyle"
></div> ></div>
<div class="self-center justify-self-center font-bold grid-in-left-label">Nein</div> <div class="self-center justify-self-center font-bold grid-in-left-label">
<div class="self-center justify-self-center font-bold grid-in-right-label">Ja</div> Nein
</div> </div>
<div class="self-center justify-self-center font-bold grid-in-right-label">
Ja
</div>
</div>
</QuestionSummary>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import QuestionSummary from "@/components/ui/QuestionSummary.vue";
import { computed } from "vue"; import { computed } from "vue";
const props = defineProps<{ const props = defineProps<{
ratio: number; ratio: number;
title: string;
text: string;
}>(); }>();
const ratio = computed(() => { const ratio = computed(() => {

16
client/src/components/ui/QuestionSummary.vue Normal file
View File

@ -0,0 +1,16 @@
<template>
<div class="mb-8 p-6 md:p-8">
<h3 class="text-xl font-normal">{{ props.title }}</h3>
<h2 class="mb-6 text-xl font-bold">
{{ props.text }}
</h2>
<slot></slot>
</div>
</template>
<script setup lang="ts">
const props = defineProps<{
title: string;
text: string;
}>();
</script>

21
client/src/components/ui/RatingScale.vue
View File

@ -1,11 +1,7 @@
<template> <template>
<div class="mb-8 p-8"> <QuestionSummary :title="props.title" :text="props.text">
<h3 class="text-xl font-normal">{{ props.title }}</h3>
<h2 class="mb-6 text-xl font-bold">
{{ props.text }}
</h2>
<div class="inline-grid grid-cols-[140px_auto] grid-rows-2 gap-x-2"> <div class="inline-grid grid-cols-[140px_auto] grid-rows-2 gap-x-2">
<h4 class="text-xl">Durchschnitt:</h4> <h4 class="text-xl font-bold">Durchschnitt:</h4>
<span <span
class="col-start-2 row-span-2 inline-flex h-9 w-11 items-center justify-center rounded text-xl" class="col-start-2 row-span-2 inline-flex h-9 w-11 items-center justify-center rounded text-xl"
:style="ratingValueStyle" :style="ratingValueStyle"
@ -26,15 +22,22 @@
:class="`legend-${legend.index}`" :class="`legend-${legend.index}`"
class="legend" class="legend"
> >
<div>{{ legend.index }}</div> <div
:class="[{ hidden: legend.index === 3 || legend.index === 2 }, 'md:block']"
>
{{ legend.index }}
</div>
<p>{{ legend.label }}</p> <p :class="[{ hidden: legend.index === 3 || legend.index === 2 }, 'md:block']">
</div> {{ legend.label }}
</p>
</div> </div>
</div> </div>
</QuestionSummary>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import QuestionSummary from "@/components/ui/QuestionSummary.vue";
import { computed } from "vue"; import { computed } from "vue";
type RGB = [number, number, number]; type RGB = [number, number, number];

10
client/src/pages/StyleGuidePage.vue
View File

@ -481,11 +481,11 @@ function log(data: any) {
title="Frage 9" title="Frage 9"
text="Wie zufrieden bist du mit dem Kurs “Überbetriebliche Kurse” im Allgemeinen?" text="Wie zufrieden bist du mit dem Kurs “Überbetriebliche Kurse” im Allgemeinen?"
/> />
<HorizontalBarChart :ratio="0.5" /> <HorizontalBarChart title="Frage X" text="Fragentext" :ratio="0.5" />
<HorizontalBarChart :ratio="0.8" /> <HorizontalBarChart title="Frage X" text="Fragentext" :ratio="0.8" />
<HorizontalBarChart :ratio="0.2" /> <HorizontalBarChart title="Frage X" text="Fragentext" :ratio="0.2" />
<HorizontalBarChart :ratio="2" /> <HorizontalBarChart title="Frage X" text="Fragentext" :ratio="2" />
<HorizontalBarChart :ratio="0" /> <HorizontalBarChart title="Frage X" text="Fragentext" :ratio="0" />
</div> </div>
</main> </main>
</template> </template>

1
client/tailwind.config.js
View File

@ -45,6 +45,7 @@ module.exports = {
}, },
gridTemplateColumns: { gridTemplateColumns: {
"horizontal-bar-chart": "50px 1fr 300px 4fr 300px 1fr", "horizontal-bar-chart": "50px 1fr 300px 4fr 300px 1fr",
"horizontal-bar-chart-slim": "50px 1fr 78px 4fr 78px 1fr",
}, },
gridTemplateRows: { gridTemplateRows: {
"horizontal-bar-chart": "200px 40px", "horizontal-bar-chart": "200px 40px",