From a4d44ec02f3a32cec7475ba165510df708cf4dd8 Mon Sep 17 00:00:00 2001
From: smtw <code@smtw.de>
Date: Sat, 18 Dec 2021 17:27:10 +0100
Subject: [PATCH] opaque background, multiple component updates

---
 .../plainui/components/list_assemblies.html   |  4 +--
 .../plainui/components/list_events.html       | 26 +++++++++----------
 .../jinja2/plainui/components/list_rooms.html |  4 +--
 .../jinja2/plainui/components/listbox.html    |  2 +-
 .../jinja2/plainui/components/markdown.html   |  4 +--
 .../jinja2/plainui/components/tile_board.html |  6 ++---
 src/plainui/styles/_util-classes.scss         |  5 ++++
 .../styles/components/_event-info.scss        |  1 +
 src/plainui/styles/utils/_globals.scss        |  3 ++-
 9 files changed, 31 insertions(+), 24 deletions(-)

diff --git a/src/plainui/jinja2/plainui/components/list_assemblies.html b/src/plainui/jinja2/plainui/components/list_assemblies.html
index 44561a7ce..01ebdac0f 100644
--- a/src/plainui/jinja2/plainui/components/list_assemblies.html
+++ b/src/plainui/jinja2/plainui/components/list_assemblies.html
@@ -22,7 +22,7 @@
     {% set link = url('plainui:assembly', assembly_slug=assembly.slug ) %}
     {% set color="transparent" if assembly.is_official else "transparent" %}
 
-    <li class="d-flex border border-{{ color }} bg-gradient-{{ color }}-horizontal p-2 align-items-center font-headings{% if not first %} mt-3{% endif %}">
+    <li class="d-flex border border-{{ color }} bg-opaque p-2 align-items-center font-headings{% if not first %} mt-3{% endif %}">
         <a
             href="{{ link }}"
             title="{{ assembly.name }}"
@@ -68,7 +68,7 @@
 {% macro tile(assembly, faved) -%}
     {% set link = url('plainui:assembly', assembly_slug=assembly.slug ) %}
     {% set color="transparent" if assembly.is_official else "transparent" %}
-    <article class="h-100 d-flex flex-column border border-{{ color }}-dark bg-gradient-{{ color }}-vertical">
+    <article class="h-100 d-flex flex-column border border-white bg-opaque">
         <a
             href="{{ link }}"
             class="text-decoration-none text-white"
diff --git a/src/plainui/jinja2/plainui/components/list_events.html b/src/plainui/jinja2/plainui/components/list_events.html
index 42de1b199..b55d06c84 100644
--- a/src/plainui/jinja2/plainui/components/list_events.html
+++ b/src/plainui/jinja2/plainui/components/list_events.html
@@ -24,8 +24,8 @@
 
 {% macro list_el(event, faved, scheduled, first) -%}
     {% set link = url('plainui:event', event_slug=event.slug ) %}
-    {% set color="plattform" if event.kind == "official" else "assembly" %}
-    <li class="d-flex border border-{{ color }} bg-gradient-{{ color }}-horizontal p-2 align-items-center font-headings{% if not first %} mt-3{% endif %}">
+    {% set color="transparent" if event.kind == "official" else "transparent" %}
+    <li class="d-flex border border-white bg-opaque px-2 align-items-center font-headings{% if not first %} mt-3{% endif %}">
         <a href="{{ link }}" title="{{ event.name }}" class="text-white mr-auto">
             {{ event.name }}
         </a>
@@ -47,7 +47,7 @@
         <div class="rc3-slider">
             <ul class="rc3-slider__container row row-cols-1 row-cols-sm-2 row-cols-lg-3 flex-nowrap m-0 list-unstyled">
             {% for event in events %}
-                <li class="rc3-slider__item col mb-2{% if loop.first %} pl-0{% endif %}{% if loop.last %} pr-0{% endif %}">
+                <li class="rc3-slider__item col p-0 mb-2 mr-2 border border-white {% if loop.first %} {% endif %}{% if loop.last %}mr-0{% endif %}">
                     {{ tile( event,
                         faved=true if event.id | safe in my_favorite_events,
                         scheduled=true if event.id | safe in my_scheduled_events) }}
@@ -64,7 +64,7 @@
     {% if events %}
         <ul class="row row-cols-1 row-cols-md-2 row-cols-xl-3 list-unstyled mb-0">
         {% for event in events %}
-            <li class="col mb-3">
+            <li class="col mb-0 border border-white p-0">
                 {{ tile( event,
                     faved=true if event.id | safe in my_favorite_events,
                     scheduled=true if event.id | safe in my_scheduled_events) }}
