Commit dc4c9ed6 authored by Bengfort's avatar Bengfort
Browse files

Merge branch 'style-full-width-table' into 'master'

full-width tables

See merge request !1
parents 40e30455 bbf93c7b
Pipeline #7901 passed with stages
in 3 minutes and 21 seconds
.container {
max-width: var(--breakpoint-md, 768px);
}
.full-width {
overflow-x: auto;
}
@media (min-width: 768px) {
.full-width {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.full-width > * {
width: auto;
min-width: 738px; /* 768px - 2 * 15px (padding) */
margin: 0 auto;
}
}
......@@ -10,6 +10,7 @@
<link rel="shortcut icon" type="image/x-icon" href="{% static 'images/favicon.ico' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap/dist/css/bootstrap.min.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'bootstrap-datepicker/dist/css/bootstrap-datepicker3.min.css' %}" />
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}" />
</head>
<body>
<header class="bg-dark">
......
......@@ -12,30 +12,32 @@
{% bootstrap_form_errors form %}
<p>{% translate 'Please select one of the available timeslots to make an appointment. You will still be able to change your selection later.' %}</p>
<table class="table table-hover" data-js="multi-datetime">
<thead>
<tr>
<th></th>
{% for time in table.times %}
<th data-value="{{ time|date:'H:i' }}">{{ time }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for date, row in table.timeslots.items %}
<div class="full-width my-2">
<table class="table table-hover" data-js="multi-datetime">
<thead>
<tr>
<th>{{ date }}</th>
{% for time, id in row.items %}
<td>
{% if id %}
<input type="radio" name="timeslot" value="{{ id }}" {% if id == form.timeslot.value %}checked{% endif %}>
{% endif %}
</td>
<th></th>
{% for time in table.times %}
<th data-value="{{ time|date:'H:i' }}">{{ time }}</th>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</thead>
<tbody>
{% for date, row in table.timeslots.items %}
<tr>
<th>{{ date }}</th>
{% for time, id in row.items %}
<td>
{% if id %}
<input type="radio" name="timeslot" value="{{ id }}" {% if id == form.timeslot.value %}checked{% endif %}>
{% endif %}
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="d-print-none mb-3">
<button class="btn btn-secondary" name="timeslot" value="">{% translate 'Reset' %}</button>
......
......@@ -39,28 +39,30 @@
</div>
</div>
<table class="table table-hover" data-js="multi-datetime">
<thead>
<tr>
<th></th>
{% for time in form.timeslots.value.times %}
<th data-value="{{ time|date:'H:i' }}">{{ time }}</th>
{% endfor %}
</tr>
</thead>
<tbody>
{% for date, row in form.timeslots.value.timeslots.items %}
<tr data-value="{{ date|date:'Y-m-d' }}">
<th>{{ date }}</th>
{% for time, checked in row.items %}
<td>
<input type="checkbox" name="timeslots" value="{{ date|date:'Y-m-d' }} {{ time|date:'H:i' }}" {% if checked %}checked{% endif %}>
</td>
<div class="full-width my-2">
<table class="table table-hover" data-js="multi-datetime">
<thead>
<tr>
<th></th>
{% for time in form.timeslots.value.times %}
<th data-value="{{ time|date:'H:i' }}">{{ time }}</th>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</thead>
<tbody>
{% for date, row in form.timeslots.value.timeslots.items %}
<tr data-value="{{ date|date:'Y-m-d' }}">
<th>{{ date }}</th>
{% for time, checked in row.items %}
<td>
<input type="checkbox" name="timeslots" value="{{ date|date:'Y-m-d' }} {{ time|date:'H:i' }}" {% if checked %}checked{% endif %}>
</td>
{% endfor %}
</tr>
{% endfor %}
</tbody>
</table>
</div>
</fieldset>
<div class="d-print-none mb-3">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment