more messing with accordian css

bmlt-enabled · Jan 21, 2024 · 4d58e82 · 4d58e82
1 parent 711f73a
commit 4d58e82
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 26 deletions.
diff --git a/src/app/pages/listfull/listfull.page.html b/src/app/pages/listfull/listfull.page.html
@@ -26,29 +26,29 @@
 
   <div *ngIf="HTMLGrouping == 'areas'">
     <ion-accordion-group>
-    <div *ngFor="let L1 of serviceGroupHierarchy; let i = index">
+    <div *ngFor="let L1 of serviceGroupHierarchy">
       <div *ngIf="L1.childServiceGroup;else L1_no_children">
-        <ion-accordion>
+        <ion-accordion  class="no-padding">
           <ion-item slot="header">{{ L1.name }}</ion-item>
           <div class="ion-padding" slot="content">
 
             <ion-accordion-group>
 
-            <div *ngFor="let L2 of L1.childServiceGroup; let j = index">
+            <div *ngFor="let L2 of L1.childServiceGroup">
               <div *ngIf="L2.childServiceGroup;else L2_no_children">
                 <ion-accordion>
                   <ion-item slot="header">{{ L2.name }}</ion-item>
 
                   <div class="ion-padding" slot="content">
                     <ion-accordion-group>
-                    <div *ngFor="let L3 of L2.childServiceGroup; let j = index">
+                    <div *ngFor="let L3 of L2.childServiceGroup">
                       <div *ngIf="L3.childServiceGroup;else L3_no_children">
                         <ion-accordion>
                           <ion-item slot="header">{{ L3.name }}</ion-item>
 
                           <div class="ion-padding" slot="content">
 
-                            <div *ngFor="let L4 of L3.childServiceGroup; let j = index">
+                            <div *ngFor="let L4 of L3.childServiceGroup">
                               <div *ngIf="L4.childServiceGroup;else L4_no_children">
                                 <ion-accordion>
                                   <ion-item slot="header">{{ L4.name }}</ion-item>
@@ -66,7 +66,7 @@
                               </ng-template>
                             </div>        
 
-        
+
                           </div>
 
                         </ion-accordion>

diff --git a/src/app/pages/listfull/listfull.page.scss b/src/app/pages/listfull/listfull.page.scss
@@ -4,24 +4,34 @@
 }
 
 ion-accordion {
-    margin: 0 auto;
-  }
-
-  ion-accordion.accordion-expanding,
-  ion-accordion.accordion-expanded {
-    width: calc(100% - 2px);
-
-    margin: 2px auto;
-  }
-
-  ion-accordion.accordion-collapsing ion-item[slot='header'],
-  ion-accordion.accordion-collapsed ion-item[slot='header'] {
-    --background: var(--ion-color-light);
-    --color: var(--ion-color-light-contrast);
-  }
+  margin: 0 auto;
+}
 
-  ion-accordion.accordion-expanding ion-item[slot='header'],
-  ion-accordion.accordion-expanded ion-item[slot='header'] {
-    --background: var(--ion-color-primary);
-    --color: var(--ion-color-primary-contrast);
-  }
+// ion-accordion {
+//   border: 1px;
+//   border-style: ridge;
+//   border-radius: 0px 0px 5px 5px;
+// }
+// ion-accordion.accordion-expanding,
+// ion-accordion.accordion-expanded {
+//   width: calc(100% - 2px);
+
+// }
+
+ion-accordion.accordion-collapsing ion-item[slot='header'],
+ion-accordion.accordion-collapsed ion-item[slot='header'] {
+  --background: var(--ion-color-light);
+  --color: var(--ion-color-light-contrast);
+}
+
+ion-accordion.accordion-expanding ion-item[slot='header'],
+ion-accordion.accordion-expanded ion-item[slot='header'] {
+  --background: var(--ion-color-primary);
+  --color: var(--ion-color-primary-contrast);
+}
+
+.ion-padding {
+  padding-top: 0px !important; 
+  padding-left: 6px !important; 
+  padding-right: 6px !important;  
+}