@@ -78,8 +78,8 @@
 
 {% macro tile(event, faved, scheduled, custom_class="h-100") -%}
     {% set link = url('plainui:event', event_slug=event.slug ) %}
-    {% set color="plattform" if event.kind == "official" else "assembly" %}
-    <article class="{{ custom_class }} d-flex flex-column border border-{{ color }}-dark bg-gradient-{{ color }}-vertical">
+    {% set color="transparent" if event.kind == "official" else "transparent" %}
+    <article class="{{ custom_class }} d-flex flex-column m-0 bg-opaque">
         <a
             href="{{ link }}"
             class="text-decoration-none text-white"
@@ -155,8 +155,8 @@
 
 {% macro tile_stream(room, faved, scheduled, custom_class="h-100") -%}
     {% set link = url('plainui:event', event_slug=room.current_event.slug ) if room.current_event else '' %}
-    {% set color="plattform" if room.current_event.kind == "official" else "assembly" %}
-    <article class="{{ custom_class }} d-flex flex-column">
+    {% set color="transparent" if room.current_event.kind == "official" else "transparent" %}
+    <article class="{{ custom_class }} d-flex flex-column border border-1 border-white bg-opaque">
 
             <figure class="mb-2">
                 {% if room.voc_stream %}
@@ -269,21 +269,21 @@
 {%- endmacro -%}
 
 {%- macro livestream(room, my_favorite_events, my_scheduled_events) -%}
-    <div class="row border p-6 mx-0">
+    <div class="row mx-0">
         <div class="col-sm-12 col-lg-7 col-xl-8 mb-3 mb-lg-0">
             {{ tile_stream(room, faved=true if room.current_event and room.current_event.id | safe in my_favorite_events,
                 scheduled=true if room.current_event and room.current_event.id | safe in my_scheduled_events) }}
         </div>
-        <div class="col-sm-12 col-lg-5 col-xl-4 d-lg-flex flex-lg-column flex-lg-nowrap">
-            <h3 class="text-center bg-info p-3 text-white h3">{{_("Coming Up Next")}}</h3>
+        <div class="col-sm-12 p-0 col-lg-5 col-xl-4 d-lg-flex flex-lg-column flex-lg-nowrap border border-1 border-white">
+            <h3 class="text-center bg-info p-2 m-0 text-dark h3">{{_("Coming Up Next")}}</h3>
             {% if room.next_event %}
                 {{ tile(room.next_event, faved=true if room.next_event.id | safe in my_favorite_events,
-                    scheduled=true if room.next_event.id | safe in my_scheduled_events, custom_class="flex-lg-grow-1 mb-3") }}
+                    scheduled=true if room.next_event.id | safe in my_scheduled_events, custom_class="flex-lg-grow-1 mb-0") }}
             {% else %}
                 <p class="text-center my-6 flex-lg-grow">{{ _("no entry availaible")}}</p>
             {% endif %}
             {% if room.room.id %}
-                <a href="{{ url('plainui:room', room_slug=room.room.slug) }}" class="mt-3 mt-lg-auto btn btn-secondary btn-lg btn-block">{{ _("View next Events") }}</a>
+                <a href="{{ url('plainui:room', room_slug=room.room.slug) }}" class="mt-3 mt-lg-auto btn btn-transparent btn-lg btn-block">{{ _("View next Events") }}</a>
             {% endif %}
         </div>
     </div>
diff --git a/src/plainui/jinja2/plainui/components/list_rooms.html b/src/plainui/jinja2/plainui/components/list_rooms.html
index ba2bc5706..145e4bf95 100644
--- a/src/plainui/jinja2/plainui/components/list_rooms.html
+++ b/src/plainui/jinja2/plainui/components/list_rooms.html
@@ -21,7 +21,7 @@
 {% macro list_el(room) -%}
     {% set link = url('plainui:room', room_slug=room.slug) %}
     {% set color="white" %}
-    <li class="mt-3 d-flex border border-{{ color }} p-2 align-items-center font-headings">
+    <li class="mt-3 d-flex bg-opaque border border-{{ color }} p-2 align-items-center font-headings">
         <span class="btn-icon-big text-white" title="{{ _("roomtype") ~ ': ' ~ _(room.room_type) }}">
             {{ icon(room.room_type) }}
         </span>
@@ -29,7 +29,7 @@
             {{ room.name }}
         </a>
         {% if room.capacity and room.capacity != None and room.capacity > 0 %}
-            <span class="btn-icon-big text-white">{{ icon("capacity") }}</span>
+            <span class="btn-icon-big btn-transparent text-white">{{ icon("capacity") }}</span>
             <span class="mr-5" title="{{ _("capacity") }}">
             {%- if room.occupants and room.occupants != None -%}
                 {{ room.occupants ~ ' / '}}
