From 87fdb39e9b2f775c78991010945136d1db919845 Mon Sep 17 00:00:00 2001 From: Tobias Bengfort Date: Tue, 3 Nov 2020 10:10:46 +0100 Subject: [PATCH 1/3] full-width tables --- scheduler/main/static/style.css | 13 ++++++ scheduler/main/templates/base.html | 1 + .../main/templates/main/invitation_form.html | 44 ++++++++++--------- .../main/templates/main/schedule_form.html | 42 +++++++++--------- 4 files changed, 59 insertions(+), 41 deletions(-) create mode 100644 scheduler/main/static/style.css diff --git a/scheduler/main/static/style.css b/scheduler/main/static/style.css new file mode 100644 index 0000000..2f713a8 --- /dev/null +++ b/scheduler/main/static/style.css @@ -0,0 +1,13 @@ +.full-width { + width: 100vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; + overflow-x: auto; +} +.full-width > * { + width: auto; + margin: 0 auto; +} diff --git a/scheduler/main/templates/base.html b/scheduler/main/templates/base.html index a76507c..a0bb83e 100644 --- a/scheduler/main/templates/base.html +++ b/scheduler/main/templates/base.html @@ -10,6 +10,7 @@ +
diff --git a/scheduler/main/templates/main/invitation_form.html b/scheduler/main/templates/main/invitation_form.html index 9f04cfa..2548c5e 100644 --- a/scheduler/main/templates/main/invitation_form.html +++ b/scheduler/main/templates/main/invitation_form.html @@ -12,30 +12,32 @@ {% bootstrap_form_errors form %}

{% translate 'Please select one of the available timeslots to make an appointment. You will still be able to change your selection later.' %}

- - - - - {% for time in table.times %} - - {% endfor %} - - - - {% for date, row in table.timeslots.items %} +
+
{{ time }}
+ - - {% for time, id in row.items %} - + + {% for time in table.times %} + {% endfor %} - {% endfor %} - -
{{ date }} - {% if id %} - - {% endif %} - {{ time }}
+ + + {% for date, row in table.timeslots.items %} + + {{ date }} + {% for time, id in row.items %} + + {% if id %} + + {% endif %} + + {% endfor %} + + {% endfor %} + + +
diff --git a/scheduler/main/templates/main/schedule_form.html b/scheduler/main/templates/main/schedule_form.html index d96deb6..c69020d 100644 --- a/scheduler/main/templates/main/schedule_form.html +++ b/scheduler/main/templates/main/schedule_form.html @@ -39,28 +39,30 @@
- - - - - {% for time in form.timeslots.value.times %} - - {% endfor %} - - - - {% for date, row in form.timeslots.value.timeslots.items %} - - - {% for time, checked in row.items %} - +
+
{{ time }}
{{ date }} - -
+ + + + {% for time in form.timeslots.value.times %} + {% endfor %} - {% endfor %} - -
{{ time }}
+ + + {% for date, row in form.timeslots.value.timeslots.items %} + + {{ date }} + {% for time, checked in row.items %} + + + + {% endfor %} + + {% endfor %} + + +
-- GitLab From a97aa83dd0398e25302a2e70e1573e4a23b4bcfd Mon Sep 17 00:00:00 2001 From: Tobias Bengfort Date: Tue, 3 Nov 2020 17:23:16 +0100 Subject: [PATCH 2/3] hardcode minimum width values --- scheduler/main/static/style.css | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/scheduler/main/static/style.css b/scheduler/main/static/style.css index 2f713a8..20b2636 100644 --- a/scheduler/main/static/style.css +++ b/scheduler/main/static/style.css @@ -8,6 +8,27 @@ overflow-x: auto; } .full-width > * { - width: auto; + width: 100%; margin: 0 auto; } +@media (min-width: 576px) { + .full-width > * { + width: auto; + min-width: 510px + } +} +@media (min-width: 768px) { + .full-width > * { + min-width: 690px + } +} +@media (min-width: 992px) { + .full-width > * { + min-width: 930px + } +} +@media (min-width: 1200px) { + .full-width > * { + min-width: 1110px + } +} -- GitLab From bbf93c7b6ce6695549889acee5fd9adac91b96ed Mon Sep 17 00:00:00 2001 From: Tobias Bengfort Date: Tue, 3 Nov 2020 17:29:07 +0100 Subject: [PATCH 3/3] fix container size like in castellum --- scheduler/main/static/style.css | 41 ++++++++++++--------------------- 1 file changed, 15 insertions(+), 26 deletions(-) diff --git a/scheduler/main/static/style.css b/scheduler/main/static/style.css index 20b2636..e54e306 100644 --- a/scheduler/main/static/style.css +++ b/scheduler/main/static/style.css @@ -1,34 +1,23 @@ +.container { + max-width: var(--breakpoint-md, 768px); +} + .full-width { - width: 100vw; - position: relative; - left: 50%; - right: 50%; - margin-left: -50vw; - margin-right: -50vw; overflow-x: auto; } -.full-width > * { - width: 100%; - margin: 0 auto; -} -@media (min-width: 576px) { - .full-width > * { - width: auto; - min-width: 510px - } -} + @media (min-width: 768px) { - .full-width > * { - min-width: 690px - } -} -@media (min-width: 992px) { - .full-width > * { - min-width: 930px + .full-width { + width: 100vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; } -} -@media (min-width: 1200px) { .full-width > * { - min-width: 1110px + width: auto; + min-width: 738px; /* 768px - 2 * 15px (padding) */ + margin: 0 auto; } } -- GitLab