CubeBit/fst-frontend
1
0
Fork 0
Code Issues 1 Pull Requests Projects 1 Releases Wiki Activity

* Progress bar, buttons

Browse Source 
feature: #9
This commit is contained in:
Denys Seredenko
2023-01-06 17:55:06 +01:00
parent 2384a6a9f4
commit a8fc4ce44f
6 changed files with 34 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/components/tabs/ContractTab.vue
View File

@@ -1,5 +1,12 @@
<template>
<div class="bg-zinc-50">
<div class="px-4 pt-3">
<!-- Draw buttons by roles -->
<button type="button" class="inline-block px-6 mr-3 py-2.5 bg-green-500 text-white font-medium text-xs rounded shadow-md">Nächstes Schritt</button>
<button type="button" class="inline-block max-sm:mt-3 px-6 mr-3 py-2.5 bg-blue-600 text-white font-medium text-xs rounded shadow-md">Status wächseln</button>
<button type="button" class="inline-block max-sm:mt-3 px-6 mr-3 py-2.5 bg-blue-600 text-white font-medium text-xs rounded shadow-md">Mitarbeitern wächseln</button>
<button type="button" class="inline-block max-md:mt-3 px-6 mr-3 py-2.5 bg-blue-600 text-white font-medium text-xs rounded shadow-md">Anmeldung anfangen</button>
</div>
<div class="py-2">
<table class="w-full table-auto">
<tr class="border-b">
@@ -18,6 +25,25 @@
</span>
</td>
</tr>
<tr class="pt-5 border-b">
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Progress:</td>
<td class="w-full pl-2 text-lg max-sm:text-base py-2">
<div class="mt-7 mb-">
<div class="bg-slate-200 relative h-[10px] w-full rounded-2xl">
<div class="bg-blue-600 absolute top-0 left-0 h-full w-[75%] rounded-2xl"> <!-- todo: calculate in percents progress -->
<span
class="bg-blue-600 absolute -right-4 bottom-full mb-2 rounded-sm py-1 px-2 text-xs font-semibold text-white"
>
<span
class="bg-blue-600 absolute bottom-[-2px] left-1/2 -z-10 h-2 w-2 -translate-x-1/2 rotate-45 rounded-sm"
></span>
75%
</span>
</div>
</div>
</div>
</td>
</tr>
<tr class="border-b">
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Mitarbeiter:</td>
<td class="w-full pl-2 text-lg max-sm:text-base py-2">
@@ -51,12 +77,14 @@
<tr>
<td class="text align-top text-xl pl-4 max-sm:text-base py-2">Beispiele:</td>
<td class="w-full pl-2 text-lg py-2">
<li v-for="(example, index) in contract.examples">
<a v-bind:href='example' class="underline">
Link {{ index + 1 }}
<font-awesome-icon class="h-3 mb-0.5 pl-1" icon="fa-solid fa-arrow-up-right-from-square" />
</a>
</li>
<ul class="list-disc pl-4">
<li v-for="(example, index) in contract.examples">
<a v-bind:href='example' class="underline">
Link {{ index + 1 }}
<font-awesome-icon class="h-3 mb-0.5 pl-1" icon="fa-solid fa-arrow-up-right-from-square" />
</a>
</li>
</ul>
</td>
</tr>
</table>