From 69937fe520d64c92410208a306ba1e48170b5dd7 Mon Sep 17 00:00:00 2001 From: Tobias Nordahl Kristensen Date: Thu, 27 Feb 2020 10:38:35 +0100 Subject: [PATCH 1/4] Remove overflow-y on playlists --- src/spotify-card.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/spotify-card.js b/src/spotify-card.js index b92178c..4b51589 100644 --- a/src/spotify-card.js +++ b/src/spotify-card.js @@ -53,7 +53,6 @@ styleElement.textContent = ` flex-flow: column nowrap; margin-bottom: 15px; background-color: ${styles.black}; - overflow-y: scroll; } .playlist { display: flex; From 0fe78e4322d0977f9a736d92e67a57f224e8838e Mon Sep 17 00:00:00 2001 From: Tobias Nordahl Kristensen Date: Thu, 27 Feb 2020 10:40:52 +0100 Subject: [PATCH 2/4] Overflow-handle to main container --- src/spotify-card.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/spotify-card.js b/src/spotify-card.js index 4b51589..44d19c9 100644 --- a/src/spotify-card.js +++ b/src/spotify-card.js @@ -38,6 +38,8 @@ styleElement.textContent = ` color: ${styles.white}; font-size: 14px; padding: 25px; + height:auto; + overflow-y:auto; } .spotify_container *:focus {outline:none} .header img { From c6248aa3190e6d868cecaa74773ffeffde43485b Mon Sep 17 00:00:00 2001 From: Tobias Nordahl Kristensen Date: Thu, 27 Feb 2020 10:41:22 +0100 Subject: [PATCH 3/4] dropdown-content: position fixed, instead of absolute --- src/spotify-card.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/spotify-card.js b/src/spotify-card.js index 44d19c9..50ce187 100644 --- a/src/spotify-card.js +++ b/src/spotify-card.js @@ -150,7 +150,7 @@ styleElement.textContent = ` } .dropdown-content { display: none; - position: absolute; + position: fixed; background-color: ${styles.lightBlack}; min-width: 250px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); From e375cab3152b5307667a4211fa2677b78d0f1079 Mon Sep 17 00:00:00 2001 From: Tobias Nordahl Kristensen Date: Thu, 27 Feb 2020 10:54:06 +0100 Subject: [PATCH 4/4] Styling issues in Firefox - See bit.ly/2w65hQu --- dist/spotify-card.js | 2 +- dist/spotify-card.umd.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/dist/spotify-card.js b/dist/spotify-card.js index ddf8621..aa684e1 100644 --- a/dist/spotify-card.js +++ b/dist/spotify-card.js @@ -85,7 +85,7 @@ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. - */,O=z.bind(o),F=document.createElement("style"),G="rgb(30, 215, 96)",J="rgb(40, 40, 40)",K="rgb(24, 24, 24)",Q="rgb(170, 170, 170)",X="rgb(200, 200, 200)",Y="rgb(255, 255, 255)";F.textContent=`\n .spotify_container {\n background-color: ${J};\n font-family: 'Roboto', sans-serif;\n color: ${Y};\n font-size: 14px;\n padding: 25px;\n }\n .spotify_container *:focus {outline:none}\n .header img {\n height: 30px;\n margin-bottom: 10px;\n }\n .login__box {\n width: 100%;\n text-align: center;\n }\n .playlists {\n display: flex;\n flex-flow: column nowrap;\n margin-bottom: 15px;\n background-color: ${K};\n overflow-y: scroll;\n }\n .playlist {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n border-top: 1px solid ${J};\n height: 42px;\n }\n .playlist:active {\n background-color: rgb(200, 200, 240);\n }\n .playlist:last-child {\n border-bottom: 1px solid ${J};\n }\n .playlist:hover {\n background: ${J};\n cursor: pointer;\n }\n .highlight {\n background: ${J};\n }\n\n .playlist__cover_art img {\n width: 42px;\n height: 42px;\n }\n .playlist__number {\n margin-left: 10px;\n color: ${Q};\n width: 12px;\n }\n\n .playlist__playicon {\n color: ${Y};\n margin-left: 10px;\n }\n .playlist__playicon:hover {\n color: rgb(216, 255, 229);\n text-shadow: 0 0 20px rgb(216, 255, 229);\n }\n .playing {\n color: ${G}\n }\n\n .playlist__title {\n margin-left: 30px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 75vw;\n }\n .controls {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n }\n .greenButton {\n border-radius: 15px;\n padding: 0 20px 0 20px;\n font-size: 14px;\n height: 27px;\n color: white;\n border: none;\n background: ${G};\n cursor: pointer;\n margin-right: 10px;\n }\n .greenButton:hover {\n background-color: #43e57d;\n }\n .playButton::before {\n content: "\\25B6 "\n }\n\n .dropdown {\n position: relative;\n display: inline-block;\n color: ${X};\n }\n .mediaplayer_select {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .mediaplayer_speaker_icon {\n display: inline-block;\n padding: 3px;\n width: 17px;\n height: 17px;\n margin-right: 10px;\n border: thin solid ${X};\n border-radius: 50%;\n }\n .dropdown-content {\n display: none;\n position: absolute;\n background-color: ${J};\n min-width: 250px;\n box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n z-index: 1;\n }\n .dropdown-content a {\n color: ${X};\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n }\n .dropdown-content a:hover {\n box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.07);\n }\n .dropdown:hover .dropdown-content {\n display: block;\n }\n`;class Z extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.config={}}set hass(e){this.savedHass||(this.savedHass=e)}setConfig(e){if(!e.client_id)throw new Error("No client ---- id");this.config=e}getCardSize(){return 10}disconnectedCallback(){this.shadow.innerHTML=""}connectedCallback(){this.config.client_id||(this.config.client_id=this.getAttribute("client_id"));const e=document.createElement("div");var t,n;this.shadow.appendChild(F),this.shadow.appendChild(e),t=O` + */,O=z.bind(o),F=document.createElement("style"),G="rgb(30, 215, 96)",J="rgb(40, 40, 40)",K="rgb(24, 24, 24)",Q="rgb(170, 170, 170)",X="rgb(200, 200, 200)",Y="rgb(255, 255, 255)";F.textContent=`\n .spotify_container {\n background-color: ${J};\n font-family: 'Roboto', sans-serif;\n color: ${Y};\n font-size: 14px;\n padding: 25px;\n height:auto;\n overflow-y:auto;\n }\n .spotify_container *:focus {outline:none}\n .header img {\n height: 30px;\n margin-bottom: 10px;\n }\n .login__box {\n width: 100%;\n text-align: center;\n }\n .playlists {\n display: flex;\n flex-flow: column nowrap;\n margin-bottom: 15px;\n background-color: ${K};\n }\n .playlist {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n border-top: 1px solid ${J};\n height: 42px;\n }\n .playlist:active {\n background-color: rgb(200, 200, 240);\n }\n .playlist:last-child {\n border-bottom: 1px solid ${J};\n }\n .playlist:hover {\n background: ${J};\n cursor: pointer;\n }\n .highlight {\n background: ${J};\n }\n\n .playlist__cover_art img {\n width: 42px;\n height: 42px;\n }\n .playlist__number {\n margin-left: 10px;\n color: ${Q};\n width: 12px;\n }\n\n .playlist__playicon {\n color: ${Y};\n margin-left: 10px;\n }\n .playlist__playicon:hover {\n color: rgb(216, 255, 229);\n text-shadow: 0 0 20px rgb(216, 255, 229);\n }\n .playing {\n color: ${G}\n }\n\n .playlist__title {\n margin-left: 30px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 75vw;\n }\n .controls {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n }\n .greenButton {\n border-radius: 15px;\n padding: 0 20px 0 20px;\n font-size: 14px;\n height: 27px;\n color: white;\n border: none;\n background: ${G};\n cursor: pointer;\n margin-right: 10px;\n }\n .greenButton:hover {\n background-color: #43e57d;\n }\n .playButton::before {\n content: "\\25B6 "\n }\n\n .dropdown {\n position: relative;\n display: inline-block;\n color: ${X};\n }\n .mediaplayer_select {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .mediaplayer_speaker_icon {\n display: inline-block;\n padding: 3px;\n width: 17px;\n height: 17px;\n margin-right: 10px;\n border: thin solid ${X};\n border-radius: 50%;\n }\n .dropdown-content {\n display: none;\n position: fixed;\n background-color: ${J};\n min-width: 250px;\n box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n z-index: 1;\n }\n .dropdown-content a {\n color: ${X};\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n }\n .dropdown-content a:hover {\n box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.07);\n }\n .dropdown:hover .dropdown-content {\n display: block;\n }\n`;class Z extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.config={}}set hass(e){this.savedHass||(this.savedHass=e)}setConfig(e){if(!e.client_id)throw new Error("No client ---- id");this.config=e}getCardSize(){return 10}disconnectedCallback(){this.shadow.innerHTML=""}connectedCallback(){this.config.client_id||(this.config.client_id=this.getAttribute("client_id"));const e=document.createElement("div");var t,n;this.shadow.appendChild(F),this.shadow.appendChild(e),t=O` <${H} clientId=${this.config.client_id} limit=${this.config.limit||10} diff --git a/dist/spotify-card.umd.js b/dist/spotify-card.umd.js index ddf8621..aa684e1 100644 --- a/dist/spotify-card.umd.js +++ b/dist/spotify-card.umd.js @@ -85,7 +85,7 @@ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. - */,O=z.bind(o),F=document.createElement("style"),G="rgb(30, 215, 96)",J="rgb(40, 40, 40)",K="rgb(24, 24, 24)",Q="rgb(170, 170, 170)",X="rgb(200, 200, 200)",Y="rgb(255, 255, 255)";F.textContent=`\n .spotify_container {\n background-color: ${J};\n font-family: 'Roboto', sans-serif;\n color: ${Y};\n font-size: 14px;\n padding: 25px;\n }\n .spotify_container *:focus {outline:none}\n .header img {\n height: 30px;\n margin-bottom: 10px;\n }\n .login__box {\n width: 100%;\n text-align: center;\n }\n .playlists {\n display: flex;\n flex-flow: column nowrap;\n margin-bottom: 15px;\n background-color: ${K};\n overflow-y: scroll;\n }\n .playlist {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n border-top: 1px solid ${J};\n height: 42px;\n }\n .playlist:active {\n background-color: rgb(200, 200, 240);\n }\n .playlist:last-child {\n border-bottom: 1px solid ${J};\n }\n .playlist:hover {\n background: ${J};\n cursor: pointer;\n }\n .highlight {\n background: ${J};\n }\n\n .playlist__cover_art img {\n width: 42px;\n height: 42px;\n }\n .playlist__number {\n margin-left: 10px;\n color: ${Q};\n width: 12px;\n }\n\n .playlist__playicon {\n color: ${Y};\n margin-left: 10px;\n }\n .playlist__playicon:hover {\n color: rgb(216, 255, 229);\n text-shadow: 0 0 20px rgb(216, 255, 229);\n }\n .playing {\n color: ${G}\n }\n\n .playlist__title {\n margin-left: 30px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 75vw;\n }\n .controls {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n }\n .greenButton {\n border-radius: 15px;\n padding: 0 20px 0 20px;\n font-size: 14px;\n height: 27px;\n color: white;\n border: none;\n background: ${G};\n cursor: pointer;\n margin-right: 10px;\n }\n .greenButton:hover {\n background-color: #43e57d;\n }\n .playButton::before {\n content: "\\25B6 "\n }\n\n .dropdown {\n position: relative;\n display: inline-block;\n color: ${X};\n }\n .mediaplayer_select {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .mediaplayer_speaker_icon {\n display: inline-block;\n padding: 3px;\n width: 17px;\n height: 17px;\n margin-right: 10px;\n border: thin solid ${X};\n border-radius: 50%;\n }\n .dropdown-content {\n display: none;\n position: absolute;\n background-color: ${J};\n min-width: 250px;\n box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n z-index: 1;\n }\n .dropdown-content a {\n color: ${X};\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n }\n .dropdown-content a:hover {\n box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.07);\n }\n .dropdown:hover .dropdown-content {\n display: block;\n }\n`;class Z extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.config={}}set hass(e){this.savedHass||(this.savedHass=e)}setConfig(e){if(!e.client_id)throw new Error("No client ---- id");this.config=e}getCardSize(){return 10}disconnectedCallback(){this.shadow.innerHTML=""}connectedCallback(){this.config.client_id||(this.config.client_id=this.getAttribute("client_id"));const e=document.createElement("div");var t,n;this.shadow.appendChild(F),this.shadow.appendChild(e),t=O` + */,O=z.bind(o),F=document.createElement("style"),G="rgb(30, 215, 96)",J="rgb(40, 40, 40)",K="rgb(24, 24, 24)",Q="rgb(170, 170, 170)",X="rgb(200, 200, 200)",Y="rgb(255, 255, 255)";F.textContent=`\n .spotify_container {\n background-color: ${J};\n font-family: 'Roboto', sans-serif;\n color: ${Y};\n font-size: 14px;\n padding: 25px;\n height:auto;\n overflow-y:auto;\n }\n .spotify_container *:focus {outline:none}\n .header img {\n height: 30px;\n margin-bottom: 10px;\n }\n .login__box {\n width: 100%;\n text-align: center;\n }\n .playlists {\n display: flex;\n flex-flow: column nowrap;\n margin-bottom: 15px;\n background-color: ${K};\n }\n .playlist {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n border-top: 1px solid ${J};\n height: 42px;\n }\n .playlist:active {\n background-color: rgb(200, 200, 240);\n }\n .playlist:last-child {\n border-bottom: 1px solid ${J};\n }\n .playlist:hover {\n background: ${J};\n cursor: pointer;\n }\n .highlight {\n background: ${J};\n }\n\n .playlist__cover_art img {\n width: 42px;\n height: 42px;\n }\n .playlist__number {\n margin-left: 10px;\n color: ${Q};\n width: 12px;\n }\n\n .playlist__playicon {\n color: ${Y};\n margin-left: 10px;\n }\n .playlist__playicon:hover {\n color: rgb(216, 255, 229);\n text-shadow: 0 0 20px rgb(216, 255, 229);\n }\n .playing {\n color: ${G}\n }\n\n .playlist__title {\n margin-left: 30px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n max-width: 75vw;\n }\n .controls {\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n }\n .greenButton {\n border-radius: 15px;\n padding: 0 20px 0 20px;\n font-size: 14px;\n height: 27px;\n color: white;\n border: none;\n background: ${G};\n cursor: pointer;\n margin-right: 10px;\n }\n .greenButton:hover {\n background-color: #43e57d;\n }\n .playButton::before {\n content: "\\25B6 "\n }\n\n .dropdown {\n position: relative;\n display: inline-block;\n color: ${X};\n }\n .mediaplayer_select {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .mediaplayer_speaker_icon {\n display: inline-block;\n padding: 3px;\n width: 17px;\n height: 17px;\n margin-right: 10px;\n border: thin solid ${X};\n border-radius: 50%;\n }\n .dropdown-content {\n display: none;\n position: fixed;\n background-color: ${J};\n min-width: 250px;\n box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);\n z-index: 1;\n }\n .dropdown-content a {\n color: ${X};\n padding: 12px 16px;\n text-decoration: none;\n display: block;\n }\n .dropdown-content a:hover {\n box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.07);\n }\n .dropdown:hover .dropdown-content {\n display: block;\n }\n`;class Z extends HTMLElement{constructor(){super(),this.shadow=this.attachShadow({mode:"open"}),this.config={}}set hass(e){this.savedHass||(this.savedHass=e)}setConfig(e){if(!e.client_id)throw new Error("No client ---- id");this.config=e}getCardSize(){return 10}disconnectedCallback(){this.shadow.innerHTML=""}connectedCallback(){this.config.client_id||(this.config.client_id=this.getAttribute("client_id"));const e=document.createElement("div");var t,n;this.shadow.appendChild(F),this.shadow.appendChild(e),t=O` <${H} clientId=${this.config.client_id} limit=${this.config.limit||10}