From 16bec4c643d86f3cf1b04f4f16eb295d291f560f Mon Sep 17 00:00:00 2001
From: siddharth ravikumar <s@ricketyspace.net>
Date: Sat, 18 Jun 2022 05:49:12 -0400
Subject: templates/weather.tmpl: add alerts section
Initial version.
---
static/peach.css | 56 +++++++++++++++++++++++++++++++++++++++++++++++++-
static/peach.min.css | 2 +-
templates/weather.tmpl | 29 ++++++++++++++++++++++++++
3 files changed, 85 insertions(+), 2 deletions(-)
diff --git a/static/peach.css b/static/peach.css
index ab2e643..ac9a780 100644
--- a/static/peach.css
+++ b/static/peach.css
@@ -22,7 +22,7 @@ body {
.root-container {
display: flex;
flex-direction: column;
- row-gap: 10px;
+ row-gap: 15px;
}
@media (min-width: 440px) {
@@ -112,6 +112,60 @@ body {
color: rgb(0,0,0);
}
+/* Alerts */
+.alerts-container {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ row-gap: 10px;
+}
+
+@media (max-width: 440px) {
+ .alerts-container {
+ padding: 0 15px;
+ }
+}
+
+.alert-container .alert-header {
+ background-color: rgb(0,0,0);
+ color: rgb(255,255,255);
+ font-weight: 900;
+ padding: 5px 0px 5px 10px;
+}
+
+.alert-container {
+ border-radius: 3px;
+ border: 0.3px solid rgb(0,0,0);
+}
+
+.alert-container .alert-header .event-name {
+ font-size: 1.2em;
+}
+
+.alert-container .alert-body {
+ display: flex;
+ flex-direction: column;
+ padding: 15px 15px 2px 15px;
+}
+
+.alert-container .alert-body p {
+ margin: 0 0 10px 0;
+}
+
+.alert-container .alert-body .severity {
+ font-size: 1em;
+}
+
+.alert-container .alert-body .description {
+ font-size: 0.9em;
+}
+
+.alert-container .alert-body .instruction {
+ font-size: 0.8em;
+ border-top: 1px solid rgb(150,150,150);
+ padding: 10px 0 0 0;
+}
+
/* BiDaily Timeline */
.bd-timeline-container {
display: flex;
diff --git a/static/peach.min.css b/static/peach.min.css
index c27b461..588025d 100644
--- a/static/peach.min.css
+++ b/static/peach.min.css
@@ -1 +1 @@
-/* Copyright © 2022 siddharth ravikumar <s@ricketyspace.net> *//* SPDX-License-Identifier: ISC *//* Peach */@font-face{font-family: Roboto;src: url('/static/font/roboto-flex.ttf');font-display: swap;}body{font-family: Roboto, sans-serif;text-transform: lowercase;}.peach{display: flex;flex-direction: row;justify-content: center;}.root-container{display: flex;flex-direction: column;row-gap: 10px;}@media (min-width: 440px) {.root-container{width: 440px;}}@media (max-width: 440px) {.peach{flex-direction: column;}}/* Weather */.header-container,.main-container{display: flex;justify-content: center;}.header-container h1{margin: 0;}.header{margin-top: 10px;margin-bottom: 0px;font-size: 1.5em;}.period-container{display: flex;flex-direction: column;row-gap: 10px;}.now-container{display: flex;flex-direction: column;}.temperature-forecast-container{display: flex;flex-direction: column;align-items: center;}.temperature-forecast-container .temperature{font-size: 2.8em;}.temperature-forecast-container .forecast{font-size: 1.8em;font-weight: 500;color: rgb(10,10,10);text-align: center;}.wind-container{display: flex;flex-direction: row;justify-content: center;column-gap: 10px;color: rgb(10,10,10);}/* Q2H Timeline */.timeline-container{display: flex;justify-content: center;}.timeline-container .periods-container{width: 440px;display: flex;justify-content: space-around;align-content: space-around;}.timeline-container .periods-container .period .temperature{font-size: 1.2em;}.timeline-container .periods-container .period .hour{font-size: 0.8em;color: rgb(0,0,0);}/* BiDaily Timeline */.bd-timeline-container{display: flex;justify-content: center;}@media (max-width: 440px) {.bd-timeline-container{ padding: 0 15px;}}.bd-timeline-container .periods-container{width: 440px;display: flex;flex-direction: column;row-gap: 10px;}.bd-timeline-container .periods-container .period{display: flex;flex-direction: column;row-gap: 1px;border-radius: 3px;border: 0.1px solid rgb(0,0,0);padding: 10px 10px;}.bd-timeline-container .periods-container .period .name{font-size: 1.5em;}.bd-timeline-container .periods-container .period .temperature{font-size: 1.2em;}.bd-timeline-container .periods-container .period .forecast{font-size: 0.9em;}/* Search */.search-link-container{position: absolute;right: 10px;top: 0px;font-size: 1.5em;font-weight: 900;transform: rotate(-45deg);}.search-link-container a{text-decoration: none;color: rgb(0,0,0);}.search-container .search-form{display: flex;flex-direction: row;align-items: baseline;justify-content: center;}@media (max-width: 440px) {.search-container .search-form{ justify-content: flex-start; flex-wrap: wrap; row-gap: 5px;}}.search-container .search-form .search-box .location{font-size: 1.5em;border: 0;}.search-container .search-form .search-box .location:focus-within{border: 0;outline: 0;border-bottom: 2px solid rgb(0,0,0);}.search-container .search-form .search-box .location::placeholder{color: rgb(240,240,240);font-weight: 900;}.search-container .search-form .btn-block .search-btn{cursor: pointer;border: none;background-color: rgb(0 0 0);color: rgb(255 255 255);font-size: 1.3em;padding: 3px 10px 3px 10px;border-radius: 8px;font-weight: 900;}.message-container{font-size: 1.2em;}.message-container p{margin: 5px 0 5px 0;padding: 0 0 0 5px;}.search-result-container{display: flex;flex-direction: column;row-gap: 6px;}.search-result-container .item{font-size: 1.5em;}.search-result-container .location-name a{text-decoration: none;color: rgb(0,0,0);font-weight: 600;padding: 3px 5px 5px 5px;}.search-result-container .location-name a:hover{transition: background-color 0.3s linear;background-color: rgb(245,245,245);}
\ No newline at end of file
+/* Copyright © 2022 siddharth ravikumar <s@ricketyspace.net> *//* SPDX-License-Identifier: ISC *//* Peach */@font-face{font-family: Roboto;src: url('/static/font/roboto-flex.ttf');font-display: swap;}body{font-family: Roboto, sans-serif;text-transform: lowercase;}.peach{display: flex;flex-direction: row;justify-content: center;}.root-container{display: flex;flex-direction: column;row-gap: 15px;}@media (min-width: 440px) {.root-container{width: 440px;}}@media (max-width: 440px) {.peach{flex-direction: column;}}/* Weather */.header-container,.main-container{display: flex;justify-content: center;}.header-container h1{margin: 0;}.header{margin-top: 10px;margin-bottom: 0px;font-size: 1.5em;}.period-container{display: flex;flex-direction: column;row-gap: 10px;}.now-container{display: flex;flex-direction: column;}.temperature-forecast-container{display: flex;flex-direction: column;align-items: center;}.temperature-forecast-container .temperature{font-size: 2.8em;}.temperature-forecast-container .forecast{font-size: 1.8em;font-weight: 500;color: rgb(10,10,10);text-align: center;}.wind-container{display: flex;flex-direction: row;justify-content: center;column-gap: 10px;color: rgb(10,10,10);}/* Q2H Timeline */.timeline-container{display: flex;justify-content: center;}.timeline-container .periods-container{width: 440px;display: flex;justify-content: space-around;align-content: space-around;}.timeline-container .periods-container .period .temperature{font-size: 1.2em;}.timeline-container .periods-container .period .hour{font-size: 0.8em;color: rgb(0,0,0);}/* Alerts */.alerts-container{display: flex;justify-content: center;flex-direction: column;row-gap: 10px;}@media (max-width: 440px) {.alerts-container{ padding: 0 15px;}}.alert-container .alert-header{background-color: rgb(0,0,0);color: rgb(255,255,255);font-weight: 900;padding: 5px 0px 5px 10px;}.alert-container{border-radius: 3px;border: 0.3px solid rgb(0,0,0);}.alert-container .alert-header .event-name{font-size: 1.2em;}.alert-container .alert-body{display: flex;flex-direction: column;padding: 15px 15px 2px 15px;}.alert-container .alert-body p{margin: 0 0 10px 0;}.alert-container .alert-body .severity{font-size: 1em;}.alert-container .alert-body .description{font-size: 0.9em;}.alert-container .alert-body .instruction{font-size: 0.8em;border-top: 1px solid rgb(150,150,150);padding: 10px 0 0 0;}/* BiDaily Timeline */.bd-timeline-container{display: flex;justify-content: center;}@media (max-width: 440px) {.bd-timeline-container{ padding: 0 15px;}}.bd-timeline-container .periods-container{width: 440px;display: flex;flex-direction: column;row-gap: 10px;}.bd-timeline-container .periods-container .period{display: flex;flex-direction: column;row-gap: 1px;border-radius: 3px;border: 0.1px solid rgb(0,0,0);padding: 10px 10px;}.bd-timeline-container .periods-container .period .name{font-size: 1.5em;}.bd-timeline-container .periods-container .period .temperature{font-size: 1.2em;}.bd-timeline-container .periods-container .period .forecast{font-size: 0.9em;}/* Search */.search-link-container{position: absolute;right: 10px;top: 0px;font-size: 1.5em;font-weight: 900;transform: rotate(-45deg);}.search-link-container a{text-decoration: none;color: rgb(0,0,0);}.search-container .search-form{display: flex;flex-direction: row;align-items: baseline;justify-content: center;}@media (max-width: 440px) {.search-container .search-form{ justify-content: flex-start; flex-wrap: wrap; row-gap: 5px;}}.search-container .search-form .search-box .location{font-size: 1.5em;border: 0;}.search-container .search-form .search-box .location:focus-within{border: 0;outline: 0;border-bottom: 2px solid rgb(0,0,0);}.search-container .search-form .search-box .location::placeholder{color: rgb(240,240,240);font-weight: 900;}.search-container .search-form .btn-block .search-btn{cursor: pointer;border: none;background-color: rgb(0 0 0);color: rgb(255 255 255);font-size: 1.3em;padding: 3px 10px 3px 10px;border-radius: 8px;font-weight: 900;}.message-container{font-size: 1.2em;}.message-container p{margin: 5px 0 5px 0;padding: 0 0 0 5px;}.search-result-container{display: flex;flex-direction: column;row-gap: 6px;}.search-result-container .item{font-size: 1.5em;}.search-result-container .location-name a{text-decoration: none;color: rgb(0,0,0);font-weight: 600;padding: 3px 5px 5px 5px;}.search-result-container .location-name a:hover{transition: background-color 0.3s linear;background-color: rgb(245,245,245);}
\ No newline at end of file
diff --git a/templates/weather.tmpl b/templates/weather.tmpl
index 19e7462..e696e41 100644
--- a/templates/weather.tmpl
+++ b/templates/weather.tmpl
@@ -62,6 +62,35 @@
{{ end }}
+ {{ if .Alerts }}
+ <div class="alerts-container">
+ {{ range .Alerts }}
+ <div class="alert-container">
+ <div class="alert-header">
+ <div class="event-name">
+ <span>{{ .Event }}</span>
+ </div>
+ </div>
+ <div class="alert-body">
+ <div class="severity">
+ <p>Severity — {{ .Severity }}</p>
+ </div>
+ <div class="description">
+ {{ range $p := .Description }}
+ <p>{{ $p }}</p>
+ {{ end }}
+ </div>
+ <div class="instruction">
+ {{ range $p := .Instruction }}
+ <p>{{ $p }}</p>
+ {{ end }}
+ </div>
+ </div>
+ </div>
+ {{ end }}
+ </div>
+ {{ end }}
+
{{ if .BiDailyTimeline }}
<div class="bd-timeline-container">
<div class="periods-container">
--
cgit v1.2.3