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

simplified css classes for cleanliness

Browse Source
This commit is contained in:
Philipp Dormann 2021-01-09 17:15:52 +01:00
parent 59d5ad5bd3
commit 9684c22da3
13 changed files with 63 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/App.svelte
View File

@ -3,11 +3,8 @@
import "toastify-js/src/toastify.css";
import { Route, router } from "tinro";
router.subscribe((routeInfo) => {
// console.log(routeInfo.path);
window.scrollTo(0, 0);
});
// console.log($router.path);
// console.log(config);
if (config.prefersHashRouting) {
if (config.prefersHashRouting === true) {
router.useHashNavigation();
@ -56,16 +53,22 @@
window.addEventListener("load", () => {
navigator.serviceWorker.register("/sw.js").then(
(registration) => {
console.log(`sw successful with scope: ${registration.scope}`);
// console.log(`sw successful with scope: ${registration.scope}`);
},
(err) => {
console.log(`sw failed: ${err}`);
// console.log(`sw failed: ${err}`);
}
);
});
}
</script>
<style>
.bg-gray-900 {
background-color: #121317;
}
</style>
<Route>
{#if $router.path === '/forgot_password'}
<Route path="/forgot_password">

16
src/components/About.svelte
View File

@ -60,7 +60,7 @@
d="M635.7 167.2L556.1 31.7c-8.8-15-28.3-20.1-43.5-11.5l-69 39.1L503.3 161c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L416 75l-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L333.2 122 278 153.3 337.8 255c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-59.7-101.7-55.2 31.3 27.9 47.4c2.2 3.8.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9l-27.9-47.5-55.2 31.3 59.7 101.7c2.2 3.7.9 8.5-2.9 10.7l-13.8 7.8c-3.8 2.2-8.7.9-10.9-2.9L84.9 262.9l-69 39.1C.7 310.7-4.6 329.8 4.2 344.8l79.6 135.6c8.8 15 28.3 20.1 43.5 11.5L624.1 210c15.2-8.6 20.4-27.8 11.6-42.8z" /></svg>
</div>
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<h3 class="text-lg leading-6 font-medium text-gray-900">
<h3 class="text-lg leading-6 font-medium">
{$_('read-license')}
</h3>
<div class="mt-2 mb-6">
@ -107,13 +107,13 @@
</div>
</div>
<div class="pt-0 pb-16 bg-gray-50 overflow-hidden lg:pt-12 lg:py-24">
<div class="pt-0 pb-16 overflow-hidden lg:pt-12 lg:py-24">
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
<h2 class="text-4xl font-display font-semibold text-gray-900 md:text-5xl">
<h2 class="text-4xl font-display font-semibold md:text-5xl">
{$_('credits')}
</h2>
<div
class="max-w-3xl mx-auto text-xl leading-8 font-medium text-gray-900 mt-8">
class="max-w-3xl mx-auto text-xl leading-8 font-medium mt-8">
<p class="text-center">{$_('oss_credit_description')}</p>
</div>
<div class="w-screen leading-8 pl-5 mt-5">
@ -164,14 +164,14 @@
</div>
{/await}
</div>
<h2 class="text-4xl font-display font-semibold text-gray-900 md:text-5xl">
<h2 class="text-4xl font-display font-semibold md:text-5xl">
Fragen
</h2>
<div class="mt-6 border-t-2 border-gray-100 pt-10">
<dl class="md:grid md:grid-cols-2 md:gap-8">
<div>
<div>
<dt class="text-lg leading-6 font-medium text-gray-900">Q</dt>
<dt class="text-lg leading-6 font-medium">Q</dt>
<dd class="mt-2">
<p class="text-base text-gray-500">A</p>
</dd>
@ -179,13 +179,13 @@
</div>
<div class="mt-12 sm:mt-0">
<div id="team-pricing">
<dt class="text-lg leading-6 font-medium text-gray-900">Q</dt>
<dt class="text-lg leading-6 font-medium">Q</dt>
<dd class="mt-2">
<p class="text-base text-gray-500">A</p>
</dd>
</div>
<div class="mt-12">
<dt class="text-lg leading-6 font-medium text-gray-900">Q</dt>
<dt class="text-lg leading-6 font-medium">Q</dt>
<dd class="mt-2">
<p class="text-base text-gray-500">A</p>
</dd>

24
src/components/Dashboard.svelte
View File

@ -32,10 +32,10 @@
}
</script>
<section class="min-h-screen bg-gray-50">
<section class="min-h-screen bg-gray-50 dark:bg-black dark:text-gray-100">
<nav
class:hidden={!navOpen && mobile}
class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform bg-white border-r w-60 md:translate-x-0">
class="select-none fixed top-0 left-0 z-20 h-full pb-10 overflow-x-hidden overflow-y-auto transition origin-left transform border-r w-60 md:translate-x-0">
<a href="/" class="flex items-center px-4 py-5">
<img
src="/lfk-logo.png"
@ -45,8 +45,9 @@
</a>
<nav class="text-sm font-medium text-gray-600" aria-label="Main Navigation">
<a
class:dark:bg-gray-900={$router.path === '/'}
class:bg-gray-100={$router.path === '/'}
class="flex items-center px-4 py-3 text-gray-900 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
href="/">
<svg
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
@ -59,6 +60,7 @@
<span>{$_('dashboard-title')}</span>
</a>
<a
class:dark:bg-gray-900={$router.path.includes('/orgs/')}
class:bg-gray-100={$router.path.includes('/orgs/')}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
href="/orgs/">
@ -74,6 +76,7 @@
<span>{$_('orgs')}</span>
</a>
<a
class:dark:bg-gray-900={$router.path === '/users/'}
class:bg-gray-100={$router.path === '/users/'}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
href="/users/">
@ -89,8 +92,9 @@
<span>{$_('users')}</span>
</a>
<a
class:dark:bg-gray-900={$router.path === '/runners/'}
class:bg-gray-100={$router.path === '/runners/'}
class="flex items-center px-4 py-3 text-gray-900 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
href="/runners/">
<svg
xmlns="http://www.w3.org/2000/svg"
@ -104,8 +108,9 @@
<span>{$_('runners')}</span>
</a>
<a
class:dark:bg-gray-900={$router.path === '/teams/'}
class:bg-gray-100={$router.path === '/teams/'}
class="flex items-center px-4 py-3 text-gray-900 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
href="/teams/">
<svg
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
@ -119,8 +124,9 @@
<span>{$_('teams')}</span>
</a>
<a
class:dark:bg-gray-900={$router.path === '/tracks/'}
class:bg-gray-100={$router.path === '/tracks/'}
class="flex items-center px-4 py-3 text-gray-900 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
href="/tracks/">
<svg
class="flex-shrink-0 w-5 h-5 mr-2 text-gray-400 transition group-hover:text-gray-600"
@ -134,6 +140,7 @@
<span>{$_('tracks')}</span>
</a>
<a
class:dark:bg-gray-900={activePage === 'blub'}
class:bg-gray-100={activePage === 'blub'}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
href="#">
@ -153,6 +160,7 @@
<div>
<div
tabindex="0"
class:dark:bg-gray-900={activePage === 'blub'}
class:bg-gray-100={activePage === 'blub'}
class="flex items-center justify-between px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
role="button"
@ -228,6 +236,7 @@
<span>{$_('changelog')}</span>
</a>
<a
class:dark:bg-gray-900={$router.path === '/settings/'}
class:bg-gray-100={$router.path === '/settings/'}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
href="/settings/">
@ -244,6 +253,7 @@
<span>{$_('settings')}</span>
</a>
<a
class:dark:bg-gray-900={$router.path === '/about/'}
class:bg-gray-100={$router.path === '/about/'}
class="flex items-center px-4 py-3 transition cursor-pointer group hover:bg-gray-100 hover:text-gray-900"
href="/about/">
@ -280,7 +290,7 @@
</nav>
<div class="ml-0 transition md:ml-60">
<header
class="flex items-center justify-between w-full px-4 bg-white border-b h-14">
class="flex items-center justify-between w-full px-4 border-b h-14">
<button
on:click={() => {
navOpen = !navOpen;

2
src/components/OrgDetail.svelte
View File

@ -3,7 +3,7 @@
</script>
<section class="container p-5">
<span class="mb-1 text-3xl font-extrabold leading-tight text-gray-900">
<span class="mb-1 text-3xl font-extrabold leading-tight">
Orgs
</span>
<p class="mb-8 text-lg text-gray-500">

2
src/components/Orgs.svelte
View File

@ -3,7 +3,7 @@
</script>
<section class="container p-5">
<span class="mb-1 text-3xl font-extrabold leading-tight text-gray-900">
<span class="mb-1 text-3xl font-extrabold leading-tight">
Orgs
</span>
<p class="mb-8 text-lg text-gray-500">

2
src/components/Runners.svelte
View File

@ -3,7 +3,7 @@
</script>
<section class="container p-5">
<span class="mb-1 text-3xl font-extrabold leading-tight text-gray-900">
<span class="mb-1 text-3xl font-extrabold leading-tight">
{$_('runners')}
</span>
<p class="mb-8 text-lg text-gray-500">läuft bei ihnen</p>

25
src/components/StatCards.svelte
View File

@ -18,7 +18,7 @@
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">
<a href="/runners/" class="w-full lg:w-1/4">
<div
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 dark:bg-gray-900 dark:text-white">
<div class="flex flex-row items-center justify-between">
<div class="flex flex-col">
<div class="text-xs uppercase font-light text-grey-500">
@ -29,6 +29,7 @@
<svg
height="24"
width="24"
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none" />
<path
@ -38,7 +39,7 @@
</a>
<div class="w-full lg:w-1/4">
<div
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 dark:bg-gray-900 dark:text-white">
<div class="flex flex-row items-center justify-between">
<div class="flex flex-col">
<div class="text-xs uppercase font-light text-grey-500">
@ -47,7 +48,7 @@
<div class="text-xl font-bold">{stats.total_scans}</div>
</div><svg
stroke="currentColor"
fill="none"
fill="currentColor"
stroke-width="2"
viewBox="0 0 24 24"
stroke-linecap="round"
@ -63,7 +64,7 @@
</div>
<div class="w-full lg:w-1/4">
<div
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 dark:bg-gray-900 dark:text-white">
<div class="flex flex-row items-center justify-between">
<div class="flex flex-col">
<div class="text-xs uppercase font-light text-grey-500">
@ -73,6 +74,7 @@
</div><svg
xmlns="http://www.w3.org/2000/svg"
height="24"
fill="currentColor"
width="24"><path d="M0 0h24v24H0z" fill="none" />
<path
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>
@ -81,7 +83,7 @@
</div>
<div class="w-full lg:w-1/4">
<div
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 dark:bg-gray-900 dark:text-white">
<div class="flex flex-row items-center justify-between">
<div class="flex flex-col">
<div class="text-xs uppercase font-light text-grey-500">
@ -92,9 +94,11 @@
km
</div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24"><path
d="M0 0h24v24H0z"
fill="none" />
<svg
fill="currentColor"
xmlns="http://www.w3.org/2000/svg"
height="24"
width="24"><path d="M0 0h24v24H0z" fill="none" />
<path
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>
</div>
@ -102,7 +106,7 @@
</div>
<a href="/teams/" class="w-full lg:w-1/4">
<div
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 dark:bg-gray-900 dark:text-white">
<div class="flex flex-row items-center justify-between">
<div class="flex flex-col">
<div class="text-xs uppercase font-light text-grey-500">
@ -131,7 +135,7 @@
</a>
<a href="/orgs/" class="w-full lg:w-1/4">
<div
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 dark:bg-gray-900 dark:text-white">
<div class="flex flex-row items-center justify-between">
<div class="flex flex-col">
<div class="text-xs uppercase font-light text-grey-500">
@ -141,6 +145,7 @@
</div>
<svg
height="24"
fill="currentColor"
width="24"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z" />

2
src/components/Table.svelte
View File

@ -32,7 +32,7 @@
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tbody class="divide-y divide-gray-200">
<tr>
<td class="px-6 py-4 whitespace-nowrap">
<div class="flex items-center">

2
src/components/Teams.svelte
View File

@ -3,7 +3,7 @@
</script>
<section class="container p-5">
<span class="mb-1 text-3xl font-extrabold leading-tight text-gray-900">
<span class="mb-1 text-3xl font-extrabold leading-tight">
{$_('teams')}
</span>
<p class="mb-8 text-lg text-gray-500">everything is more fun together 🏃‍♂️🏃‍♀️🏃‍♂️</p>

2
src/components/TracksOverview.svelte
View File

@ -6,7 +6,7 @@
</script>
<section class="container p-5">
<span class="mb-1 text-3xl font-extrabold leading-tight text-gray-900">
<span class="mb-1 text-3xl font-extrabold leading-tight">
Tracks
<button
on:click={() => {

8
src/components/UserDetail.svelte
View File

@ -59,7 +59,7 @@
</div>
</div>
<span
class="mb-4 text-3xl font-extrabold leading-tight text-gray-900">{user.firstname}
class="mb-4 text-3xl font-extrabold leading-tight">{user.firstname}
{user.middlename || ''}
{user.lastname}
<button
@ -101,7 +101,7 @@
placeholder="First name"
type="text"
name="firstname"
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
</div>
<div class="text-sm w-full">
<label for="middlename" class="font-medium text-gray-700">Middle name</label>
@ -110,7 +110,7 @@
placeholder="Middle name"
type="text"
name="middlename"
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
</div>
<div class="text-sm w-full">
<label for="lastname" class="font-medium text-gray-700">Last name</label>
@ -119,7 +119,7 @@
placeholder="Last name"
type="text"
name="lastname"
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2" />
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
</div>
</section>
{:catch error}

2
src/components/Users.svelte
View File

@ -6,7 +6,7 @@
</script>
<section class="container p-5">
<span class="mb-1 text-3xl font-extrabold leading-tight text-gray-900">
<span class="mb-1 text-3xl font-extrabold leading-tight">
Users
<button
on:click={() => {

8
src/components/UsersOverview.svelte
View File

@ -64,7 +64,7 @@
</th>
</tr>
</thead>
<tbody class="bg-white divide-y divide-gray-200">
<tbody class="divide-y divide-gray-200">
{#each users as u}
<tr>
<td class="px-6 py-4 whitespace-nowrap">
@ -78,7 +78,7 @@
</div>
{/if}
<div class="ml-4">
<div class="text-sm font-medium text-gray-900">
<div class="text-sm font-medium text-gray-900 dark:text-gray-100">
{u.firstname}
</div>
<div class="text-sm text-gray-500">
@ -88,7 +88,7 @@
</div>
</td>
<td class="px-6 py-4 whitespace-nowrap">
<div class="text-sm text-gray-900">
<div class="text-sm text-gray-900 dark:text-gray-100">
Regional Paradigm Technician
</div>
<div class="text-sm text-gray-500">Optimization</div>
@ -119,7 +119,7 @@
{/each}
</tbody>
</table>
<div class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-800">
<div class="grid px-4 py-3 text-xs font-semibold tracking-wide text-gray-500 uppercase border-t dark:border-gray-700 bg-gray-50 sm:grid-cols-9 dark:text-gray-400 dark:bg-gray-900">
<span class="flex items-center col-span-3">
Showing 21-30 of 100
</span>