Lepší design

master
Kowalski 2026-10-11 20:57:36 +02:00
parent d5f795816b
commit 800a920f1c
10 changed files with 873 additions and 150 deletions

View File

@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
{* bootstrap: *} {* bootstrap: *}
<link href="{$basePath}/css/bootstrap.min.css" rel="stylesheet"> <link href="{$basePath}/css/bootstrap.min.css" rel="stylesheet">
@ -28,7 +28,7 @@
</script> </script>
{* naše vlastní styly *} {* naše vlastní styly *}
<link href="{$basePath}/css/base.css?v=3" rel="stylesheet"> <link href="{$basePath}/css/base.css?v=6" rel="stylesheet">
<title>{ifset title}{include title|stripHtml} | {/ifset}Obvody</title> <title>{ifset title}{include title|stripHtml} | {/ifset}Obvody</title>
</head> </head>

View File

@ -1,17 +1,16 @@
{* This is the welcome page, you can delete it *}
{block content} {block content}
<h3>Obvody</h3> <div class="home">
<header class="home-hlavicka">
<div>
<h1 class="home-nadpis">Obvody</h1>
<p class="home-popis">Vyberte obvod, nebo otevřete celou mapu.</p>
</div>
<a n:href=":Mapa:" class="home-cela">Celá mapa</a>
</header>
{* Tlačítka: *} <nav class="home-mrizka" aria-label="Výběr obvodu">
{foreach $obvody as $obvod}
<div class="p-1 m-1 d-flex flex-wrap justify-content-center"> <a n:href=":Mapa: obvod:$obvod" class="home-obvod">{$obvod}</a>
<a n:href=":Mapa:" type="button" class="btn btn-klavesa btn-letter btn-flex box-shadow--6dp"> {/foreach}
* </nav>
</a>
{foreach $obvody as $obvod}
<a n:href=":Mapa: obvod:$obvod" type="button" class="btn btn-klavesa btn-letter btn-flex box-shadow--6dp">
{$obvod}
</a>
{/foreach}
</div> </div>

View File

@ -11,5 +11,5 @@
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" /> <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.5.3/dist/MarkerCluster.css" />
<script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script> <script src="https://unpkg.com/leaflet.markercluster@1.5.3/dist/leaflet.markercluster.js"></script>
<script type="application/json" id="stari-data">{$stariJson|noescape}</script> <script type="application/json" id="stari-data">{$stariJson|noescape}</script>
<script src="{$basePath}/js/stari.js?v=12"></script> <script src="{$basePath}/js/stari.js?v=13"></script>
{/block} {/block}

View File

@ -1,31 +1,41 @@
{block content} {block content}
<div class="container-fluid p-2"> <div class="platno">
<h3>Obvody</h3> <header class="lista">
<div class="d-flex flex-wrap gap-2 mb-2" n:if="$skupiny"> <div>
<div class="btn-group flex-wrap" role="group" aria-label="Filtr skupin"> <h1 class="lista-nadpis">Obvody</h1>
<a n:foreach="$skupiny as $s" n:href="list, skupina: $s" n:class="$skupina === $s ? 'btn btn-klavesa' : 'btn btn-outline-secondary'">{$s}</a> <p class="lista-popis">Vyberte skupinu a otevřete obvod.</p>
</div> </div>
</div> <a n:href=":Mapa:" class="tlacitko">Celá mapa</a>
</header>
<table class="table table-sm table-striped mb-1"> <section class="panel">
<thead> <div class="filtry" n:if="$skupiny" role="group" aria-label="Filtr skupin">
<tr> <a n:foreach="$skupiny as $s" n:href="list, skupina: $s" n:class="$skupina === $s ? 'tlacitko is-aktivni' : 'tlacitko'">{$s}</a>
<th scope="col" class="text-start">Číslo</th> </div>
<th scope="col" class="text-start">Název</th>
<th scope="col" class="text-start">Akce</th> <table class="tabulka">
</tr> <thead>
</thead> <tr>
<tbody> <th scope="col">Číslo</th>
{foreach $obvody as $obvod} <th scope="col">Název</th>
<tr> <th scope="col">Akce</th>
<td>{$obvod->CISLO}</td> </tr>
<td>{$obvod->NAZEV}</td> </thead>
<td> <tbody>
<a n:href=":Obvod:view id:$obvod->ID" class="btn btn-sm btn-klavesa box-shadow--6dp">Otevřít</a> {foreach $obvody as $obvod}
</td> <tr>
</tr> <td data-popisek="Číslo">{$obvod->CISLO}</td>
{/foreach} <td data-popisek="Název">{$obvod->NAZEV}</td>
</tbody> <td class="bunka-akce" data-popisek="Akce">
</table> <div class="akce-radek">
<a n:href=":Obvod:view id:$obvod->ID" class="tlacitko">Otevřít</a>
</div>
</td>
</tr>
{/foreach}
</tbody>
</table>
<p class="prazdno" n:if="count($obvody) === 0">V této skupině nejsou žádné obvody.</p>
</section>
</div> </div>

