Tweak table row for taller layout

pmpinto · pmpinto · commit ba19d8d4db14 · 2025-01-30T20:05:49.000Z
diff --git a/_includes/tablerow.html b/_includes/tablerow.html
@@ -1,11 +1,23 @@
 <tr>
-  <td class="td-first"><img src="{{ template.url | remove: ".html" | prepend: '/assets/images/devices' | append: '.webp' | processed_path: 'table' }}" alt="{{ template.vendor }} {{ template.model }}" height="75" style="max-height:75px;vertical-align: middle;" loading="lazy"></td>
+  <td class="td-first" rowspan="4"><img src="{{ template.url | remove: ".html" | prepend: '/assets/images/devices' | append: '.webp' | processed_path: 'table' }}" alt="{{ template.vendor }} {{ template.model }}" height="75" loading="lazy"></td>
+</tr>
+<tr>
   <td class="td-second"><b><a class="menu" href="{{site.baseurl}}{{ template.url }}">{{ template.vendor }} {{ template.title }}</a></b></td>
-  <td>{{ template.model | truncate: 18, '...'}}</td>
-  <td class="td-compat">{% if template.compatible contains "zha" %}<img alt="Zigbee Home Automation for Home Assistant" title="Zigbee Home Automation for Home Assistant" src="{{site.baseurl}}/assets/images/zha-icon.png">{% else %} {% endif %}</td>
-  <td class="td-compat">{% if template.compatible contains "tasmota" or template.category == "light" or template.category == "dimmer" %}<img alt="Tasmota" title="Tasmota" src="{{site.baseurl}}/assets/images/tasmota-icon.png">{% else %} {% endif %}</td>
-  <td class="td-compat">{% if template.compatible contains "z2m" %}<img alt="Zigbee2MQTT" title="Zigbee2MQTT" src="{{site.baseurl}}/assets/images/z2m-icon.png">{% else %} {% endif %}</td>
-  <td class="td-compat">{% if template.compatible contains "deconz" %}<img alt="deCONZ" title="deCONZ" src="{{site.baseurl}}/assets/images/deconz-icon.png">{% else %} {% endif %}</td>
-  <td class="td-compat">{% if template.compatible contains "z4d" %}<img alt="Zigbee for Domoticz" title="Zigbee for Domoticz" src="{{site.baseurl}}/assets/images/z4d-icon.png">{% else %} {% endif %}</td>
-  <td class="td-compat">{% if template.compatible contains "iob" or template.compatible contains "z2m" %}<img alt="ioBroker.zigbee" title="ioBroker.zigbee" src="{{site.baseurl}}/assets/images/iobroker-icon.png">{% else %} {% endif %}</td>
 </tr>
