hjp
/
meeat
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve layout on narrow (e.g. mobile portrait) screens

This commit is contained in:
Peter J. Holzer 2024-10-15 23:49:09 +02:00
parent 47d318782b
commit ac2e4f0b62
4 changed files with 8 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
static/style.css
View File

@ -144,7 +144,11 @@ label {
font-size: 1.5rem; font-size: 1.5rem;
} }
.emoji { .emoji {
font-size: 2rem; font-size: clamp(1rem, 5vw, 2rem);
}
.slider {
display: flex;
} }
table.matrix th { table.matrix th {

2
templates/date_vote_form.html
View File

@ -1,7 +1,7 @@
{% for d in dates %} {% for d in dates %}
<div class="vote-item"> <div class="vote-item">
<label for="date_{{d.id}}">{{ d.display or d.date }}</label> <label for="date_{{d.id}}">{{ d.display or d.date }}</label>
<div> <div class="slider">
<span class="emoji">😞</span> <span class="emoji">😞</span>
<input type="range" name="date_{{d.id}}" value="{{d.preference}}"> <input type="range" name="date_{{d.id}}" value="{{d.preference}}">
<span class="emoji">😀</span> <span class="emoji">😀</span>

2
templates/place_vote_form.html
View File

@ -1,7 +1,7 @@
{% for d in places %} {% for d in places %}
<div class="vote-item"> <div class="vote-item">
<label for="place_{{d.id}}">{{ d.name }}</label> <label for="place_{{d.id}}">{{ d.name }}</label>
<div> <div class="slider">
<span class="emoji">😞</span> <span class="emoji">😞</span>
<input type="range" name="place_{{d.id}}" value="{{d.preference}}"> <input type="range" name="place_{{d.id}}" value="{{d.preference}}">
<span class="emoji">😀</span> <span class="emoji">😀</span>

2
templates/time_vote_form.html
View File

@ -1,7 +1,7 @@
{% for d in times %} {% for d in times %}
<div class="vote-item"> <div class="vote-item">
<label for="time_{{d.id}}">{{ d.display or d.time }}</label> <label for="time_{{d.id}}">{{ d.display or d.time }}</label>
<div> <div class="slider">
<span class="emoji">😞</span> <span class="emoji">😞</span>
<input type="range" name="time_{{d.id}}" value="{{d.preference}}"> <input type="range" name="time_{{d.id}}" value="{{d.preference}}">
<span class="emoji">😀</span> <span class="emoji">😀</span>