Skip to content
Snippets Groups Projects
Commit 6bc645be authored by Thomas Schneider's avatar Thomas Schneider
Browse files

Merge branch 'irgendwas-mit-design' into 'main' 

A bunch of design stuff

See merge request !3
parents 1a0f734a ca7f36bd
No related branches found
No related tags found
1 merge request!3A bunch of design stuff
Show whitespace changes
Inline Side-by-side
.editorconfig
+ 1
− 1
View file @ 6bc645be
......@@ -6,7 +6,7 @@ end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true
[*.{json,less,ts,html.j2}]
[*.{json,less,ts,html.j2,css}]
indent_style = tab
indent_size = 4
......
examples/static/schild.css
+ 47
− 44
View file @ 6bc645be
......@@ -12,8 +12,11 @@ body {
font-family: "Noto Sans", sans-serif;
padding: 0;
margin: 0;
background-color: #fff;
color: #000;
display: flex;
flex-direction: column;
@media not print {
/* This magic constant approximately corresponds to 48px at A4 size, but scales
* with the viewport/iframe size
......
frontend/src/main.less
+ 135
− 56
View file @ 6bc645be
// the threshold at which we consider the screen "mobile"
@mobile_threshold: 700px;
// the threshold at which we consider the screen "wide", i.e. display the preview on the
// side instead of at the bottom
@wide_threshold: 1700px;
// the border around the options in the fieldset-select-like things
@option_border: .3rem;
// the minimum size of the left area in the form layout
@label-width: 90px;
* {
box-sizing: border-box;
......@@ -13,6 +20,7 @@ body {
// adjust colors for light theme here
--bg: #fff;
--fg: #000;
--fg-dark: #bbb;
--accent: #80f;
--accent2: #c4f;
......@@ -20,10 +28,39 @@ body {
// adjust colors for dark theme here
--bg: #222;
--fg: #fff;
--fg-dark: #888;
}
}
@inputs: ~'input[type = "text"], input[type = "number"], textarea, select';
@buttons: ~'input[type = "submit"], button, a.button';
body, @{inputs}, @{buttons} {
&, &:hover, &:visited {
background-color: var(--bg);
color: var(--fg);
// ja, user agents haben lack gesoffen
font-size: 1rem;
}
}
@{inputs}, @{buttons}, fieldset {
border: .15rem solid var(--fg-dark);
border-radius: .25rem;
}
@{inputs} {
padding: .2rem .3rem;
}
@{buttons} {
padding: .2rem .6rem;
&:hover {
border-color: var(--accent2);
cursor: pointer;
text-decoration: none;
}
}
a {
......@@ -127,84 +164,126 @@ main {
}
}
.preview {
width: min(95vw, 100rem);
/* A4 aspect ratio: √2:1 */
aspect-ratio: 1.4142135623730951;
.section-container {
display: grid;
grid-gap: 1rem;
grid-template-columns: 1fr;
background-color: #fff;
color: #000;
.section {
grid-column-start: 1;
}
.preview-small {
width: 15rem;
@media screen and (min-width: @wide_threshold) {
grid-template-columns: 1fr 1fr;
.preview-section {
grid-column-start: 2;
grid-row: 1/span 3;
}
}
}
.preview-label {
place-self: center;
.preview {
/* A4 aspect ratio: √2:1 */
aspect-ratio: 1.4142135623730951;
}
form {
display: inline-block;
.preview-container .preview {
width: 100%;
}
@label-padding: 90px;
// this is the form layout row container thingy
.box {
display: grid;
grid-template-columns: min(@label-width, auto) 1fr;
align-items: baseline;
label.for-text {
display: inline-block;
min-width: @label-padding;
text-align: right;
justify-self: end;
font-size: 1.1rem;
}
input[type = "text"], textarea {
width: 300px;
justify-self: stretch;
}
textarea {
height: 5em;
vertical-align: top;
height: 5rem;
}
}
fieldset {
// this is the form layout row with buttons in it
.buttons {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: stretch;
}
.box, .buttons {
margin: .5rem 0;
gap: 1ch;
}
fieldset > div {
// these are the fieldsets containing select-like options modeled with radio buttons
.select {
display: flex;
flex-wrap: wrap;
gap: 2 * @option_border;
.option {
display: flex;
gap: 0.5rem;
flex-direction: column;
gap: .5rem;
.preview {
width: 15rem;
cursor: pointer;
}
.imageselect > div {
.preview-label {
place-self: center;
}
img {
width: 10rem;
display: flex;
gap: 0.5rem;
background-color: #fff;
}
fieldset label {
flex-grow: 1;
.option-border {
border: @option_border solid var(--fg-dark);
border-radius: 3 * @option_border;
// iframe's behave nicely
&.preview {
padding: @option_border;
}
.imageselect img {
width: 100%;
background-color: #fff;
// label>img doesn't
& > img {
border: @option_border solid var(--bg);
border-radius: 2 * @option_border;
object-fit: contain;
}
}
fieldset input {
input[type = "radio"] {
display: none;
&:checked + .option-border {
border-color: var(--accent2);
}
}
fieldset img,
fieldset iframe,
.preview-small {
border: 3px solid lightgray;
border-radius: 10px;
label {
flex-grow: 1;
// firefox hat hier lack gesoffen und erfindet 5px wenn das hier block oder
// inline ist
display: flex;
}
}
input[type="radio"]:checked {
& + label > img,
& + iframe {
border:3px solid red;
input[type = "radio"] {
display: none;
}
}
frontend/src/main.ts
+ 22
− 3
View file @ 6bc645be
import './main.less';
console.log("Hello World");
function onInputHandler(event: Event) {
const preview = document.getElementById('preview') as HTMLIFrameElement;
const previewDoc = preview.contentDocument as Document;
......@@ -12,9 +10,30 @@ function onInputHandler(event: Event) {
window.addEventListener("load", () => {
if (document.getElementById('preview')) {
for (let el of document.getElementsByClassName('input-dispatch')) {
for (const el of document.getElementsByClassName('input-dispatch')) {
console.log(el);
el.addEventListener('input', onInputHandler);
}
for (const op of document.querySelectorAll('.option .preview')) {
console.log(op);
const input_id = (op as HTMLElement).dataset.for;
if (!input_id) {
console.error("Missing data-for attribute for", op);
continue;
}
const input = document.getElementById(input_id);
if (!input || input === null) {
console.error("Unable to find input for", op);
continue;
}
const handler = (_: Event) => {
console.log("clicked");
(input as HTMLInputElement).checked = true;
};
op.addEventListener('click', handler);
(op as HTMLIFrameElement).contentDocument?.addEventListener('click', handler);
}
}
});
schilder2000/templates/schild.html.j2
+ 100
− 97
View file @ 6bc645be
......@@ -28,7 +28,8 @@
{%- endblock title %}
{% block main -%}
<section>
<div class="section-container">
<div class="section">
{%- with messages = get_flashed_messages() -%}
{%- if messages -%}
<ul class="flashes">
......@@ -38,19 +39,19 @@
</ul>
{%- endif -%}
{%- endwith -%}
</section>
</div>
<section>
<div class="section">
<form method="post" action="">
{{ form.csrf_token }}
{{ render_field(form.title, "input-dispatch") }}
{{ render_field(form.text, "input-dispatch") }}
<fieldset class="templateselect">
<fieldset class="select templateselect">
<legend>Vorlage</legend>
{%- for t in form.template.choices -%}
<div>
<div class="option">
<input
type="radio"
name="template"
......@@ -61,9 +62,10 @@
{%- endif -%}
/>
<iframe
class="preview preview-small"
class="preview option-border"
src="{{ url_for('instance.sample_html', template=t.name) }}"
id="template-preview:{{ t.name }}"
data-for="template:{{ t.name }}"
>
</iframe>
<label for="template:{{ t.name }}" class="preview-label">
......@@ -73,10 +75,10 @@
{% endfor %}
</fieldset>
<fieldset class="imageselect">
<fieldset class="select imageselect">
<legend>Bild</legend>
{%- for img in form.image.choices -%}
<div>
<div class="option">
<input
type="radio"
name="image"
......@@ -86,14 +88,14 @@
checked
{%- endif -%}
/>
<label for="img:{{ img }}">
<label for="img:{{ img }}" class="option-border">
<img src="{{ url_for('instance.static', filename='img/'+img) }}" title="{{ img }}" />
</label>
</div>
{%- endfor -%}
</fieldset>
<div class="box">
<div class="buttons">
{%- if schild -%}
<input type="submit" value="Speichern" />
<input
......@@ -106,25 +108,25 @@
{%- endif -%}
</div>
</form>
</section>
{%- if schild %}
<div>
<a href="{{ url_for('instance.schild_pdf', ident=schild.ident) }}">
Als PDF anzeigen
</a>
</div>
<section><form method="post" action="{{ url_for('.print', ident=schild.ident) }}">
{%- if schild %}
<div class="section">
<form method="post" action="{{ url_for('.print', ident=schild.ident) }}">
{%- for field in printform -%}
{{ render_field(field) }}
{%- endfor -%}
<div class="buttons">
<a class="button" href="{{ url_for('instance.schild_pdf', ident=schild.ident) }}">
Als PDF anzeigen
</a>
<input type="submit" value="Drucken" />
</form></section>
</div>
</form>
</div>
<div>
<div class="section preview-section">
<h2>Vorschau</h2>
<div class="preview-container" id="preview-container">
<iframe
......@@ -135,4 +137,5 @@
</div>
</div>
{% endif %}
</div>
{% endblock main %}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment