Skip to content
Snippets Groups Projects
Commit 5c921496 authored by Tomáš Hozman's avatar Tomáš Hozman
Browse files

working on ui

parent 1ba12165
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
content/index.html
+ 77
− 74
View file @ 5c921496
......@@ -37,6 +37,9 @@
<script
src="static/js/geo-autocomplete.min.js"
></script>
<script
src="static/js/jquery.min.js"
></script>
<link
rel="icon"
......@@ -53,100 +56,100 @@
width="55"
height="55"
>
<h1>Voličské průkazy</h1>
<h1 style="font-family:'Bebas Neue'">Voličské průkazy</h1> <!-- FIXME -->
</div>
</header>
<main>
<div id="content">
<p id="intro-text">
<strong>Boilerplate text</strong> o tom, jak člověk nemusí sáhodlouze vyplňovat vytisknuté formuláře, uděláme to všechno za něj, i když to digitalizovaně zatím nejde kvůi bubu Babišovi. Nebo tak. Lorem ipsum et dolorem aut nihil repellat et numquam consequuntur? Sit quaerat maxime et voluptatem autem qui magnam eaque!
Již za dva měsíce nás čekají prezidentské volby a Piráti znovu nabízí možnost, jak si vyřídit voličský průkaz - tedy potvrzení, že můžeš volit i na jiném místě, než v trvalém bydlišti.<br>
Vyplň náš jednoduchý formulář, stáhni si ho v PDF a pošli ho datovkou nebo dones osobně na úřad. Neboj se - vážíme si tvého soukromí, nesbíráme žádná osobní data a vše zpracovává tvůj prohlížeč.
</p>
<div id="form-wrapper">
<div id="form-controls">
<div class="input-group input-group-2">
<input
type="text"
id="name"
placeholder="Jméno *"
>
<input
type="text"
id="surname"
placeholder="Příjmení *"
>
</div>
<div class="input-single-with-label">
<label
for="birthday"
>Datum narození *</label>
<input
type="date"
id="birthday"
name="birthday"
>
</div>
<br>
<div
id="address-autocomplete"
aria-role="textbox"
class="autocomplete-container"
></div>
<div class="input-group input-group-2">
<input
type="text"
id="street"
placeholder="Ulice, popisné a orientační č. *"
id="name"
placeholder="Jméno *"
>
<div class="input-group input-group-2">
<input
type="text"
id="city"
placeholder="Obec *"
>
<input
type="text"
id="zip"
placeholder="PSČ *"
>
</div>
<select
id="receiving-type"
<input
type="text"
id="surname"
placeholder="Příjmení *"
>
<option>Vyzvednout osobně</option>
<option>Předat osobě, která se prokáže plnou mocí</option>
<option>Zaslat na adresu trvalého pobytu</option>
<option>Zaslat jinam</option>
</select>
<select
id="card-type"
</div>
<div class="input-single-with-label">
<label
for="birthday"
>Datum narození *</label>
<input
type="date"
id="birthday"
name="birthday"
>
<option>1. kolo</option>
<option>2. kolo</option>
</select>
<button>
Vydat žádost úřadu!
</button>
<small>
<i>* Povinné</i>
</small>
</div>
<div id="form-preview">
<br>
<div
id="address-autocomplete"
aria-role="textbox"
class="autocomplete-container"
></div>
<input
type="text"
id="street"
placeholder="Ulice, popisné a orientační č. *"
>
<div class="input-group input-group-2">
<input
type="text"
id="city"
placeholder="Obec *"
>
<input
type="text"
id="zip"
placeholder="PSČ *"
>
</div>
<select
id="receiving-type"
>
<option>Vyzvednout osobně</option>
<option>Předat osobě, která se prokáže plnou mocí</option>
<option>Zaslat na adresu trvalého pobytu</option>
<option>Zaslat jinam</option>
</select>
<select
id="card-type"
>
<option>1. kolo</option>
<option>2. kolo</option>
</select>
<button id="create-filled-form">
Vydat žádost úřadu!
</button>
<small>
<i>* Povinné</i>
</small>
</div>
</div>
<div id="canvas-wrapper">
<canvas id="page-1-canvas" width="2480" height="3507"></canvas>
<canvas id="page-2-canvas" width="2480" height="3507"></canvas>
</div>
</main>
<footer>
......
content/static/css/base.css
+ 24
− 15
View file @ 5c921496
......@@ -33,7 +33,9 @@ input,[aria-role="input"],textarea,select {
background: #dddcdc;
}
button,input[type="submit"],[aria-role="button"] {
button,
input[type="submit"],
[aria-role="button"] {
background:#2f2f2f;
border:none;
color:#fff;
......@@ -45,7 +47,16 @@ button,input[type="submit"],[aria-role="button"] {
transition:.15s
}
button:hover,input[type="submit"]:hover,[aria-role="button"]:hover {
button[disabled],
input[type="submit"][disabled],
[aria-role="button"][disabled] {
background:#737373;
cursor:unset
}
button:not([disabled]):hover,
input[type="submit"]:not([disabled]):hover,
[aria-role="button"]:not([disabled]):hover {
background:#333
}
......@@ -68,26 +79,24 @@ textarea {
padding-top:40px
}
#canvas-wrapper {
display:none
}
#intro-text {
padding-bottom:14px;
border-bottom:1px solid #000;
font-size:large;
margin-bottom:14px;
border-bottom:1px solid #000
padding-bottom:14px
}
#form-wrapper {
display:grid;
grid-template-rows:1fr;
grid-template-columns:1fr 1fr;
grid-template-areas:
"controls preview";
gap:14px
}
#form-controls {
grid-area:controls;
display:flex;
flex-direction:column;
gap:14px
gap:14px;
max-width:750px;
margin-left:auto;
margin-right:auto
}
#address-autocomplete {
......
content/static/images/page1.webp 0 → 100644
+ 0
− 0
View file @ 5c921496
content/static/images/page1.webp

301 KiB

content/static/images/page2.webp 0 → 100644
+ 0
− 0
View file @ 5c921496
content/static/images/page2.webp

128 KiB

content/static/js/jquery.min.js 0 → 100644
+ 2
− 0
View file @ 5c921496
This diff is collapsed.
content/static/js/main.js
+ 27
− 10
View file @ 5c921496
......@@ -9,7 +9,7 @@ window.onload = () => {
"filter": {
"countrycode": ["cz"]
},
"placeholder": "Vyhledat adresu..."
"placeholder": "🔎 Vyhledat adresu..."
}
);
......@@ -18,19 +18,36 @@ window.onload = () => {
(location) => {
const properties = location.properties;
const street = (
(properties.street !== undefined) ?
properties.street : ""
);
const houseNumber = (
(properties.housenumber !== undefined) ?
properties.housenumber : ""
);
document.getElementById("street").value = (
properties.street
street
+ (
(
properties.street !== null
&& properties.street !== ""
) ?
(street !== "") ?
" " : ""
) // In case the user does not have a street name
+ properties.housenumber
)
+ houseNumber
);
document.getElementById("city").value = properties.city;
document.getElementById("zip").value = properties.postcode;
if (properties.city !== undefined) document.getElementById("city").value = properties.city;
if (properties.postcode !== undefined) document.getElementById("zip").value = properties.postcode;
}
);
$("#create-filled-form").on(
"click",
(event) => {
$("#form-wrapper input,#form-wrapper select").attr("disabled", true);
// We already know this, don't waste time looking it up.
// Repeating ourselves once is fine here.
$(event.target).attr("disabled", true);
}
);
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment

Pirátský GitLab - Home of the CopyLeft