webapp: adjust look of tables in accordions to live view cards

this is relevant for the radio statistics table, as well as the tables in the grid profile modal.
hoylabs · Oct 29, 2024 · a582f9c · a582f9c
1 parent aef0efc
commit a582f9c
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/webapp/src/components/GridProfile.vue b/webapp/src/components/GridProfile.vue
@@ -19,7 +19,11 @@
         </table>
 
         <div class="accordion" id="accordionProfile">
-            <div class="accordion-item" v-for="(section, index) in gridProfileList.sections" :key="index">
+            <div
+                class="accordion-item accordion-table"
+                v-for="(section, index) in gridProfileList.sections"
+                :key="index"
+            >
                 <h2 class="accordion-header">
                     <button
                         class="accordion-button collapsed"

diff --git a/webapp/src/scss/styles.scss b/webapp/src/scss/styles.scss
@@ -35,6 +35,16 @@ div.card.card-table tr > :last-child {
     padding-right: var(--bs-card-cap-padding-x);
 }
 
+div.accordion-item.accordion-table tr > :first-child {
+    padding-left: var(--bs-accordion-btn-padding-x);
+}
+
+div.accordion-item.accordion-table div.accordion-body {
+    padding-top: 0;
+    padding-left: 0;
+    padding-right: 0;
+}
+
 div.card.card-table div.card-body {
     padding: 0;
 }
diff --git a/webapp/src/views/HomeView.vue b/webapp/src/views/HomeView.vue
@@ -223,7 +223,7 @@
                             </BootstrapAlert>
 
                             <div class="accordion mt-5" id="accordionRadioStats">
-                                <div class="accordion-item">
+                                <div class="accordion-item accordion-table">
                                     <h2 class="accordion-header">
                                         <button
                                             class="accordion-button collapsed"