View File

@ -1,49 +1,63 @@
{block content} {block content}
<div class="container-fluid p-2"> <div class="platno detail">
Číslo: {$obvod->CISLO}<br> <header class="lista">
Název: {$obvod->NAZEV}<br> <div class="detail-identita">
Skupina: {$obvod->SKUPINA}<br> <span class="detail-cislo">{$obvod->CISLO}</span>
<a n:href=":Mapa: obvod:$obvod->CISLO" type="button" class="btn btn-klavesa btn-flex box-shadow--6dp">Mapa</a> <div>
<h1 class="lista-nadpis">{$obvod->NAZEV}</h1>
<p class="lista-popis">Skupina {$obvod->SKUPINA}</p>
</div>
</div>
<div class="akce">
<a n:href=":Mapa: obvod:$obvod->CISLO" class="tlacitko">Mapa</a>
<button type="button" class="tlacitko is-aktivni" data-bs-toggle="modal" data-bs-target="#modalPridelit">Přidělit</button>
<button type="button" class="tlacitko" data-bs-toggle="modal" data-bs-target="#modalVratit">Vrátit</button>
</div>
</header>
<div id="obvod-nahled" <div class="detail-telo">
class="box-shadow--6dp my-2" <section class="panel detail-mapa">
data-obvod="{$obvod->CISLO}" <h2>Náhled</h2>
data-geojson="{$basePath}/data/geo-obvody.geojson"></div> <div id="obvod-nahled"
<h5>Záznamy:</h5> data-obvod="{$obvod->CISLO}"
<button type="button" class="btn btn-klavesa btn-flex box-shadow--6dp" data-bs-toggle="modal" data-bs-target="#modalPridelit">Přidělit</button> data-geojson="{$basePath}/data/geo-obvody.geojson"></div>
<button type="button" class="btn btn-klavesa btn-flex box-shadow--6dp" data-bs-toggle="modal" data-bs-target="#modalVratit">Vrátit</button> </section>
<table class="table table-sm table-striped mx-auto mb-1">
<thead> <section class="panel detail-zaznamy">
<tr> <h2>Záznamy</h2>
<th scope="col" class="text-start">Záznam</th> <p class="prazdno" n:if="count($zaznamy) === 0">Tento obvod zatím nemá žádný záznam.</p>
<th scope="col" class="text-start">Přiděleno</th> <div class="tabulka-obal" n:if="count($zaznamy) > 0">
<th scope="col" class="text-start">Vráceno</th> <table class="tabulka">
<th scope="col" class="text-start">Akce</th> <thead>
</tr> <tr>
</thead> <th scope="col">Zvěstovatel</th>
<tbody> <th scope="col">Přiděleno</th>
{foreach $zaznamy as $zaznam} <th scope="col">Vráceno</th>
<tr> <th scope="col">Akce</th>
<td>{$zaznam->JMENO}</td> </tr>
<td class="text-start"> </thead>
{date_format($zaznam->VYDANO,"d.m.Y")} <tbody>
</td> {foreach $zaznamy as $zaznam}
<td class="text-start"> <tr>
{if $zaznam->VRACENO}{date_format($zaznam->VRACENO,"d.m.Y")}{/if} <td data-popisek="Zvěstovatel">{$zaznam->JMENO}</td>
</td> <td data-popisek="Přiděleno">{date_format($zaznam->VYDANO, 'd.m.Y')}</td>
<td> <td data-popisek="Vráceno">{if $zaznam->VRACENO}{date_format($zaznam->VRACENO, 'd.m.Y')}{else}—{/if}</td>
<div class="d-flex flex-wrap gap-1"> <td class="bunka-akce" data-popisek="Akce">
<button type="button" class="btn btn-sm btn-klavesa box-shadow--6dp" data-bs-toggle="modal" data-bs-target="#modalUpravit" data-id="{$zaznam->ID}" data-jmeno="{$zaznam->JMENO}" data-vydano="{date_format($zaznam->VYDANO, 'Y-m-d')}" data-vraceno="{if $zaznam->VRACENO}{date_format($zaznam->VRACENO, 'Y-m-d')}{/if}">Upravit</button> <div class="akce-radek">
{form "smazat-$zaznam->ID", class: 'd-inline'} <button type="button" class="tlacitko" data-bs-toggle="modal" data-bs-target="#modalUpravit" data-id="{$zaznam->ID}" data-jmeno="{$zaznam->JMENO}" data-vydano="{date_format($zaznam->VYDANO, 'Y-m-d')}" data-vraceno="{if $zaznam->VRACENO}{date_format($zaznam->VRACENO, 'Y-m-d')}{/if}">Upravit</button>
<button n:name="send" class="btn btn-sm btn-outline-danger" onclick="return confirm('Smazat záznam?')">Smazat</button> {form "smazat-$zaznam->ID"}
{/form} <button n:name="send" class="tlacitko tlacitko-nebezpeci" onclick="return confirm('Smazat záznam?')">Smazat</button>
</div> {/form}
</td> </div>
</tr> </td>
{/foreach} </tr>
</tbody> {/foreach}
</table> </tbody>
</table>
</div>
</section>
</div>
</div> </div>
<div class="modal fade" id="modalPridelit" tabindex="-1" aria-labelledby="modalPridelitLabel" aria-hidden="true" data-show-errors="{if $presenter['pridelitForm']->hasErrors()}1{else}0{/if}"> <div class="modal fade" id="modalPridelit" tabindex="-1" aria-labelledby="modalPridelitLabel" aria-hidden="true" data-show-errors="{if $presenter['pridelitForm']->hasErrors()}1{else}0{/if}">
@ -70,8 +84,8 @@ Skupina: {$obvod->SKUPINA}<br>
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Zrušit</button> <button type="button" class="tlacitko" data-bs-dismiss="modal">Zrušit</button>
<button n:name="send" class="btn btn-klavesa box-shadow--6dp">Přidělit</button> <button n:name="send" class="tlacitko is-aktivni">Přidělit</button>
</div> </div>
</form> </form>
</div> </div>
@ -88,7 +102,7 @@ Skupina: {$obvod->SKUPINA}<br>
{if count($otevrene) === 0} {if count($otevrene) === 0}
<div class="modal-body">Tento obvod nemá otevřené přidělení.</div> <div class="modal-body">Tento obvod nemá otevřené přidělení.</div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Zavřít</button> <button type="button" class="tlacitko" data-bs-dismiss="modal">Zavřít</button>
</div> </div>
{else} {else}
<form n:name="vratitForm"> <form n:name="vratitForm">
@ -108,8 +122,8 @@ Skupina: {$obvod->SKUPINA}<br>
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Zrušit</button> <button type="button" class="tlacitko" data-bs-dismiss="modal">Zrušit</button>
<button n:name="send" class="btn btn-klavesa box-shadow--6dp">Vrátit</button> <button n:name="send" class="tlacitko is-aktivni">Vrátit</button>
</div> </div>
</form> </form>
{/if} {/if}
@ -145,8 +159,8 @@ Skupina: {$obvod->SKUPINA}<br>
</div> </div>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Zrušit</button> <button type="button" class="tlacitko" data-bs-dismiss="modal">Zrušit</button>
<button n:name="send" class="btn btn-klavesa box-shadow--6dp">Uložit</button> <button n:name="send" class="tlacitko is-aktivni">Uložit</button>
</div> </div>
</form> </form>
</div> </div>

