State and attribute are now displyed on a single line

custom-cards · Aug 13, 2023 · 52c5925 · 52c5925
1 parent b9e148f
commit 52c5925
Showing 1 changed file with 22 additions and 4 deletions.
diff --git a/src/slider-button-card.ts b/src/slider-button-card.ts
@@ -195,6 +195,7 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
                 `
               : ''}
 
+              <span class="oneliner">
               ${this.config.show_state
                 ? html`
                   <span class="state">
@@ -218,6 +219,7 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
                   </span>
                 `
                 : ''}
+              </span>
           </div>
     `;
   }
@@ -593,7 +595,7 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
     /* --- LABEL --- */
     
     .name {
-      color: var(--label-color-on, var(--primary-text-color, white));      
+      color: var(--label-color-on, var(--primary-text-color, white));
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
@@ -614,7 +616,7 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
     /* --- STATE --- */
     
     .state {      
-      color: var(--state-color-on, var(--label-badge-text-color, white));      
+      color: var(--state-color-on, var(--label-badge-text-color, white));
       text-overflow: ellipsis;
       white-space: nowrap;
       text-shadow: var(--state-text-shadow);
@@ -638,13 +640,29 @@ export class SliderButtonCard extends LitElement implements LovelaceCard {
     /* --- ATTRIBUTE --- */
 
     .attribute {      
-      color: var(--state-color-on, var(--label-badge-text-color, white));      
+      /*
+      color: var(--state-color-on, var(--label-badge-text-color, white));
       text-overflow: ellipsis;
+      overflow: hidden;
       white-space: nowrap;
       text-shadow: var(--state-text-shadow);
+      max-width: calc(50% -2em);
       transition: font-size 0.1s ease-in-out;
+      border: 1px solid red; 
+      */
+    }
+
+    .oneliner {      
+      color: var(--state-color-on, var(--label-badge-text-color, white));
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+      max-width:  20px;
+      width: 20px;
+      text-shadow: var(--state-text-shadow);
+      transition: font-size 0.1s ease-in-out;
+      /*border: 1px solid blue;*/
     }
-    
     /* --- SLIDER --- */    
     
     .slider {