diff --git a/src/plainui/jinja2/plainui/components/listbox.html b/src/plainui/jinja2/plainui/components/listbox.html
index 0ce637000..8dde91e99 100644
--- a/src/plainui/jinja2/plainui/components/listbox.html
+++ b/src/plainui/jinja2/plainui/components/listbox.html
@@ -9,7 +9,7 @@
                 {% else %}
                     {% set link = item.link %}
                 {% endif %}
-                <li class="mt-2 d-flex border border-primary bg-gradient-plattform-horizontal p-2 align-items-center">
+                <li class="mt-2 d-flex border border-primary bg-opaque p-2 align-items-center">
                     <a href="{{ link }}" class="text-white mr-auto">
                         {{item.name}}
                     </a>
diff --git a/src/plainui/jinja2/plainui/components/markdown.html b/src/plainui/jinja2/plainui/components/markdown.html
index 8f6c6f9ab..b956846fc 100644
--- a/src/plainui/jinja2/plainui/components/markdown.html
+++ b/src/plainui/jinja2/plainui/components/markdown.html
@@ -1,11 +1,11 @@
 {% macro markdown(markdown) -%}
-    <section class="rc3-markdown border p-6">
+    <section class="rc3-markdown border bg-opaque p-3">
         {{- markdown -}}
     </section>
 {%- endmacro %}
 
 {% macro markdown_plain(markdown, customClass=null) -%}
-    <section class="rc3-markdown{% if customClass %} {{customClass}}{% endif %}">
+    <section class="rc3-markdown border bg-opaque p-3 {% if customClass %} {{customClass}}{% endif %}">
         {{- markdown -}}
     </section>
 {%- endmacro %}
diff --git a/src/plainui/jinja2/plainui/components/tile_board.html b/src/plainui/jinja2/plainui/components/tile_board.html
index 50b9afac2..f56174bc3 100644
--- a/src/plainui/jinja2/plainui/components/tile_board.html
+++ b/src/plainui/jinja2/plainui/components/tile_board.html
@@ -48,7 +48,7 @@
             <li class="pr-2">
                 <a
                     href="{{ item.edit_link }}"
-                    class="btn btn-icon btn-secondary"
+                    class="btn btn-icon btn-transparent"
                     title="{{_("Edit")}}"
                 >
                     <svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" fill="currentColor" class="bi bi-pencil" viewBox="0 0 16 16">
@@ -62,7 +62,7 @@
             <li class="pr-2">
                 <button
                     type="submit"
-                    class="btn btn-icon btn-secondary"
+                    class="btn btn-icon btn-transparent"
                     title="{{_("Delete")}}"
                     form="{{ item.delete_form_id }}"
                     name="id"
@@ -80,7 +80,7 @@
             <li>
                 <a
                     href="{{ item.report_link }}"
-                    class="btn btn-icon btn-secondary"
+                    class="btn btn-icon btn-transparent"
                     title="{{_("Report Content")}}"
                 >
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-diamond-fill" viewBox="0 0 16 16">
diff --git a/src/plainui/styles/_util-classes.scss b/src/plainui/styles/_util-classes.scss
index 283654fa0..abcd7e198 100644
--- a/src/plainui/styles/_util-classes.scss
+++ b/src/plainui/styles/_util-classes.scss
@@ -87,6 +87,11 @@ h6,
     background-color: $bg-opacity-color;
 }
 
+.bg-opaque {
+    background-color: $bg-opacity-color;
+    backdrop-filter: $bg-filter-var;
+}
+
 .fs-medium {
     font-size: $medium-font-size;
 }
diff --git a/src/plainui/styles/components/_event-info.scss b/src/plainui/styles/components/_event-info.scss
index 63bf01676..50c1a3e92 100644
--- a/src/plainui/styles/components/_event-info.scss
+++ b/src/plainui/styles/components/_event-info.scss
@@ -2,6 +2,7 @@
     display: flex;
     flex-flow: column nowrap;
     background-color: $bg-opacity-color;
+    backdrop-filter: $bg-filter-var;
 
     &__img {
         object-fit: cover;
diff --git a/src/plainui/styles/utils/_globals.scss b/src/plainui/styles/utils/_globals.scss
index d11501602..394d171f5 100644
--- a/src/plainui/styles/utils/_globals.scss
+++ b/src/plainui/styles/utils/_globals.scss
@@ -27,7 +27,8 @@ $spacers: (
     17: ($spacer * 8) //128
 );
 
-$bg-opacity-color: rgba(0,0,0,0.5);
+$bg-opacity-color: rgba(0, 0, 0, 0.4);
+$bg-filter-var: blur(1px);
 
 $sizes: (
     170: 10.625rem,
-- 
GitLab