diff --git a/src/plainui/jinja2.py b/src/plainui/jinja2.py index cff652c1fa357971af4df7c0da1c3b74ce6f7f5e..760b2b6f03ca53d5ee56d3bbc90ce27f593e7427 100644 --- a/src/plainui/jinja2.py +++ b/src/plainui/jinja2.py @@ -2,6 +2,7 @@ from datetime import datetime, timedelta from django.contrib.messages import get_messages from django.templatetags.static import static from django.urls import reverse +from django.utils import timezone from django.utils.formats import localize from django.utils.functional import LazyObject from django.utils.html import json_script @@ -91,6 +92,13 @@ def custom_strfdates(date): return localdate(date).strftime('%x') +def custom_weekday_abbrev(date): + if not isinstance(date, datetime): + return '' + + return date.strftime('%a') + + # set up an internal represenative for an unset variable as parameter for show_vars() # which cannot use a default of None as that is a valid value for the variable _UNSET = object() @@ -188,6 +196,7 @@ def environment(**options): 'unique_id': unique_id, 'translated_fields_for_field': translated_fields_for_field, 'field_translation_languages': field_translation_languages, + 'now': timezone.now(), }) env.filters['strftdelta'] = custom_timedelta env.filters['strftdelta_short'] = custom_timedelta_short @@ -195,5 +204,6 @@ def environment(**options): env.filters['strftime'] = custom_strftime env.filters['strfdate'] = custom_strfdate env.filters['strfdates'] = custom_strfdates + env.filters['weekday_abbrev'] = custom_weekday_abbrev env.install_gettext_callables(gettext, ngettext, newstyle=True) return env diff --git a/src/plainui/jinja2/plainui/components/list_events.html b/src/plainui/jinja2/plainui/components/list_events.html index 3716478a24e9750f7caa7a411e22bd0b2f9ed54b..054ef1f430aabc551e4a9d6960a78bd0a52d210e 100644 --- a/src/plainui/jinja2/plainui/components/list_events.html +++ b/src/plainui/jinja2/plainui/components/list_events.html @@ -9,7 +9,7 @@ {% macro list(events, my_favorite_events, my_scheduled_events, assembly_slug=None, msg_none=_("No entries available.")) -%} {% if events %} - <ul class="list-unstyled mb-0"> + <ul class="list-unstyled d-flex flex-column gap-3 mb-0"> {% for event in events %} {{ list_el( event, faved=true if event.id | safe in my_favorite_events, @@ -18,41 +18,65 @@ {% endfor %} </ul> {% else %} - <p>{{ msg_none }}</p> + <p class="p-3 bg-opaque">{{ msg_none }}</p> {% endif %} {%- endmacro %} {% macro list_el(event, faved, scheduled, first) -%} {% set link = url('plainui:event', event_slug=event.slug ) %} {% set color="transparent" if event.kind == "official" else "transparent" %} - <li class="hub-event border p-2 align-items-center {% if not first %} mt-3{% endif %}"> - <a - href="{{ link }}" - title="{{ event.name }}" - class="hub-event__name a a-bold" - > - {{ event.name }} - </a> - <time - datetime="{{event.schedule_start}}" - class="hub-event__date text-nowrap" - > - {{ event.schedule_start | strfdates }} - </time> - <time - class="hub-event__time text-nowrap" - > - {{ event.schedule_start | strftimehm }} - {{ event.schedule_end | strftimehm }} - </time> + {% set is_past = event.schedule_end < now %} + {% set is_upcomping = event.schedule_start > now %} + {% set is_now = not is_past and not is_upcomping %} + + <li + class="hub-event rounded-3 px-3 py-2 + {% if is_past %}hub-event--past{% endif %} + {% if is_upcomping %}hub-event--upcoming{% endif %}" + > + <div class="hub-event__day"> + {{ _(event.schedule_start | weekday_abbrev) }} + </div> + <div class="hub-event__time"> + {{ event.schedule_start | strftimehm }} + </div> + <div class="hub-event__name-container"> + <a class="hub-event__name" href="{{ link }}"> + <div> + <!-- Extra div for text overflow ellipsis --> + {{ event.name }} + </div> + </a> + {% if is_now %} + <div class="hub-event__now"> + {{ _('NOW') }} + </div> + {% endif %} + </div> + <div class="hub-event__tags"> + <div + class="badge rounded-pill text-uppercase"> + {{ event.assembly.name }} + </div> + </div> <div class="hub-event__buttons"> - {%- if assembly and assembly.slug and (event.owner_id == request.user.id or can_manage_sos) -%} - {{ icon_public(event.is_public) }} - {{ fbtns.edit(url('plainui:sos_edit', assembly_slug=assembly.slug, event_slug=event.slug), color=color) }} - {% endif %} - {{ fbtns.share(link, color=color) }} - {{ fbtns.schedule(event.id, scheduled, color=color) }} - {{ fbtns.fav(event.id, "event", faved, color=color) }} - {{ fbtns.report(link, color=color) }} + {% if is_past %} + {% set button_color = 'grey' %} + {% elif is_now %} + {% set button_color = 'dark' %} + {% else %} + {% set button_color = 'primary' %} + {% endif %} + + + {%- if assembly and assembly.slug and (event.owner_id == request.user.id or can_manage_sos) -%} + {{ icon_public(event.is_public) }} + {{ fbtns.edit(url('plainui:sos_edit', assembly_slug=assembly.slug, event_slug=event.slug), color=button_color) }} + {% endif %} + {{ fbtns.share(link, color=button_color) }} + {{ fbtns.schedule(event.id, scheduled, color=button_color) }} + {{ fbtns.fav(event.id, "event", faved, color=button_color) }} + {{ fbtns.report(link, color=button_color) }} </div> </li> {%- endmacro %} diff --git a/src/plainui/jinja2/plainui/fahrplan.html b/src/plainui/jinja2/plainui/fahrplan.html index 0421ed3d4349c6b7f49cc0e22ec4f7ce0c4d98d6..9b0ca95404917c3503957a8b1aca6408e4d9b1bd 100644 --- a/src/plainui/jinja2/plainui/fahrplan.html +++ b/src/plainui/jinja2/plainui/fahrplan.html @@ -29,7 +29,7 @@ <a href="#" class="btn m-2">{{ _("QR-Code") }}</a> </div> #} - <form method="GET" class="p-3 mb-2 hub-fahrplan__filter-block bg-opaque"> + <form method="GET" class="p-3 mb-2 hub-fahrplan__filter-block bg-black"> <input type="hidden" name="mode" value="{{mode}}"> {% if show_day_filters %}<input type="hidden" name="show_day_filters" value="y">{% endif %} {% if show_assembly_filters %}<input type="hidden" name="show_assembly_filters" value="y">{% endif %} @@ -95,9 +95,7 @@ {# <hr class="hub-spacer"> #} {% if mode == 'list' %} - <div class="border p-3 bg-opaque"> {{ list_events.list(events, my_favorite_events, my_scheduled_events) }} - </div> <hr class="hub-spacer"> {% endif %} diff --git a/src/plainui/locale/de/LC_MESSAGES/django.po b/src/plainui/locale/de/LC_MESSAGES/django.po index 9800693fdf9dd0531c5ffe6ff0ef0d0646adce71..15851830692453d6ae6a9e5f503e2e7ef4c2e0bf 100644 --- a/src/plainui/locale/de/LC_MESSAGES/django.po +++ b/src/plainui/locale/de/LC_MESSAGES/django.po @@ -302,6 +302,9 @@ msgstr "hilfreiche Teams" msgid "Official Page" msgstr "Offizielle Seite" +msgid "NOW" +msgstr "JETZT" + #, python-format msgid "%(kind)s Event on Track" msgstr "%(kind)s Event auf Track" diff --git a/src/plainui/locale/en/LC_MESSAGES/django.po b/src/plainui/locale/en/LC_MESSAGES/django.po index ddb177a7239f8b126936a95bd85493b808af3e89..5fcb31889a0dc5aa3e3455631e032e97dc46ee7c 100644 --- a/src/plainui/locale/en/LC_MESSAGES/django.po +++ b/src/plainui/locale/en/LC_MESSAGES/django.po @@ -302,6 +302,9 @@ msgstr "" msgid "Official Page" msgstr "" +msgid "NOW" +msgstr "NOW" + #, python-format msgid "%(kind)s Event on Track" msgstr "" diff --git a/src/plainui/static/plainui/fonts/SairaStencilOne-Regular.woff2 b/src/plainui/static/plainui/fonts/SairaStencilOne-Regular.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..d8108517b1e61e766ae2c3b40df4385227c3af9a Binary files /dev/null and b/src/plainui/static/plainui/fonts/SairaStencilOne-Regular.woff2 differ diff --git a/src/plainui/styles/_import-fonts.scss b/src/plainui/styles/_import-fonts.scss index 6027a6dc2f2ff2e5739731183f8faf0c465f7620..d677588af444e97b173e4ad5fd5a7e005b7fa16e 100644 --- a/src/plainui/styles/_import-fonts.scss +++ b/src/plainui/styles/_import-fonts.scss @@ -7,6 +7,14 @@ src: url('fonts/Beon-Regular.woff2') format('woff2'); } +@font-face { + font-family: 'Saira Stencil One'; + font-style: 400; + font-weight: normal; + font-display: swap; + src: url('fonts/SairaStencilOne-Regular.woff2') format('woff2'); +} + /* Text */ /* latin-ext */ @font-face { diff --git a/src/plainui/styles/components/_buttons.scss b/src/plainui/styles/components/_buttons.scss index b4162da22c84221e7ba0e55b0e9a993eef02a40d..0a7bee5e6c6c9a119eea0197bebcd7dec4dc7304 100644 --- a/src/plainui/styles/components/_buttons.scss +++ b/src/plainui/styles/components/_buttons.scss @@ -35,6 +35,18 @@ } } +.btn-grey { + color: $black; + border: 0; + background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 474 650' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M470.745 296.915c-.375-3.324-1.044-6.716-.926-10.068l.678-19.203c.174-4.931.629-9.94.524-14.875-.1-4.735-.74-9.522-1.106-14.242l-1.531-19.693c-.254-3.265.189-6.569.392-9.832.636-10.225 1.172-20.464 1.959-30.679.543-7.065 1.088-14.128 1.632-21.192.286-3.712 1.003-7.658.77-11.377-.36-5.738-1.492-11.53-2.228-17.23-.736-5.701-2.071-11.639-2.248-17.388-.111-3.662 1.041-7.681 1.578-11.298l3.149-21.192c.455-3.056.296-5.338-.027-8.452L471.127 48.7c-1.019-9.794-1.085-19.46-1.233-29.32l-.21-14.05c-.011-.716-.526-1.154-1.228-1.232a97117.88 97117.88 0 01-24.572-2.708c-3.215-.353-6.471-.896-9.702-1.067-2.51-.134-5.104.293-7.603.484-9.308.716-18.612 1.53-27.927 2.149-6.992.464-14.055.377-21.06.544l-13.29.317c-.598.015-2.208.002-1.578.037-.94-.037-1.878-.08-2.817-.12l-29.084-1.221c-6.209-.262-12.399.563-18.588 1.066L296.85 4.83c-1.505.122-3.06.148-4.553.37a3.634 3.634 0 00-.259.045 7.823 7.823 0 00-.283-.027c-14.999-1.22-30.078-2.405-45.115-1.768a2578.471 2578.471 0 01-49.387 1.64c-3.724.086-7.475.048-11.194.26l-.028.002a6.763 6.763 0 00-.506-.11c-1.61-.305-3.249-.5-4.868-.75L152.427.139c-1.842-.284-3.415-.083-5.263.159L132.77 2.184l-14.646 1.92c-1.022.134-2.066.22-3.082.402-.361-.035-.723-.068-1.084-.102l-28.74-2.696c-6.02-.565-11.519.108-17.56.735l-16.23 1.686-5.579.58c-.616.063-2.333.196-1.498.209-8.634.089-17.35-.597-25.977-.886l-8.145-.271C7.841 3.68 2.556 5.483 2.407 8.504c-.55 11.211-1.13 22.42-1.653 33.632C.26 52.75.57 63.452.504 74.079.438 84.165.4 94.25.351 104.338c-.045 9.815.432 19.521.923 29.329.982 19.607 1.111 39.237 2.095 58.841.512 10.195 1.774 20.621 1.307 30.828-.504 11.029-1.46 22.133-1.504 33.171-.045 11.557.9 23.129 1.074 34.687.164 10.801-.535 21.673-.82 32.47a1814.453 1814.453 0 01-2.54 59.781c-.292 4.916-.938 9.948-.884 14.875.051 4.723.775 9.536 1.157 14.242.802 9.853 1.687 19.644 1.94 29.524.26 10.116 1.336 20.515.377 30.605l-1.983 20.893c-.365 3.841-.973 7.745-1.06 11.604-.52 22.554 1.22 45.093 2.752 67.569.69 10.107-.433 20.452-.806 30.562-.362 9.799-.333 19.588-.365 29.395l-.045 13.817c-.004 1.192 1.218 1.273 2.125 1.251 13.92-.333 27.84-.594 41.755-1.062 16.135-.542 32.211-.984 48.353-1.065 15.782-.079 31.538.211 47.319.5 1.01.019 2.023.026 3.034.053.023.004.054.009.103.015.454.057.916.077 1.371.116 4.319.363 8.636.728 12.953 1.092 7.294.615 14.813 1.855 22.141 1.766 14.509-.174 29.026-.95 43.533-1.383 16.334-.488 32.656-1.038 48.984-1.705 15.454-.63 30.842-.321 46.311-.128.575.007 3.425.281 1.451.012.944.128 1.903.19 2.85.283l14.187 1.411 14.691 1.461c1.931.191 3.764.442 5.695.242 9.456-.98 18.891-2.26 28.33-3.391 1.616-.192 3.243-.348 4.855-.581.211-.03.423-.052.635-.076 3.484.868 7.376.943 10.93 1.399l16.265 2.087c2.789.357 5.765 1.088 8.591 1.006 2.86-.081 5.79-.671 8.627-1.001l16.305-1.893 8.347-.969c2.026-.235 4.388-1.24 5.819-2.818.652-.625 1.088-1.294 1.108-1.946a5279.574 5279.574 0 001.521-65.87c.17-10.157 1.576-20.348 2.469-30.462.279-3.169.97-6.465.474-9.627l-3.041-19.378c-.75-4.786-1.989-9.742-2.287-14.583-.287-4.68.293-9.574.438-14.258.303-9.847.576-19.689 1.071-29.528.512-10.157 1.196-20.32 1.454-30.488.276-10.86 1.061-21.833.796-32.693-.281-11.559-1.907-23.186-1.743-34.742.057-3.919.846-7.944 1.285-11.837l2.344-20.788c.347-3.083.084-5.61-.268-8.729l-2.406-21.309'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat; + + &:hover, + &:focus, + &.focus { + background: url("data:image/svg+xml;charset=utf-8,%3Csvg viewBox='0 0 474 650' xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' fill='%23adb5bd'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M470.745 296.915c-.375-3.324-1.044-6.716-.926-10.068l.678-19.203c.174-4.931.629-9.94.524-14.875-.1-4.735-.74-9.522-1.106-14.242l-1.531-19.693c-.254-3.265.189-6.569.392-9.832.636-10.225 1.172-20.464 1.959-30.679.543-7.065 1.088-14.128 1.632-21.192.286-3.712 1.003-7.658.77-11.377-.36-5.738-1.492-11.53-2.228-17.23-.736-5.701-2.071-11.639-2.248-17.388-.111-3.662 1.041-7.681 1.578-11.298l3.149-21.192c.455-3.056.296-5.338-.027-8.452L471.127 48.7c-1.019-9.794-1.085-19.46-1.233-29.32l-.21-14.05c-.011-.716-.526-1.154-1.228-1.232a97117.88 97117.88 0 01-24.572-2.708c-3.215-.353-6.471-.896-9.702-1.067-2.51-.134-5.104.293-7.603.484-9.308.716-18.612 1.53-27.927 2.149-6.992.464-14.055.377-21.06.544l-13.29.317c-.598.015-2.208.002-1.578.037-.94-.037-1.878-.08-2.817-.12l-29.084-1.221c-6.209-.262-12.399.563-18.588 1.066L296.85 4.83c-1.505.122-3.06.148-4.553.37a3.634 3.634 0 00-.259.045 7.823 7.823 0 00-.283-.027c-14.999-1.22-30.078-2.405-45.115-1.768a2578.471 2578.471 0 01-49.387 1.64c-3.724.086-7.475.048-11.194.26l-.028.002a6.763 6.763 0 00-.506-.11c-1.61-.305-3.249-.5-4.868-.75L152.427.139c-1.842-.284-3.415-.083-5.263.159L132.77 2.184l-14.646 1.92c-1.022.134-2.066.22-3.082.402-.361-.035-.723-.068-1.084-.102l-28.74-2.696c-6.02-.565-11.519.108-17.56.735l-16.23 1.686-5.579.58c-.616.063-2.333.196-1.498.209-8.634.089-17.35-.597-25.977-.886l-8.145-.271C7.841 3.68 2.556 5.483 2.407 8.504c-.55 11.211-1.13 22.42-1.653 33.632C.26 52.75.57 63.452.504 74.079.438 84.165.4 94.25.351 104.338c-.045 9.815.432 19.521.923 29.329.982 19.607 1.111 39.237 2.095 58.841.512 10.195 1.774 20.621 1.307 30.828-.504 11.029-1.46 22.133-1.504 33.171-.045 11.557.9 23.129 1.074 34.687.164 10.801-.535 21.673-.82 32.47a1814.453 1814.453 0 01-2.54 59.781c-.292 4.916-.938 9.948-.884 14.875.051 4.723.775 9.536 1.157 14.242.802 9.853 1.687 19.644 1.94 29.524.26 10.116 1.336 20.515.377 30.605l-1.983 20.893c-.365 3.841-.973 7.745-1.06 11.604-.52 22.554 1.22 45.093 2.752 67.569.69 10.107-.433 20.452-.806 30.562-.362 9.799-.333 19.588-.365 29.395l-.045 13.817c-.004 1.192 1.218 1.273 2.125 1.251 13.92-.333 27.84-.594 41.755-1.062 16.135-.542 32.211-.984 48.353-1.065 15.782-.079 31.538.211 47.319.5 1.01.019 2.023.026 3.034.053.023.004.054.009.103.015.454.057.916.077 1.371.116 4.319.363 8.636.728 12.953 1.092 7.294.615 14.813 1.855 22.141 1.766 14.509-.174 29.026-.95 43.533-1.383 16.334-.488 32.656-1.038 48.984-1.705 15.454-.63 30.842-.321 46.311-.128.575.007 3.425.281 1.451.012.944.128 1.903.19 2.85.283l14.187 1.411 14.691 1.461c1.931.191 3.764.442 5.695.242 9.456-.98 18.891-2.26 28.33-3.391 1.616-.192 3.243-.348 4.855-.581.211-.03.423-.052.635-.076 3.484.868 7.376.943 10.93 1.399l16.265 2.087c2.789.357 5.765 1.088 8.591 1.006 2.86-.081 5.79-.671 8.627-1.001l16.305-1.893 8.347-.969c2.026-.235 4.388-1.24 5.819-2.818.652-.625 1.088-1.294 1.108-1.946a5279.574 5279.574 0 001.521-65.87c.17-10.157 1.576-20.348 2.469-30.462.279-3.169.97-6.465.474-9.627l-3.041-19.378c-.75-4.786-1.989-9.742-2.287-14.583-.287-4.68.293-9.574.438-14.258.303-9.847.576-19.689 1.071-29.528.512-10.157 1.196-20.32 1.454-30.488.276-10.86 1.061-21.833.796-32.693-.281-11.559-1.907-23.186-1.743-34.742.057-3.919.846-7.944 1.285-11.837l2.344-20.788c.347-3.083.084-5.61-.268-8.729l-2.406-21.309'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat + } +} + .btn-sm { padding: map-get($spacers, 1); font-size: 1rem; diff --git a/src/plainui/styles/components/_event.scss b/src/plainui/styles/components/_event.scss index 75258bda687de859f437b5cd6612f809a8679f83..65722136677173cf5820d974b5453366ea3ed8e6 100644 --- a/src/plainui/styles/components/_event.scss +++ b/src/plainui/styles/components/_event.scss @@ -1,45 +1,134 @@ .hub-event { + /* store current class for use in nested rules */ + $g: &; + + background-color: $secondary; + border-radius: 1.6rem; + color: $black; + column-gap: 1rem; display: grid; grid-template-areas: - "name name" - "date time" + "day name" + "time tags" "buttons buttons"; grid-template-columns: auto 1fr; - gap: .5rem; + line-height: 1; + row-gap: .5rem; - &__name { - grid-area: name; - text-decoration: none; - flex-grow: 1; + .badge { + background-color: $black; + color: $secondary; + } + + &.hub-event--past { + background-color: $black; + color: $gray-600; - &:hover { - text-decoration: underline; + #{$g}__name { + /* imporant to override link styles */ + color: $gray-600 !important; + text-decoration: line-through; + } + + .badge { + background-color: $gray-600; + color: $black; + } + } + + &.hub-event--upcoming { + background-color: $black; + color: $primary; + + #{$g}__name { + /* imporant to override link styles */ + color: $primary !important; + } + + .badge { + background-color: $primary; + color: $black; } } &__date { + text-align: right; grid-area: date; } + &__day { + font-family: "Saira Stencil One"; + font-size: 1.5rem; + text-transform: uppercase; + } + &__time { - grid-area: time; + font-family: "beon"; + } + + &__name-container { + align-items: baseline; + display: flex; + font-size: 1.5rem; + gap: .5rem; + grid-area: name; + /* min-width for text overflow ellipsis */ + min-width: 0; + } + + &__name { + /* imporant to override link styles */ + color: $black !important; + /* min-width for text overflow ellipsis */ + min-width: 0; + /* imporant to override link styles */ + text-decoration: none !important; + + /* Extra div for text overflow ellipsis */ + > div { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + &__now { + color: $white; + font-family: "Saira Stencil One"; + } + + &__tags { + display: flex; + gap: .5rem; + grid-area: tags; + /* min-width for text overflow ellipsis */ + min-width: 0; + + /* Extra div for text overflow ellipsis */ + > div { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } } &__buttons { - align-items: flex-start; display: flex; grid-area: buttons; gap: .5rem; + justify-content: flex-end; } - @include media-breakpoint-up("sm") { + @include media-breakpoint-up("md") { + column-gap: 1rem; grid-template-areas: - "name name name" - "date time buttons"; + "day name buttons" + "time tags buttons"; grid-template-columns: auto auto 1fr; - + row-gap: .25rem; &__buttons { + align-items: center; justify-content: flex-end; } } diff --git a/src/plainui/styles/hub-assembly.scss b/src/plainui/styles/hub-assembly.scss index 556bb5df2b55a63490ed81c6dbf258e019a3d30f..d7c92dca9b3b2072d433b0b2a9f6ea2acb820fb2 100644 --- a/src/plainui/styles/hub-assembly.scss +++ b/src/plainui/styles/hub-assembly.scss @@ -9,6 +9,7 @@ @import "./sections/fahrplan"; +@import "./components/event"; @import "./components/header"; @import "./components/image"; @import "./components/buttons";