From c3656e32039f4df2f8a928b21f33be405d257deb Mon Sep 17 00:00:00 2001
From: Dominic <git@msrd0.de>
Date: Tue, 10 Sep 2024 18:57:02 +0200
Subject: [PATCH] Unify the .select/.option stuff
---
frontend/src/main.less | 96 ++++++++++++++-------------
schilder2000/templates/schild.html.j2 | 8 +--
2 files changed, 54 insertions(+), 50 deletions(-)
diff --git a/frontend/src/main.less b/frontend/src/main.less
index c7cf546..1082a81 100644
--- a/frontend/src/main.less
+++ b/frontend/src/main.less
@@ -1,7 +1,7 @@
// the threshold at which we consider the screen "mobile"
@mobile_threshold: 700px;
-// the border around the preview (per color)
-@preview_border: .3rem;
+// 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;
@@ -17,6 +17,7 @@ body {
// adjust colors for light theme here
--bg: #fff;
--fg: #000;
+ --fg-dark: #bbb;
--accent: #80f;
--accent2: #c4f;
@@ -24,6 +25,7 @@ body {
// adjust colors for dark theme here
--bg: #222;
--fg: #fff;
+ --fg-dark: #888;
}
}
@@ -40,7 +42,7 @@ body, @{inputs}, @{buttons} {
}
@{inputs}, @{buttons}, fieldset {
- border: .15rem solid var(--fg);
+ border: .15rem solid var(--fg-dark);
border-radius: .25rem;
}
@@ -163,13 +165,6 @@ main {
width: min(95vw, 100rem);
/* A4 aspect ratio: √2:1 */
aspect-ratio: 1.4142135623730951;
-
- border: @preview_border solid var(--bg);
- padding: @preview_border;
-
- &.preview-small {
- width: 15rem;
- }
}
.preview-label {
@@ -180,11 +175,12 @@ main {
.box {
display: grid;
grid-template-columns: min(@label-width, auto) 1fr;
- align-items: start;
+ align-items: baseline;
label.for-text {
display: inline-block;
justify-self: end;
+ font-size: 1.1rem;
}
input[type = "text"], textarea {
@@ -208,51 +204,59 @@ main {
gap: 1ch;
}
-fieldset {
+// these are the fieldsets containing select-like options modeled with radio buttons
+.select {
display: flex;
flex-wrap: wrap;
- gap: 2 * @preview_border;
-}
+ gap: 2 * @option_border;
-fieldset > div {
- display: flex;
- gap: 0.5rem;
- flex-direction: column;
-}
+ .option {
+ display: flex;
+ flex-direction: column;
+ gap: .5rem;
-.imageselect > div {
- width: 10rem;
- display: flex;
- gap: 0.5rem;
-}
+ .preview {
+ width: 15rem;
+ }
-fieldset label {
- flex-grow: 1;
-}
+ img {
+ width: 10rem;
+ background-color: #fff;
+ }
-.imageselect img {
- width: 100%;
- background-color: #fff;
-}
+ .option-border {
+ border: @option_border solid var(--fg-dark);
+ border-radius: 3 * @option_border;
-fieldset input {
- display: none;
-}
+ // iframe's behave nicely
+ &.preview {
+ padding: @option_border;
+ }
-fieldset img,
-fieldset iframe,
-.preview-small {
- border-color: var(--fg);
- border-radius: 3 * @preview_border;
-}
+ // label>img doesn't
+ & > img {
+ border: @option_border solid var(--bg);
+ border-radius: 2 * @option_border;
+ }
+ }
-input[type="radio"] {
- &:checked + label > img,
- &:checked + iframe {
- border-color: var(--accent2);
+ input[type = "radio"] {
+ display: none;
+
+ &:checked + .option-border {
+ border-color: var(--accent2);
+ }
+ }
+
+ label {
+ flex-grow: 1;
+ // firefox hat hier lack gesoffen und erfindet 5px wenn das hier block oder
+ // inline ist
+ display: flex;
+ }
}
- &:not(:checked) + iframe {
- opacity: .8;
+ input[type = "radio"] {
+ display: none;
}
}
diff --git a/schilder2000/templates/schild.html.j2 b/schilder2000/templates/schild.html.j2
index b876291..b136746 100644
--- a/schilder2000/templates/schild.html.j2
+++ b/schilder2000/templates/schild.html.j2
@@ -50,7 +50,7 @@
<fieldset class="select templateselect">
<legend>Vorlage</legend>
{%- for t in form.template.choices -%}
- <div>
+ <div class="option">
<input
type="radio"
name="template"
@@ -61,7 +61,7 @@
{%- endif -%}
/>
<iframe
- class="preview preview-small"
+ class="preview option-border"
src="{{ url_for('instance.sample_html', template=t.name) }}"
id="template-preview:{{ t.name }}"
>
@@ -76,7 +76,7 @@
<fieldset class="select imageselect">
<legend>Bild</legend>
{%- for img in form.image.choices -%}
- <div>
+ <div class="option">
<input
type="radio"
name="image"
@@ -86,7 +86,7 @@
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>
--
GitLab