From f6b2b49045359febaa9aeb720fbbcfb2fc3cb572 Mon Sep 17 00:00:00 2001
From: Stefan Wehrmeyer <mail@stefanwehrmeyer.com>
Date: Tue, 9 Aug 2022 17:18:14 +0100
Subject: [PATCH] Migrate to BS5 CSS classes

---
 .../templates/froide_govplan/detail.html           | 13 ++++++-------
 .../templates/froide_govplan/plan_og.html          | 14 ++++++++------
 .../froide_govplan/plugins/card_cols.html          |  4 ++--
 .../templates/froide_govplan/plugins/progress.html |  4 ++--
 .../templates/froide_govplan/plugins/search.html   | 11 ++++-------
 .../templates/froide_govplan/plugins/sections.html |  2 +-
 .../templates/froide_govplan/plugins/updates.html  |  4 ++--
 .../templates/froide_govplan/section.html          | 12 ++++++------
 8 files changed, 31 insertions(+), 33 deletions(-)

diff --git a/froide_govplan/templates/froide_govplan/detail.html b/froide_govplan/templates/froide_govplan/detail.html
index 9823386..bf05208 100644
--- a/froide_govplan/templates/froide_govplan/detail.html
+++ b/froide_govplan/templates/froide_govplan/detail.html
@@ -41,20 +41,20 @@
         <div class="d-md-flex my-4 align-items-center">
           <ul class="list-unstyled d-flex m-0">
             <li>
-              <span class="badge badge-{{ object.get_status_css }} mr-2">
+              <span class="badge text-bg-{{ object.get_status_css }} me-2">
                 {{ object.get_status_display }}
               </span>
             </li>
             {% for cat in object.categories.all %}
             <li>
-              <a href="{{ section.get_absolute_url }}" class="badge badge-light mr-2">
+              <a href="{{ section.get_absolute_url }}" class="badge text-bg-light me-2">
                 {{ cat.name }}
               </a>
             </li>
             {% endfor %}
           </ul>
 
-          <div class="ml-auto mt-2 mt-md-0">
+          <div class="ms-auto mt-2 mt-md-0">
             {% show_follow "govplan" object %}
           </div>
         </div>
@@ -79,7 +79,7 @@
                       {% endif %}
                       </span>
                       {% for ref in refs %}
-                        <a href="{{ ref }}" class="badge badge-light mr-2" target="_blank">
+                        <a href="{{ ref }}" class="badge text-bg-light me-2" target="_blank">
                           {{ forloop.counter }}
                         </a>
                       {% endfor %}
@@ -175,7 +175,7 @@
           <div class="p-3 p-md-4">
             {% if request.user.is_authenticated %}
               <p>Gibt es Neuigkeiten zu diesem Vorhaben, die wir noch nicht erfasst haben?</p>
-              <button type="button" class="btn btn-outline-secondary" data-toggle="modal" data-target="#govplanupdate-proposal">
+              <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#govplanupdate-proposal">
                 Entwicklung melden
               </button>
               <div class="modal" data-teleport="body" tabindex="-1" role="dialog" id="govplanupdate-proposal">
@@ -185,8 +185,7 @@
                       <h5 class="modal-title">
                         Neue Entwicklung melden
                       </h5>
-                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-                        <span aria-hidden="true">&times;</span>
+                      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}">
                       </button>
                     </div>
                     <div class="modal-body">
