diff options
| -rw-r--r-- | asset-sources/theme.scss | 26 | ||||
| -rw-r--r-- | fietsboek/static/theme.css | 26 | ||||
| -rw-r--r-- | fietsboek/static/theme.css.map | 2 | ||||
| -rw-r--r-- | fietsboek/templates/browse.jinja2 | 38 | ||||
| -rw-r--r-- | fietsboek/templates/details.jinja2 | 20 | ||||
| -rw-r--r-- | fietsboek/templates/edit.jinja2 | 4 | ||||
| -rw-r--r-- | fietsboek/templates/edit_form.jinja2 | 24 | ||||
| -rw-r--r-- | fietsboek/templates/finish_upload.jinja2 | 4 | ||||
| -rw-r--r-- | fietsboek/templates/home.jinja2 | 2 | ||||
| -rw-r--r-- | fietsboek/templates/layout.jinja2 | 2 | ||||
| -rw-r--r-- | fietsboek/templates/upload.jinja2 | 6 | ||||
| -rw-r--r-- | fietsboek/templates/user_data.jinja2 | 18 |
12 files changed, 110 insertions, 62 deletions
diff --git a/asset-sources/theme.scss b/asset-sources/theme.scss index 35a3df1..12eff78 100644 --- a/asset-sources/theme.scss +++ b/asset-sources/theme.scss @@ -3,7 +3,7 @@ html { } body { - font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: "Junction", sans-serif; font-weight: 300; color: #101010; background: #efefef; @@ -34,10 +34,24 @@ strong { } } +.navbar { + font-family: "Inter", sans-serif; + font-weight: 400; + margin-bottom: 1em; +} + +.ui-element { + font-family: "Inter", sans-serif; +} + .brand-link { text-decoration: none; } +#homeOverview { + margin-bottom: 1em; +} + .badge-container { width: 50px; height: 50px; @@ -111,6 +125,11 @@ strong { max-width: 100%; } +.track-badges { + justify-content: center; + margin-bottom: 1em; +} + .summary-toggler { cursor: pointer; } @@ -156,6 +175,7 @@ strong { width: 50px; display: inline-block; text-align: right; + font-variant: lining-nums; } .calendar-title { @@ -234,6 +254,10 @@ strong { } } +.browse-summary { + font-variant: lining-nums; +} + /* Ensure a consistent width of the cells in the browse view. */ .browse-summary th, .browse-summary td { width: 25%; diff --git a/fietsboek/static/theme.css b/fietsboek/static/theme.css index 755a986..a04e374 100644 --- a/fietsboek/static/theme.css +++ b/fietsboek/static/theme.css @@ -3,7 +3,7 @@ html { } body { - font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-family: "Junction", sans-serif; font-weight: 300; color: #101010; background: #efefef; @@ -33,10 +33,24 @@ strong { text-decoration: none; } +.navbar { + font-family: "Inter", sans-serif; + font-weight: 400; + margin-bottom: 1em; +} + +.ui-element { + font-family: "Inter", sans-serif; +} + .brand-link { text-decoration: none; } +#homeOverview { + margin-bottom: 1em; +} + .badge-container { width: 50px; height: 50px; @@ -106,6 +120,11 @@ strong { max-width: 100%; } +.track-badges { + justify-content: center; + margin-bottom: 1em; +} + .summary-toggler { cursor: pointer; } @@ -149,6 +168,7 @@ strong { width: 50px; display: inline-block; text-align: right; + font-variant: lining-nums; } .calendar-title { @@ -222,6 +242,10 @@ strong { color: inherit; } +.browse-summary { + font-variant: lining-nums; +} + /* Ensure a consistent width of the cells in the browse view. */ .browse-summary th, .browse-summary td { width: 25%; diff --git a/fietsboek/static/theme.css.map b/fietsboek/static/theme.css.map index 8593cd3..8112079 100644 --- a/fietsboek/static/theme.css.map +++ b/fietsboek/static/theme.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../asset-sources/theme.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EAqCE;EACA;EACA;EACA;EACA;EACA;;AAzCA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAWJ;EACI;;;AAGJ;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAEF;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;EACA;;AACA;EACE;;AAIJ;EACE;EACA;;;AAIJ;AACA;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"theme.css"}
\ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../asset-sources/theme.scss"],"names":[],"mappings":"AAAA;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EAqCE;EACA;EACA;EACA;EACA;EACA;;AAzCA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAWJ;EACI;;;AAGJ;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAIJ;EACE;;AAEF;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;;AACA;EACE;;AAGJ;EACE;EACA;;AACA;EACE;;AAIJ;EACE;EACA;;;AAIJ;EACE;;;AAGF;AACA;EACE;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE","file":"theme.css"}
\ No newline at end of file diff --git a/fietsboek/templates/browse.jinja2 b/fietsboek/templates/browse.jinja2 index 308e89d..8877229 100644 --- a/fietsboek/templates/browse.jinja2 +++ b/fietsboek/templates/browse.jinja2 @@ -8,7 +8,7 @@ <div class="col-12"> <div class="input-group"> <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button> - <input name="search-terms" type="text" class="form-control" placeholder="{{ _("page.browse.filter.search_terms") }}" value="{{ request.params.get('search-terms', '') }}"> + <input name="search-terms" type="text" class="form-control ui-element" placeholder="{{ _("page.browse.filter.search_terms") }}" value="{{ request.params.get('search-terms', '') }}"> </div> </div> </div> @@ -17,59 +17,59 @@ <div class="col-md-6"> <div class="input-group"> <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button> - <input name="tags" type="text" class="form-control" placeholder="{{ _("page.browse.filter.tags") }}" value="{{ request.params.get('tags', '') }}"> + <input name="tags" type="text" class="form-control ui-element" placeholder="{{ _("page.browse.filter.tags") }}" value="{{ request.params.get('tags', '') }}"> </div> </div> <div class="col-md-6"> <div class="input-group"> <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button> - <input name="tagged-person" type="text" class="form-control" placeholder="{{ _("page.browse.filter.tagged_person") }}" value="{{ request.params.get('tagged-person', '') }}"> + <input name="tagged-person" type="text" class="form-control ui-element" placeholder="{{ _("page.browse.filter.tagged_person") }}" value="{{ request.params.get('tagged-person', '') }}"> </div> </div> <div class="col-md-4"> <div class="input-group"> <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button> - <input name="min-length" type="number" class="form-control" placeholder="{{ _("page.browse.filter.length_minimum") }}" value="{{ request.params.get('min-length', '') }}"> - <span class="input-group-text">km</span> + <input name="min-length" type="number" class="form-control ui-element" placeholder="{{ _("page.browse.filter.length_minimum") }}" value="{{ request.params.get('min-length', '') }}"> + <span class="input-group-text ui-element">km</span> </div> </div> - <div class="col-md-4 fs-5 d-flex align-items-center justify-content-center"> + <div class="col-md-4 fs-5 d-flex align-items-center justify-content-center ui-element"> {{ _("page.browse.filter.length_boundaries") }} </div> <div class="col-md-4"> <div class="input-group"> <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button> - <input name="max-length" type="number" class="form-control" placeholder="{{ _("page.browse.filter.length_maximum") }}" value="{{ request.params.get('max-length', '') }}"> - <span class="input-group-text">km</span> + <input name="max-length" type="number" class="form-control ui-element" placeholder="{{ _("page.browse.filter.length_maximum") }}" value="{{ request.params.get('max-length', '') }}"> + <span class="input-group-text ui-element">km</span> </div> </div> <div class="col-md-4"> <div class="input-group"> <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button> - <input name="min-date" type="date" class="form-control" value="{{ request.params.get('min-date', '') }}"> + <input name="min-date" type="date" class="form-control ui-element" value="{{ request.params.get('min-date', '') }}"> </div> </div> - <div class="col-md-4 fs-5 d-flex align-items-center justify-content-center"> + <div class="col-md-4 fs-5 d-flex align-items-center justify-content-center ui-element"> {{ _("page.browse.filter.date_boundaries") }} </div> <div class="col-md-4"> <div class="input-group"> <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button> - <input name="max-date" type="date" class="form-control" value="{{ request.params.get('max-date', '') }}"> + <input name="max-date" type="date" class="form-control ui-element" value="{{ request.params.get('max-date', '') }}"> </div> </div> <div class="col-md-6"> <div class="input-group"> <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button> - <select class="form-select" size="2" name="type[]" multiple> + <select class="form-select ui-element" size="2" name="type[]" multiple> <option value="ORGANIC"{% if "ORGANIC" in request.params.getall("type[]") %} selected{% endif %}>{{ _("page.browse.filter.type.organic") }}</option> <option value="SYNTHETIC"{% if "SYNTHETIC" in request.params.getall("type[]") %} selected{% endif %}>{{ _("page.browse.filter.type.synthetic") }}</option> </select> @@ -77,7 +77,7 @@ {% if request.identity %} <div class="input-group mt-2"> - <button type="button" class="btn btn-outline-secondary button-clear-input"><i class="bi bi-eraser-fill"></i></button> + <button type="button" class="btn btn-outline-secondary button-clear-input ui-element"><i class="bi bi-eraser-fill"></i></button> <select class="form-select" name="favourite"> <option value="">{{ _("page.browse.filter.favourite.all") }}</option> <option value="true"{% if request.params.get("favourite") == "true" %} selected{% endif %}>{{ _("page.browse.filter.favourite.yes") }}</option> @@ -89,7 +89,7 @@ <div class="col-md-6"> {% if request.identity %} {% macro render_switch(id, name, value, text) %} - <div class="form-check form-switch"> + <div class="form-check form-switch ui-element"> <input class="form-check-input" type="checkbox" role="switch" id="{{ id }}" name="{{ name }}" value="{{ value }}" {% if value in request.params.getall(name) %}checked{% endif %}> <label class="form-check-label" for="{{ id }}">{{ text }}</label> </div> @@ -104,20 +104,20 @@ <div class="row g-3 mb-3"> <div class="col"> - <button type="submit" class="btn btn-primary"> + <button type="submit" class="btn btn-primary ui-element"> <i class="bi bi-funnel-fill"></i> {{ _("page.browse.filters.apply") }} </button> - <a class="btn btn-info" href="{{ request.route_path('browse') }}"> + <a class="btn btn-info ui-element" href="{{ request.route_path('browse') }}"> <i class="bi bi-x-octagon"></i> {{ _("page.browse.filters.clear_all") }} </a> - <button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#advancedSearch" aria-expanded="false" aria-controls="advancedSearch"> + <button class="btn btn-secondary ui-element" type="button" data-bs-toggle="collapse" data-bs-target="#advancedSearch" aria-expanded="false" aria-controls="advancedSearch"> {{ _("page.browse.filters.expand_advanced") }} </button> </div> <div class="col"> - <select class="form-select" name="sort"> + <select class="form-select ui-element" name="sort"> <option value="DATE_DESC" {% if request.params.get("sort") == "DATE_DESC" %}selected{% endif %}>{{ _("page.browse.sort.date") }} ↓</option> <option value="DATE_ASC" {% if request.params.get("sort") == "DATE_ASC" %}selected{% endif %}>{{ _("page.browse.sort.date") }} ↑</option> <option value="LENGTH_DESC" {% if request.params.get("sort") == "LENGTH_DESC" %}selected{% endif %}>{{ _("page.browse.sort.length") }} ↓</option> @@ -208,7 +208,7 @@ </div> </div> {% endfor %} - <button type="button" class="btn btn-primary" id="archiveDownloadButton" disabled><i class="bi bi-file-earmark-zip"></i> {{ _("page.browse.download_multiple") }}</button> + <button type="button" class="btn btn-primary ui-element" id="archiveDownloadButton" disabled><i class="bi bi-file-earmark-zip"></i> {{ _("page.browse.download_multiple") }}</button> {% elif used_filters %} <p>{{ _("page.browse.no_results") }}</p> {% else %} diff --git a/fietsboek/templates/details.jinja2 b/fietsboek/templates/details.jinja2 index 7307270..d8c9250 100644 --- a/fietsboek/templates/details.jinja2 +++ b/fietsboek/templates/details.jinja2 @@ -17,9 +17,9 @@ </h1> {% if show_edit_link %} <div class="btn-group" role="group"> - <a class="btn btn-success" href="{{ request.route_path('edit', track_id=track.id) }}"><i class="bi-pencil-square"></i> {{ _("page.details.edit") }}</a> - <button type="button" class="btn btn-info" id="showShareLink" data-bs-toggle="modal" data-bs-target="#shareLinkModal"><i class="bi-share"></i> {{ _("page.details.share") }}</button> - <button type="button" class="btn btn-danger" id="deleteLink" data-bs-toggle="modal" data-bs-target="#deleteModal"><i class="bi bi-trash"></i> {{ _("page.details.delete") }}</button> + <a class="btn btn-success ui-element" href="{{ request.route_path('edit', track_id=track.id) }}"><i class="bi-pencil-square"></i> {{ _("page.details.edit") }}</a> + <button type="button" class="btn btn-info ui-element" id="showShareLink" data-bs-toggle="modal" data-bs-target="#shareLinkModal"><i class="bi-share"></i> {{ _("page.details.share") }}</button> + <button type="button" class="btn btn-danger ui-element" id="deleteLink" data-bs-toggle="modal" data-bs-target="#deleteModal"><i class="bi bi-trash"></i> {{ _("page.details.delete") }}</button> </div> <div class="modal fade" id="shareLinkModal" tabindex="-1" aria-hidden="true"> <div class="modal-dialog"> @@ -36,9 +36,9 @@ <div class="modal-footer"> <form method="POST" action="{{ request.route_url('invalidate-share', track_id=track.id) }}"> {{ util.hidden_csrf_input() }} - <button type="submit" class="btn btn-warning">{{ _("page.details.sharelink.invalidate") }}</button> + <button type="submit" class="btn btn-warning ui-element">{{ _("page.details.sharelink.invalidate") }}</button> </form> - <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _("page.details.sharelink.close") }}</button> + <button type="button" class="btn btn-secondary ui-element" data-bs-dismiss="modal">{{ _("page.details.sharelink.close") }}</button> </div> </div> </div> @@ -57,9 +57,9 @@ <div class="modal-footer"> <form method="POST" action="{{ request.route_url('delete-track', track_id=track.id) }}"> {{ util.hidden_csrf_input() }} - <button type="submit" class="btn btn-danger">{{ _("page.details.delete.delete") }}</button> + <button type="submit" class="btn btn-danger ui-element">{{ _("page.details.delete.delete") }}</button> </form> - <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _("page.details.delete.close") }}</button> + <button type="button" class="btn btn-secondary ui-element" data-bs-dismiss="modal">{{ _("page.details.delete.close") }}</button> </div> </div> </div> @@ -94,7 +94,7 @@ </div> <div class="mb-3"> - <a class="btn btn-primary" href="{{ gpx_url }}"><i class="bi bi-download"></i> {{ _("page.details.download") }}</a> + <a class="btn btn-primary ui-element" href="{{ gpx_url }}"><i class="bi bi-download"></i> {{ _("page.details.download") }}</a> </div> <table class="table table-hover table-sm"> @@ -146,7 +146,7 @@ </tbody> </table> {% if track.badges %} - <div class="d-flex"> + <div class="d-flex track-badges"> {% for badge in track.badges %} {{ util.render_badge(badge) }} {% endfor %} @@ -212,7 +212,7 @@ <textarea name="comment" class="form-control" rows="5" placeholder="{{ _('page.details.comments.new.input_comment') }}"></textarea> </div> <div class="card-footer text-muted"> - <button type="submit" class="btn btn-success"><i class="bi bi-pen"></i> {{ _("page.details.comments.new.submit") }}</button> + <button type="submit" class="btn btn-success ui-element"><i class="bi bi-pen"></i> {{ _("page.details.comments.new.submit") }}</button> </div> {{ util.hidden_csrf_input() }} </form> diff --git a/fietsboek/templates/edit.jinja2 b/fietsboek/templates/edit.jinja2 index a9a4221..6347ae6 100644 --- a/fietsboek/templates/edit.jinja2 +++ b/fietsboek/templates/edit.jinja2 @@ -13,8 +13,8 @@ {{ edit_form.edit_track(track.title, track.date_raw, track.date_tz or 0, track.visibility, track.type, track.description, track.text_tags(), badges, track.tagged_people, images) }} {{ util.hidden_csrf_input() }} <div class="btn-group" role="group"> - <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> {{ _("page.edit.form.submit") }}</button> - <a href="{{ request.route_url('details', track_id=track.id) }}" class="btn btn-secondary"><i class="bi bi-x-circle"></i> {{ _("page.edit.form.cancel") }}</a> + <button type="submit" class="btn btn-primary ui-element"><i class="bi bi-save"></i> {{ _("page.edit.form.submit") }}</button> + <a href="{{ request.route_url('details', track_id=track.id) }}" class="btn btn-secondary ui-element"><i class="bi bi-x-circle"></i> {{ _("page.edit.form.cancel") }}</a> </div> </form> </div> diff --git a/fietsboek/templates/edit_form.jinja2 b/fietsboek/templates/edit_form.jinja2 index aa09c9e..e515c3b 100644 --- a/fietsboek/templates/edit_form.jinja2 +++ b/fietsboek/templates/edit_form.jinja2 @@ -1,16 +1,16 @@ {% macro edit_track(title, date, date_tz, visibility, type, description, tags, badges, friends, images) %} <div class="mb-3"> <label for="formTitle" class="form-label">{{ _("page.track.form.title") }}</label> - <input class="form-control" type="text" id="formTitle" name="title" value="{{ title | default("", true) }}"> + <input class="form-control ui-element" type="text" id="formTitle" name="title" value="{{ title | default("", true) }}"> </div> <div class="mb-3"> <label for="formDate" class="form-label">{{ _("page.track.form.date") }}</label> - <input class="form-control" type="datetime-local" id="formDate" name="date" value="{{ date.strftime('%Y-%m-%dT%H:%M') }}"> + <input class="form-control ui-element" type="datetime-local" id="formDate" name="date" value="{{ date.strftime('%Y-%m-%dT%H:%M') }}"> <input type="hidden" name="date-tz" value="{{ date_tz }}"> </div> <div class="mb-3"> <label for="formVisibility" class="form-label">{{ _("page.track.form.visibility") }}</label> - <select class="form-select" id="formVisibility" name="visibility"> + <select class="form-select ui-element" id="formVisibility" name="visibility"> <option value="PRIVATE"{% if visibility.name == "PRIVATE" %} selected{% endif %}>{{ _("page.track.form.visibility.private") }}</option> <option value="FRIENDS"{% if visibility.name == "FRIENDS" %} selected{% endif %}>{{ _("page.track.form.visibility.friends") }}</option> <option value="FRIENDS_TAGGED"{% if visibility.name == "FRIENDS_TAGGED" %} selected{% endif %}>{{ _("page.track.form.visibility.friends_tagged") }}</option> @@ -23,7 +23,7 @@ </div> <div class="mb-3"> <label for="formType" class="form-label">{{ _("page.track.form.type") }}</label> - <select class="form-select" id="formType" name="type"> + <select class="form-select ui-element" id="formType" name="type"> <option value="ORGANIC"{% if type.name == "ORGANIC" %} selected{% endif%}>{{ _("page.track.form.type.organic") }}</option> <option value="SYNTHETIC"{% if type.name == "SYNTHETIC" %} selected{% endif%}>{{ _("page.track.form.type.synthetic") }}</option> </select> @@ -37,7 +37,7 @@ </div> <div class="row"> <div class="col-lg-3"> - <input type="text" id="new-tag" class="form-control" list="user-tags"> + <input type="text" id="new-tag" class="form-control ui-element" list="user-tags"> <datalist id="user-tags"> {% if request.identity %} {% for tag in request.identity.autocomplete_tags() | sort %} @@ -47,7 +47,7 @@ </datalist> </div> <div class="col-lg-3"> - <button type="button" class="btn btn-primary" id="add-tag-btn">{{ _("page.track.form.add_tag") }}</buttton> + <button type="button" class="btn btn-primary ui-element" id="add-tag-btn">{{ _("page.track.form.add_tag") }}</buttton> </div> </div> </div> @@ -64,10 +64,10 @@ </ul> <div class="row my-2"> <div class="col-lg-3"> - <input type="text" id="friendSearchQuery" class="form-control"> + <input type="text" id="friendSearchQuery" class="form-control ui-element"> </div> <div class="col-lg-3"> - <button type="button" class="btn btn-primary" id="add-friend-btn"><i class="bi bi-search"></i> {{ _("page.track.form.add_friend") }}</buttton> + <button type="button" class="btn btn-primary ui-element" id="add-friend-btn"><i class="bi bi-search"></i> {{ _("page.track.form.add_friend") }}</buttton> </div> </div> <!-- Hidden templates for Javascript to use --> @@ -101,7 +101,7 @@ </div> <div class="mb-3"> <label for="formDesc" class="form-label">{{ _("page.track.form.description") }}</label> - <textarea class="form-control" id="formDesc" name="description" rows="5">{{ description | default("", true) }}</textarea> + <textarea class="form-control ui-element" id="formDesc" name="description" rows="5">{{ description | default("", true) }}</textarea> </div> <div class="mb-3"> <div id="trackImageList"> @@ -115,8 +115,8 @@ </div> {% endfor %} </div> - <input type="file" name="image[]" id="imageSelector" class="form-control" accept="image/*" style="display:none;" multiple> - <button type="button" onclick="document.querySelector('#imageSelector').click()" class="btn btn-primary" id="selectImagesButton" {% if not request.config.enable_image_uploads %}disabled{% endif %}> + <input type="file" name="image[]" id="imageSelector" class="form-control ui-element" accept="image/*" style="display:none;" multiple> + <button type="button" onclick="document.querySelector('#imageSelector').click()" class="btn btn-primary ui-element" id="selectImagesButton" {% if not request.config.enable_image_uploads %}disabled{% endif %}> <i class="bi bi-images"></i> {{ _("page.track.form.select_images") }} </button> {% if not request.config.enable_image_uploads %} @@ -146,7 +146,7 @@ <textarea class="form-control"></textarea> </div> <div class="modal-footer"> - <button type="button" class="btn btn-success">{{ _("page.track.form.image_description_modal.save") }}</button> + <button type="button" class="btn btn-success ui-element">{{ _("page.track.form.image_description_modal.save") }}</button> </div> </div> </div> diff --git a/fietsboek/templates/finish_upload.jinja2 b/fietsboek/templates/finish_upload.jinja2 index 9ee4576..34d4aac 100644 --- a/fietsboek/templates/finish_upload.jinja2 +++ b/fietsboek/templates/finish_upload.jinja2 @@ -13,8 +13,8 @@ {{ edit_form.edit_track(upload_title, upload_date, upload_date_tz, upload_visibility, upload_type, upload_description, upload_tags, badges, upload_tagged_people, []) }} {{ util.hidden_csrf_input() }} <div class="btn-group" role="group"> - <button type="submit" class="btn btn-primary">{{ _("page.upload.form.submit") }}</button> - <button type="submit" class="btn btn-danger" form="cancelForm">{{ _("page.upload.form.cancel") }}</button> + <button type="submit" class="btn btn-primary ui-element">{{ _("page.upload.form.submit") }}</button> + <button type="submit" class="btn btn-danger ui-element" form="cancelForm">{{ _("page.upload.form.cancel") }}</button> </div> </form> <form id="cancelForm" method="POST" action="{{ request.route_url('cancel-upload', upload_id=preview_id) }}"> diff --git a/fietsboek/templates/home.jinja2 b/fietsboek/templates/home.jinja2 index 6092669..e9e1d42 100644 --- a/fietsboek/templates/home.jinja2 +++ b/fietsboek/templates/home.jinja2 @@ -23,7 +23,7 @@ </div> {% endif %} {% if summary %} - <div class="list-group list-group-root"> + <div class="list-group list-group-root" id="homeOverview"> {% for year in summary %} <a class="list-group-item list-group-item-primary"> <i class="bi bi-chevron-down summary-toggler"></i> diff --git a/fietsboek/templates/layout.jinja2 b/fietsboek/templates/layout.jinja2 index eae8cb4..bb3cc18 100644 --- a/fietsboek/templates/layout.jinja2 +++ b/fietsboek/templates/layout.jinja2 @@ -122,7 +122,7 @@ const Legende = false; <hr> <div id="languageChooser"> {% for lang_code, display_name in list_languages(request) %} - <a href="#" class="language-choice" data-langcode="{{ lang_code }}">{{ display_name }}</a> + <a href="#" class="language-choice ui-element" data-langcode="{{ lang_code }}">{{ display_name }}</a> {% endfor %} </div> </div> diff --git a/fietsboek/templates/upload.jinja2 b/fietsboek/templates/upload.jinja2 index 6406e91..b065a96 100644 --- a/fietsboek/templates/upload.jinja2 +++ b/fietsboek/templates/upload.jinja2 @@ -6,11 +6,11 @@ <h1>{{ _("page.upload.title") }}</h1> <form method="POST" enctype="multipart/form-data"> <div class="mb-3"> - <label for="uploadFile" class="form-label">{{ _("page.upload.form.gpx") }}</label> - <input class="form-control" type="file" id="uploadFile" name="gpx"> + <label for="uploadFile" class="form-label ui-element">{{ _("page.upload.form.gpx") }}</label> + <input class="form-control ui-element" type="file" id="uploadFile" name="gpx"> </div> {{ util.hidden_csrf_input() }} - <button type="submit" class="btn btn-primary"><i class="bi bi-upload"></i> {{ _("page.upload.form.submit") }}</button> + <button type="submit" class="btn btn-primary ui-element"><i class="bi bi-upload"></i> {{ _("page.upload.form.submit") }}</button> </form> </div> {% endblock %} diff --git a/fietsboek/templates/user_data.jinja2 b/fietsboek/templates/user_data.jinja2 index 59124ea..eada958 100644 --- a/fietsboek/templates/user_data.jinja2 +++ b/fietsboek/templates/user_data.jinja2 @@ -12,25 +12,25 @@ <form method="POST" action="{{ request.route_path('user-data') }}" class="needs-validation" novalidate> <div class="form-floating mb-3 col-lg-5"> - <input type="text" class="form-control" id="inputName" name="name" value="{{ user.name }}" placeholder="x"> + <input type="text" class="form-control ui-element" id="inputName" name="name" value="{{ user.name }}" placeholder="x"> <label for="inputName">{{ _("page.my_profile.personal_data.name") }}</label> </div> <div class="form-floating mb-3 col-lg-5"> - <input type="password" class="form-control" id="inputPassword" name="password" onchange="checkPasswordValidity('#inputPassword', '#repeatPassword')" placeholder="x"> + <input type="password" class="form-control ui-element" id="inputPassword" name="password" onchange="checkPasswordValidity('#inputPassword', '#repeatPassword')" placeholder="x"> <div class="invalid-feedback"> {{ _("page.my_profile.personal_data.password_invalid") }} </div> <label for="inputPassword">{{ _("page.my_profile.personal_data.password") }}</label> </div> <div class="form-floating mb-3 col-lg-5"> - <input type="password" class="form-control" id="repeatPassword" name="repeat-password" onchange="checkPasswordValidity('#inputPassword', '#repeatPassword')" placeholder="x"> + <input type="password" class="form-control ui-element" id="repeatPassword" name="repeat-password" onchange="checkPasswordValidity('#inputPassword', '#repeatPassword')" placeholder="x"> <div class="invalid-feedback"> {{ _("page.my_profile.personal_data.password_must_match") }} </div> <label for="repeatPassword">{{ _("page.my_profile.personal_data.repeat_password") }}</label> </div> {{ util.hidden_csrf_input() }} - <button type="submit" class="btn btn-primary"><i class="bi bi-save"></i> {{ _("page.my_profile.personal_data.save") }}</button> + <button type="submit" class="btn btn-primary ui-element"><i class="bi bi-save"></i> {{ _("page.my_profile.personal_data.save") }}</button> </form> <hr> @@ -41,7 +41,7 @@ <form method="POST" action="{{ request.route_path('force-logout') }}"> {{ util.hidden_csrf_input() }} - <button type="submit" class="btn btn-danger"><i class="bi bi-shield-lock-fill"></i> {{ _("page.my_profile.session_logout.button") }}</button> + <button type="submit" class="btn btn-danger ui-element"><i class="bi bi-shield-lock-fill"></i> {{ _("page.my_profile.session_logout.button") }}</button> </form> <hr> @@ -54,7 +54,7 @@ <form action="{{ request.route_url('delete-friend') }}" method="POST"> <input type="hidden" name="friend-id" value="{{ friend.id }}"> {{ util.hidden_csrf_input() }} - <button type="submit" class="btn btn-danger"><i class="bi bi-person-dash"></i> {{ _("page.my_profile.unfriend") }}</button> + <button type="submit" class="btn btn-danger ui-element"><i class="bi bi-person-dash"></i> {{ _("page.my_profile.unfriend") }}</button> </form> <span class="ms-3">{{ friend.name }} ({{ friend.email }})</span> </li> @@ -64,7 +64,7 @@ <form action="{{ request.route_url('accept-friend') }}" method="POST"> <input type="hidden" name="request-id" value="{{ friend_request.id }}"> {{ util.hidden_csrf_input() }} - <button type="submit" class="btn btn-success"><i class="bi bi-person-check"></i> {{ _("page.my_profile.accept_friend") }}</button> + <button type="submit" class="btn btn-success ui-element"><i class="bi bi-person-check"></i> {{ _("page.my_profile.accept_friend") }}</button> </form> <span class="ms-3">{{ friend_request.sender.name }} ({{ friend_request.sender.email }})</span> </li> @@ -80,12 +80,12 @@ <div class="row align-items-center"> <div class="col-lg-5"> <div class="form-floating"> - <input type="email" id="friendRequestEmail" name="friend-email" class="form-control" placeholder="x"> + <input type="email" id="friendRequestEmail" name="friend-email" class="form-control ui-element" placeholder="x"> <label for="friendRequestEmail">{{ _("page.my_profile.friend_request_email") }}</label> </div> </div> <div class="col-lg-3"> - <button class="btn btn-primary"><i class="bi bi-person-plus"></i> {{ _("page.my_profile.send_friend_request") }}</button> + <button class="btn btn-primary ui-element"><i class="bi bi-person-plus"></i> {{ _("page.my_profile.send_friend_request") }}</button> </div> </div> </form> |