Merge pull request #170 from SFDO-Community/feature/146-vertical-spacing

Extra vertical space between icons
SFDO-Community · Oct 8, 2024 · 47245d1 · 47245d1
2 parents 94563a5 + f291e07
commit 47245d1
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 13 deletions.
diff --git a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html
@@ -42,7 +42,7 @@ <h3 slot="title">
                     </template>
                 </template>
                 <!-- TODO: Do we put this in a Layout which would be responsive to the container, this could allow for empty slots too -->
-                <div class="slds-var-m-left_medium">
+                <div class="slds-var-m-left_medium slds-clearfix ">
                     <template if:true={results}>
                         <template for:each={results} for:item="fld">
                             <c-indicator-bundle-item if:true={fld.fShowAvatar} key={fld.fName}

diff --git a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js
@@ -110,7 +110,7 @@ export default class IndicatorBundle extends LightningElement {
                     if(this.bundle.CardIconBackground || this.bundle.CardIconForeground ){
                         this.card.iconClass = 'cardIcon slds-var-m-right_xx-small ';
                     } else {
-                        this.card.iconClass = 'slds-var-m-right_xx-small ';
+                        this.card.iconClass = 'slds-var-m-right_x-small ';
                     }
 
                     // console.log('Card Data');

diff --git a/force-app/main/default/lwc/indicatorBundleItem/indicatorBundleItem.html b/force-app/main/default/lwc/indicatorBundleItem/indicatorBundleItem.html
@@ -1,13 +1,15 @@
 <template>
-    <template if:false={record}>
-        <lightning-avatar 
-            size={indSize}
-            variant={indShape}
-            initials={indText}
-            src={indImage} 
-            fallback-icon-name={indIcon}
-            alternative-text={indHoverText} 
-            class={indClass}>
-        </lightning-avatar>
-    </template>
+    <div class="slds-var-m-bottom_x-small slds-float_left">
+        <template if:false={record}>
+            <lightning-avatar 
+                size={indSize}
+                variant={indShape}
+                initials={indText}
+                src={indImage} 
+                fallback-icon-name={indIcon}
+                alternative-text={indHoverText} 
+                class={indClass}>
+            </lightning-avatar>
+        </template>
+    </div>
 </template>