View File

@ -1,22 +1,25 @@
{block content} {block content}
{* {control signInForm} *} <div class="platno">
<div class="container-fluid"> <header class="lista">
<section class="w-100 p-4 d-flex justify-content-center pb-4"> <div>
<form n:name=signInForm style="width: 22rem;"> <h1 class="lista-nadpis">Přihlášení</h1>
<div class="p-3 container-fluid ramecek-chyba" n:if="$form->hasErrors()" n:foreach="$form->getErrors() as $error"> <p class="lista-popis">Pro práci se záznamy se přihlaste.</p>
<span>{$error}</span> </div>
</div> </header>
<div class="form-group">
<label n:name=username for="inputUser">Uživatel</label>
<input n:name=username type="text" class="form-control" id="inputUser" placeholder="Uživatel" required>
</div>
<div class="form-group"> <section class="panel panel-uzky">
<label n:name=password for="inputHeslo">Heslo</label> <form n:name="signInForm" class="prihlaseni formular">
<input n:name=password type="password" class="form-control" id="inputHeslo" placeholder="Heslo" autofocus="autofocus" required> <div class="alert alert-danger" n:if="$form->hasErrors()" n:foreach="$form->getErrors() as $error">{$error}</div>
<div class="mb-3">
<label n:name="username" class="form-label" for="inputUser">Uživatel</label>
<input n:name="username" type="text" class="form-control" id="inputUser" placeholder="Uživatel" required>
</div> </div>
<button type="submit" n:name=send class="btn btn-primary btn-xlarge w-100" style="margin-top: 10px;">Přihlásit</button> <div class="mb-3">
</form> <label n:name="password" class="form-label" for="inputHeslo">Heslo</label>
<input n:name="password" type="password" class="form-control" id="inputHeslo" placeholder="Heslo" required>
</div>
<button type="submit" n:name="send" class="tlacitko is-aktivni w-100">Přihlásit</button>
</form>
</section> </section>
</div> </div>

