style changes

DBuit · Feb 24, 2020 · 292753a · 292753a
1 parent ce754fe
commit 292753a
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 24 deletions.
diff --git a/dist/sidebar-card.js b/dist/sidebar-card.js
@@ -2924,20 +2924,22 @@ class SidebarCard extends LitElement {
         ${clock ? html `<h1 class="clock${title ? ' with-title' : ''}" style="${textColor ? 'color:' + textColor : ''}">${this.hass.states['sensor.time'].state}</h1>` : html ``}
         ${title ? html `<h1 style="${textColor ? 'color:' + textColor : ''}">${title}</h1>` : html ``}
         
-        ${this.config.template ? html `
-          <ul class="template" style="${textColor ? 'color:' + textColor : ''}">
-            ${this.templateLines.map(line => {
-            return html `<li>${line}</li>`;
-        })}
-          </ul>
-        ` : html ``}
         ${sidebarMenu.length > 0 ? html `
         <ul class="sidebarMenu" style="${sidebarMenuColor ? 'color:' + sidebarMenuColor : ''}">
           ${sidebarMenu.map(sidebarMenuItem => {
             return html `<li @click="${e => this._menuAction(e)}" data-path="${sidebarMenuItem.navigation_path ? sidebarMenuItem.navigation_path : ''}" data-menuitem="${JSON.stringify(sidebarMenuItem)}" data->${sidebarMenuItem.name}</li>`;
         })}
         </ul>
         ` : html ``}
+
+        ${this.config.template ? html `
+          <ul class="template" style="${textColor ? 'color:' + textColor : ''}">
+            ${this.templateLines.map(line => {
+            return html `<li>${line}</li>`;
+        })}
+          </ul>
+        ` : html ``}
+        
       </div>
     `;
     }
@@ -3030,14 +3032,17 @@ class SidebarCard extends LitElement {
         }
         .sidebarMenu {
           list-style:none;
-          margin: 0;
-          padding: 0;
+          margin: 20px 0;
+          padding: 20px 0;
+          border-top: 1px solid rgba(255,255,255,0.2);
+          border-bottom: 1px solid rgba(255,255,255,0.2);
         }
         .sidebarMenu li {
           padding: 10px 20px;
           border-radius: 12px;
           color:inherit;
-          font-size:20px;
+          font-size:18px;
+          line-height:18px;
           font-weight:300;
           white-space: normal;
           display:block;
@@ -3048,12 +3053,14 @@ class SidebarCard extends LitElement {
 
         h1 {
           margin-top:0;
-          margin-bottom: 30px;
+          margin-bottom: 20px;
           font-size: 32px;
+          line-height: 32px;
           font-weight: 300;
         }
         h1.clock {
           font-size:60px;
+          line-height: 60px;
         }
         h1.clock.with-title {
           margin-bottom:0;
@@ -3067,7 +3074,8 @@ class SidebarCard extends LitElement {
         .template li {
           display:block;
           color:inherit;
-          font-size:20px;
+          font-size:18px;
+          line-height:18px;
           font-weight:300;
           white-space: normal;
         }

diff --git a/src/sidebar-card.ts b/src/sidebar-card.ts
@@ -47,20 +47,22 @@ class SidebarCard extends LitElement {
         ${clock ? html `<h1 class="clock${title ? ' with-title':''}" style="${textColor ? 'color:'+textColor : ''}">${this.hass.states['sensor.time'].state}</h1>`: html ``}
         ${title ? html `<h1 style="${textColor ? 'color:'+textColor : ''}">${title}</h1>`: html ``}
         
-        ${this.config.template ? html`
-          <ul class="template" style="${textColor ? 'color:'+textColor : ''}">
-            ${this.templateLines.map(line => {
-              return html`<li>${line}</li>`;
-            })}
-          </ul>
-        ` : html``}
         ${sidebarMenu.length > 0 ? html`
         <ul class="sidebarMenu" style="${sidebarMenuColor ? 'color:'+sidebarMenuColor : ''}">
           ${sidebarMenu.map(sidebarMenuItem => {
             return html`<li @click="${e => this._menuAction(e)}" data-path="${sidebarMenuItem.navigation_path ? sidebarMenuItem.navigation_path : ''}" data-menuitem="${JSON.stringify(sidebarMenuItem)}" data->${sidebarMenuItem.name}</li>`;
           })}
         </ul>
         ` : html ``}
+
+        ${this.config.template ? html`
+          <ul class="template" style="${textColor ? 'color:'+textColor : ''}">
+            ${this.templateLines.map(line => {
+              return html`<li>${line}</li>`;
+            })}
+          </ul>
+        ` : html``}
+        
       </div>
     `;
   }
@@ -162,14 +164,17 @@ class SidebarCard extends LitElement {
         }
         .sidebarMenu {
           list-style:none;
-          margin: 0;
-          padding: 0;
+          margin: 20px 0;
+          padding: 20px 0;
+          border-top: 1px solid rgba(255,255,255,0.2);
+          border-bottom: 1px solid rgba(255,255,255,0.2);
         }
         .sidebarMenu li {
           padding: 10px 20px;
           border-radius: 12px;
           color:inherit;
-          font-size:20px;
+          font-size:18px;
+          line-height:18px;
           font-weight:300;
           white-space: normal;
           display:block;
@@ -180,12 +185,14 @@ class SidebarCard extends LitElement {
 
         h1 {
           margin-top:0;
-          margin-bottom: 30px;
+          margin-bottom: 20px;
           font-size: 32px;
+          line-height: 32px;
           font-weight: 300;
         }
         h1.clock {
           font-size:60px;
+          line-height: 60px;
         }
         h1.clock.with-title {
           margin-bottom:0;
@@ -199,7 +206,8 @@ class SidebarCard extends LitElement {
         .template li {
           display:block;
           color:inherit;
-          font-size:20px;
+          font-size:18px;
+          line-height:18px;
           font-weight:300;
           white-space: normal;
         }