Add tailwind plugin for prettier
This commit is contained in:
Christian Cueni
parent
c24c1214c9
commit
2fd6201350
|
|
@ -50,6 +50,7 @@
|
|||
"postcss-import": "^14.1.0",
|
||||
"prettier": "^2.7.1",
|
||||
"prettier-plugin-organize-imports": "^3.1.1",
|
||||
"prettier-plugin-tailwindcss": "^0.2.1",
|
||||
"replace-in-file": "^6.3.5",
|
||||
"sass": "^1.54.6",
|
||||
"sass-loader": "^12.6.0",
|
||||
|
|
@ -9515,6 +9516,18 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"node_modules/prettier-plugin-tailwindcss": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.1.tgz",
|
||||
"integrity": "sha512-aIO8IguumORyRsmT+E7JfJ3A9FEoyhqZR7Au7TBOege3VZkgMvHJMkufeYp4zjnDK2iq4ktkvGMNOQR9T8lisQ==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=12.17.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"prettier": ">=2.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/pretty-format": {
|
||||
"version": "27.5.1",
|
||||
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
|
||||
|
|
@ -18823,6 +18836,13 @@
|
|||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"prettier-plugin-tailwindcss": {
|
||||
"version": "0.2.1",
|
||||
"resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.2.1.tgz",
|
||||
"integrity": "sha512-aIO8IguumORyRsmT+E7JfJ3A9FEoyhqZR7Au7TBOege3VZkgMvHJMkufeYp4zjnDK2iq4ktkvGMNOQR9T8lisQ==",
|
||||
"dev": true,
|
||||
"requires": {}
|
||||
},
|
||||
"pretty-format": {
|
||||
"version": "27.5.1",
|
||||
"resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
|
||||
|
|
|
|||
|
|
@ -57,6 +57,7 @@
|
|||
"postcss-import": "^14.1.0",
|
||||
"prettier": "^2.7.1",
|
||||
"prettier-plugin-organize-imports": "^3.1.1",
|
||||
"prettier-plugin-tailwindcss": "^0.2.1",
|
||||
"replace-in-file": "^6.3.5",
|
||||
"sass": "^1.54.6",
|
||||
"sass-loader": "^12.6.0",
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div
|
||||
class="grid overflow-hidden mb-10 pt-[10px] grid-areas-horizontal-bar-chart grid-rows-horizontal-bar-chart grid-cols-horizontal-bar-chart"
|
||||
class="mb-10 grid grid-cols-horizontal-bar-chart grid-rows-horizontal-bar-chart overflow-hidden pt-[10px] grid-areas-horizontal-bar-chart"
|
||||
>
|
||||
<div class="grid-in-y-axis flex flex-col justify-between -mt-[10px] pb-[30px]">
|
||||
<div class="-mt-[10px] flex flex-col justify-between pb-[30px] grid-in-y-axis">
|
||||
<span
|
||||
v-for="percentage in [100, 75, 50, 25, 0]"
|
||||
:key="percentage"
|
||||
|
|
@ -12,21 +12,21 @@
|
|||
</span>
|
||||
</div>
|
||||
<div
|
||||
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"
|
||||
class="background relative col-span-5 col-start-2 row-start-1 h-1/2 w-full self-center border-y border-y-gray-400"
|
||||
></div>
|
||||
<div
|
||||
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"
|
||||
class="relative col-span-5 col-start-2 row-start-1 flex h-[200px] w-full content-center items-end justify-around border-y border-gray-400 border-y-gray-400"
|
||||
></div>
|
||||
<div
|
||||
class="bg-red-500 grid-in-left-chart relative self-end"
|
||||
class="relative self-end bg-red-500 grid-in-left-chart"
|
||||
:style="redStyle"
|
||||
></div>
|
||||
<div
|
||||
class="bg-green-500 grid-in-right-chart relative self-end"
|
||||
class="relative self-end bg-green-500 grid-in-right-chart"
|
||||
:style="greenStyle"
|
||||
></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 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-right-label">Ja</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,23 +1,23 @@
|
|||
<template>
|
||||
<div class="p-8 mb-8">
|
||||
<div class="mb-8 p-8">
|
||||
<h3 class="text-xl font-normal">{{ props.title }}</h3>
|
||||
<h2 class="text-xl font-bold mb-6">
|
||||
<h2 class="mb-6 text-xl font-bold">
|
||||
{{ props.text }}
|
||||
</h2>
|
||||
<div class="grid-rows-2 inline-grid grid-cols-[140px_auto] gap-x-2">
|
||||
<div class="inline-grid grid-cols-[140px_auto] grid-rows-2 gap-x-2">
|
||||
<h4 class="text-xl">Durchschnitt:</h4>
|
||||
<span
|
||||
class="w-11 h-9 inline-flex justify-center rounded items-center text-xl col-start-2 row-span-2"
|
||||
class="col-start-2 row-span-2 inline-flex h-9 w-11 items-center justify-center rounded text-xl"
|
||||
:style="ratingValueStyle"
|
||||
>
|
||||
{{ props.rating }}
|
||||
</span>
|
||||
<h5 class="text-base">{{ props.answers }} Antworten</h5>
|
||||
</div>
|
||||
<div class="gradient-with-circle pt-3 relative grid grid-cols-8">
|
||||
<div class="h-2 gradient relative z-10" :style="gradientStyle"></div>
|
||||
<div class="h-2 bg-gray-300 absolute empty-bar w-full"></div>
|
||||
<div class="relative circle-wrapper">
|
||||
<div class="gradient-with-circle relative grid grid-cols-8 pt-3">
|
||||
<div class="gradient relative z-10 h-2" :style="gradientStyle"></div>
|
||||
<div class="empty-bar absolute h-2 w-full bg-gray-300"></div>
|
||||
<div class="circle-wrapper relative">
|
||||
<div class="circle z-20" :style="circleStyle"></div>
|
||||
</div>
|
||||
<div
|
||||
|
|
|
|||
Loading…
Reference in New Issue