Changes to CSS to be more consistent wiht standard CSS

SFDO-Community · Sep 1, 2024 · 59a92d1 · 59a92d1
1 parent f7ab5fa
commit 59a92d1
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 9 deletions.
diff --git a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.html
@@ -27,16 +27,18 @@ <h2 class="slds-card__header-title">
                         </div>
                     </template> 
                 </template>
-                <template lwc:else>  
+                <template lwc:else>
+                    <div class="slds-card__body slds-card__body_inner">  
                     <template lwc:if={showTitle}>
-                        <div class={sectionHeaderClass}>
-                            <h3 slot="title" class="label slds-section__title slds-truncate slds-p-top_xx-small slds-p-bottom_xx-small slds-theme_shade">
-                                <span class="slds-var-m-left_medium" title="Section Title">{card.title}</span>
+                        <div class="section-layout-container slds-section slds-is-open slds-button slds-section__title-action slds-theme_shade">
+                            <h3 slot="title" class="slds-truncate slds-p-around_xx-small">
+                                <span class="slds-text-heading_small" title="Section Title">{card.title}</span>
                             </h3>
                         </div>
-                    </template>      
+                    </template>  
+                    </div>    
                 </template>
-                <div class="slds-grid grid-wrap slds-card__body">
+                <div class={sectionBodyClass}>
                     <div class="slds-col slds-grid slds-grid_vertical">                 
                         <div class="slds-col">
                             <template lwc:if={showDescription}>

diff --git a/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js b/force-app/main/default/lwc/indicatorBundle/indicatorBundle.js
@@ -115,10 +115,10 @@ export default class IndicatorBundle extends LightningElement {
                     }
 
                     if(this.flexipageRegionWidth == 'SMALL'){
-                        this.sectionHeaderClass = 'slds-section slds-is-open slds-var-p-horizontal_medium';
+                        this.sectionBodyClass = 'slds-grid grid-wrap slds-card__body';
                     } else {
-                        this.card.iconClass = 'slds-var-m-right_xx-small ';
-                        this.sectionHeaderClass = 'slds-section slds-is-open';
+                        this.card.iconClass = 'slds-media__figure slds-var-m-right_xx-small';
+                        this.sectionBodyClass = 'slds-grid grid-wrap slds-card__body slds-card__body_inner';
                     }
 
                     // console.log('Card Data');