first implementation of new layout

fet2020/static/js/toolkit-screen@1.0.0.js

@@ -0,0 +1,34 @@
+(() => {
+  // packages/$screen/src/index.js
+  function src_default(Alpine) {
+    let data = Alpine.reactive({screensize: window.innerWidth});
+    const defaultBreakpoints = {
+      xs: 0,
+      sm: 640,
+      md: 768,
+      lg: 1024,
+      xl: 1280,
+      "2xl": 1536
+    };
+    const breakpoints = window.AlpineMagicHelpersConfig && window.AlpineMagicHelpersConfig.breakpoints ? window.AlpineMagicHelpersConfig.breakpoints : defaultBreakpoints;
+    let update;
+    window.addEventListener("resize", () => {
+      clearTimeout(update);
+      update = setTimeout(() => data.screensize = window.innerWidth, 150);
+    });
+    Alpine.magic("screen", (el) => (breakpoint) => {
+      let width = data.screensize;
+      if (Number.isInteger(breakpoint))
+        return breakpoint <= width;
+      if (breakpoints[breakpoint] === void 0) {
+        throw Error("Undefined $screen property: " + breakpoint + ". Supported properties: " + Object.keys(breakpoints).join(", "));
+      }
+      return breakpoints[breakpoint] <= width;
+    });
+  }
+
+  // packages/$screen/builds/cdn.js
+  document.addEventListener("alpine:init", () => {
+    window.Alpine.plugin(src_default);
+  });
+})();

fet2020/templates/members/jobs_list.html

@@ -0,0 +1,17 @@
+{% regroup job_members by job.name as all_jobmem_list %}
+
+{% for jobmem in all_jobmem_list %}
+    <article id="{{jobmem.list.0.job.slug}}" class="members-article">
+        <a href="#{{jobmem.list.0.job.slug}}" class="title">
+            <i class="far fa-link"></i>
+            <h2>{{jobmem.grouper}}</h2>
+        </a>
+        <div class="members-listing">
+            {% for jm in jobmem.list %}
+                {% with member=jm.member %}
+                {% include 'members/partials/_member.html' %}
+                {% endwith %}
+            {% endfor %}
+        </div>
+    </article>
+{% endfor %}

fet2020/templates/members/members_list.html

@@ -0,0 +1,8 @@
+<div class="grid-x align-bottom">
+    {% for member in members %}
+        <div class="cell large-2 medium-3 small-6 padding-right-1" style="text-align: center">
+            <h2>{{member.firstname}} {{member.surname}}</h2>
+            {% include 'members/partials/_member.html' %}
+        </div>
+    {% endfor %}
+</div>

fet2020/templates/members/partials/_member.html

@@ -0,0 +1,8 @@
+<figure>
+    <a href="{{ member.get_absolute_url }}">
+        <img loading="lazy" src="{{ member.image.thumb.url }}" alt="Portraitfoto von {{ member.firstname }}" class="w-36 h-36 bg-white">
+        <figcaption>
+            <h3>{{ member.firstname }} {{ member.surname }}</h3>
+        </figcaption>
+    </a>
+</figure>

fet2020/templates/members/partials/_member_details.html

@@ -0,0 +1,71 @@
+{#  This template shows one member and all the details (that are ment for public) including a list of current jobs #}
+{% load softhyphen_tags %}
+{% load static %}
+
+<section class="flex-grow max-w-prose my-8 sm:my-0 text-justify text-gray-800">
+    <!-- Alternativtext auf jede Person anpassen: Name im alt="" dynamisch erzeugen -->
+    <img loading="lazy" src="{{ member.image.portrait.url }}" alt="Portraitfoto von {{ member.firstname }} {{ member.surname }}" class="md:float-left w-36 mr-2 mb-2">
+    <div x-data="{ expandList: false }">
+        <h2 class="mb-2 text-lg text-gray-900 text-left">{{ member.firstname }} {{ member.surname }}</h2>
+        <div class="mb-2">
+            Spitzname: {{ member.nickname }} <br>
+            Mailaccount: {{ member.mailaccount }} <br>
+        </div>
+        <div class="mb-2">
+            {{ member.description|softhyphen|safe }}
+        </div>
+        {% if jobs %}
+            <h3 class="group mt-4 mb-2 text-lg text-gray-900">Ehrenamtliche Tätigkeiten:
+                <button class="inline float-right text-sm px-2 py-1 text-gray-600 md:text-gray-500 group-hover:text-gray-600 border rounded border-gray-500 md:border-gray-400 group-hover:border-gray-500"
+                    @click="expandList = ! expandList"
+                >
+                    <span x-show="!expandList">Mehr</span><span x-show="expandList">Weniger</span><span class="hidden md:inline"> anzeigen</span>
+                    <i class="fa-fw fa-solid fa-angle-left transition transform -ml-1"
+                        :class="expandList ? '-rotate-90' : ''"
+                    ></i>
+                </button>
+            </h3>
+
+            <ul class="flex flex-col gap-1">
+                {% for jobm in jobs %}
+                    <li class="flex flex-row flex-wrap">
+                        <span>{{ jobm.job.name }}:</span>
+                        <span class="ml-2 text-gray-600">{{ jobm.job_start|date }} -</span>
+                    </li>
+                {% endfor %}
+            </ul>
+            <ul class="flex flex-col gap-1 mt-1"
+                x-show="expandList"
+                x-transition:enter="transition duration-100 ease-in"
+                x-transition:enter-start="opacity-0"
+                x-transition:enter-end="opacity-100"
+                x-transition:leave="transition duration-100 ease-out"
+                x-transition:leave-start="opacity-100"
+                x-transition:leave-end="opacity-0"
+            >
+                {% for jobm in jobs %}
+                    <li class="flex flex-row flex-wrap">
+                        <span>{{ jobm.job.name }}:</span>
+                        <span class="ml-2 text-gray-600">{{ jobm.job_start|date }} -</span>
+                    </li>
+                {% endfor %}
+            </ul>
+        {% endif %}
+    </div>
+</section>
+
+<script src="{% static 'gumshoe.js' %}"></script>
+<script src="{% static 'smooth-scroll.js' %}"></script>
+<script>
+    var spy = new Gumshoe('#scrollspy-subNav a', {
+        /***** Scrollspy *****/ // Active classes
+        navClass: 'font-semibold', // applied to the nav list item
+    });
+
+    /***** SmoothScroll *****/ // All animations will take exactly 500ms
+    var scroll = new SmoothScroll('a[href*="#"]', {
+        speed: 750,
+        speedAsDuration: true,
+        easing: 'easeInOutQuad'
+    });
+</script>