feat(easel): add bootstrap

gallery/easel/route/view/weather/static/style.css

@@ -1,16 +1,15 @@
 .header {
-  font-size: 1rem;
+  font-size: 0.9rem;
   text-align: left;
   padding-top: 0.25rem;
 }
 
 .date {
-  font-size: 1.5rem;
-  background: rgba(0, 0, 0, 0.1);
+  background: rgba(1, 0, 0, 0.1) !important;
 }
 
 .date.now {
-  background: rgba(0, 128, 255, 0.2);
+  background: rgba(0, 128, 255, 0.2) !important;
 }
 
 .date .value a {
@@ -59,7 +58,7 @@
 }
 
 .pressure {
-  padding: 0;
+  padding: 0 !important;
 }
 
 .pressure .value {

gallery/easel/route/view/weather/templates/index.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% block title %}Погода{% endblock %}
+{% block title %}Weather{% endblock %}
 {% block head %}
 {{ super() }}
 <link rel="stylesheet"
@@ -9,27 +9,73 @@
       type="image/x-icon">
 {% endblock %}
 
-{% block header %}Погода{% endblock %}
-
 {% block content %}
+<h1>Weather</h1>
 <form action=""
       method="get"
-      style="margin: 0 auto 1rem;">
-  <input id="query"
-         name="query">
-  <button type="submit">Search</button>
+      class="mb-4">
+  <div class="input-group mb-3">
+    <input type="text"
+           class="form-control"
+           id="query"
+           name="query"
+           placeholder="Enter the city name">
+    <button class="btn btn-primary"
+            type="submit">Search</button>
+  </div>
 </form>
-<ul class="app-list">
+<ul id="locations"
+    class="list-group mb-5">
   {% for location in locations %}
-  <li>
-    <a href="weather/{{location.id}}">
-      <span>{{location.name}}</span>
-      <span style="font-size: 70%; margin-left: 0.5rem;">
-        {{location.country}}, {{location.district}}, {{location.subdistrict}}
-      </span>
-      <span></span>
-    </a>
-  </li>
+  <a href="weather/{{location.id}}"
+     class="list-group-item list-group-item-action px-4"
+     onclick="saveLocation({id:'{{location.id}}', name:'{{location.name}}'});">
+    <span class="text-primary">{{location.name}}</span>
+    <span class="small ms-1 text-secondary">
+      {{location.country}}, {{location.district}}, {{location.subdistrict}}
+    </span>
+    <span></span>
+  </a>
   {% endfor %}
 </ul>
+<script>
+  (function () {
+    document.loadLocations = () => {
+      const locations = JSON.parse(window.localStorage.getItem('locations') || '{}');
+      const container = document.querySelector('#locations');
+      container.innerHTML = '';
+      for (const [id, name] of Object.entries(locations)) {
+        const element = document.createElement('a');
+        element.href = `weather/${id}`;
+        element.className = 'list-group-item list-group-item-action px-4 d-flex justify-content-between align-items-start';
+        element.innerHTML = `
+        <span class="text-primary me-auto">${name}</span>
+        <span class="text-danger" onclick="removeLocation('${id}'); event.preventDefault();">&#x2715;</span>
+        `;
+        container.appendChild(element);
+      }
+    }
+
+    document.saveLocation = (location) => {
+      const locations = JSON.parse(window.localStorage.getItem('locations') || '{}');
+      locations[location.id] = location.name;
+      window.localStorage.setItem('locations', JSON.stringify(locations));
+    }
+
+    document.removeLocation = (id) => {
+      const locations = JSON.parse(window.localStorage.getItem('locations') || '{}');
+      delete locations[id];
+      window.localStorage.setItem('locations', JSON.stringify(locations));
+      document.loadLocations();
+    }
+
+    const params = new URLSearchParams(window.location.search);
+    const searchQuery = params.get('query');
+    if (searchQuery) {
+      document.querySelector('#query').value = searchQuery;
+    } else {
+      document.loadLocations();
+    }
+  })();
+</script>
 {% endblock %}

gallery/easel/route/view/weather/templates/weather.html

@@ -9,24 +9,23 @@
       type="image/x-icon">
 {% endblock %}
 
-{% block header %}
-{% if response.period == 'day' %}
-<a class="button {{'disabled' if response.date == datetime.date.today() else ''}}"
-   href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
-<a class="button"
-   href="../tag/days-10">⬆️</a>
-<span>{{response.location}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
-<a class="button"
-   href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
-{% endif %}
-{% if response.period == 'days' %}
-<span>{{response.location}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
-{% endif %}
-{% endblock %}
-
 {% block content %}
-<div>
-  <table style="margin: auto;">
+<h4>
+  {% if response.period == 'day' %}
+  <a class="button {{'disabled' if response.date == datetime.date.today() else ''}}"
+     href="../tag/{{tag_util.create_tag('day', response.date, -1)}}">⬅️</a>
+  <a class="button"
+     href="../tag/days-10">⬆️</a>
+  <span>{{response.location}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
+  <a class="button"
+     href="../tag/{{tag_util.create_tag('day', response.date, 1)}}">➡️</a>
+  {% endif %}
+  {% if response.period == 'days' %}
+  <span>{{response.location}} | {{response.date.strftime('%a, %d %B %Y')}}</span>
+  {% endif %}
+</h4>
+<div class="table-responsive">
+  <table class="table table-borderless table-compact text-center w-auto" style="font-size: 130%;">
     <tbody>
       <!-- date -->
       <tr>