diff --git a/clockwork-card.js b/clockwork-card.js index 4431b1c..5581b15 100644 --- a/clockwork-card.js +++ b/clockwork-card.js @@ -14,6 +14,8 @@ class ClockWorkCard extends HTMLElement { const config = this.config; const locale = config.locale; + const _showYear = config.showYear; + const showYear = _showYear ? _showYear : false; const _locale = locale ? locale : undefined; var _other_timezones = config.other_time; @@ -54,11 +56,17 @@ class ClockWorkCard extends HTMLElement { }); //Format the Date - var _date = _date_time.toLocaleDateString(_locale, { - weekday : 'long', - day : 'numeric', - month : 'long' - }); + var dateParts = { + weekday : 'long', + day : 'numeric', + month : 'long', + }; + + if (showYear) { + dateParts.year = 'numeric'; + } + + var _date = _date_time.toLocaleDateString(_locale, dateParts); //Build List of Other Timezones // @@ -128,18 +136,16 @@ class ClockWorkCard extends HTMLElement { align-items: flex-start; } .clock { - padding: 5px 5px 5px 0px; margin: auto; } .other_clocks { float: right; margin: auto; - } .otime { padding: 0px 5px 2px; - font-size: 14px; + 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); @@ -147,13 +153,13 @@ class ClockWorkCard extends HTMLElement { .tz_locale { padding: 0px 5px 1px; color: var(--secondary-text-color); - font-size: 11px; + font-size: 12px; + font-weight: bold; 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; @@ -161,9 +167,9 @@ class ClockWorkCard extends HTMLElement { letter-spacing: var(--paper-font-headline_-_letter-spacing); line-height: 1em; text-rendering: var(--paper-font-common-expensive-kerning_-_text-rendering); + text-align: center; } .date { - font-family: var(--paper-font-headline_-_font-family); -webkit-font-smoothing: var(--paper-font-headline_-_-webkit-font-smoothing); font-size: 24px; @@ -171,6 +177,7 @@ class ClockWorkCard extends HTMLElement { 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); + text-align: center; } `;