💄 Add styles for updating data

upptime · Dec 6, 2020 · 9c33593 · 9c33593
1 parent 31e11a9
commit 9c33593
Showing 1 changed file with 66 additions and 13 deletions.
diff --git a/src/components/LiveStatus.svelte b/src/components/LiveStatus.svelte
@@ -15,6 +15,7 @@
     ? `https://raw.githubusercontent.com`
     : apiBaseUrl;
   const graphsBaseUrl = `${userContentBaseUrl}/${owner}/${repo}/master/graphs`;
+  let form = null;
 
   let selected = "week";
 
@@ -35,7 +36,15 @@
       handleError(error);
     }
     loading = false;
+    if (form) form.classList.remove("changed");
   });
+
+  const changed = () => {
+    if (form) {
+      form.classList.add("changed");
+      setTimeout(() => form.classList.remove("changed"), 500);
+    }
+  };
 </script>
 
 <style>
@@ -62,30 +71,68 @@
   .r label {
     margin-left: 1rem;
   }
+  .data {
+    transition: 0.3s;
+  }
+  .changed + section {
+    background-color: transparent;
+  }
+  .data {
+    padding: 0.15rem 0.25rem;
+    border-radius: 0.2rem;
+  }
+  .changed + section .data {
+    background-color: #fdcb6e;
+  }
 </style>
 
-<div class="f">
+<div class="f changed" bind:this={form}>
   <h2>{config.i18n.liveStatus}</h2>
   <form class="f r">
     <div>
-      <input value="day" bind:group={selected} name="d" type="radio" id="data_day" /><label
-        for="data_day">{config.i18n.duration24H || '24h'}</label>
+      <input
+        value="day"
+        bind:group={selected}
+        name="d"
+        type="radio"
+        on:change={changed}
+        id="data_day" /><label for="data_day">{config.i18n.duration24H || '24h'}</label>
     </div>
     <div>
-      <input value="week" bind:group={selected} name="d" type="radio" id="data_week" /><label
-        for="data_week">{config.i18n.duration7D || '7d'}</label>
+      <input
+        value="week"
+        bind:group={selected}
+        name="d"
+        type="radio"
+        on:change={changed}
+        id="data_week" /><label for="data_week">{config.i18n.duration7D || '7d'}</label>
     </div>
     <div>
-      <input value="month" bind:group={selected} name="d" type="radio" id="data_month" /><label
-        for="data_month">{config.i18n.duration30D || '30d'}</label>
+      <input
+        value="month"
+        bind:group={selected}
+        name="d"
+        type="radio"
+        on:change={changed}
+        id="data_month" /><label for="data_month">{config.i18n.duration30D || '30d'}</label>
     </div>
     <div>
-      <input value="year" bind:group={selected} name="d" type="radio" id="data_year" /><label
-        for="data_year">{config.i18n.duration1Y || '1y'}</label>
+      <input
+        value="year"
+        bind:group={selected}
+        name="d"
+        type="radio"
+        on:change={changed}
+        id="data_year" /><label for="data_year">{config.i18n.duration1Y || '1y'}</label>
     </div>
     <div>
-      <input value="all" bind:group={selected} name="d" type="radio" id="data_all" /><label
-        for="data_all">{config.i18n.durationAll || 'all'}</label>
+      <input
+        value="all"
+        bind:group={selected}
+        name="d"
+        type="radio"
+        on:change={changed}
+        id="data_all" /><label for="data_all">{config.i18n.durationAll || 'all'}</label>
     </div>
   </form>
 </div>
@@ -102,10 +149,16 @@
           <a href={`${config.path}/history/${site.slug}`}>{site.name}</a>
         </h4>
         <div>
-          {@html config.i18n.overallUptime.replace(/\$UPTIME/g, selected === 'day' ? site.uptimeDay : selected === 'week' ? site.uptimeWeek : selected === 'month' ? site.uptimeMonth : selected === 'year' ? site.uptimeYear : site.uptime)}
+          {@html config.i18n.overallUptime.split('$UPTIME')[0]}
+          <span
+            class="data">{selected === 'day' ? site.uptimeDay : selected === 'week' ? site.uptimeWeek : selected === 'month' ? site.uptimeMonth : selected === 'year' ? site.uptimeYear : site.uptime}
+            {@html config.i18n.overallUptime.split('$UPTIME')[1]}</span>
         </div>
         <div>
-          {@html config.i18n.averageResponseTime.replace(/\$TIME/g, selected === 'day' ? site.timeDay : selected === 'week' ? site.timeWeek : selected === 'month' ? site.timeMonth : selected === 'year' ? site.timeYear : site.time)}
+          {@html config.i18n.averageResponseTime.split('$TIME')[0]}
+          <span
+            class="data">{selected === 'day' ? site.timeDay : selected === 'week' ? site.timeWeek : selected === 'month' ? site.timeMonth : selected === 'year' ? site.timeYear : site.time}
+            {@html config.i18n.averageResponseTime.split('$TIME')[1]}</span>
         </div>
       </article>
     {/each}