diff --git a/frontend/src/main.less b/frontend/src/main.less index a0ca20a9d73262c4b74be0b58aa79f64313b32cc..aad7a081216701a9ac816ba8a4337a757c5529e9 100644 --- a/frontend/src/main.less +++ b/frontend/src/main.less @@ -1,5 +1,8 @@ // 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 @@ -161,6 +164,25 @@ main { } } +.section-container { + display: grid; + grid-gap: 1rem; + grid-template-columns: 1fr; + + .section { + grid-column-start: 1; + } + + @media screen and (min-width: @wide_threshold) { + grid-template-columns: 1fr 1fr; + + .preview-section { + grid-column-start: 2; + grid-row: 1/span 3; + } + } +} + .preview { /* A4 aspect ratio: √2:1 */ aspect-ratio: 1.4142135623730951; diff --git a/schilder2000/templates/schild.html.j2 b/schilder2000/templates/schild.html.j2 index f852e8c802ff3887c1bafc11510906f810ff3178..615a8781823de4c567601591b6f50f8a4939d252 100644 --- a/schilder2000/templates/schild.html.j2 +++ b/schilder2000/templates/schild.html.j2 @@ -28,111 +28,114 @@ {%- endblock title %} {% block main -%} - <section> - {%- with messages = get_flashed_messages() -%} - {%- if messages -%} - <ul class="flashes"> - {%- for m in messages -%} - <li>{{ m }}</li> - {%- endfor -%} - </ul> - {%- endif -%} - {%- endwith -%} - </section> + <div class="section-container"> + <div class="section"> + {%- with messages = get_flashed_messages() -%} + {%- if messages -%} + <ul class="flashes"> + {%- for m in messages -%} + <li>{{ m }}</li> + {%- endfor -%} + </ul> + {%- endif -%} + {%- endwith -%} + </div> - <section> - <form method="post" action=""> - {{ form.csrf_token }} + <div class="section"> + <form method="post" action=""> + {{ form.csrf_token }} - {{ render_field(form.title, "input-dispatch") }} - {{ render_field(form.text, "input-dispatch") }} + {{ render_field(form.title, "input-dispatch") }} + {{ render_field(form.text, "input-dispatch") }} - <fieldset class="select templateselect"> - <legend>Vorlage</legend> - {%- for t in form.template.choices -%} - <div class="option"> - <input - type="radio" - name="template" - id="template:{{ t.name }}" - value="{{ t.name }}" - {% if t.name == (schild | default(None)).template -%} - checked - {%- endif -%} - /> - <iframe - 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"> - {{ t.description or t.name }} - </label> - </div> - {% endfor %} - </fieldset> + <fieldset class="select templateselect"> + <legend>Vorlage</legend> + {%- for t in form.template.choices -%} + <div class="option"> + <input + type="radio" + name="template" + id="template:{{ t.name }}" + value="{{ t.name }}" + {% if t.name == (schild | default(None)).template -%} + checked + {%- endif -%} + /> + <iframe + 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"> + {{ t.description or t.name }} + </label> + </div> + {% endfor %} + </fieldset> - <fieldset class="select imageselect"> - <legend>Bild</legend> - {%- for img in form.image.choices -%} - <div class="option"> - <input - type="radio" - name="image" - id="img:{{ img }}" - value="{{ img }}" - {% if img == (schild | default(None)).image -%} - checked - {%- endif -%} - /> - <label for="img:{{ img }}" class="option-border"> - <img src="{{ url_for('instance.static', filename='img/'+img) }}" title="{{ img }}" /> - </label> - </div> - {%- endfor -%} - </fieldset> + <fieldset class="select imageselect"> + <legend>Bild</legend> + {%- for img in form.image.choices -%} + <div class="option"> + <input + type="radio" + name="image" + id="img:{{ img }}" + value="{{ img }}" + {% if img == (schild | default(None)).image -%} + checked + {%- endif -%} + /> + <label for="img:{{ img }}" class="option-border"> + <img src="{{ url_for('instance.static', filename='img/'+img) }}" title="{{ img }}" /> + </label> + </div> + {%- endfor -%} + </fieldset> - <div class="buttons"> - {%- if schild -%} - <input type="submit" value="Speichern" /> - <input - type="submit" - formaction="{{ url_for('views.create') }}" - value="Neues Schild erstellen" - /> - {%- else -%} - <input type="submit" value="Schild erstellen" /> - {%- endif -%} + <div class="buttons"> + {%- if schild -%} + <input type="submit" value="Speichern" /> + <input + type="submit" + formaction="{{ url_for('views.create') }}" + value="Neues Schild erstellen" + /> + {%- else -%} + <input type="submit" value="Schild erstellen" /> + {%- endif -%} + </div> + </form> </div> - </form> - </section> - {%- if schild %} - <section><form method="post" action="{{ url_for('.print', ident=schild.ident) }}"> - {%- for field in printform -%} - {{ render_field(field) }} - {%- endfor -%} + {%- 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" /> + <div class="buttons"> + <a class="button" href="{{ url_for('instance.schild_pdf', ident=schild.ident) }}"> + Als PDF anzeigen + </a> + <input type="submit" value="Drucken" /> + </div> + </form> </div> - </form></section> - - <div> - <h2>Vorschau</h2> - <div class="preview-container" id="preview-container"> - <iframe - class="preview" - id="preview" - src="{{ url_for('instance.schild_html', ident=schild.ident) }}"> - </iframe> + <div class="section preview-section"> + <h2>Vorschau</h2> + <div class="preview-container" id="preview-container"> + <iframe + class="preview" + id="preview" + src="{{ url_for('instance.schild_html', ident=schild.ident) }}"> + </iframe> + </div> </div> - </div> - {% endif %} + {% endif %} + </div> {% endblock main %}