Initial

templates/events.html

@@ -0,0 +1,43 @@
+{% if events %}
+<div class="col grid-margin-md stretch-card d-flex_" style="font-size: x-large;">
+ <div class="card bg-transparent border-0">
+  <div class="card-body">
+    <div class="d-flex justify-content-between"></div>
+    {% for event in events %}
+      <div class="moreDates" {% if loop.index > 3 %} style="display: none;" {% endif %}>
+        <div class="row">
+            <div class="pt-1 border-bottom {% if loop.index == 1 %} border-top {% endif %} col">
+              <div class="d-flex justify-content-center align-items-center">
+                <h1 class="mr-5 text-primary font-weight-bold text-info">{{ event["day"] }}</h1>
+                  <div>
+                    <p class="font-weight-bold mb-0 text-dark">{{ event["month"] }}</p>
+                    <p class="mb-2">{{ event["year"] }}</p>
+                  </div>
+              </div>
+            </div>
+            <div class="pt-1 border-bottom {% if loop.index == 1 %} border-top {% endif %} col pl-3">
+              <p class="text-dark font-weight-bold mb-0">
+                  {{ event["description"] }} 
+                  {% if event.get("location") %} @{{ event["location"] }} {% endif %}
+              </p>
+              <p class="mb-0">{{ event["time"] }}</p>
+            </div>
+          </div>
+    </div>
+    {% endfor %}
+    {% if moreEvents %}
+    <button id="moreDatesButton" class="float-right mt-3 btn btn-light" onClick=showAdditionalDates()>Mehr..</button>
+    {% endif %}
+   </div>
+ </div>
+</div>
+<!-- mehr Termine Button -->
+<script>
+  function showAdditionalDates(){
+    Array.from(document.getElementsByClassName("moreDates")).forEach(element => {
+      element.style.display = "";
+    });
+    document.getElementById("moreDatesButton").style.display = "none"
+  }
+</script>
+{% endif %}