View File

@ -1,26 +1,36 @@
{block content} {block content}
<div class="container-fluid p-2"> <div class="platno">
<h3>Zvěstovatelé</h3> <header class="lista">
<div>
<h1 class="lista-nadpis">Zvěstovatelé</h1>
<p class="lista-popis">Jména použitá u záznamů obvodů.</p>
</div>
</header>
<table class="table table-sm table-striped mb-1"> <section class="panel">
<thead> <table class="tabulka">
<tr> <thead>
<th scope="col" class="text-start">Jméno</th> <tr>
<th scope="col" class="text-start">Záznamy</th> <th scope="col">Jméno</th>
<th scope="col" class="text-start">Akce</th> <th scope="col">Záznamy</th>
</tr> <th scope="col">Akce</th>
</thead> </tr>
<tbody> </thead>
{foreach $zvestovatele as $zvestovatel} <tbody>
<tr> {foreach $zvestovatele as $zvestovatel}
<td>{$zvestovatel->JMENO}</td> <tr>
<td>{$zvestovatel->POCET}</td> <td data-popisek="Jméno">{$zvestovatel->JMENO}</td>
<td> <td data-popisek="Záznamy">{$zvestovatel->POCET}</td>
<a n:href="edit, jmeno: $zvestovatel->JMENO" class="btn btn-sm btn-klavesa box-shadow--6dp">Upravit</a> <td class="bunka-akce" data-popisek="Akce">
</td> <div class="akce-radek">
</tr> <a n:href="edit, jmeno: $zvestovatel->JMENO" class="tlacitko">Upravit</a>
{/foreach} </div>
</tbody> </td>
</table> </tr>
{/foreach}
</tbody>
</table>
<p class="prazdno" n:if="count($zvestovatele) === 0">Zatím tu není žádný zvěstovatel.</p>
</section>
</div> </div>

