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

Use tailwind properties instead of custom css

This commit is contained in:
Ramon Wenger 2023-01-19 14:35:08 +01:00 committed by Christian Cueni
parent cb290a6fbc
commit c24c1214c9
1 changed files with 19 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,26 +1,32 @@
<template>
<div class="horizontal-bar-chart overflow-hidden mb-10">
<div class="y-axis">
<span class="text-sm">100%</span>
<span class="text-sm">75%</span>
<span class="text-sm">50%</span>
<span class="text-sm">25%</span>
<span class="text-sm">0%</span>
<div
class="grid overflow-hidden mb-10 pt-[10px] grid-areas-horizontal-bar-chart grid-rows-horizontal-bar-chart grid-cols-horizontal-bar-chart"
>
<div class="grid-in-y-axis flex flex-col justify-between -mt-[10px] pb-[30px]">
<span
v-for="percentage in [100, 75, 50, 25, 0]"
:key="percentage"
class="text-sm"
>
{{ percentage }}%
</span>
</div>
<div class="background"></div>
<div
class="relative border-y border-gray-400 flex justify-around content-center items-end top-bottom-borders"
class="background border-y border-y-gray-400 w-full h-1/2 col-start-2 col-span-5 relative self-center row-start-1"
></div>
<div
class="bg-red-500 inline-block relative negative-chart"
class="relative border-y border-gray-400 flex justify-around content-center items-end border-y-gray-400 w-full col-start-2 col-span-5 h-[200px] row-start-1"
></div>
<div
class="bg-red-500 grid-in-left-chart relative self-end"
:style="redStyle"
></div>
<div
class="bg-green-500 inline-block relative positive-chart"
class="bg-green-500 grid-in-right-chart relative self-end"
:style="greenStyle"
></div>
<div class="positive-legend">Nein</div>
<div class="negative-legend">Ja</div>
<div class="grid-in-left-label justify-self-center self-center font-bold">Nein</div>
<div class="grid-in-right-label justify-self-center self-center font-bold">Ja</div>
</div>
</template>
@ -48,35 +54,6 @@ const greenStyle = {
</script>
<style lang="postcss">
.background {
border-top: 1px theme(colors.gray.400) solid;
border-bottom: 1px theme(colors.gray.400) solid;
width: 100%;
height: 50%;
grid-column: 2 / span 5;
grid-row: 1;
align-self: center;
position: relative;
}
.y-axis {
display: flex;
flex-direction: column;
grid-area: y;
justify-content: space-between;
padding-bottom: 30px;
margin-top: -10px;
}
.top-bottom-borders {
grid-column: 2 / span 5;
grid-row: 1;
justify-self: center;
align-self: center;
height: 200px;
width: 100%;
}
.background::before {
content: "";
border-top: 1px theme(colors.gray.400) solid;
@ -85,35 +62,4 @@ const greenStyle = {
position: absolute;
top: 50%;
}
.horizontal-bar-chart {
padding-top: 10px;
display: grid;
grid-template-columns: 50px 1fr 300px 4fr 300px 1fr;
grid-template-rows: 200px 40px;
grid-template-areas:
"y . n . p ."
"y . l . r .";
}
.positive-chart {
grid-area: p;
align-self: flex-end;
box-sizing: border-box;
}
.negative-chart {
grid-area: n;
align-self: flex-end;
padding-top: 10px;
}
.positive-legend {
grid-area: l;
justify-self: center;
align-self: center;
}
.negative-legend {
grid-area: r;
justify-self: center;
align-self: center;
}
</style>