Oprava mobilního meníčka na nový bootstrap

docs/css.rst

@@ -13,7 +13,7 @@ Dále jsem separoval CSSka pro **galerii** (potřebuje hodně specifických styl
 
 Dále web (asi) používá externí frameworky (v separátních složkách – mají k sobě i JS a podobné věci):
 
-- bootstrap: dělá nějaké basic stylování, *web je na něm hodně závislý* (například jsem zjistil, že bootstrap kdysi přidával ``font-size:14px``, bez čehož se web úplně rozpadnul)
+- bootstrap: dělá nějaké basic stylování, *web je na něm hodně závislý* (například jsem zjistil, že bootstrap kdysi přidával ``font-size:14px``, bez čehož se web úplně rozpadnul) (také na něm běží mobilní meníčko, které navíc vyžaduje Popper, tedy bootstrap.bundle.js místo bootstrap.js)
 
 Pak jsou tu ``mamweb-dev.css`` a ``printtable.css``, co jsem si ještě nerozmyslel, co s tím.
 

mamweb/static/css/layout.css

@@ -703,9 +703,10 @@ div.zadani_termin .datum {
 
 	li.dropdown div.submenu_mobile{
 		display: none;
+		--bs-dropdown-bg: var(--hlavni-oranzova);
 	}
 
-	li.dropdown.open div.submenu_mobile{
+	li.dropdown div.submenu_mobile.show{
 		display: block;
 	}
 

mamweb/templates/base.html

@@ -8,7 +8,6 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="shortcut icon" href="{% static 'images/MATFYZ_MM_barevne.svg' %}" type="image/x-icon">
     {% block custom_css %}{% endblock %}
-    <link href="{% static 'bootstrap/css/bootstrap-theme.css' %}" rel="stylesheet">
     <link href="{% static 'bootstrap/css/bootstrap.css' %}" rel="stylesheet">
     <link href="{% static 'css/constants.css' %}?version=1" rel="stylesheet">
     <link href="{% static 'css/base.css' %}?version=1" rel="stylesheet">
@@ -82,7 +81,7 @@
 <nav class="nav-button">
 
   <!-- Collapse button -->
-  <button class="navbar-button" type="button" data-toggle="collapse" data-target="#navbar-content"
+  <button class="navbar-button" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-content"
     aria-controls="navbar-content" aria-expanded="false"><span>Menu</span></button>
 
   <!-- Collapsible content -->
@@ -120,7 +119,7 @@
    </div> <!-- container -->
     
 
-    <script src="{% static 'bootstrap/js/bootstrap.js' %}"></script>
+    <script src="{% static 'bootstrap/js/bootstrap.bundle.js' %}"></script>
     {% include 'april.html' %}
 	{% block js %}{% endblock %}
   </body>

mamweb/templates/menu_mobile.html

@@ -1,13 +1,13 @@
 {% load sitetree %}
 {% spaceless %}
 {% autoescape off %}
-<ul class="menu_mobile">
+<ul class="navbar-nav menu_mobile">
     {% for item in sitetree_items %}
         <li class="{% if item.has_children %}dropdown{% endif %} {% if item.is_current or item.in_current_branch %}active{% endif %}">
-            <a href="{% if item.has_children %}#{% else %}{% sitetree_url for item %}{% endif %}" {% if item.has_children %}class="dropdown-toggle" data-toggle="dropdown"{% endif %}>
+            <a href="{% if item.has_children %}#{% else %}{% sitetree_url for item %}{% endif %}" {% if item.has_children %}class="dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"{% endif %}>
                 {% if item.title == "HIDDEN" %}Korektury{% else %}{{ item.title_resolved }}{% endif %}
             </a>
-            <div class="submenu_mobile {% if item.is_current or item.in_current_branch %}active{% endif %}">
+            <div class="dropdown-menu submenu_mobile {% if item.is_current or item.in_current_branch %}active{% endif %}">
             {% if item.has_children %}
                 {% sitetree_children of item for menu template "menu_mobile_dropdown.html" %}
             {% endif %}