Time source card redesign and some small fixes

Author: cikzh

nts-pool-management/assets/components.css

@@ -85,11 +85,14 @@ h2 {
     margin-bottom: var(--space-sm);
 }
 
+h3 {
+    color: var(--primary);
+}
+
 .card {
     background-color: var(--white);
     border-radius: var(--border-radius);
-    margin-top: var(--space-md);
-    padding: var(--space-sm) var(--space-md) var(--space-md) var(--space-md);
+    padding: calc((var(--space-md) + var(--space-sm)) / 2) var(--space-md) var(--space-sm) var(--space-md);
 }
 
 dl {

nts-pool-management/assets/main.css

@@ -175,3 +175,9 @@ details.toast > summary {
     max-width: 8rem;
   }
 }
+
+.time-sources-list {
+  display: flex;
+  gap: var(--space-md);
+  flex-wrap: wrap;
+}

nts-pool-management/templates/admin/monitors.html.j2

@@ -13,11 +13,13 @@
       <label for="name">Name</label>
       <input name="name" type="text" />
     </fieldset>
-    <button type="submit">Add</button>
+    <div>
+      <button type="submit">Add</button>
+    </div>
   </form>
 </section>
 <section>
-  <h2>Current monitors</h2>
+  <h2>Monitors</h2>
   <table>
     <thead>
       <th>Name</th>

nts-pool-management/templates/management/time_sources_page.html.j2

@@ -17,24 +17,29 @@
       <input name="port" type="text" />
     </fieldset>
     </div>
-    <button type="submit">Add</button>
+    <div>
+      <button type="submit">Add</button>
+    </div>
   </form>
 </section>
 <section>
   <h2>Time source servers</h2>
+  <div class="time-sources-list">
+  {% if time_sources.is_empty() %}
+    <article>No time sources servers added</article>
+  {% endif %}
   {%- for ts in time_sources %}
     <article class="card">
+      <h3>{{ ts.hostname }}{% if let Some(p) = ts.port %}<span class="port">:{{ p }}</span>{% endif %}</h3>
       <form action="/management/time-sources/{{ ts.id }}/update" method="POST">
         <input type="hidden" />
         <dl>
-          <dd>Hostname</dd>
-          <dt>{{ ts.hostname }}{% if let Some(p) = ts.port %}<span class="port">:{{ p }}</span>{% endif %}</dt>
-          <dd>Weight</dd>
-          <dt><input type="number" name="weight" value="{{ ts.weight }}" /></dt>
-          <dd>Ipv4 score</dd>
+          <dd>IPv4 score</dd>
           <dt>{{ ts.ipv4_score | fmt("{:.1}") }}</dt>
-          <dd>Ipv6 score</dd>
+          <dd>IPv6 score</dd>
           <dt>{{ ts.ipv6_score | fmt("{:.1}") }}</dt>
+          <dd>Weight</dd>
+          <dt><input type="number" name="weight" value="{{ ts.weight }}" /></dt>
         </dl>
         <button type="submit" class="btn-sm">Save</button>
       </form>
@@ -49,5 +54,6 @@
       </form>
     </article>
   {% endfor %}
+  </div>
 </section>
 {% endblock %}