Merge pull request #125 from mlamberts78/develop

Option to resize time day and date
mlamberts78 · Mar 2, 2024 · e25edf8 · e25edf8
2 parents ab0ef46 + e22a72d
commit e25edf8
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 5 deletions.
diff --git a/README.md b/README.md
@@ -56,6 +56,8 @@ HACS is a third party community store and is not included in Home Assistant out
 | icon_style            | string  | 'style1'                 | Options are 'style1' and'style2' for different set of animated icons.                              |
 | icons_size            | number  | 25                       | The size of the animated or custom icons in pixels.                                                |
 | current_temp_size     | number  | 28                       | The size of the current temperature in pixels.                                                     |
+| time_size             | number  | 26                       | The size of the current time in pixels.                                                            |
+| day_date_size         | number  | 15                       | The size of the current day and date in pixels.                                                    |
 | forecast              | object  | none                     | See [forecast options](#forecast-options) for available options.                                   |
 | units                 | object  | none                     | See [units of measurement](#units-of-measurement) for available options.                           |
 | locale                | string  | none                     | See [Supported languages](#Supported-languages) for available languages                            |
@@ -158,4 +160,4 @@ units:
 | Slovak           | sk      |
 | Spanish          | es      |
 | Swedish          | sv      |
-| Ukrainian        | uk      |
+| Ukrainian        | uk      |
diff --git a/dist/weather-chart-card.js b/dist/weather-chart-card.js
@@ -1325,6 +1325,20 @@ class WeatherCardEditor extends s {
               </label>
             </div>
           </div>
+            <div class="flex-container" style="${this._config.show_time ? 'display: flex;' : 'display: none;'}">
+              <ha-textfield
+                label="Time text size"
+                type="number"
+                .value="${this._config.time_size || '26'}"
+                @change="${(e) => this._valueChanged(e, 'time_size')}"
+              ></ha-textfield>
+              <ha-textfield
+                label="Day and date text size"
+                type="number"
+                .value="${this._config.day_date_size || '15'}"
+                @change="${(e) => this._valueChanged(e, 'day_date_size')}"
+              ></ha-textfield>
+              </div>
             <div class="icon-container">
               <div class="switch-right">
                 <ha-switch
@@ -17722,6 +17736,8 @@ setConfig(config) {
     animated_icons: false,
     icon_style: 'style1',
     current_temp_size: 28,
+    time_size: 26,
+    day_date_size: 15,
     show_feels_like: false,
     show_description: false,
     ...config,
@@ -18474,10 +18490,10 @@ updateChart({ config, language, weather, forecastItems } = this) {
           position: absolute;
           top: 20px;
           right: 16px;
-          font-size: clamp(19px, 2.5vw, 26px);
+          font-size: ${config.time_size}px;
         }
         .date-text {
-          font-size: 15px;
+          font-size: ${config.day_date_size}px;
           color: var(--secondary-text-color);
         }
         .main .feels-like {

diff --git a/src/main.js b/src/main.js
@@ -82,6 +82,8 @@ setConfig(config) {
     animated_icons: false,
     icon_style: 'style1',
     current_temp_size: 28,
+    time_size: 26,
+    day_date_size: 15,
     show_feels_like: false,
     show_description: false,
     ...config,
@@ -834,10 +836,10 @@ updateChart({ config, language, weather, forecastItems } = this) {
           position: absolute;
           top: 20px;
           right: 16px;
-          font-size: clamp(19px, 2.5vw, 26px);
+          font-size: ${config.time_size}px;
         }
         .date-text {
-          font-size: 15px;
+          font-size: ${config.day_date_size}px;
           color: var(--secondary-text-color);
         }
         .main .feels-like {

diff --git a/src/weather-card-editor.js b/src/weather-card-editor.js
@@ -494,6 +494,20 @@ class WeatherCardEditor extends LitElement {
               </label>
             </div>
           </div>
+            <div class="flex-container" style="${this._config.show_time ? 'display: flex;' : 'display: none;'}">
+              <ha-textfield
+                label="Time text size"
+                type="number"
+                .value="${this._config.time_size || '26'}"
+                @change="${(e) => this._valueChanged(e, 'time_size')}"
+              ></ha-textfield>
+              <ha-textfield
+                label="Day and date text size"
+                type="number"
+                .value="${this._config.day_date_size || '15'}"
+                @change="${(e) => this._valueChanged(e, 'day_date_size')}"
+              ></ha-textfield>
+              </div>
             <div class="icon-container">
               <div class="switch-right">
                 <ha-switch