fixed responsive design, pics and notes

static/css/style.css

@@ -1,5 +1,6 @@
 html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
 .wrapper{min-height:100%;display:grid;grid-template-rows:auto 1fr auto;}
+.dc-responsive{display:block;overflow-x:auto}
 html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
 body{margin:0;font-weight:500;-webkit-font-smoothing:antialiased;}
 article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
@@ -65,14 +66,19 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .dc-main,#main{transition:margin-left .4s}
 .dc-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
 .dc-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
-.dc-bar{width:100%;overflow:hidden}.dc-center .dc-bar{display:inline-block;width:auto}
+@media (min-width:562px) {.dc-bar{width:100%;overflow:hidden}.dc-center .dc-bar{display:inline-block;width:auto}
 .dc-bar .dc-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
 .dc-bar .dc-dropdown-hover,.dc-bar .dc-dropdown-click{position:static;float:left}
-.dc-bar .dc-button{white-space:normal;padding:16px}
-.dc-bar {padding:1% 16px;float:left;width:100%;overflow:hidden;display:block}.dc-center .dc-bar{display:inline-block;width:auto}
+.dc-bar .dc-button{white-space:normal;padding:16px} .dc-pushdown{padding-bottom:55px}}
+@media (max-width:561px){.dc-bar{padding:1% 16px;float:left;width:100%;overflow:hidden;display:block;float:center}.dc-center .dc-bar{display:inline-block;width:auto}
+.dc-bar-item{padding:1% 16px;float:left;width:16%;border:none;display:block;outline:0}
+.dc-bar-item{float:none;width:100%;}
+.dc-pushdown{padding-bottom:201px}}
+@media (max-width:500px){.dc-pushdown{padding-bottom:180px}}
+
+
 .dc-bar-block .dc-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
 .dc-bar-block.dc-center .dc-bar-item{text-align:center}.dc-block{display:block;width:100%}
-.dc-responsive{display:block;overflow-x:auto}
 .dc-container:after,.dc-container:before,.dc-panel:after,.dc-panel:before,.dc-row:after,.dc-row:before,.dc-row-padding:after,.dc-row-padding:before,
 .dc-cell-row:before,.dc-cell-row:after,.dc-clear:after,.dc-clear:before,.dc-bar:before,.dc-bar:after{content:"";display:table;clear:both}
 .dc-col,.dc-half,.dc-third,.dc-twothird,.dc-threequarter,.dc-quarter{float:left;width:100%}
@@ -218,6 +224,13 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 @keyframes move-forever4 {0% {transform: translate(-90px, 0%);}100% {transform: translate(85px, 0%);}}
 
 
+/* image gallery */
+div.gallery{margin:5px;border:1px solid #ccc;float:left;height:195px;width:180px;overflow-x:hidden}
+div.gallery:hover{border:1px solid #777;}
+div.gallery img {width:100%;height:auto;}
+div.desc{padding:15px;text-align:center;}
+
+
 /* table */
 .tg {border-collapse:collapse;border-spacing:0;margin:0px auto;}
 .tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;overflow:hidden;padding:10px 5px;word-break:normal;}
@@ -228,4 +241,4 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .tg .tg-0pky{border-color:inherit;text-align:left;vertical-align:top}
 .tg .tg-7btt{border-color:inherit;font-weight:bold;text-align:center;vertical-align:top}
 .tg .tg-rvyq{border-color:inherit;font-style:italic;font-weight:bold;text-align:center;vertical-align:top}
-@media screen and (max-width: 767px) {.tg {width: auto !important;}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;margin: auto 0px;}}
+@media screen and (max-width: 767px) {.tg {width: auto !important;table-layout:fixed;width:100%}.tg col {width: auto !important;}.tg-wrap {overflow-x: auto;-webkit-overflow-scrolling: touch;margin: auto 0px;}}

templates/about_page.html

@@ -1,10 +1,42 @@
 {% extends 'base.html' %}
+{% load static %}
 {% block title %}Über uns - {{block.super}}{% endblock title %}
 {% block content %}
 <div class="dc-container">
 <h1 class="dc-center dc-xxlarge">Über die Impuls-Tagung</h1>
 <div class="dc-page-container">
 <p class="dc-center dc-medium">Im Fokus der Im·Puls Tagung liegt die Suche nach der eigenen Lebensaufgabe. Die eigenen LebensIm·Pulse zu finden und zu greifen ist gerade für junge Erwachsene eine drängende Frage. Es scheint an der Zeit den eigenen Weg zu gehen, doch wonach soll ich ihn ausrichten? Der Antwort dieser Frage näher zu kommen findet alljährlich die Im·Puls-Tagung zu wechselnden Themen statt.</p>
+
+<section class="dc-container dc-center">
+<div class='gallery'>
+<a href="{% static 'pictures/2017.webp' %}" >
+<img src="{% static 'pictures/2017.webp' %}" width="632px" height="442px" async> </a>
+</div>
+<div class='gallery'>
+<a href="{% static 'pictures/2018.webp' %}" >
+<img src="{% static 'pictures/2018.webp' %}" width="632px" height="442px" async> </a>
+</div>
+<div class='gallery'>
+<a href="{% static 'pictures/2019.webp' %}" >
+<img src="{% static 'pictures/2019.webp' %}" width="632px" height="442px" async> </a>
+</div>
+<div class='gallery'>
+<a href="{% static 'pictures/2020.webp' %}" >
+<img src="{% static 'pictures/2020.webp' %}" width="632px" height="442px" async> </a>
+</div>
+<div class='gallery'>
+<a href="{% static 'pictures/2021.webp' %}" >
+<img src="{% static 'pictures/2021.webp' %}" width="632px" height="442px" async> </a>
+</div>
+<div class='gallery'>
+<a href="{% static 'pictures/2022.webp' %}" >
+<img src="{% static 'pictures/2022.webp' %}" width="632px" height="442px" async> </a>
+</div>
+<div class='gallery'>
+<a href="{% static 'pictures/2023.webp' %}" >
+<img src="{% static 'pictures/2023.webp' %}" width="632px" height="442px" async> </a>
+</div>
+</section>
 </div>
 </div>
 {% endblock content %}

