edward/paddington-eurostar
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases Packages Wiki Activity Actions

Refine homepage journey form layout

Browse source
This commit is contained in:
Edward Betts 2026-05-26 12:55:23 +01:00
parent 13c4341f3a
commit ed8a5626a4
4 changed files with 74 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

27
templates/base.html
View file

@ -95,6 +95,10 @@
gap: 0.75rem;
}
.destination-grid--eurostar {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.destination-option {
position: relative;
}
@ -110,7 +114,7 @@
.destination-option label {
display: block;
min-height: 100%;
padding: 0.95rem 1rem;
padding: 0.8rem 0.85rem;
border: 1px solid #cbd5e0;
border-radius: 10px;
background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
@ -121,7 +125,7 @@
.destination-option label strong {
display: block;
color: #0f172a;
font-size: 1rem;
font-size: 0.98rem;
margin-bottom: 0.2rem;
}
@ -184,6 +188,10 @@
@media (max-width: 640px) {
.card { padding: 1.25rem; }
.destination-grid--eurostar {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
/* Convert results table to a 2-column card layout per row */
.results-table, .results-table tbody { display: block; }
.results-table thead { display: none; }
@ -233,6 +241,21 @@
/* Form groups */
.form-group { margin-bottom: 1.2rem; }
.form-group-lg { margin-bottom: 1.5rem; }
.form-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
.form-row .form-group,
.form-row .form-group-lg {
margin-bottom: 0;
}
@media (max-width: 640px) {
.form-row {
grid-template-columns: 1fr;
}
}
#return-date-group:has(input:disabled) { cursor: pointer; }
/* Buttons */

49
templates/index.html
View file

@ -99,13 +99,12 @@
<div class="form-group">
<span class="field-label">Eurostar destination</span>
<div class="destination-grid" role="radiogroup" aria-label="Eurostar destination">
{% for slug, name in destinations.items() %}
{% set city = name.replace(' Gare du Nord','').replace(' Centraal','').replace(' Midi','').replace(' Europe','') %}
<div class="destination-grid destination-grid--eurostar" role="radiogroup" aria-label="Eurostar destination">
{% for destination in destination_options %}
<div class="destination-option">
<input type="radio" id="dest-{{ slug }}" name="destination" value="{{ slug }}"
<input type="radio" id="dest-{{ destination.slug }}" name="destination" value="{{ destination.slug }}"
{% if loop.first %}checked{% endif %} required>
<label for="dest-{{ slug }}"><strong>{{ city }}</strong><span>{{ name }}</span></label>
<label for="dest-{{ destination.slug }}"><strong>{{ destination.city }}</strong><span>{{ destination.destination }}</span></label>
</div>
{% endfor %}
</div>
@ -128,26 +127,28 @@
<input type="hidden" id="return_date" name="">
</div>
<div class="form-group">
<label for="min_connection" class="field-label">
Minimum connection time (Paddington &rarr; St&nbsp;Pancras)
</label>
<select id="min_connection" name="min_connection" class="form-control">
{% for mins in valid_min_connections %}
<option value="{{ mins }}" {% if mins == default_min_connection %}selected{% endif %}>{{ mins }} min</option>
{% endfor %}
</select>
</div>
<div class="form-row">
<div class="form-group">
<label for="min_connection" class="field-label">
Minimum connection time (Paddington &rarr; St&nbsp;Pancras)
</label>
<select id="min_connection" name="min_connection" class="form-control">
{% for mins in valid_min_connections %}
<option value="{{ mins }}" {% if mins == default_min_connection %}selected{% endif %}>{{ mins }} min</option>
{% endfor %}
</select>
</div>
<div class="form-group-lg">
<label for="max_connection" class="field-label">
Maximum connection time (Paddington &rarr; St&nbsp;Pancras)
</label>
<select id="max_connection" name="max_connection" class="form-control">
{% for mins in valid_max_connections %}
<option value="{{ mins }}" {% if mins == default_max_connection %}selected{% endif %}>{{ mins }} min</option>
{% endfor %}
</select>
<div class="form-group">
<label for="max_connection" class="field-label">
Maximum connection time (Paddington &rarr; St&nbsp;Pancras)
</label>
<select id="max_connection" name="max_connection" class="form-control">
{% for mins in valid_max_connections %}
<option value="{{ mins }}" {% if mins == default_max_connection %}selected{% endif %}>{{ mins }} min</option>
{% endfor %}
</select>
</div>
</div>
<button type="submit" class="btn-primary">Search journeys</button>