+<tr>
+  <td class="model">{{ template.model }}</td>
+</tr>
+{% if include.hide_compat %}
+<tr><td></td></tr> {# A hacky way of keeping a table layout more stable #}
+{% else %}
+<tr>
+  <td class="td-compat">
+    {% if template.compatible contains "zha" %}<img alt="Zigbee Home Automation for Home Assistant" title="Zigbee Home Automation for Home Assistant" src="{{site.baseurl}}/assets/images/zha-icon.png">{% endif %}
+    {% if template.compatible contains "tasmota" or template.category == "light" or template.category == "dimmer" %}<img alt="Tasmota" title="Tasmota" src="{{site.baseurl}}/assets/images/tasmota-icon.png">{% endif %}
+    {% if template.compatible contains "z2m" %}<img alt="Zigbee2MQTT" title="Zigbee2MQTT" src="{{site.baseurl}}/assets/images/z2m-icon.png">{% endif %}
+    {% if template.compatible contains "deconz" %}<img alt="deCONZ" title="deCONZ" src="{{site.baseurl}}/assets/images/deconz-icon.png">{% endif %}
+    {% if template.compatible contains "z4d" %}<img alt="Zigbee for Domoticz" title="Zigbee for Domoticz" src="{{site.baseurl}}/assets/images/z4d-icon.png">{% endif %}
+    {% if template.compatible contains "iob" or template.compatible contains "z2m" %}<img alt="ioBroker.zigbee" title="ioBroker.zigbee" src="{{site.baseurl}}/assets/images/iobroker-icon.png">{% endif %}
+  </td>
+</tr>
+{% endif %}
diff --git a/_sass/milligram.scss b/_sass/milligram.scss
@@ -328,10 +328,15 @@ input[type='radio'] {
 .container {
   margin: 0 auto;
   max-width: 112.0rem;
-  padding: 0 2.0rem;
+  padding: 0;
   position: relative;
   width: 100%;
 }
+@media (min-width: 40rem) {
+  .container {
+    padding: 0 2rem;
+  }
+}
 
 .row {
   display: flex;
@@ -576,7 +581,7 @@ table {
 
 td,
 th {
-  border-bottom: 0.1rem solid #e1e1e1;
+  border-bottom: 2px solid #e1e1e1;
   padding: 0.2rem 0.5rem;
   text-align: left;
 }
@@ -598,18 +603,23 @@ th:last-child {
 
 .td-list,
 .th-list {
-  border-bottom: 0.1rem solid #e1e1e1;
+  border-bottom: 2px solid #e1e1e1;
   padding: 0.1rem 0.5rem;
   text-align: left;
   vertical-align: middle;
 }
 
 .td-first,
 .th-first {
-  padding-left: 1;
   text-align: center;
-  width: 14%;
-  min-width: 40px;
+  width: 8%;
+  min-width: 80px;
+}
+
+.td-first img {
+  display: block;
+  max-height:75px;
+  vertical-align: middle;
 }
 
 .td-10,
@@ -622,14 +632,18 @@ th:last-child {
     // width: 150px;
 }
 
-.td-compat {
-  text-align: center;
-  width: 30px;
-  min-width: 25px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: 0.1rem 0rem;
+td.td-compat {
+  display: flex;
+  gap: 8px;
+  padding-bottom: 8px;
+  padding-left: 16px;
+}
+
+.td-compat img {
+  width: 24px;
+  display: block;
+  margin-bottom: 8px;
+  margin-top: 8px;
 }
 
 .th-compat {
@@ -644,7 +658,21 @@ th:last-child {
 .th-second {
   padding-left: 0.6rem;
   width: 40%;
+  font-size: 1.1em;
+  line-height: 1.3;
+  border-bottom: 0;
+}
 
+td.td-second {
+  padding-top: 8px;
+  padding-left: 16px;
+}
+
+td.model {
+  font-size: 0.9em;
+  border-bottom: 0;
+  line-height: 1.2;
+  padding-left: 16px;
 }
 
 .td-last,
diff --git a/assets/css/docs.scss b/assets/css/docs.scss
@@ -76,6 +76,7 @@ a.menu {
 		height: $header-height;
 		padding: $base-height;
 		text-align: right;
+		border-bottom: 2px solid #e1e1e1;
 
 		.close-icon, .menu-icon {
 			width: 18px;
diff --git a/deconz.html b/deconz.html
@@ -16,7 +16,7 @@ <h3> {{ type.name | capitalize }} </h3>
         {% for type in vendors %}
         {% assign type_sorted = type.items | sort_natural: 'title' %}     
         {% for template in type_sorted %}
-        {% include tablerow_nocompatibility.html %}
+        {% include tablerow.html hide_compat=true %}
         {% endfor %}
         {% endfor %}
 </tbody>
diff --git a/index.html b/index.html
@@ -30,7 +30,7 @@ <h4></h4>
 <div>
 </div>
 <div class="row">
-    <div class="column column-90">
+    <div class="column">
 <h5><a href="last_added.html">Recently added:</a></h5>
 {% assign sorted = site.zigbee  | sort: "date_added" | reverse %}
 <table>
@@ -42,4 +42,4 @@ <h5><a href="last_added.html">Recently added:</a></h5>
 </table>
 </div>
 </div>
-<span style="font-size:0.6em;">As an Amazon Associate I earn from qualifying purchases from provided device links.</span>      
+<span style="font-size:0.6em;">As an Amazon Associate I earn from qualifying purchases from provided device links.</span>      
diff --git a/iobroker.html b/iobroker.html
@@ -16,7 +16,7 @@ <h3> {{ type.name | capitalize }} </h3>
         {% for type in vendors %}
         {% assign type_sorted = type.items | sort_natural: 'title' %}     
         {% for template in type_sorted %}
-        {% include tablerow_nocompatibility.html %}
+        {% include tablerow.html hide_compat=true %}
         {% endfor %}
         {% endfor %}
 </tbody>
diff --git a/vendors.html b/vendors.html
@@ -15,7 +15,7 @@ <h3> {{ type.name }} </h3>
         {% for type in vendors %}
         {% assign type_sorted = type.items | sort_natural: 'title' %}     
         {% for template in type_sorted %}
-        {% include tablerow_nocompatibility.html %}
+        {% include tablerow.html hide_compat=true %}
         {% endfor %}
         {% endfor %}
 </tbody>
diff --git a/z4d.html b/z4d.html
@@ -16,7 +16,7 @@ <h3> {{ type.name | capitalize }} </h3>
         {% for type in vendors %}
         {% assign type_sorted = type.items | sort_natural: 'title' %}     
         {% for template in type_sorted %}
-        {% include tablerow_nocompatibility.html %}
+        {% include tablerow.html hide_compat=true %}
         {% endfor %}
         {% endfor %}
 </tbody>
diff --git a/zha.html b/zha.html
@@ -14,12 +14,12 @@ <h3> {{ type.name | capitalize }} </h3>
         {% assign vendor = type.items | group_by: 'vendor' %} 
         {% assign vendors = vendor | sort_natural: 'name' %} 
         {% for type in vendors %}
-        {% assign type_sorted = type.items | sort_natural: 'title' %}     
+        {% assign type_sorted = type.items | sort_natural: 'title' %}
         {% for template in type_sorted %}
-        {% include tablerow_nocompatibility.html %}
+        {% include tablerow.html hide_compat=true %}
         {% endfor %}
         {% endfor %}
-</tbody>
-</table>
+        </tbody>
+    </table>
 {% endfor %}
    
diff --git a/zigate.html b/zigate.html
@@ -16,7 +16,7 @@ <h3> {{ type.name | capitalize }} </h3>
         {% for type in vendors %}
         {% assign type_sorted = type.items | sort_natural: 'title' %}     
         {% for template in type_sorted %}
-        {% include tablerow_nocompatibility.html %}
+        {% include tablerow.html hide_compat=true %}
         {% endfor %}
         {% endfor %}
 </tbody>
diff --git a/zigbee2mqtt.html b/zigbee2mqtt.html
@@ -16,7 +16,7 @@ <h3> {{ type.name | capitalize }} </h3>
         {% for type in vendors %}
         {% assign type_sorted = type.items | sort_natural: 'title' %}     
         {% for template in type_sorted %}
-        {% include tablerow_nocompatibility.html %}
+        {% include tablerow.html hide_compat=true %}
         {% endfor %}
         {% endfor %}
 </tbody>
diff --git a/zigbee2tasmota.html b/zigbee2tasmota.html
@@ -17,7 +17,7 @@ <h3> {{ type.name | capitalize }} </h3>
         {% for type in vendors %}
         {% assign type_sorted = type.items | sort_natural: 'title' %}     
         {% for template in type_sorted %}
-        {% include tablerow_nocompatibility.html %}
+        {% include tablerow.html hide_compat=true %}
         {% endfor %}
         {% endfor %}
 </tbody>
