Closed Traxtar928 closed 4 days ago
Sorry for the delay. I have pushed a feature that makes this+other templating options easier.
templateRaw
lets you place multiple 'moments' anywhere in your template.
If you're okay with my shortcut. I took clockworks original stylesheet CSS and placed it directly inside replicating clockworks original look and feel. (https://github.com/robmarkoski/ha-clockwork-card/blob/master/clockwork-card.js)
The result is identical to clockwork - bottom is clockwork plugin.
Code:
type: custom:better-moment-card
parentStyle: |
padding: 0px;
moment:
- parentStyle: |
padding: 5px 5px 5px;
display:flex;
flex-flow: row wrap;
justify-content: space-around;
align-items: flex-start;
templateRaw: |
<style>
.clock {
padding: 5px 5px 5px 0px;
margin: auto;
}
.other_clocks {
float: right;
margin: auto;
}
.otime {
padding: 0px 5px 2px;
font-size: 14px;
font-family: var(--paper-font-headline_-_font-family);
letter-spacing: var(--paper-font-headline_-_letter-spacing);
text-rendering: var(--paper-font-common-expensive-kerning_-_text-rendering);
}
.tz_locale {
padding: 0px 5px 1px;
color: var(--secondary-text-color);
font-size: 11px;
font-family: var(--paper-font-headline_-_font-family);
letter-spacing: var(--paper-font-headline_-_letter-spacing);
text-rendering: var(--paper-font-common-expensive-kerning_-_text-rendering);
}
.time {
padding:
font-family: var(--paper-font-headline_-_font-family);
-webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing);
font-size: 56px;
font-weight: var(--paper-font-headline_-_font-weight);
letter-spacing: var(--paper-font-headline_-_letter-spacing);
line-height: 1em;
text-rendering: var(--paper-font-common-expensive-kerning_-_text-rendering);
}
.date {
font-family: var(--paper-font-headline_-_font-family);
-webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing);
font-size: 24px;
font-weight: var(--paper-font-headline_-_font-weight);
letter-spacing: var(--paper-font-headline_-_letter-spacing);
line-height: var(--paper-font-headline_-_line-height);
text-rendering: var(--paper-font-common-expensive-kerning_-_text-rendering);
}
</style>
<div class="clock">
<div class="time" id="time">{{moment format=HH:mm a}}</div>
<div class="date" id="date">{{moment format=dddd, DD MMMM timezone=Europe/Berlin }}</div>
</div>
<div class="other_clocks">
<div class="tz_locale">America/New_York</div>
<div class="otime">{{moment format=ddd h:mm a timezone=America/New_York }}</div>
<div class="tz_locale">Australia/Sydney</div>
<div class="otime">{{moment format=ddd h:mm a timezone=Australia/Sydney }}</div>
</div>
I can't replicate the look of the clockwork card that stopped functioning and gives the incorrect time, which led me to your card. I'm sure it's just my own lack of experience with styling code. Can you assist by recommending changes?
In the screenshot below, you can see the overall card size, padding between side locations, and font size for city name is different than clockwork, which is the look I prefer: