@@ -51,7 +51,6 @@ import {
5151
5252import { ClimateCardConfig } from './climate-card-config' ;
5353import './ha/ha-control-circular-slider' ;
54- import './ha/ha-outlined-icon-button' ;
5554
5655const UNAVAILABLE = "unavailable" ;
5756const UNKNOWN = "unknown" ;
@@ -149,7 +148,6 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
149148
150149 private _highChanged ( ev ) {
151150 this . value = ev . detail . value ;
152- console . log ( this . value ) ;
153151 this . _setTemperature ( ) ;
154152 }
155153
@@ -210,6 +208,7 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
210208 display: block;
211209 box-sizing: border-box;
212210 position: relative;
211+ container: bt-card / inline-size;
213212 }
214213
215214 ha-card {
@@ -221,11 +220,16 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
221220 justify-items: center;
222221 padding-left: 1em;
223222 padding-right: 1em;
223+ padding-top: 1.5em;
224224 box-sizing: border-box;
225+ position: relative;
225226 }
226227
227- ha-card#expand {
228- padding-bottom: 20%;
228+ bt-ha-outlined-icon-button {
229+ border: 1px solid var(--secondary-text-color);
230+ border-radius: 100%;
231+ padding: 0.5em;
232+ cursor: pointer;
229233 }
230234
231235 .content.battery, bt-ha-control-circular-slider.battery {
@@ -290,30 +294,46 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
290294 }
291295
292296 .content {
293- margin: -0.5em auto;
294297 position: absolute;
295- width: 100%;
296- top: 15%;
297- left: 0;
298- z-index: 0
298+ width: calc(70% - 40px);
299+ height: calc(70% - 100px);
299300 box-sizing: border-box;
301+ border-radius: 100%;
302+ left: 50%;
303+ top: calc(50% - 20px);
304+ text-align: center;
305+ overflow-wrap: break-word;
306+ pointer-events: none;
307+ display: flex;
308+ align-items: center;
309+ place-content: center;
310+ flex-flow: wrap;
311+ z-index: 0;
312+ transform: translate(-50%,-50%);
313+ max-width: 155px;
300314 }
315+
316+ #main {
317+ transform: scale(2.3);
318+ }
319+
301320 .name {
302321 display: block;
303322 width: 100%;
304323 text-align: center;
305324 font-size: 20px;
306- padding-top: 1em;
325+ word-break: keep-all;
326+ white-space: nowrap;
327+ text-overflow: ellipsis;
328+ overflow: hidden;
307329 }
308330 svg {
309331 height: auto;
310332 margin: auto;
311333 display: block;
312334 width: 100%;
313-
314- transform: scale(1.5);
315335 -webkit-backface-visibility: hidden;
316- max-width: 255px ;
336+ max-width: 233px ;
317337 }
318338
319339 path {
@@ -371,7 +391,7 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
371391 display: flex;
372392 width: auto;
373393 justify-content: center;
374- margin-top: 1em ;
394+ margin-top: -3em ;
375395 margin-bottom: 1em;
376396 }
377397
@@ -381,8 +401,7 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
381401 display: flex;
382402 width: auto;
383403 justify-content: center;
384- margin-top: 1em;
385- margin-bottom: 1em;
404+ padding-bottom: 0.2em;
386405 }
387406
388407 #bt-control-buttons .button {
@@ -391,9 +410,8 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
391410 display: flex;
392411 width: auto;
393412 justify-content: center;
394- margin-top: -1.5em;
395- margin-bottom: 1em;
396413 padding: 1em;
414+ padding-top: 0.2em;
397415 }
398416
399417 #modes > * {
@@ -477,6 +495,19 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
477495 ha-icon-button[title="eco"] {
478496 --mode-color: var(--energy-non-fossil-color) !important;
479497 }
498+
499+ @container bt-card (max-width: 255px) {
500+ #modes {
501+ margin-top: -2em;
502+ }
503+ ha-card {
504+ padding-top: 2em;
505+ }
506+ .content {
507+ width: calc(90% - 40px);
508+ top: calc(50% - 20px);
509+ }
510+ }
480511 ` ;
481512
482513 private _vibrate ( delay :number ) {
@@ -704,7 +735,7 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
704735 step=${ this . step }
705736 min=${ this . min }
706737 max=${ this . max }
707- > </ bt-ha-control-circular-slider >
738+ >
708739 < div class ="content ${ this . lowBattery !== null || this . error . length > 0 ? 'battery' : '' } ${ this . window ? 'window_open' : '' } ${ ( this ?. stateObj ?. attributes ?. saved_temperature && this ?. stateObj ?. attributes ?. saved_temperature !== null ) ? 'eco' : '' } ${ this . summer ? 'summer' : '' } ">
709740 < svg id ="main " viewbox ="0 0 125 100 ">
710741 < g transform ="translate(57.5,37) scale(0.35) ">
@@ -758,7 +789,7 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
758789 this . hass . locale ,
759790 { minimumFractionDigits : 1 , maximumFractionDigits : 1 }
760791 ) } `}
761- < tspan dx ="-1 " dy ="-2 " style ="font-size: 3px; ">
792+ < tspan dx ="-0.3 " dy ="-2 " style ="font-size: 3px; ">
762793 ${ svg `
763794 ${ this . hass . config . unit_system . temperature }
764795 ` }
@@ -770,7 +801,7 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
770801 this . hass . locale ,
771802 { minimumFractionDigits : 1 , maximumFractionDigits : 1 }
772803 ) } `}
773- < tspan dx ="1 " dy ="-2 " style ="font-size: 3px; ">
804+ < tspan dx ="-0.3 " dy ="-2 " style ="font-size: 3px; ">
774805 %
775806 </ tspan >
776807 </ text >
@@ -779,45 +810,46 @@ export class BetterThermostatUi extends LitElement implements LovelaceCard {
779810
780811 </ g >
781812 </ svg >
782- < div id ="modes ">
783- ${ this ?. _hasSummer ? svg `
784- ${ this ?. _config ?. disable_heat ? html `` : this . _renderIcon ( "heat" , this . mode ) }
785- ${ this ?. _config ?. disable_eco ? html `` :
786- this ?. stateObj ?. attributes ?. saved_temperature &&
787- this ?. stateObj ?. attributes ?. saved_temperature !== "none" &&
788- this ?. stateObj ?. state !== UNAVAILABLE
789- ? this . _renderIcon ( "eco" , "eco" ) : this . _renderIcon ( "eco" , "none" ) }
790- ${ this ?. _config ?. disable_off ? html `` : this . _renderIcon ( "off" , this . mode ) }
791- ` :
792- svg `
793- ${ this . modes . map ( ( mode ) => {
794- if ( this . _config ?. disable_heat && mode === "heat" ) return html `` ;
795- if ( this . _config ?. disable_eco && mode === "eco" ) return html `` ;
796- if ( this . _config ?. disable_off && mode === "off" ) return html `` ;
797- return this . _renderIcon ( mode , this . mode ) ;
798- } ) }
799- ` }
813+ </ div >
814+ </ bt-ha-control-circular-slider >
815+ < div id ="modes ">
816+ ${ this ?. _hasSummer ? svg `
817+ ${ this ?. _config ?. disable_heat ? html `` : this . _renderIcon ( "heat" , this . mode ) }
818+ ${ this ?. _config ?. disable_eco ? html `` :
819+ this ?. stateObj ?. attributes ?. saved_temperature &&
820+ this ?. stateObj ?. attributes ?. saved_temperature !== "none" &&
821+ this ?. stateObj ?. state !== UNAVAILABLE
822+ ? this . _renderIcon ( "eco" , "eco" ) : this . _renderIcon ( "eco" , "none" ) }
823+ ${ this ?. _config ?. disable_off ? html `` : this . _renderIcon ( "off" , this . mode ) }
824+ ` :
825+ svg `
826+ ${ this . modes . map ( ( mode ) => {
827+ if ( this . _config ?. disable_heat && mode === "heat" ) return html `` ;
828+ if ( this . _config ?. disable_eco && mode === "eco" ) return html `` ;
829+ if ( this . _config ?. disable_off && mode === "off" ) return html `` ;
830+ return this . _renderIcon ( mode , this . mode ) ;
831+ } ) }
832+ ` }
800833
801- </ div >
802- ${ this ?. _config ?. disable_buttons ? html `` : html `
803- < div id ="bt-control-buttons ">
804- < div class ="button ">
805- < bt-ha-outlined-icon-button
806- @click =${ this . _decValue }
807- >
808- < ha-svg-icon .path =${ mdiMinus } > </ ha-svg-icon >
809- </ bt-ha-outlined-icon-button >
810- </ div >
811- < div class ="button ">
812- < bt-ha-outlined-icon-button
813- @click =${ this . _incValue }
814- >
815- < ha-svg-icon .path =${ mdiPlus } > </ ha-svg-icon >
834+ </ div >
835+ ${ this ?. _config ?. disable_buttons ? html `` : html `
836+ < div id ="bt-control-buttons ">
837+ < div class ="button ">
838+ < bt-ha-outlined-icon-button
839+ @click =${ this . _decValue }
840+ >
841+ < ha-svg-icon .path =${ mdiMinus } > </ ha-svg-icon >
816842 </ bt-ha-outlined-icon-button >
817- </ div >
818- </ div >
819- ` }
843+ </ div >
844+ < div class ="button ">
845+ < bt-ha-outlined-icon-button
846+ @click =${ this . _incValue }
847+ >
848+ < ha-svg-icon .path =${ mdiPlus } > </ ha-svg-icon >
849+ </ bt-ha-outlined-icon-button >
850+ </ div >
820851 </ div >
852+ ` }
821853 </ div >
822854 </ ha-card >
823855 ` ;
0 commit comments