Feature: new theme variable ‘sonos-favorites-multiline’ (#27)

…and some styling tweaks
punxaphil · Feb 26, 2022 · 8039caf · 8039caf
1 parent ec744b1
commit 8039caf
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -122,6 +122,7 @@ The following variables are available and can be set in your theme to change the
 | --sonos-title-color | var(--card-background-color)
 | --sonos-border-radius | 0.25rem
 | --sonos-border-width | 0.125rem
+| --sonos-favorites-multiline | nowrap
 
 ### Example
 Here is a themed version with more rounded corners,different accent color and no transparency (thanks @giuliandenicola1).

diff --git a/src/favorite-buttons.ts b/src/favorite-buttons.ts
@@ -61,10 +61,11 @@ class FavoriteButtons extends LitElement {
         flex-wrap: wrap;
       }
       .favorite-wrapper {
-        padding: 0.1rem;
+        padding: 0 .6rem 0.4rem 0;
         box-sizing: border-box;
       }
       .favorite {
+        overflow: hidden;
         border: 0.1rem solid var(--sonos-int-background-color);
         display: flex;
         flex-direction: column;
@@ -78,24 +79,24 @@ class FavoriteButtons extends LitElement {
         background-repeat: no-repeat;
         background-size: cover;
         position: relative;
-        width: 95%;
+        width: 100%;
         height: 0;
-        padding-bottom: 95%;
+        padding-bottom: 100%;
       }
       .title {
-        width: 100%;
+        width: calc(100% - 0.2rem);
         text-align: center;
         font-size: 0.6rem;
         position: absolute;
-        top: 0;
-        left: 0;
+        top: 0.1rem;
+        left: 0.1rem;
       }
       .title-with-image {
         text-overflow: ellipsis;
         overflow: hidden;
-        white-space: nowrap;
+        white-space: var(--sonos-int-favorites-white-space);
         background-color: var(--sonos-int-player-section-background);
-        border-radius: calc(var(--sonos-int-border-radius) - 4px) calc(var(--sonos-int-border-radius) - 4px) 0 0;
+        border-radius: calc(var(--sonos-int-border-radius) - 0.25rem) calc(var(--sonos-int-border-radius) - 0.25rem) 0 0;
       }
       .favorite:focus,
       .favorite:hover {

diff --git a/src/group.ts b/src/group.ts
@@ -52,7 +52,7 @@ class Group extends LitElement {
       }
       .group .wrap {
         border-radius: var(--sonos-int-border-radius);
-        margin: 0.1rem 0;
+        margin: 0.5rem 0;
         padding: 0.5rem;
         border: thin solid var(--sonos-int-background-color);
         background-color: var(--sonos-int-background-color);

diff --git a/src/grouping-buttons.ts b/src/grouping-buttons.ts
@@ -74,7 +74,7 @@ class GroupingButtons extends LitElement {
       .member {
         flex-grow: 1;
         border-radius: var(--sonos-int-border-radius);
-        margin: 0.05rem;
+        margin: 0 0.25rem 0.5rem;
         padding: 0.45rem;
         display: flex;
         justify-content: center;

diff --git a/src/main.ts b/src/main.ts
@@ -181,6 +181,7 @@ export class CustomSonosCard extends LitElement {
         --sonos-int-title-color: var(--sonos-title-color, var(--card-background-color));
         --sonos-int-border-radius: var(--sonos-border-radius, 0.25rem);
         --sonos-int-border-width: var(--sonos-border-width, 0.125rem);
+        --sonos-int-favorites-white-space: var(--sonos-favorites-multiline, nowrap);
         --mdc-icon-size: 1rem;
         color: var(--sonos-int-color);
       }
@@ -207,7 +208,7 @@ export class CustomSonosCard extends LitElement {
         box-sizing: border-box;
       }
       .title {
-        margin-top: 0.5rem;
+        margin: 0.5rem 0;
         text-align: center;
         font-weight: bold;
         font-size: larger;