From 53eb8a7b148a49b1b6e56429b860321445c78281 Mon Sep 17 00:00:00 2001
From: Ekaitz Zarraga <ekaitz@elenq.tech>
Date: Tue, 14 Feb 2023 10:36:00 +0100
Subject: Add a container to fix graph rendering

---
 js/index.js | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

(limited to 'js/index.js')

diff --git a/js/index.js b/js/index.js
index 011d4ff..415518f 100644
--- a/js/index.js
+++ b/js/index.js
@@ -83,7 +83,7 @@ function Day(date, t_max, t_min, weather){
   this.weather_desc = weather2description(weather);
   this.createHTML = function (){
     let day_element = document.createElement("article");
-    day_element.setAttribute("class", "day-forecast");
+    day_element.setAttribute("class", "day-forecast-container");
     day_element.addEventListener("click",
       dayFetcher(this.date,
                 (html)=>{
@@ -91,15 +91,19 @@ function Day(date, t_max, t_min, weather){
                   day_element.appendChild(html);
                 }));
     day_element.innerHTML = `
-    <div class="day-forecast-text">
-      <h2><time datetime="${this.date}">${(new Date(this.date)).toLocaleDateString(undefined, DATE_FORMAT)}</h2>
-      <p>${this.weather_desc}</p>
-      <ul>
-          <li>&#x1F321;<sub>max</sub> ${this.t_max}&deg;C</li>
-          <li>&#x1F321;<sub>min</sub> ${this.t_min}&deg;C</li>
-      </ul>
+    <div class="day-forecast">
+      <div class="day-forecast-text">
+        <h2><time datetime="${this.date}">${(new Date(this.date)).toLocaleDateString(undefined, DATE_FORMAT)}</h2>
+        <p>${this.weather_desc}</p>
+        <ul>
+            <li>&#x1F321;<sub>max</sub> ${this.t_max}&deg;C</li>
+            <li>&#x1F321;<sub>min</sub> ${this.t_min}&deg;C</li>
+        </ul>
+      </div>
+
+      <span class="day-forecast-image" title="${this.weather_desc}">${WEATHER2ICON[this.weather]}</span>
     </div>
-    <span class="day-forecast-image" title="${this.weather_desc}">${WEATHER2ICON[this.weather]}</span>`;
+    `;
     return day_element;
   }
 }
@@ -200,7 +204,7 @@ function processHourly(data){
   hourly_element.setAttribute("class", "hourly-forecast");
 
   hourly_element.innerHTML = `
-  <svg viewBox="0 0 ${xsize} ${ysize}" xmlns="http://www.w3.org/2000/svg  width="" height="200px">
+  <svg viewBox="0 0 ${xsize} ${ysize}" xmlns="http://www.w3.org/2000/svg">
     ${polyline}
     ${dots}
     ${labels}
-- 
cgit v1.2.3