From 800a920f1c6650836276b6a5fe78e52b42b8bbed Mon Sep 17 00:00:00 2001 From: Kowalski Date: Sun, 11 Oct 2026 20:57:36 +0200 Subject: [PATCH] =?UTF-8?q?Lep=C5=A1=C3=AD=20design?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/Presentation/@layout.latte | 4 +- app/Presentation/Home/default.latte | 29 +- app/Presentation/Mapa/default.latte | 2 +- app/Presentation/Obvod/list.latte | 64 +- app/Presentation/Obvod/view.latte | 116 ++-- app/Presentation/Sign/in.latte | 35 +- app/Presentation/Zvestovatel/default.latte | 54 +- app/Presentation/Zvestovatel/edit.latte | 20 +- www/css/base.css | 678 ++++++++++++++++++++- www/js/stari.js | 21 +- 10 files changed, 873 insertions(+), 150 deletions(-) diff --git a/app/Presentation/@layout.latte b/app/Presentation/@layout.latte index e28135b..428e843 100644 --- a/app/Presentation/@layout.latte +++ b/app/Presentation/@layout.latte @@ -2,7 +2,7 @@ - + {* bootstrap: *} @@ -28,7 +28,7 @@ {* naše vlastní styly *} - + {ifset title}{include title|stripHtml} | {/ifset}Obvody diff --git a/app/Presentation/Home/default.latte b/app/Presentation/Home/default.latte index 5bb5a5d..91f2006 100644 --- a/app/Presentation/Home/default.latte +++ b/app/Presentation/Home/default.latte @@ -1,17 +1,16 @@ -{* This is the welcome page, you can delete it *} - {block content} -

Obvody

+
+
+
+

Obvody

+

Vyberte obvod, nebo otevřete celou mapu.

+
+ Celá mapa +
-{* Tlačítka: *} - -
- - * - -{foreach $obvody as $obvod} - - {$obvod} - -{/foreach} -
\ No newline at end of file + +
diff --git a/app/Presentation/Mapa/default.latte b/app/Presentation/Mapa/default.latte index a1e1636..dc8dfc6 100644 --- a/app/Presentation/Mapa/default.latte +++ b/app/Presentation/Mapa/default.latte @@ -11,5 +11,5 @@ - + {/block} diff --git a/app/Presentation/Obvod/list.latte b/app/Presentation/Obvod/list.latte index e1f71cf..eea24e7 100644 --- a/app/Presentation/Obvod/list.latte +++ b/app/Presentation/Obvod/list.latte @@ -1,31 +1,41 @@ {block content} -
-

Obvody

-
-
- {$s} +
+
+
+

Obvody

+

Vyberte skupinu a otevřete obvod.

-
+ Celá mapa + - - - - - - - - - - {foreach $obvody as $obvod} - - - - - - {/foreach} - -
ČísloNázevAkce
{$obvod->CISLO}{$obvod->NAZEV} - Otevřít -
-
\ No newline at end of file +
+
+ {$s} +
+ + + + + + + + + + + {foreach $obvody as $obvod} + + + + + + {/foreach} + +
ČísloNázevAkce
{$obvod->CISLO}{$obvod->NAZEV} +
+ Otevřít +
+
+

V této skupině nejsou žádné obvody.

+
+
diff --git a/app/Presentation/Obvod/view.latte b/app/Presentation/Obvod/view.latte index e4861ab..48b9ef3 100644 --- a/app/Presentation/Obvod/view.latte +++ b/app/Presentation/Obvod/view.latte @@ -1,49 +1,63 @@ {block content} -
-Číslo: {$obvod->CISLO}
-Název: {$obvod->NAZEV}
-Skupina: {$obvod->SKUPINA}
-Mapa +
+
+
+ {$obvod->CISLO} +
+

{$obvod->NAZEV}

+

Skupina {$obvod->SKUPINA}

