Merge pull request #1255 from pmpinto/mobile-friendly-layout

Add mobile friendly layout

Author: blakadder

_includes/sidebar.html

@@ -1,4 +1,4 @@
-<sidebar class="sidebar" id="sidebar">
+<nav class="sidebar" id="sidebar">
 	<div class="sidebar-mobile">
 		<img src="{{ "/assets/images/menu.svg" | relative_url }}" class="menu-icon" id="menu" alt="Menu" />
 		<img src="{{ "/assets/images/close.svg" | relative_url }}" class="close-icon" id="close" alt="Close menu" />
@@ -9,4 +9,4 @@
 		{% include nav.html %}
 		<!-- {% include search-results.html %}<BR> -->
 	</div>
-</sidebar>
+</nav>

_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 %}

_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,

assets/css/docs.scss

@@ -69,13 +69,15 @@ a.menu {
 		background: $navigation-background;
 		padding: $base-height;
 		overflow: auto;
+		padding-bottom: 4em;
 	}
 
 	.sidebar-mobile {
 		display: none;
 		height: $header-height;
 		padding: $base-height;
 		text-align: right;
+		border-bottom: 2px solid #e1e1e1;
 
 		.close-icon, .menu-icon {
 			width: 18px;
@@ -188,6 +190,10 @@ a.menu {
 		border-right: none;
 		height: $header-height;
 
+		.sidebar-main {
+			padding-bottom: 8em;
+		}
+
 		.sidebar-mobile {
 			display: block;
 
@@ -199,6 +205,7 @@ a.menu {
 		&.opened {
 			overflow: visible;
 			height: auto;
+			max-height: 100dvh;
 			border-bottom: $sidebar-border;
 
 			.sidebar-mobile {

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>

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>      

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>

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>

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>

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 %}