From a9f80f0b3ef5d07ba1942c08eec6a803c59ca574 Mon Sep 17 00:00:00 2001
From: Jonas Heinrich <onny@project-insanity.org>
Date: Mon, 12 May 2025 19:43:19 +0200
Subject: [PATCH] fix updates styling

---
 froide_govplan/templates/cms/mypage.html      |  89 +++++++
 .../templates/froide_govplan/detail.html      |   2 +-
 .../froide_govplan/plugins/updates.html       | 221 ++++++------------
 3 files changed, 164 insertions(+), 148 deletions(-)

diff --git a/froide_govplan/templates/cms/mypage.html b/froide_govplan/templates/cms/mypage.html
index e933ab9..fb96eda 100644
--- a/froide_govplan/templates/cms/mypage.html
+++ b/froide_govplan/templates/cms/mypage.html
@@ -150,6 +150,70 @@
         text-decoration: none;
         display: inline-flex;
       }
+
+      .ellipsis {
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+/* Mobile: nur 1 Slide sichtbar */
+@media (max-width: 768px) {
+  .carousel-inner .carousel-item > div {
+    display: none;
+  }
+  .carousel-inner .carousel-item > div:first-child {
+    display: block;
+  }
+}
+
+/* Für alle Carousel-Übergangszustände Flex anzeigen */
+.carousel-inner .carousel-item.active,
+.carousel-inner .carousel-item-start,
+.carousel-inner .carousel-item-next,
+.carousel-inner .carousel-item-prev {
+  display: flex;
+}
+
+/* Desktop: max. 3 Slides sichtbar */
+@media (min-width: 768px) {
+
+  .carousel-inner .card {
+    margin-right: 1rem;
+  }
+
+  .carousel-inner .col-md-4 {
+    width: 32% !important;
+  }
+
+  .carousel-inner .carousel-item-right.active,
+  .carousel-inner .carousel-item-next,
+  .carousel-item-next:not(.carousel-item-start) {
+    transform: translateX(32%) !important;
+  }
+
+  .carousel-inner .carousel-item-left.active,
+  .carousel-item-prev:not(.carousel-item-end),
+  .active.carousel-item-start,
+  .carousel-item-prev:not(.carousel-item-end) {
+    transform: translateX(-32%) !important;
+  }
+
+  .carousel-item-next.carousel-item-start,
+  .active.carousel-item-end {
+    transform: translateX(0) !important;
+  }
+
+  .carousel-inner .carousel-item-prev,
+  .carousel-item-prev:not(.carousel-item-end) {
+    transform: translateX(-32%) !important;
+  }
+}
+
+
+
     </style>
     {% block extra_css %}
     {% endblock %}
@@ -173,6 +237,31 @@
   <script src="{% static 'froide_govplan/js/bootstrap.bundle.min.js' %}" crossorigin="anonymous"></script>
   <script src="{% static 'froide_govplan/js/jquery-3.6.4.min.js' %}"></script>
   <script lang="javascript">
+
+  // var myCarousel = document.querySelector('#myCarousel')
+// var carousel = new bootstrap.Carousel(myCarousel, {
+//   interval: 100000
+// })
+
+$('.carousel .carousel-item').each(function(){
+    var minPerSlide = 3;
+    var next = $(this).next();
+    if (!next.length) {
+    next = $(this).siblings(':first');
+    }
+    next.children(':first-child').clone().appendTo($(this));
+    
+    for (var i=0;i<minPerSlide;i++) {
+        next=next.next();
+        if (!next.length) {
+        	next = $(this).siblings(':first');
+      	}
+        
+        next.children(':first-child').clone().appendTo($(this));
+      }
+});
+
+
 const Ze = t => {
     const e = t.dataset.confirm;
     return e ? !!window.confirm(e) : !0
diff --git a/froide_govplan/templates/froide_govplan/detail.html b/froide_govplan/templates/froide_govplan/detail.html
index 65dfbe5..7ac6306 100644
--- a/froide_govplan/templates/froide_govplan/detail.html
+++ b/froide_govplan/templates/froide_govplan/detail.html
@@ -160,7 +160,7 @@
         {% if government.active %}
         <div class="col">
             <div class="h-100 p-5 border rounded-3">
-                <h2>Neue Entwicklung melden</h2>
+                <h2 style="font-size: 1.5rem;">Neue Entwicklung melden</h2>
                 <p>
                     Gibt es Neuigkeiten zu diesem Vorhaben, die wir noch nicht erfasst haben?
                 </p>
diff --git a/froide_govplan/templates/froide_govplan/plugins/updates.html b/froide_govplan/templates/froide_govplan/plugins/updates.html
index 9735184..130387e 100644
--- a/froide_govplan/templates/froide_govplan/plugins/updates.html
+++ b/froide_govplan/templates/froide_govplan/plugins/updates.html
@@ -9,160 +9,87 @@
   </p>
 </div>
 
-<div id="cardCarousel" class="carousel slide" data-bs-ride="carousel">
-  <div class="carousel-inner">
-    <div class="carousel-item active">
-      <div class="row">
-        {% for update in updates|slice:":3" %}
-        <div class="col">
-          <div class="card mb-4 rounded-3 shadow-sm">
-            <a href="{{ update.get_absolute_url }}" class="text-body text-decoration-none">
-            <div class="card-header p-3 tight-margin text-start">
-              {% if show_context %}
-                <span class="badge text-bg-blue-100 rounded-pill float-md-right mb-2 mb-md-0">
-                  {{ update.plan.get_section }}
-                </span>
-              {% endif %}
-              
-              {% if show_context %}
-                <h3 class="h5 mt-0">{{ update.plan }}</h3>
-              {% else %}
-                <h3 class="h4 mt-0">{{ update.title }}</h3>
-              {% endif %}
-
-              <div class="small">
-                <time datetime="{{ update.timestamp|date:'c' }}">{{ update.timestamp|date:"DATE_FORMAT" }}</time>
-        
-                {% if update.user or update.organization %}
-                <span>
-                  von {{ update.user.get_full_name }}{% if update.user and update.organization %},{% endif %}
-                  {{ update.organization.name }}
-                </span>
-                {% endif %}
-              </div>
-
-            </div>
-            </a>
-            <div class="card-body tight-margin text-start">
-
-              {% if update.content or show_context %}
-              <div class="tight-margin">
-                {% if show_context %}
-                  <h4 class="h5">{{ update.title }}</h4>
-                {% endif %}
-            
-                {% with update.content|markdown as content %}
-                  {% if show_context %}
-                    {{ content|truncatewords_html:50 }}
-                  {% else %}
-                    {{ content }}
-                  {% endif %}
-                {% endwith %}
-              </div>
-              {% endif %}
-            
-              {% if update.url or update.foirequest or show_context %}
-              <div class="{% if update.content %}box-card-links{% else %}d-flex mt-auto{% endif %}">
-                {% if show_context %}
-                  <a href="{{ update.get_absolute_url }}" class="action-link">→ zum Vorhaben</a>
-                {% else %}
-                  {% if update.url %}
-                    <a href="{{ update.url }}" class="action-link me-3" target="_blank" rel="noopener">→ mehr auf {{ update.get_url_domain }} lesen…</a>
-                  {% endif %}
-            
-                  {% if update.foirequest %}
-                    <a href="{{ update.foirequest.get_absolute_url }}" class="action-link">→ zur Anfrage</a>
-                  {% endif %}
-                {% endif %}
-              </div>
-              {% endif %}
-
-            </div>
+<div id="myCarousel" class="carousel slide" data-bs-ride="carousel">
+  <div class="carousel-inner w-100">
+    
+    {% for update in updates %}
+    <div class="carousel-item {% if forloop.first %}active{% endif %}">
+      <div class="card col-md-4">
+        <a href="{{ update.get_absolute_url }}" class="text-body text-decoration-none">
+        <div class="card-header p-3 tight-margin text-start">
+          {% if show_context %}
+            <span class="badge text-bg-blue-100 rounded-pill float-md-right mb-2 mb-md-0">
+              {{ update.plan.get_section }}
+            </span>
+          {% endif %}
+          
+          {% if show_context %}
+            <h3 class="h5 mt-0 ellipsis">{{ update.plan }}</h3>
+          {% else %}
+            <h3 class="h4 mt-0 ellipsis">{{ update.title }}</h3>
+          {% endif %}
+  
+          <div class="small">
+            <time datetime="{{ update.timestamp|date:'c' }}">{{ update.timestamp|date:"DATE_FORMAT" }}</time>
+    
+            {% if update.user or update.organization %}
+            <span>
+              von {{ update.user.get_full_name }}{% if update.user and update.organization %},{% endif %}
+              {{ update.organization.name }}
+            </span>
+            {% endif %}
           </div>
+  
+        </div>
+        </a>
+        <div class="card-body tight-margin text-start p-3">
+  
+          {% if update.content or show_context %}
+          <div class="tight-margin">
+            {% if show_context %}
+              <h4 class="h5">{{ update.title }}</h4>
+            {% endif %}
+        
+            {% with update.content|markdown as content %}
+              {% if show_context %}
+                {{ content|truncatewords_html:50 }}
+              {% else %}
+                {{ content }}
+              {% endif %}
+            {% endwith %}
+          </div>
+          {% endif %}
+        
+          {% if update.url or update.foirequest or show_context %}
+          <div class="{% if update.content %}box-card-links{% else %}d-flex mt-auto{% endif %}">
+            {% if show_context %}
+              <a href="{{ update.get_absolute_url }}" class="action-link">→ zum Vorhaben</a>
+            {% else %}
+              {% if update.url %}
+                <a href="{{ update.url }}" class="action-link me-3" target="_blank" rel="noopener">→ mehr auf {{ update.get_url_domain }} lesen…</a>
+              {% endif %}
+        
+              {% if update.foirequest %}
+                <a href="{{ update.foirequest.get_absolute_url }}" class="action-link">→ zur Anfrage</a>
+              {% endif %}
+            {% endif %}
+          </div>
+          {% endif %}
+  
         </div>
-        {% endfor %}
       </div>
     </div>
-    <div class="carousel-item">
-      <div class="row">
-        {% for update in updates|slice:"3:6" %}
-        <div class="col">
-          <div class="card mb-4 rounded-3 shadow-sm">
-            <a href="{{ update.get_absolute_url }}" class="text-body text-decoration-none">
-            <div class="card-header p-3 tight-margin text-start">
-              {% if show_context %}
-                <span class="badge text-bg-blue-100 rounded-pill float-md-right mb-2 mb-md-0">
-                  {{ update.plan.get_section }}
-                </span>
-              {% endif %}
-              
-              {% if show_context %}
-                <h3 class="h5 mt-0">{{ update.plan }}</h3>
-              {% else %}
-                <h3 class="h4 mt-0">{{ update.title }}</h3>
-              {% endif %}
+    {% endfor %}
 
-              <div class="small">
-                <time datetime="{{ update.timestamp|date:'c' }}">{{ update.timestamp|date:"DATE_FORMAT" }}</time>
-        
-                {% if update.user or update.organization %}
-                <span>
-                  von {{ update.user.get_full_name }}{% if update.user and update.organization %},{% endif %}
-                  {{ update.organization.name }}
-                </span>
-                {% endif %}
-              </div>
-
-            </div>
-            </a>
-            <div class="card-body tight-margin text-start">
-
-              {% if update.content or show_context %}
-              <div class="p-3 p-md-4 tight-margin">
-                {% if show_context %}
-                  <h4 class="h5">{{ update.title }}</h4>
-                {% endif %}
-            
-                {% with update.content|markdown as content %}
-                  {% if show_context %}
-                    {{ content|truncatewords_html:50 }}
-                  {% else %}
-                    {{ content }}
-                  {% endif %}
-                {% endwith %}
-              </div>
-              {% endif %}
-            
-              {% if update.url or update.foirequest or show_context %}
-              <div class="p-3 p-md-4 {% if update.content %}box-card-links{% else %}d-flex mt-auto{% endif %}">
-                {% if show_context %}
-                  <a href="{{ update.get_absolute_url }}" class="action-link">→ zum Vorhaben</a>
-                {% else %}
-                  {% if update.url %}
-                    <a href="{{ update.url }}" class="action-link me-3" target="_blank" rel="noopener">→ mehr auf {{ update.get_url_domain }} lesen…</a>
-                  {% endif %}
-            
-                  {% if update.foirequest %}
-                    <a href="{{ update.foirequest.get_absolute_url }}" class="action-link">→ zur Anfrage</a>
-                  {% endif %}
-                {% endif %}
-              </div>
-              {% endif %}
-
-            </div>
-          </div>
-        </div>
-        {% endfor %}
-      </div>
-    </div>
+   
   </div>
-  <button class="carousel-control-prev" type="button" data-bs-target="#cardCarousel" data-bs-slide="prev">
+  <button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev">
     <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-    <span class="visually-hidden">Zurück</span>
+    <span class="visually-hidden">Previous</span>
   </button>
-  <button class="carousel-control-next" type="button" data-bs-target="#cardCarousel" data-bs-slide="next">
+  <button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next">
     <span class="carousel-control-next-icon" aria-hidden="true"></span>
-    <span class="visually-hidden">Weiter</span>
+    <span class="visually-hidden">Next</span>
   </button>
 </div>
 
@@ -188,9 +115,9 @@
         {% endif %}
         
         {% if show_context %}
-          <h3 class="h5 mt-0">{{ update.plan }}</h3>
+          <h3 class="h5 mt-0 ellipsis">{{ update.plan }}</h3>
         {% else %}
-          <h3 class="h4 mt-0">{{ update.title }}</h3>
+          <h3 class="h4 mt-0 ellipsis">{{ update.title }}</h3>
         {% endif %}
 
         <div class="small">