+
+
+
+ Mapa + + +
+
-
-
Záznamy:
- - - - - - - - - - - - - {foreach $zaznamy as $zaznam} - - - - - - - {/foreach} - -
ZáznamPřidělenoVrácenoAkce
{$zaznam->JMENO} - {date_format($zaznam->VYDANO,"d.m.Y")} - - {if $zaznam->VRACENO}{date_format($zaznam->VRACENO,"d.m.Y")}{/if} - -
- - {form "smazat-$zaznam->ID", class: 'd-inline'} - - {/form} -
-
+
+
+

Náhled

+
+
+ +
+

Záznamy

+

Tento obvod zatím nemá žádný záznam.

+
+ + + + + + + + + + + {foreach $zaznamy as $zaznam} + + + + + + + {/foreach} + +
ZvěstovatelPřidělenoVrácenoAkce
{$zaznam->JMENO}{date_format($zaznam->VYDANO, 'd.m.Y')}{if $zaznam->VRACENO}{date_format($zaznam->VRACENO, 'd.m.Y')}{else}—{/if} +
+ + {form "smazat-$zaznam->ID"} + + {/form} +
+
+
+
+
- - + +
@@ -88,7 +102,7 @@ Skupina: {$obvod->SKUPINA}
{if count($otevrene) === 0}
Tento obvod nemá otevřené přidělení.
- +
{else}
@@ -108,8 +122,8 @@ Skupina: {$obvod->SKUPINA}
- - + +
{/if} @@ -145,8 +159,8 @@ Skupina: {$obvod->SKUPINA}
- - + +
@@ -191,4 +205,4 @@ if (modalUpravit) { form.querySelector('[name="vraceno"]').value = btn.dataset.vraceno || ''; }); } - \ No newline at end of file + diff --git a/app/Presentation/Sign/in.latte b/app/Presentation/Sign/in.latte index 88c1ec5..404376a 100644 --- a/app/Presentation/Sign/in.latte +++ b/app/Presentation/Sign/in.latte @@ -1,22 +1,25 @@ {block content} -{* {control signInForm} *} -
-
-
-
- {$error} -
-
- - -
+
+
+
+

Přihlášení

+

Pro práci se záznamy se přihlaste.

+
+
-
- - +
+ +
{$error}
+
+ +
- - +
+ + +
+ +
diff --git a/app/Presentation/Zvestovatel/default.latte b/app/Presentation/Zvestovatel/default.latte index 7525b97..9e7d2cb 100644 --- a/app/Presentation/Zvestovatel/default.latte +++ b/app/Presentation/Zvestovatel/default.latte @@ -1,26 +1,36 @@ {block content} -
-

Zvěstovatelé

+
+
+
+

Zvěstovatelé

+

Jména použitá u záznamů obvodů.

+
+
- - - - - - - - - - {foreach $zvestovatele as $zvestovatel} - - - - - - {/foreach} - -
JménoZáznamyAkce
{$zvestovatel->JMENO}{$zvestovatel->POCET} - Upravit -
+
+ + + + + + + + + + {foreach $zvestovatele as $zvestovatel} + + + + + + {/foreach} + +
JménoZáznamyAkce
{$zvestovatel->JMENO}{$zvestovatel->POCET} +
+ Upravit +
+
+

Zatím tu není žádný zvěstovatel.

+
diff --git a/app/Presentation/Zvestovatel/edit.latte b/app/Presentation/Zvestovatel/edit.latte index d78c120..95dc9c4 100644 --- a/app/Presentation/Zvestovatel/edit.latte +++ b/app/Presentation/Zvestovatel/edit.latte @@ -1,15 +1,23 @@ {block content} -
-

Upravit zvěstovatele

-
+
+
+
+

Upravit zvěstovatele

+

Změna se propíše do všech jeho záznamů.

