From a26f404e070b6a4fa0bfd98f2c74fef7a2a9be65 Mon Sep 17 00:00:00 2001
From: Phillippa <phillippa@PhillipasLaptop.fritz.box>
Date: Thu, 11 May 2023 10:29:26 +0200
Subject: [PATCH] assets/html/* templates/*: update html classes and template
 structure to work with new BS and custom js update to use correct trigger
 classes

---
 .../html/app/components/list/listitem.html    | 20 +++----
 .../app/components/list/listitemmobile.html   | 10 ++--
 .../assets/html/app/components/map/popup.html | 28 +++++-----
 .../html/app/shared/directives/nav.html       | 53 +++++++++++--------
 .../app/shared/directives/sharedDirectives.js | 11 ++--
 bplan/templates/admin_base.html               |  4 +-
 bplan/templates/base.html                     | 15 +++---
 bplan/templates/downloads.html                |  2 +
 bplan/templates/login.html                    |  2 +-
 9 files changed, 79 insertions(+), 66 deletions(-)

diff --git a/bplan/assets/html/app/components/list/listitem.html b/bplan/assets/html/app/components/list/listitem.html
index 5bf9f6f0..fb03efb5 100644
--- a/bplan/assets/html/app/components/list/listitem.html
+++ b/bplan/assets/html/app/components/list/listitem.html
@@ -1,18 +1,18 @@
 <div class="col-md-12 bplan-list-item bplan-list-item-{{ status }}" data-ng-class="{highlighted: highlight()}">
     <div class="row">
-        <div class="col-xs-3 col-sm-3 col-md-3">
+        <div class="col">
             <div><b>Bebauungs&#173;plan-Nr.</b></div>
             <div>{{ bplan.planname }}</div>
         </div>
-        <div class="col-xs-3 col-sm-3 col-md-3">
+        <div class="col">
             <div><b>Bezirk</b></div>
             <div>{{ bplan.bezirk_name }}</div>
         </div>
-        <div class="col-xs-3 col-sm-3 col-md-3">
+        <div class="col">
             <div><b>Aktueller Status</b></div>
             <div>{{ status | status }} {{ bplan.status_normkontr }}</div>
         </div>
-        <div class="col-xs-3 col-sm-3 col-md-3">
+        <div class="col">
             <div data-ng-if="bplan.status == 'aul' || status == 'bbg'"><b>Enddatum</b></div>
             <div data-ng-if="bplan.status == 'imVerfahren'"><b>Aufgestellt am</b></div>
             <div data-ng-if="bplan.status == 'festg'"><b>Festgesetzt am</b></div>
@@ -23,14 +23,14 @@
         </div>
     </div>
     <div class="row button-row">
-        <div data-ng-if="bplan.ausleg_www" class="col-xs-3 col-sm-3 col-md-3">
-            <div><a class="custom-btn btn-primary btn-xs" target="_blank" href="{{ bplan.ausleg_www }}">Website</a></div>
+        <div data-ng-if="bplan.ausleg_www" class="col-3">
+            <div><a class="custom-btn btn-primary btn-sm" target="_blank" href="{{ bplan.ausleg_www }}">Website</a></div>
         </div>
-        <div data-ng-if="bplan.scan_www" class="col-xs-3 col-sm-3 col-md-3">
-            <div><a class="custom-btn btn-primary btn-xs" target="_blank" href="{{ bplan.scan_www }}">zum B-Plan</a></div>
+        <div data-ng-if="bplan.scan_www" class="col-3">
+            <div><a class="custom-btn btn-primary btn-sm" target="_blank" href="{{ bplan.scan_www }}">zum B-Plan</a></div>
         </div>
-        <div data-ng-if="bplan.grund_www" class="col-xs-3 col-sm-3 col-md-3">
-            <div><a  class="custom-btn btn-primary btn-xs" target="_blank" href="{{ bplan.grund_www }}">Begründung</a></div>
+        <div data-ng-if="bplan.grund_www" class="col-3">
+            <div><a  class="custom-btn btn-primary btn-sm" target="_blank" href="{{ bplan.grund_www }}">Begründung</a></div>
         </div>
     </div>
 </div>
diff --git a/bplan/assets/html/app/components/list/listitemmobile.html b/bplan/assets/html/app/components/list/listitemmobile.html
index c8ec2c20..1a1d9791 100644
--- a/bplan/assets/html/app/components/list/listitemmobile.html
+++ b/bplan/assets/html/app/components/list/listitemmobile.html
@@ -1,6 +1,6 @@
 <div class="bplan-list-item bplan-list-item-{{ status }}" data-ng-class="{highlighted: highlight()}">
     <div class="row">
-        <div class="col-xs-9">
+        <div class="col-9">
             <div><b>Bebauungs&#173;plan-Nr.:</b> {{ bplan.planname }}</div>
             <div><b>Bezirk:</b> {{ bplan.bezirk_name }}</div>
             <div data-ng-if="bplan.status == 'aul'"><b>Enddatum:</b> {{ bplan.aul_ende | date : 'dd.MM.yyyy' }}</div>
@@ -9,15 +9,15 @@
             <div data-ng-if="bplan.status == 'festg'"><b>Festgesetzt am:</b> {{ bplan.festsg_am | date : 'dd.MM.yyyy'}}</div>
         </div>
 
-        <div class="col-xs-3">
+        <div class="col-3">
             <div data-ng-if="bplan.ausleg_www">
-                <div><a class="custom-btn btn-primary btn-xs listitemmobile-button" target="_blank" href="{{ bplan.ausleg_www }}">Website</a></div>
+                <div><a class="custom-btn btn-primary btn-sm listitemmobile-button" target="_blank" href="{{ bplan.ausleg_www }}">Website</a></div>
             </div>
             <div data-ng-if="bplan.scan_www">
-                <div><a class="custom-btn btn-primary btn-xs listitemmobile-button" target="_blank" href="{{ bplan.scan_www }}">zum B-Plan</a></div>
+                <div><a class="custom-btn btn-primary btn-sm listitemmobile-button" target="_blank" href="{{ bplan.scan_www }}">zum B-Plan</a></div>
             </div>
             <div data-ng-if="bplan.grund_www">
-                <div><a  class="custom-btn btn-primary btn-xs listitemmobile-button" target="_blank" href="{{ bplan.grund_www }}">Begründung</a></div>
+                <div><a  class="custom-btn btn-primary btn-sm listitemmobile-button" target="_blank" href="{{ bplan.grund_www }}">Begründung</a></div>
             </div>
         </div>
     </div>
diff --git a/bplan/assets/html/app/components/map/popup.html b/bplan/assets/html/app/components/map/popup.html
index 7d9affd7..caafc318 100644
--- a/bplan/assets/html/app/components/map/popup.html
+++ b/bplan/assets/html/app/components/map/popup.html
@@ -1,19 +1,19 @@
 <div class="popup popup-{{bplan.status}}">
     <div class="row">
-        <div class="col-xs-8 col-sm-8 col-md-8">
+        <div class="col-8">
             <div class="popup-entry">
                 <div><b>Bebauungs&#173;plan-Nr.:</b></div>
                 <div>{{ bplan.planname }}</div>
             </div>
         </div>
-        <div class="col-xs-4 col-sm-4 col-md-4">
+        <div class="col-4">
             <button class="fa-pull-right close-button" data-ng-click="closePopup()">
                 <i class="fas fa-times fa-2x" aria-label="Popup schließen"></i>
             </button>
         </div>
     </div>
     <div class="row">
-        <div class="col-xs-8 col-sm-8 col-md-8">
+        <div class="col-8">
             <div class="popup-entry">
                 <div><b>Bezirk:</b></div>
                 <div>{{ bplan.bezirk_name }}</div>
@@ -21,7 +21,7 @@
         </div>
     </div>
     <div class="row">
-        <div class="col-xs-12 col-sm-12 col-md-12">
+        <div class="col-12">
             <div class="popup-entry">
                 <div><b>Aktueller Status: </b></div>
                 <div data-ng-if="bplan.status_normkontr !== ''">{{ bplan.status | status }}, {{ bplan.status_normkontr }}</div>
@@ -30,7 +30,7 @@
         </div>
     </div>
     <div class="row">
-        <div class="col-xs-12 col-sm-12 col-md-12">
+        <div class="col-12">
             <div class="popup-entry">
                 <div data-ng-if="bplan.status == 'aul' || status == 'bbg'"><b>Enddatum:</b></div>
                 <div data-ng-if="bplan.status == 'imVerfahren'"><b>Aufstellungsbeschluss:</b></div>
@@ -43,16 +43,14 @@
         </div>
     </div>
     <div class="row">
-        <div class="popup-entry">
-            <div data-ng-if="bplan.ausleg_www" class="col-xs-3 col-sm-3 col-md-3">
-                <div><a class="custom-btn btn-primary" target="_blank" href="{{ bplan.ausleg_www }}">Website</a></div>
-            </div>
-            <div data-ng-if="bplan.scan_www" class="col-xs-3 col-sm-3 col-md-3">
-                <div><a class="custom-btn btn-primary" target="_blank" href="{{ bplan.scan_www }}">zum B-Plan</a></div>
-            </div>
-            <div data-ng-if="bplan.grund_www" class="col-xs-3 col-sm-3 col-md-3">
-                <div><a class="custom-btn btn-primary" target="_blank" href="{{ bplan.grund_www }}">Begründung</a></div>
-            </div>
+        <div data-ng-if="bplan.ausleg_www" class="col-3">
+            <div><a class="custom-btn btn-primary" target="_blank" href="{{ bplan.ausleg_www }}">Website</a></div>
+        </div>
+        <div data-ng-if="bplan.scan_www" class="col-3">
+            <div><a class="custom-btn btn-primary" target="_blank" href="{{ bplan.scan_www }}">zum B-Plan</a></div>
+        </div>
+        <div data-ng-if="bplan.grund_www" class="col-3">
+            <div><a class="custom-btn btn-primary" target="_blank" href="{{ bplan.grund_www }}">Begründung</a></div>
         </div>
     </div>
 </div>
diff --git a/bplan/assets/html/app/shared/directives/nav.html b/bplan/assets/html/app/shared/directives/nav.html
index 1c32cb26..579d0758 100644
--- a/bplan/assets/html/app/shared/directives/nav.html
+++ b/bplan/assets/html/app/shared/directives/nav.html
@@ -14,22 +14,22 @@
         </a>
     </li>
     <li class="textinput" data-ng-class="{open: searchResultCount > 1 && searchstring}">
-        <form class="navbar-form navbar-left" ng-submit="getDataForSearch()" navbar-input-group" role="search">
+        <form class="navbar-form navbar-left navbar-input-group" ng-submit="getDataForSearch()" role="search">
             <div class="form-group">
                 <div class="input-group">
                     <input type="text" class="form-control" data-ng-model="searchstring" data-ng-change="removeTagOnBackspace()" placeholder="Adresse oder Bebauungsplan-Nr.">
-                    <div
-                        class="input-group-addon search-button"
+                    <button
+                        class="search-button"
                         data-ng-click="getDataForSearch()"
                         data-ng-class="{middle: searchstring}">
                         <i class="fas fa-search" aria-label="Adresse oder Bebauungsplan-Nr. suchen"></i>
-                    </div>
-                    <div
+                    </button>
+                    <button
                         data-ng-if="searchstring"
-                        class="input-group-addon search-button"
+                        class="search-button"
                         data-ng-click="resetSearch()">
                         <i class="fas fa-times" aria-label="Suche löschen"></i>
-                    </div>
+                </button>
                 </div>
             </div>
         </form>
@@ -62,7 +62,7 @@
             href="#" role="button"
             aria-haspopup="true"
             aria-expanded="false">
-            {{ places.currentOrtsteilName }} <span class="caret" data-ng-class="{'fa-pull-right': isMobile}"></span>
+            {{ places.currentOrtsteilName }}
         </a>
         <ul class="dropdown-menu">
             <li data-ng-hide="places.currentOrtsteilName == 'Alle Ortsteile'"
@@ -78,22 +78,30 @@
             </li>
         </ul>
     </li>
-    <li class="dropdown nav-status-filter" data-ng-class="{'open': dropdownOpen }">
-        <a class="dropdown-toggle"
-           data-ng-click="toggleDropdown($event)"
-           href="#" role="button"
-           aria-haspopup="true"
-           aria-expanded="false">
+
+
+    <li class="dropdown nav-status-filter">
+        <button
+            class="dropdown-toggle"
+            data-ng-class="{'show': dropdownOpen }"
+            data-ng-click="toggleDropdown($event)"
+            href="#"
+            type="button"
+            id="navStatusFilter"
+            data-bs-toggle="dropdown"
+            aria-expanded="false"
+        >
             <i class="fas fas bbg-checked" data-ng-class="{'fa-check-square': places.filters.bbg, 'fa-square': !places.filters.bbg}" aria-hidden="true"></i>
             <i class="fas fas aul-checked" data-ng-class="{'fa-check-square': places.filters.aul, 'fa-square': !places.filters.aul}" aria-hidden="true"></i>
             <i class="fas fas imVerfahren-checked" data-ng-class="{'fa-check-square': places.filters.imVerfahren, 'fa-square': !places.filters.imVerfahren}" aria-hidden="true"></i>
             <i class="fas fas festg-checked" data-ng-class="{'fa-check-square': places.filters.festg, 'fa-square': !places.filters.festg}" aria-hidden="true"></i>
-            Verfahrensstatus <span class="caret" data-ng-class="{'fa-pull-right': isMobile}"></span>
-        </a>
-        <ul class="dropdown-menu">
-            <label class="dropdown-menu-title">In Beteiligung</label>
+            Verfahrensstatus
+        </button>
+
+        <ul class="dropdown-menu" aria-labelledby="navStatusFilter">
+            <label class="dropdown-header dropdown-menu-title">In Beteiligung</label>
             <li>
-                <div class="custom-checkbox custom-checkbox-bbg">
+                <div class="mb-2 custom-checkbox custom-checkbox-bbg">
                     <input
                         type="checkbox"
                         id="checkbox_bbg"
@@ -103,7 +111,7 @@
                 </div>
             </li>
             <li>
-                <div class="custom-checkbox custom-checkbox-aul">
+                <div class="mb-2 custom-checkbox custom-checkbox-aul">
                     <input
                         type="checkbox"
                         id="checkbox_aul"
@@ -112,7 +120,7 @@
                         <label for="checkbox_aul">{{'aul' | status }}</label>
                 </div>
             </li>
-            <li role="separator" class="divider"></li>
+            <li role="separator" class="dropdown-divider"></li>
             <li>
                 <div class="custom-checkbox custom-checkbox-imVerfahren">
                     <input
@@ -123,7 +131,7 @@
                         <label for="checkbox_imVerfahren">{{'imVerfahren' | status }}</label>
                 </div>
             </li>
-            <li role="separator" class="divider"></li>
+            <li role="separator" class="dropdown-divider"></li>
             <li>
                 <div class="custom-checkbox custom-checkbox-festg">
                     <input
@@ -136,6 +144,7 @@
             </li>
         </ul>
     </li>
+
     <li role="presentation" class="info-button">
         <a href="https://mein.berlin.de/b-plan-karte-hilfe/" target="_blank" aria-label="Allgemeine Informationen">
             <span class="fa-stack fa-lg" aria-hidden="true">
diff --git a/bplan/assets/js/app/shared/directives/sharedDirectives.js b/bplan/assets/js/app/shared/directives/sharedDirectives.js
index 87d694f1..b419759a 100644
--- a/bplan/assets/js/app/shared/directives/sharedDirectives.js
+++ b/bplan/assets/js/app/shared/directives/sharedDirectives.js
@@ -9,11 +9,14 @@ angular.module('app.shared.directives', [])
         link: function(scope) {
 
             scope.toggleDropdown = function(event) {
-                var element = $(event.currentTarget.parentNode);
-                if(element.hasClass('open')) {
-                    element.removeClass('open');
+                var element = $(event.currentTarget);
+                var childElement = $(element.nextElementSibling);
+                if(element.hasClass('show')) {
+                    element.removeClass('show');
+                    childElement.removeClass('show');
                 } else {
-                    element.addClass('open');
+                    element.addClass('show');
+                    childElement.addClass('show');
                 }
             }
         }
diff --git a/bplan/templates/admin_base.html b/bplan/templates/admin_base.html
index 2635e2f2..61de03f8 100644
--- a/bplan/templates/admin_base.html
+++ b/bplan/templates/admin_base.html
@@ -1,3 +1,5 @@
+<!-- Not updated to Bootstrap 5 due to no use -->
+
 {% load static %}
 <!DOCTYPE html>
 <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
@@ -21,7 +23,7 @@
         <div class="container">
             <ul class="nav nav-pills fa-pull-right">
                 <li role="presentation" class="dropdown">
-                    <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
+                    <a class="dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
                       {% if request.user.is_authenticated %}{{request.user}}{% else %}Benutzer{% endif %} <span class="caret"></span>
                     </a>
                     <ul class="dropdown-menu">
diff --git a/bplan/templates/base.html b/bplan/templates/base.html
index 4498004d..685d1420 100644
--- a/bplan/templates/base.html
+++ b/bplan/templates/base.html
@@ -26,20 +26,20 @@
         {% verbatim %}
         <div>
             <div class="container-fluid" ng-app="app">
-                <div class="row" ng-controller="ViewController">
+                <div ng-controller="ViewController">
 
                     <div class="no-padding col-md-12">
                         <data-shared-nav></data-shared-nav>
                     </div>
 
-                    <div ng-controller="MapController">
+                    <div class="no-padding row" ng-controller="MapController">
 
-                        <div data-ng-class="{'col-md-12 col-sm-12 col-xs-12' : !popupopen, 'col-md-6 col-sm-6 col-xs-6': popupopen}"
+                        <div data-ng-class="{'col-12' : !popupopen, 'col-6': popupopen}"
                              data-ng-show="currentView === 'map'" class="no-right-padding no-left-padding">
                             <div class='bplan-map' id="map"></div>
                         </div>
 
-                        <div class="col-md-6 col-sm-6 col-xs-6 no-left-padding no-right-padding"
+                        <div class="col-6 no-left-padding no-right-padding popup__container"
                              data-ng-if ="currentView === 'map' && popupopen">
                             <data-popup data-ng-if="currentItem" closepopup="closePopup" resetsearch="resetSearch" bplan="currentItem"></data-popup>
                         </div>
@@ -57,7 +57,7 @@
                         <div
                             class="row bplan-list"
                             data-ng-if="list.length > 0">
-                            <div class="col-md-12 col-lg-12 fa-pull-right">
+                            <div class="col-12 fa-pull-right">
                                 <nav>
                                     <ul class="pagination">
                                         <li data-ng-class="{'disabled': currentPage==0}">
@@ -92,7 +92,7 @@
                             </div>
                         </div>
                         <div data-ng-if="!isMobile" class="row">
-                            <div class="col-md-12" data-ng-show="currentView === 'list'">
+                            <div class="no-padding col-md-12" data-ng-show="currentView === 'list'">
                                 <div
                                     class="row"
                                     data-ng-if="list.length > 0"
@@ -108,9 +108,8 @@
                             </div>
                         </div>
                         <div data-ng-if="isMobile" class="row">
-                            <div class="col-md-12" data-ng-show="currentView === 'list'">
+                            <div class="no-padding col-md-12" data-ng-show="currentView === 'list'">
                                 <div
-                                    class="row"
                                     data-ng-if="list.length > 0"
                                     data-ng-repeat="bplan in list| startFrom:currentPage*pageSize | limitTo:pageSize">
                                     <listitemmobile
diff --git a/bplan/templates/downloads.html b/bplan/templates/downloads.html
index e9d92547..9ec6f23d 100644
--- a/bplan/templates/downloads.html
+++ b/bplan/templates/downloads.html
@@ -1,3 +1,5 @@
+<!-- Not updated to Bootstrap 5 due to no use -->
+
 {% extends 'admin_base.html' %}
 {% load static %}
 
diff --git a/bplan/templates/login.html b/bplan/templates/login.html
index 7d0251bd..5dcf307d 100644
--- a/bplan/templates/login.html
+++ b/bplan/templates/login.html
@@ -1,4 +1,4 @@
-
+<!-- Not updated to Bootstrap 5 due to no use -->
 {% extends 'admin_base.html' %}
 
 {% block content %}