diff --git a/froide_govplan/templates/froide_govplan/plan_og.html b/froide_govplan/templates/froide_govplan/plan_og.html
index 1995995..8fe8be9 100644
--- a/froide_govplan/templates/froide_govplan/plan_og.html
+++ b/froide_govplan/templates/froide_govplan/plan_og.html
@@ -35,8 +35,8 @@ body {
       <div class="row justify-content-between align-items-center">
         {% block bottom_row %}
         <div class="col-4">
-          <div class="badge badge-{{ object.get_status_css }} p-3 d-inline-flex">
-            <i class="fa fa-circle mr-3"></i>
+          <div class="badge text-bg-{{ object.get_status_css }} p-3 d-inline-flex">
+            <i class="fa fa-circle me-3"></i>
             <span class="h2 m-0">
               {{ object.get_status_display }}
             </span>
@@ -44,9 +44,11 @@ body {
         </div>
         <div class="col-4">
           {% if object.due_date %}
-            <div class="media {% if object.is_overdue %}text-danger{% endif %}">
-              <span class="fa fa-calendar mr-3"></span>
-              <div class="media-body">
+            <div class="d-flex {% if object.is_overdue %}text-danger{% endif %}">
+              <div class="flex-shrink-0">
+                <span class="fa fa-calendar"></span>
+              </div>
+              <div class="flex-grow-1 ms-3">
                 <h2 class="m-0">
                   {{ object.due_date | date }}
                 </h2>
@@ -55,7 +57,7 @@ body {
           {% endif %}
         </div>
         {% endblock bottom_row %}
-        <div class="col-auto ml-auto">
+        <div class="col-auto ms-auto">
           <img height="80" src="https://static.frag-den-staat.de/static/img/header_logo.580ed694906e.svg" alt="FragDenStaat.de"/>
         </div>
       </div>
diff --git a/froide_govplan/templates/froide_govplan/plugins/card_cols.html b/froide_govplan/templates/froide_govplan/plugins/card_cols.html
index ba9bb2b..80c3476 100644
--- a/froide_govplan/templates/froide_govplan/plugins/card_cols.html
+++ b/froide_govplan/templates/froide_govplan/plugins/card_cols.html
@@ -27,8 +27,8 @@
               <span href="{{ object.get_absolute_url }}" class="action-link text-blue-600">
                 → mehr lesen
               </span>
-              <div class="ml-auto">
-                <span class="badge badge-{{ object.get_status_css }}">
+              <div class="ms-auto">
+                <span class="badge text-bg-{{ object.get_status_css }}">
                   {{ object.get_status_display }}
                 </span>
               </div>
diff --git a/froide_govplan/templates/froide_govplan/plugins/progress.html b/froide_govplan/templates/froide_govplan/plugins/progress.html
index a0ce64d..2606664 100644
--- a/froide_govplan/templates/froide_govplan/plugins/progress.html
+++ b/froide_govplan/templates/froide_govplan/plugins/progress.html
@@ -4,10 +4,10 @@
 
 <div class="d-flex align-items-center">
   <span class="text-gray-700{% if not instance.extra_classes or "progress-lg" not in instance.extra_classes %} small{% endif %}">{{ progress.count }} Vorhaben</span>
-  <div class="flex-grow-1 ml-2">
+  <div class="flex-grow-1 ms-2">
     <div class="progress" {% if "progress-lg" in instance.extra_classes %}style="height: 1.5rem;"{% endif %}>
       {% for section in progress.sections %}
-        <div class="progress-bar bg-{{ section.css_class }}" role="progressbar" style="width: {{ section.css_percentage }}%;" aria-valuenow="{{ section.css_percentage }}" aria-valuemin="0" aria-valuemax="100" aria-label="{{ section.percentage }}% {{ section.label }}" title="{{ section.percentage }}% {{ section.label }}" data-toggle="tooltip" data-placement="top">
+        <div class="progress-bar bg-{{ section.css_class }}" role="progressbar" style="width: {{ section.css_percentage }}%;" aria-valuenow="{{ section.css_percentage }}" aria-valuemin="0" aria-valuemax="100" aria-label="{{ section.percentage }}% {{ section.label }}" title="{{ section.percentage }}% {{ section.label }}" data-bs-toggle="tooltip" data-placement="top">
         </div>
       {% endfor %}
     </div>
diff --git a/froide_govplan/templates/froide_govplan/plugins/search.html b/froide_govplan/templates/froide_govplan/plugins/search.html
index 773c997..563553a 100644
--- a/froide_govplan/templates/froide_govplan/plugins/search.html
+++ b/froide_govplan/templates/froide_govplan/plugins/search.html
@@ -8,11 +8,9 @@
         <option value="{{ status }}">{{ label }}</option>
       {% endfor %}
     </select>
-    <div class="input-group-append">
-      <button class="btn btn-outline-secondary" type="submit">
-        {% translate "Search" %}
-      </button>
-    </div>
+    <button class="btn btn-outline-secondary" type="submit">
+      {% translate "Search" %}
+    </button>
   </div>
   {% if instance.government_id %}
     <input type="hidden" name="government" value="{{ instance.government_id }}"/>
@@ -24,8 +22,7 @@
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title">{% trans "Search results" %}</h5>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% translate 'Close' %}">
         </button>
       </div>
       <div class="modal-body">
diff --git a/froide_govplan/templates/froide_govplan/plugins/sections.html b/froide_govplan/templates/froide_govplan/plugins/sections.html
index ca29025..fef2b5c 100644
--- a/froide_govplan/templates/froide_govplan/plugins/sections.html
+++ b/froide_govplan/templates/froide_govplan/plugins/sections.html
@@ -20,7 +20,7 @@
           <div class="box-card-header tight-margin d-flex align-items-center has-background p-3 p-md-4 bg-blue-20" id="govsection-{{ section.pk }}">
             <h3 class="h5 m-0">{{ section.title }}</h3> 
             {% if section.icon %}
-            <div class="ml-auto">
+            <div class="ms-auto">
               <div class="box-card-icon position-static bg-white">
                 <i class="fa fa-{{ section.icon }}"></i>
               </div>
diff --git a/froide_govplan/templates/froide_govplan/plugins/updates.html b/froide_govplan/templates/froide_govplan/plugins/updates.html
index 55b9409..73fc670 100644
--- a/froide_govplan/templates/froide_govplan/plugins/updates.html
+++ b/froide_govplan/templates/froide_govplan/plugins/updates.html
@@ -7,7 +7,7 @@
     <div class="box-card-header bg-blue-20 d-flex justify-content-center p-3 p-md-4 tight-margin flex-column">
       <div>
         {% if show_context %}
-        <span class="badge badge-blue-100 badge-pill float-md-right mb-2 mb-md-0 ml-md-2 mt-md-1">
+        <span class="badge text-bg-blue-100 rounded-pill float-md-right mb-2 mb-md-0 ms-md-2 mt-md-1">
           {{ update.plan.get_section }}
         </span>
         {% endif %}
@@ -53,7 +53,7 @@
       <a href="{{ update.get_absolute_url }}" class="action-link">→ zum Vorhaben</a>
     {% else %}
       {% if update.url %}
-        <a href="{{ update.url }}" class="action-link mr-3" target="_blank" rel="noopener">→ mehr auf {{ update.get_url_domain }} lesen…</a>
+        <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 %}
diff --git a/froide_govplan/templates/froide_govplan/section.html b/froide_govplan/templates/froide_govplan/section.html
index 5a546c5..9c50f92 100644
--- a/froide_govplan/templates/froide_govplan/section.html
+++ b/froide_govplan/templates/froide_govplan/section.html
@@ -29,7 +29,7 @@
     <div class="col col-lg-12">
       <div class="box-card border-yellow md:shadow-yellow bg-white p-3 p-md-4 p-lg-5 tight-margin">
         <div class="row mx-0">
-          <div class="col col-12 col-md-12 pl-0 tight-margin">
+          <div class="col col-12 col-md-12 ps-0 tight-margin">
             <h1 class="mt-0 h2">
               {{ object.title }}
             </h1>
@@ -45,11 +45,11 @@
         <div class="mt-5">
           {% include "froide_govplan/plugins/progress.html" with object_list=plans %}
           <p class="small text-gray-700 mt-3 no-hyphens">
-            <span class="text-nowrap mr-1"><i class="fa fa-circle text-light"></i>&nbsp;nicht begonnen</span>
-            <span class="text-nowrap mr-1"><i class="fa fa-circle text-primary"></i>&nbsp;begonnen</span>
-            <span class="text-nowrap mr-1"><i class="fa fa-circle text-warning"></i>&nbsp;teilweise umgesetzt</span>
-            <span class="text-nowrap mr-1"><i class="fa fa-circle text-success"></i>&nbsp;umgesetzt</span>
-            <span class="text-nowrap mr-1"><i class="fa fa-circle text-danger"></i>&nbsp;verschoben</span>
+            <span class="text-nowrap me-1"><i class="fa fa-circle text-light"></i>&nbsp;nicht begonnen</span>
+            <span class="text-nowrap me-1"><i class="fa fa-circle text-primary"></i>&nbsp;begonnen</span>
+            <span class="text-nowrap me-1"><i class="fa fa-circle text-warning"></i>&nbsp;teilweise umgesetzt</span>
+            <span class="text-nowrap me-1"><i class="fa fa-circle text-success"></i>&nbsp;umgesetzt</span>
+            <span class="text-nowrap me-1"><i class="fa fa-circle text-danger"></i>&nbsp;verschoben</span>
           </p>          
         </div>
       </div>