+
+
+ +
{$error}
-
+
- - Zpět +
+ + Zpět +
diff --git a/www/css/base.css b/www/css/base.css index ec2e3ed..b20df08 100644 --- a/www/css/base.css +++ b/www/css/base.css @@ -1,10 +1,13 @@ -body { - padding: 0; - margin: 0; -} -html, body, #map { +html, body { height: 100%; - width: 100vw; + width: 100%; + margin: 0; + padding: 0; +} + +#map { + height: 100%; + width: 100%; } body:has(#map[data-max]) { @@ -218,6 +221,182 @@ body:has(#map[data-max]) { border-radius: 4px; } +.home { + min-height: calc(100vh - 3.5rem); + background: + radial-gradient(900px 420px at 0% -8%, #c5ddf6 0%, transparent 62%), + linear-gradient(180deg, #e3f2fd 0%, #f4f8fc 42%, #ffffff 100%); + padding: 1.15rem 0.9rem 2.4rem; +} + +.home-hlavicka { + max-width: 52rem; + margin: 0 auto 1.15rem; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 1rem 1.15rem; + background: rgba(255, 255, 255, 0.94); + border: 1px solid #c5ddf6; + border-radius: 1.15rem; + box-shadow: 0 12px 28px rgba(29, 79, 145, 0.1); +} + +.home-nadpis { + margin: 0; + font-size: 1.55rem; + font-weight: 800; + letter-spacing: -0.03em; + color: #1d4f91; +} + +.home-popis { + margin: 0.2rem 0 0; + color: #3d5a80; + font-size: 0.95rem; +} + +.tlacitko, +.home-cela { + flex: 0 0 auto; + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 2.75rem; + padding: 0.55rem 1.15rem; + border-radius: 999px; + border: 2px solid #1d4f91; + background: #c5ddf6; + color: #1d4f91; + font-weight: 800; + font-size: 1rem; + line-height: 1.2; + text-align: center; + text-decoration: none; + box-shadow: 0 4px 12px rgba(29, 79, 145, 0.16); + cursor: pointer; +} + +.tlacitko:hover, +.tlacitko:focus-visible, +.home-cela:hover, +.home-cela:focus-visible { + background: #2652a8; + color: #fff; +} + +.tlacitko.is-aktivni { + background: #2652a8; + color: #fff; +} + +.tlacitko.is-aktivni:hover, +.tlacitko.is-aktivni:focus-visible { + background: #1d4f91; + color: #fff; +} + +.tlacitko-nebezpeci { + background: #fde8ea; + color: #8d1d2c; + border-color: #c44b5a; + box-shadow: 0 4px 12px rgba(141, 29, 44, 0.12); +} + +.tlacitko-nebezpeci:hover, +.tlacitko-nebezpeci:focus-visible { + background: #c44b5a; + color: #fff; +} + +.home-mrizka { + max-width: 52rem; + margin: 0 auto; + display: grid; + grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); + gap: 0.85rem; +} + +.home-obvod { + aspect-ratio: 1; + display: flex; + align-items: center; + justify-content: center; + border-radius: 50%; + border: 2px solid #1d4f91; + background: #2652a8; + color: #fff; + font-size: clamp(1.2rem, 4.6vw, 1.5rem); + font-weight: 800; + line-height: 1; + text-decoration: none; + box-shadow: 0 4px 10px rgba(29, 79, 145, 0.28); + transition: transform 0.12s ease, background-color 0.12s ease; +} + +.home-obvod:hover, +.home-obvod:focus-visible { + background: #1d4f91; + color: #fff; + transform: translateY(-2px); +} + +.home-obvod:active { + transform: translateY(0); + background: #163e78; +} + +.home { + padding-left: max(0.9rem, env(safe-area-inset-left)); + padding-right: max(0.9rem, env(safe-area-inset-right)); + padding-bottom: max(2.4rem, env(safe-area-inset-bottom)); +} + +@media (max-width: 720px) { + .home-mrizka { + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 0.7rem; + } +} + +@media (max-width: 520px) { + .home { + padding-top: 0.85rem; + } + + .home-hlavicka { + flex-direction: column; + align-items: stretch; + text-align: center; + padding: 1rem; + } + + .home-nadpis { + font-size: 1.7rem; + } + + .home-popis { + font-size: 1.05rem; + line-height: 1.4; + } + + .home-cela { + width: 100%; + min-height: 3.25rem; + font-size: 1.1rem; + } + + .home-mrizka { + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 0.85rem; + } + + .home-obvod { + font-size: 1.4rem; + } +} + @media (orientation: portrait) { @@ -264,4 +443,491 @@ body:has(#map[data-max]) { margin: 0.5vw; text-align: center; } +} + +.prihlaseni-obal { + width: 100%; + display: flex; + justify-content: center; + padding: 1.25rem 1rem 2rem; +} + +.prihlaseni { + width: min(22rem, 100%); +} + +.prihlaseni .form-control { + min-height: 3rem; + font-size: 1.05rem; +} + +.prihlaseni-odeslat { + margin-top: 0.85rem; + min-height: 3rem; + font-size: 1.1rem; +} + +.obvod-udaje { + display: grid; + gap: 0.35rem; + margin: 0 0 0.85rem; +} + +.obvod-udaje div { + display: flex; + flex-wrap: wrap; + gap: 0.35rem 0.75rem; +} + +.obvod-udaje dt { + margin: 0; + color: #3d5a80; + font-weight: 700; +} + +.obvod-udaje dd { + margin: 0; + color: #1a1a1a; + font-weight: 600; +} + +.obvod-akce { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.obvod-akce .btn { + flex: 1 1 8rem; + min-height: 2.85rem; +} + +@media (max-width: 991.98px) { + #menu .navbar-brand { + font-size: 1.25rem; + font-weight: 800; + color: #1d4f91; + } + + #menu .navbar-toggler { + min-width: 3rem; + min-height: 3rem; + padding: 0.45rem 0.6rem; + } + + #menu .nav-link { + display: flex; + align-items: center; + min-height: 3rem; + padding: 0.75rem 0.2rem; + font-size: 1.125rem; + font-weight: 600; + } +} + +@media (max-width: 576px) { + .stranka, + .container-fluid.p-2 { + padding-left: max(0.75rem, env(safe-area-inset-left)) !important; + padding-right: max(0.75rem, env(safe-area-inset-right)) !important; + } + + h3, h5 { + line-height: 1.25; + } + + .table { + font-size: 1rem; + } + + .btn-sm { + min-height: 2.5rem; + padding: 0.4rem 0.8rem; + font-size: 1rem; + } + + .btn-group.flex-wrap { + display: flex; + gap: 0.4rem; + } + + .btn-group.flex-wrap > .btn { + flex: 1 1 auto; + border-radius: 0.6rem !important; + min-height: 2.75rem; + } + + .mapa-filtr { + max-width: calc(100% - 3.25rem); + gap: 0.25rem; + padding: 0.3rem; + } + + .mapa-filtr button { + font-size: 0.95rem; + padding: 0.55rem 0.7rem; + } + + .stari-legenda { + width: min(15rem, calc(100vw - 4.5rem)); + font-size: 0.85rem; + } + + .obvod-kolecko { + width: 36px; + height: 36px; + font-size: 15px; + } + + #obvod-nahled { + height: 34vh; + min-height: 180px; + } + + .modal-footer { + flex-wrap: wrap; + gap: 0.4rem; + } + + .modal-footer .btn, + .modal-footer .tlacitko { + flex: 1 1 8rem; + min-height: 2.85rem; + } +} + +.platno { + min-height: calc(100vh - 3.5rem); + background: + radial-gradient(900px 420px at 0% -8%, #c5ddf6 0%, transparent 62%), + linear-gradient(180deg, #e3f2fd 0%, #f4f8fc 42%, #ffffff 100%); + padding: 1.15rem max(0.9rem, env(safe-area-inset-right)) max(2.4rem, env(safe-area-inset-bottom)) max(0.9rem, env(safe-area-inset-left)); +} + +.lista, +.panel { + max-width: 64rem; + margin-left: auto; + margin-right: auto; + background: rgba(255, 255, 255, 0.94); + border: 1px solid #c5ddf6; + border-radius: 1.15rem; + box-shadow: 0 12px 28px rgba(29, 79, 145, 0.1); +} + +.lista { + margin-bottom: 1rem; + display: flex; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 1rem 1.15rem; +} + +.lista-nadpis { + margin: 0; + font-size: 1.55rem; + font-weight: 800; + letter-spacing: -0.03em; + color: #1d4f91; +} + +.lista-popis { + margin: 0.2rem 0 0; + color: #3d5a80; + font-size: 0.95rem; +} + +.panel { + padding: 0.95rem 1rem 1.05rem; +} + +.panel h2 { + margin: 0 0 0.75rem; + font-size: 1.05rem; + font-weight: 800; + color: #1d4f91; +} + +.panel-uzky { + max-width: 36rem; +} + +.filtry, +.akce { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; +} + +.filtry { + margin-bottom: 0.85rem; +} + +.akce { + justify-content: flex-end; +} + +.formular .form-control, +.modal .form-control, +.modal .form-select, +.prihlaseni .form-control { + min-height: 2.9rem; + border-radius: 0.8rem; + border-color: #d5e3f5; + font-size: 1.05rem; +} + +.formular .form-label, +.modal .form-label, +.prihlaseni label { + color: #1d4f91; + font-weight: 700; +} + +.panel .prihlaseni { + width: 100%; +} + +.formular-akce { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + margin-top: 0.4rem; +} + +.tabulka { + width: 100%; + border-collapse: separate; + border-spacing: 0; + margin: 0; +} + +.tabulka th { + text-align: left; + color: #1d4f91; + font-size: 0.85rem; + font-weight: 800; + padding: 0.45rem 0.7rem 0.6rem; + border-bottom: 2px solid #c5ddf6; +} + +.tabulka td { + padding: 0.7rem; + border-bottom: 1px solid #e3f2fd; + vertical-align: middle; + color: #1a1a1a; +} + +.tabulka tbody tr:last-child td { + border-bottom: 0; +} + +.bunka-akce .akce-radek { + display: flex; + flex-wrap: wrap; + gap: 0.4rem; +} + +.akce-radek form { + margin: 0; +} + +.prazdno { + margin: 0.2rem 0 0.3rem; + color: #3d5a80; +} + +.detail .lista, +.detail-telo { + max-width: 76rem; +} + +.detail-identita { + display: flex; + align-items: center; + gap: 0.9rem; + min-width: 0; +} + +.detail-cislo { + display: flex; + align-items: center; + justify-content: center; + width: 4.4rem; + height: 4.4rem; + flex: 0 0 auto; + border-radius: 50%; + border: 2px solid #1d4f91; + background: #2652a8; + color: #fff; + font-size: 1.35rem; + font-weight: 800; + box-shadow: 0 4px 10px rgba(29, 79, 145, 0.28); +} + +.detail-telo { + margin: 0 auto; + display: grid; + grid-template-columns: minmax(18rem, 0.9fr) minmax(0, 1.25fr); + gap: 1rem; + align-items: stretch; +} + +.detail-telo .panel { + max-width: none; + margin: 0; + min-width: 0; +} + +.detail-mapa #obvod-nahled { + height: calc(100vh - 15rem); + min-height: 320px; + margin: 0; + border: 1px solid #c5ddf6; + border-radius: 0.9rem; + box-shadow: none; +} + +.detail-zaznamy { + display: flex; + flex-direction: column; + max-height: calc(100vh - 12.5rem); +} + +.detail-zaznamy .tabulka-obal { + overflow: auto; + min-height: 0; +} + +.modal-content { + border: 1px solid #c5ddf6; + border-radius: 1.15rem; + box-shadow: 0 18px 40px rgba(29, 79, 145, 0.18); +} + +.modal-header, +.modal-footer { + border-color: #e3f2fd; +} + +.modal-title { + color: #1d4f91; + font-weight: 800; +} + +.flash { + margin: 0; + padding: 0.7rem 1rem; + background: #e3f2fd; + color: #1d4f91; + font-weight: 700; +} + +.flash.error, +.flash.warning { + background: #fde8ea; + color: #8d1d2c; +} + +@media (max-width: 900px) { + .detail-telo { + grid-template-columns: 1fr; + } + + .detail-mapa #obvod-nahled { + height: 38vh; + min-height: 200px; + } + + .detail-zaznamy { + max-height: none; + } +} + +@media (max-width: 640px) { + .lista { + flex-direction: column; + align-items: stretch; + text-align: center; + } + + .lista > .tlacitko, + .akce, + .formular-akce { + width: 100%; + } + + .akce, + .formular-akce { + flex-direction: column; + } + + .akce .tlacitko, + .formular-akce .tlacitko { + width: 100%; + } + + .detail-identita { + flex-direction: column; + } + + .tabulka thead { + display: none; + } + + .tabulka, + .tabulka tbody, + .tabulka tr, + .tabulka td { + display: block; + width: 100%; + } + + .tabulka tr { + border: 1px solid #c5ddf6; + border-radius: 1rem; + margin-bottom: 0.7rem; + padding: 0.35rem 0.85rem 0.65rem; + background: #fff; + } + + .tabulka td { + display: flex; + justify-content: space-between; + align-items: center; + gap: 0.75rem; + border: 0; + padding: 0.45rem 0; + text-align: right; + } + + .tabulka td::before { + content: attr(data-popisek); + color: #3d5a80; + font-weight: 700; + font-size: 0.85rem; + text-align: left; + } + + .tabulka td.bunka-akce { + display: block; + text-align: left; + } + + .tabulka td.bunka-akce::before { + display: block; + margin-bottom: 0.35rem; + } + + .bunka-akce .akce-radek, + .bunka-akce .akce-radek form { + display: flex; + flex-direction: column; + gap: 0.4rem; + } + + .bunka-akce .tlacitko { + width: 100%; + } } \ No newline at end of file diff --git a/www/js/stari.js b/www/js/stari.js index 9500911..6ec8998 100644 --- a/www/js/stari.js +++ b/www/js/stari.js @@ -36,13 +36,26 @@ return 'rgb(' + kanaly[0] + ',' + kanaly[1] + ',' + kanaly[2] + ')'; } - function barvaStari(mesice, stupnice) { + function kanalyStari(mesice, stupnice) { var max = stupnice || maxMesicu; var t = mesice == null ? 1 : Math.max(0, Math.min(mesice / max, 1)); if (t < 0.5) { - return rgb(mix(ZELENA, ZLUTA, t / 0.5)); + return mix(ZELENA, ZLUTA, t / 0.5); } - return rgb(mix(ZLUTA, CERVENA, (t - 0.5) / 0.5)); + return mix(ZLUTA, CERVENA, (t - 0.5) / 0.5); + } + + function barvaStari(mesice, stupnice) { + return rgb(kanalyStari(mesice, stupnice)); + } + + function barvaOkraje(mesice, stupnice) { + var kanaly = kanalyStari(mesice, stupnice); + return rgb([ + Math.round(kanaly[0] * 0.68), + Math.round(kanaly[1] * 0.68), + Math.round(kanaly[2] * 0.68), + ]); } function infoObvodu(feature) { @@ -199,7 +212,7 @@ function htmlKolecko(text, mesice, sede, stupnice) { var barva = sede ? SEDA : barvaStari(mesice, stupnice); - var okraj = sede ? SEDA_HRANICE : barva; + var okraj = sede ? SEDA_HRANICE : barvaOkraje(mesice, stupnice); var textBarva = sede ? '#1a1a1a' : barvaTextu(mesice, stupnice); return '
' + text + '
'; }