lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

💡 sample card layout + data

Browse Source
This commit is contained in:
Philipp Dormann 2020-12-22 18:06:19 +01:00
parent 905d8b0a20
commit 20ee0c1a9e
2 changed files with 31 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

60
src/components/StatCards.svelte
View File

@ -1,3 +1,7 @@
<script>
import { _ } from "svelte-i18n";
</script>
<div <div
class="flex flex-col lg:flex-row w-full lg:space-x-2 space-y-2 lg:space-y-0 mb-2 lg:mb-4"> class="flex flex-col lg:flex-row w-full lg:space-x-2 space-y-2 lg:space-y-0 mb-2 lg:mb-4">
<div class="w-full lg:w-1/4"> <div class="w-full lg:w-1/4">
@ -5,8 +9,10 @@
class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890"> class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
<div class="flex flex-row items-center justify-between"> <div class="flex flex-row items-center justify-between">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="text-xs uppercase font-light text-grey-500">Users</div> <div class="text-xs uppercase font-light text-grey-500">
<div class="text-xl font-bold">588</div> {$_('runners')}
</div>
<div class="text-xl font-bold">69</div>
</div><svg </div><svg
stroke="currentColor" stroke="currentColor"
fill="none" fill="none"
@ -31,8 +37,10 @@
class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890"> class="widget w-full p-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
<div class="flex flex-row items-center justify-between"> <div class="flex flex-row items-center justify-between">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="text-xs uppercase font-light text-grey-500">Sessions</div> <div class="text-xs uppercase font-light text-grey-500">
<div class="text-xl font-bold">435</div> {$_('total-scans')}
</div>
<div class="text-xl font-bold">1500</div>
</div><svg </div><svg
stroke="currentColor" stroke="currentColor"
fill="none" fill="none"
@ -55,24 +63,15 @@
<div class="flex flex-row items-center justify-between"> <div class="flex flex-row items-center justify-between">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="text-xs uppercase font-light text-grey-500"> <div class="text-xs uppercase font-light text-grey-500">
Bounce rate {$_('total-donations')}
</div> </div>
<div class="text-xl font-bold">40.5%</div> <div class="text-xl font-bold">5000,00 €</div>
</div><svg </div><svg
stroke="currentColor" xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
stroke-linejoin="round"
size="24"
class="stroke-current text-grey-500"
height="24" height="24"
width="24" width="24"><path d="M0 0h24v24H0z" fill="none" />
xmlns="http://www.w3.org/2000/svg"><path <path
d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /> d="M15 18.5A6.48 6.48 0 019.24 15H15v-2H8.58c-.05-.33-.08-.66-.08-1s.03-.67.08-1H15V9H9.24A6.491 6.491 0 0115 5.5c1.61 0 3.09.59 4.23 1.57L21 5.3A8.955 8.955 0 0015 3c-3.92 0-7.24 2.51-8.48 6H3v2h3.06a8.262 8.262 0 000 2H3v2h3.52c1.24 3.49 4.56 6 8.48 6 2.31 0 4.41-.87 6-2.3l-1.78-1.77c-1.13.98-2.6 1.57-4.22 1.57z" /></svg>
<polyline points="15 3 21 3 21 9" />
<line x1="10" y1="14" x2="21" y2="3" /></svg>
</div> </div>
</div> </div>
</div> </div>
@ -82,22 +81,15 @@
<div class="flex flex-row items-center justify-between"> <div class="flex flex-row items-center justify-between">
<div class="flex flex-col"> <div class="flex flex-col">
<div class="text-xs uppercase font-light text-grey-500"> <div class="text-xs uppercase font-light text-grey-500">
Session duration {$_('total-distance')}
</div> </div>
<div class="text-xl font-bold">1m 24s</div> <div class="text-xl font-bold">100.0 km</div>
</div><svg </div>
stroke="currentColor" <svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path
fill="none" d="M0 0h24v24H0z"
stroke-width="2" fill="none" />
viewBox="0 0 24 24" <path
stroke-linecap="round" d="M21 6H3c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 10H3V8h2v4h2V8h2v4h2V8h2v4h2V8h2v4h2V8h2v8z" /></svg>
stroke-linejoin="round"
size="24"
class="stroke-current text-grey-500"
height="24"
width="24"
xmlns="http://www.w3.org/2000/svg"><circle cx="12" cy="12" r="10" />
<polyline points="12 6 12 12 16 14" /></svg>
</div> </div>
</div> </div>
</div> </div>

6
src/locales/en.json
View File

@ -24,5 +24,9 @@
"dont-panic-were-resetting-it": "Don't panic, we're resetting it ✌", "dont-panic-were-resetting-it": "Don't panic, we're resetting it ✌",
"e-mail-adress": "E-Mail Adress", "e-mail-adress": "E-Mail Adress",
"mail-validation-in-progress": "mail validation in progress...", "mail-validation-in-progress": "mail validation in progress...",
"invalid-mail-reset": "the provided email is invalid" "invalid-mail-reset": "the provided email is invalid",
"runners": "runners",
"total-scans": "total scans",
"total-donations": "total donations",
"total-distance": "total distance"
} }