From 742ff2f46ea57cff0ef702a6acbc8a46a1543506 Mon Sep 17 00:00:00 2001
From: rra <rscmbbng@riseup.net>
Date: Sun, 10 Mar 2024 15:03:04 +0100
Subject: [PATCH] make tabs work responsive

---
 app/static/structure.css               | 11 +++++++++++
 app/templates/user/edit_profile2.html  | 10 +++++-----
 app/templates/user/edit_settings2.html | 12 ++++++------
 app/templates/user/filters2.html       | 10 +++++-----
 4 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/app/static/structure.css b/app/static/structure.css
index 4f3465ee..ca808a19 100644
--- a/app/static/structure.css
+++ b/app/static/structure.css
@@ -1288,4 +1288,15 @@ fieldset legend {
   max-width: 100%;
 }
 
+@media (orientation: portrait) {
+  .flex-sm-fill.text-sm-center.nav-link.active{
+    border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-border-color);
+    border-bottom-right-radius: var(--bs-nav-tabs-border-radius);
+    border-bottom-left-radius: var(--bs-nav-tabs-border-radius);
+  }
+  .card-header-tabs {
+    margin-bottom:8px;
+  }
+}
+
 /*# sourceMappingURL=structure.css.map */
diff --git a/app/templates/user/edit_profile2.html b/app/templates/user/edit_profile2.html
index e55e541e..ba9cd006 100644
--- a/app/templates/user/edit_profile2.html
+++ b/app/templates/user/edit_profile2.html
@@ -16,18 +16,18 @@
                 <li class="breadcrumb-item active">{{ _('Edit profile') }}</li>
               </ol>
             </nav>
-            <ul class="nav nav-tabs card-header-tabs">
+            <ul class="nav nav-tabs flex-column flex-sm-row card-header-tabs">
               <li class="nav-item">
-                <a class="nav-link" href="/user/settings">Basic</a>
+                <a class="flex-sm-fill text-sm-center nav-link" href="/user/settings">Basic</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="/user/settings/filters">Blocks & Filters</a>
+                <a class="flex-sm-fill text-sm-center nav-link" href="/user/settings/filters">Blocks & Filters</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link active" href="/u/{{ current_user.user_name }}/profile">Profile</a>
+                <a class="flex-sm-fill text-sm-center nav-link active" href="/u/{{ current_user.user_name }}/profile">Profile</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link disabled" href="#">Other</a>
+                <a class="flex-sm-fill text-sm-center nav-link disabled" href="#">Other</a>
               </li>
             </ul>
         </div>
diff --git a/app/templates/user/edit_settings2.html b/app/templates/user/edit_settings2.html
index 3f9344ed..8637a51f 100644
--- a/app/templates/user/edit_settings2.html
+++ b/app/templates/user/edit_settings2.html
@@ -10,25 +10,25 @@
 
     <div class="card" style="max-width:unset;">
       <div class="card-header">
-                    <nav aria-label="breadcrumb" id="breadcrumb_nav" title="Navigation">
+              <nav class="mb-2" aria-label="breadcrumb" id="breadcrumb_nav" title="Navigation">
               <ol class="breadcrumb">
                 <li class="breadcrumb-item"><a href="/">{{ _('Home') }}</a></li>
                 <li class="breadcrumb-item"><a href="/u/{{ user.link() }}">{{ user.display_name() }}</a></li>
                 <li class="breadcrumb-item active">{{ _('Change settings') }}</li>
               </ol>
             </nav>
-        <ul class="nav nav-tabs card-header-tabs">
+        <ul class="nav nav-tabs flex-column flex-sm-row card-header-tabs">
           <li class="nav-item">
-            <a class="nav-link active" href="/user/settings">Basic</a>
+            <a class="flex-sm-fill text-sm-center nav-link active" href="/user/settings">Basic</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="/user/settings/filters">Blocks & Filters</a>
+            <a class="flex-sm-fill text-sm-center nav-link" href="/user/settings/filters">Blocks & Filters</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link" href="/u/{{ current_user.user_name }}/profile">Profile</a>
+            <a class="flex-sm-fill text-sm-center nav-link" href="/u/{{ current_user.user_name }}/profile">Profile</a>
           </li>
           <li class="nav-item">
-            <a class="nav-link disabled" href="#">Other</a>
+            <a class="flex-sm-fill text-sm-center nav-link disabled" href="#">Other</a>
           </li>
         </ul>
       </div>
diff --git a/app/templates/user/filters2.html b/app/templates/user/filters2.html
index 8421932f..e912bd0e 100644
--- a/app/templates/user/filters2.html
+++ b/app/templates/user/filters2.html
@@ -17,18 +17,18 @@
                 <li class="breadcrumb-item active">{{ _('Filters') }}</li>
               </ol>
             </nav>
-            <ul class="nav nav-tabs card-header-tabs">
+            <ul class="nav nav-tabs flex-column flex-sm-row card-header-tabs">
               <li class="nav-item">
-                <a class="nav-link" href="/user/settings">Basic</a>
+                <a class="flex-sm-fill text-sm-center nav-link" href="/user/settings">Basic</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link active" href="/user/settings/filters">Blocks & Filters</a>
+                <a class="flex-sm-fill text-sm-center nav-link active" href="/user/settings/filters">Blocks & Filters</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link" href="/u/{{ current_user.user_name }}/profile">Profile</a>
+                <a class="flex-sm-fill text-sm-center nav-link" href="/u/{{ current_user.user_name }}/profile">Profile</a>
               </li>
               <li class="nav-item">
-                <a class="nav-link disabled" href="#">Other</a>
+                <a class="flex-sm-fill text-sm-center nav-link disabled" href="#">Other</a>
               </li>
             </ul>
     </div>