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

Fix mobile view for rating scale component

This commit is contained in:
Ramon Wenger 2023-01-23 17:01:40 +01:00 committed by Christian Cueni
parent 5d955e14cb
commit 2fed11784c
2 changed files with 14 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,9 @@
</span>
<h5 class="text-base">{{ props.answers }} Antworten</h5>
</div>
<div class="relative grid grid-cols-8 pt-3 grid-areas-rating-scale">
<div
class="relative grid grid-cols-3 pt-3 grid-areas-rating-scale-slim md:grid-cols-8 md:grid-areas-rating-scale"
>
<div
class="gradient relative z-10 h-2 overflow-visible grid-in-bar"
:style="gradientStyle"
@ -26,12 +28,14 @@
v-for="legend in legends"
:key="legend.index"
:class="{
'grid-in-fst': legend.index == 1,
'grid-in-snd': legend.index == 2,
'grid-in-trd': legend.index == 3,
'grid-in-fth': legend.index == 4,
'items-start grid-in-fst before:left-0 md:before:left-1/2': legend.index == 1,
'grid-in-mid before:left-0 md:grid-in-snd md:before:left-1/2':
legend.index == 2,
'hidden before:left-1/2 md:inline-flex md:grid-in-trd': legend.index == 3,
'items-end grid-in-fth before:right-0 after:left-0 after:absolute after:top-0 after:h-4 after:w-px after:bg-gray-500 md:before:left-1/2 md:before:right-auto md:after:hidden text-right':
legend.index == 4,
}"
class="legend relative inline-flex flex-col items-center pt-4 before:absolute before:top-0 before:left-1/2 before:h-4 before:w-px before:bg-gray-500"
class="legend relative inline-flex flex-col pt-4 before:absolute before:top-0 before:h-4 before:w-px before:bg-gray-500 md:items-center"
>
<div
:class="[{ hidden: legend.index === 3 || legend.index === 2 }, 'md:block']"

5
client/tailwind.config.js
View File

@ -44,7 +44,10 @@ module.exports = {
],
"rating-scale": [
'. bar bar bar bar bar bar .',
'fst fst snd snd trd trd fth fth']
'fst fst snd snd trd trd fth fth'],
"rating-scale-slim": [
'bar bar bar',
'fst mid fth']
},
gridTemplateColumns: {
"horizontal-bar-chart": "50px 1fr 300px 4fr 300px 1fr",