Fix Advisor accordion style

Signed-off-by: Maurício Meneghini Fauth <mauricio@fauth.dev>
phpmyadmin · Feb 8, 2021 · 8d1a95d · 8d1a95d
1 parent f807ba1
commit 8d1a95d
Show file tree

Hide file tree

Showing 8 changed files with 30 additions and 76 deletions.
diff --git a/templates/server/status/advisor/index.twig b/templates/server/status/advisor/index.twig
@@ -64,14 +64,14 @@
 
       <div class="accordion mb-4" id="rulesAccordion">
         {% for rule in data.fired %}
-          <div class="card">
-            <div class="card-header" id="heading{{ loop.index }}">
-              <button class="btn btn-link{{ not loop.first ? ' collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ loop.index }}" aria-expanded="{{ loop.first ? 'true' : 'false' }}" aria-controls="collapse{{ loop.index }}">
+          <div class="accordion-item">
+            <div class="accordion-header" id="heading{{ loop.index }}">
+              <button class="accordion-button{{ not loop.first ? ' collapsed' }}" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{ loop.index }}" aria-expanded="{{ loop.first ? 'true' : 'false' }}" aria-controls="collapse{{ loop.index }}">
                 {{ rule.issue|striptags }}
               </button>
             </div>
-            <div id="collapse{{ loop.index }}" class="collapse{{ loop.first ? ' show' }}" aria-labelledby="heading{{ loop.index }}" data-parent="#rulesAccordion">
-              <div class="card-body">
+            <div id="collapse{{ loop.index }}" class="accordion-collapse collapse{{ loop.first ? ' show' }}" aria-labelledby="heading{{ loop.index }}" data-bs-parent="#rulesAccordion">
+              <div class="accordion-body">
                 <dl>
                   <dt>{% trans 'Issue:' %}</dt>
                   <dd>{{ rule.issue|raw }}</dd>

diff --git a/themes/metro/scss/_card.scss b/themes/metro/scss/_card.scss
@@ -31,24 +31,3 @@
     padding-left: 0;
   }
 }
-
-.accordion {
-  > .card {
-    margin-top: 0;
-    border-radius: 0;
-
-    > .card-header {
-      background-color: $button-background;
-      padding: 0.3rem;
-
-      .btn {
-        color: $button-color;
-
-        &:hover,
-        &:active {
-          text-decoration: none;
-        }
-      }
-    }
-  }
-}
diff --git a/themes/metro/scss/_common.scss b/themes/metro/scss/_common.scss
@@ -260,7 +260,7 @@ input {
   margin-right: 14px !important;
 }
 
-button {
+button:not(.accordion-button) {
   margin-left: 14px;
   padding: 4px;
   color: $button-color;

diff --git a/themes/metro/scss/_variables.scss b/themes/metro/scss/_variables.scss
@@ -247,6 +247,13 @@ $card-border-radius: 0;
 $card-cap-bg: $th-background;
 $card-bg: $th-background;
 
+// Accordion
+
+$accordion-button-padding-y: 0.375rem;
+$accordion-button-padding-x: 1rem;
+$accordion-button-active-color: $button-color;
+$accordion-button-active-bg: $button-background;
+
 // Breadcrumbs
 
 $breadcrumb-padding-y: 0.89rem;

diff --git a/themes/original/scss/_card.scss b/themes/original/scss/_card.scss
@@ -18,8 +18,7 @@
   color: #444;
 }
 
-#maincontainer .card-header,
-.accordion > .card > .card-header {
+#maincontainer .card-header {
   position: static;
   width: auto;
   margin: 0;
@@ -53,24 +52,3 @@
     padding-bottom: 0;
   }
 }
-
-.accordion {
-  > .card {
-    margin-top: 0;
-    margin-bottom: 0;
-    background: none;
-
-    > .card-header {
-      background-color: $th-background;
-      padding: 0;
-
-      .btn {
-        color: #00f;
-
-        &:hover {
-          color: #f00;
-        }
-      }
-    }
-  }
-}
diff --git a/themes/original/scss/_variables.scss b/themes/original/scss/_variables.scss
@@ -135,6 +135,14 @@ $card-bg: $bg-one;
 $card-spacer-y: 0.5em;
 $card-spacer-x: 0.5em;
 
+// Accordion
+
+$accordion-button-padding-y: 0.375rem;
+$accordion-button-padding-x: 0.75rem;
+$accordion-button-color: #00f;
+$accordion-button-active-color: #00f;
+$accordion-button-active-bg: $bg-one;
+
 // Breadcrumbs
 
 $breadcrumb-padding-y: 0.1rem;

diff --git a/themes/pmahomme/scss/_card.scss b/themes/pmahomme/scss/_card.scss
@@ -37,8 +37,7 @@
   padding: 0.5em;
 }
 
-#maincontainer .card-header,
-.accordion > .card > .card-header {
+#maincontainer .card-header {
   position: static;
   width: auto;
   margin: 0;
@@ -70,27 +69,3 @@
     box-shadow: 1px 1px 15px #999 inset;
   }
 }
-
-.accordion {
-  > .card {
-    margin-top: 0;
-    margin-bottom: 0;
-
-    > .card-header {
-      background-color: inherit;
-      box-shadow: none;
-
-      .btn {
-        color: #235a81;
-
-        &:active {
-          box-shadow: none;
-        }
-      }
-    }
-
-    .card-body {
-      background-color: #fff;
-    }
-  }
-}
diff --git a/themes/pmahomme/scss/_variables.scss b/themes/pmahomme/scss/_variables.scss
@@ -139,6 +139,13 @@ $card-border-color: #aaa;
 $card-bg: #eee;
 $card-cap-bg: #fff;
 
+// Accordion
+
+$accordion-button-padding-y: 0.375rem;
+$accordion-button-padding-x: 0.75rem;
+$accordion-button-active-color: #235a81;
+$accordion-button-active-bg: $navi-background;
+
 // Breadcrumbs
 
 $breadcrumb-padding-y: 0.1rem;