View File

@ -1,15 +1,23 @@
{block content} {block content}
<div class="container-fluid p-2"> <div class="platno">
<h3>Upravit zvěstovatele</h3> <header class="lista">
<form n:name="zvestovatelForm" class="mb-3"> <div>
<h1 class="lista-nadpis">Upravit zvěstovatele</h1>
<p class="lista-popis">Změna se propíše do všech jeho záznamů.</p>
</div>
</header>
<form n:name="zvestovatelForm" class="panel panel-uzky formular">
<input n:name="puvodni"> <input n:name="puvodni">
<div class="alert alert-danger" n:if="$form->hasErrors()" n:foreach="$form->getErrors() as $error">{$error}</div> <div class="alert alert-danger" n:if="$form->hasErrors()" n:foreach="$form->getErrors() as $error">{$error}</div>
<div class="mb-2"> <div class="mb-3">
<label n:name="jmeno" class="form-label">Jméno</label> <label n:name="jmeno" class="form-label">Jméno</label>
<input n:name="jmeno" class="form-control"> <input n:name="jmeno" class="form-control">
</div> </div>
<button n:name="send" class="btn btn-klavesa box-shadow--6dp">Uložit</button> <div class="formular-akce">
<a n:href="default" class="btn btn-secondary">Zpět</a> <button n:name="send" class="tlacitko is-aktivni">Uložit</button>
<a n:href="default" class="tlacitko">Zpět</a>
</div>
</form> </form>
</div> </div>

View File

@ -1,10 +1,13 @@
body { html, body {
padding: 0;
margin: 0;
}
html, body, #map {
height: 100%; height: 100%;
width: 100vw; width: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
width: 100%;
} }
body:has(#map[data-max]) { body:has(#map[data-max]) {
@ -218,6 +221,182 @@ body:has(#map[data-max]) {
border-radius: 4px; 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) { @media (orientation: portrait) {
@ -265,3 +444,490 @@ body:has(#map[data-max]) {
text-align: center; 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%;
}
}

View File

@ -36,13 +36,26 @@
return 'rgb(' + kanaly[0] + ',' + kanaly[1] + ',' + kanaly[2] + ')'; return 'rgb(' + kanaly[0] + ',' + kanaly[1] + ',' + kanaly[2] + ')';
} }
function barvaStari(mesice, stupnice) { function kanalyStari(mesice, stupnice) {
var max = stupnice || maxMesicu; var max = stupnice || maxMesicu;
var t = mesice == null ? 1 : Math.max(0, Math.min(mesice / max, 1)); var t = mesice == null ? 1 : Math.max(0, Math.min(mesice / max, 1));
if (t < 0.5) { 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) { function infoObvodu(feature) {
@ -199,7 +212,7 @@
function htmlKolecko(text, mesice, sede, stupnice) { function htmlKolecko(text, mesice, sede, stupnice) {
var barva = sede ? SEDA : barvaStari(mesice, 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); var textBarva = sede ? '#1a1a1a' : barvaTextu(mesice, stupnice);
return '<div class="obvod-kolecko" style="background:' + barva + ';border-color:' + okraj + ';color:' + textBarva + '">' + text + '</div>'; return '<div class="obvod-kolecko" style="background:' + barva + ';border-color:' + okraj + ';color:' + textBarva + '">' + text + '</div>';
} }