fix updates styling

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