Merge branch 'weeman/event-list-camp23' into 'develop'

Camp23 Event-Liste

Closes #330

See merge request hub/hub!667

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

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"
+    {% 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>
-      <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>
+        {% 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 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=color) }}
+            {{ fbtns.edit(url('plainui:sos_edit', assembly_slug=assembly.slug, event_slug=event.slug), color=button_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) }}
+        {{ 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 %}

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 %}
 

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"

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 ""

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 {

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;

src/plainui/styles/components/_event.scss

 .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;
+
+        #{$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;
+        }
 
-        &:hover {
-            text-decoration: underline;
+        .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;
         }
     }

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";