templates/anmeldung.html

@@ -3,7 +3,7 @@
 {% include static %}
 {% block content %}
 
-<section class="dc-container dc-padding">
+<section class="dc-container dc-padding dc-responsive">
 <h1 class="dc-xxlarge dc-center dc-padding">Anmeldung</h1>
 <div class="dc-container dc-padding">
 <div class="dc-container dc-round-small dc-center dc-padding dc-formula-background">
@@ -80,10 +80,19 @@
 <input style="width:100%" class="dc-padding-small dc-border-small dc-button dc-border-white" type="submit" value="Senden">
 </form>
 </div>
-<div class="dc-padding ">
+<div class="dc-padding">
 <h2 class="dc-large dc-center dc-padding"">Hinweise</h2>
 <ol class="dc-medium">
-<li></li>
+<li>Preise bei Anmeldung vor Weihnachten: 70€ regulär, 40€ ermäßigt.</li>
+<li>Preise bei Anmeldung nach Weihnachten: 80€ regulär, 50€ ermäßigt.</li>
+<li>Grundsätzlich soll jedem die Teilnahme ermöglicht werden, wer den Beitrag also nicht aufbringen kann ist trotzdem herzlich eingeladen. Details sind mit dem Tagungsbüro zu vereinbaren.</li>
+<li>Stornierung bis 1 Monat vor Tagungsbeginn mit vollständiger Erstattung möglich.</li>
+<li>Bei Stornierung bis 2 Wochen vor Tagungsbeginn werden 50% des Beitrages erstattet.</li>
+<li>Bei Stornierung ab 2 Wochen vor Tagungsbeginn können keine gewöhnlichen Stornierungen mehr vorgenommen werden.</li>
+<li>Zu jeder Zeit kann eine Stornierung aus wichtigem Grund vorgenommen werden. Dies ist mit dem Tagungsbüro abzusprechen, die Erstattung richtet sich nach Einzelfall.</li>
+<li>Die finanzielle Aufstellung der Tagung wird auf der Website transparent bekannt gegeben.</li>
+<li>Während der Tagung ist für umfassende Verpflegung gesorgt, grundsätzlich wird vegetarisch gekocht. Besondere Bedürfnisse sind bei der Anmeldung anzugeben.</li>
+<li>Die Tagung findet in der <a href="https://christengemeinschaft.de/gemeinden/stuttgart-mitte">Gemeinde Stuttgart-Mitte</a> statt: Werfmershalde 19, 70190 Stuttgart</li>
 </ol>
 </div>
 </div>

templates/base.html

@@ -12,7 +12,7 @@
 </head>
 
 <body>
-<div class="dc-wrapper dc-page-background dc-responsive">
+<div class="wrapper dc-page-background">
 {% include "navbar.html" %}
 {% block content %}
 {% endblock content %}

templates/navbar.html

@@ -1,5 +1,5 @@
 <header style="z-index:100 !important" class="dc-top">
-<div class="dc-bar dc-white dc-card dc-primary-background dc-flex-container">
+<div class="dc-bar dc-white dc-card dc-primary-background">
 <a href="{% url 'homepage' %}" class="dc-bar-item dc-button">Home</a>
 <a href="{% url 'newspage' %}" class="dc-bar-item dc-button">News</a>
 <a href="{% url 'about' %}" class="dc-bar-item dc-button">Über uns</a>
@@ -8,4 +8,4 @@
 <a href="{% url 'anmeldung' %}" class="dc-bar-item dc-right dc-button">Anmeldung</a>
 </div>
 </header>
-<div style="padding-bottom:6vh"></div>
+<div class="dc-pushdown"></div>

templates/tagungsplan.html

@@ -1,9 +1,9 @@
 {% extends 'base.html' %}
 {% block title %}Tagesplan - {{block.super}}{% endblock title %}
 {% block content %}
-<div class="dc-container">
+<div class="dc-container dc-page-background">
 <h1 class="dc-center dc-xxlarge">Ablaufplan der Tagung</h1>
-<div class="dc-page-container">
+<div style="width:100%;overflow-x:hidden" class="dc-page-container dc-primary-background">
 <div class="tg-wrap"><table class="tg">
 <thead>
   <tr>

website/migrations/0012_alter_registrant_message.py

@@ -0,0 +1,18 @@
+# Generated by Django 4.2.6 on 2023-11-03 16:23
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('website', '0011_alter_registrant_payed'),
+    ]
+
+    operations = [
+        migrations.AlterField(
+            model_name='registrant',
+            name='message',
+            field=models.CharField(blank=True, max_length=2100),
+        ),
+    ]

website/models.py

@@ -64,7 +64,7 @@ class Registrant(models.Model):
     publish_address = models.BooleanField()
     publish_phone = models.BooleanField()
     info = models.CharField(max_length=777,blank=True)
-    message = models.TextField(max_length=2100,blank=True)
+    message = models.CharField(max_length=2100,blank=True)
     
     timestamp = models.DateTimeField(auto_now_add=True)
     payed = models.BooleanField(default=False)