Skip to content

Commit ca7d1ed

Browse files
blakadderblakadder
authored
Merge pull request #1255 from pmpinto/mobile-friendly-layout
Add mobile friendly layout
2 parents 4c94fbc + 3a26103 commit ca7d1ed

File tree

13 files changed

+84
-37
lines changed

13 files changed

+84
-37
lines changed

‎_includes/sidebar.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<sidebar class="sidebar" id="sidebar">
1+
<nav class="sidebar" id="sidebar">
22
<div class="sidebar-mobile">
33
<img src="{{ "/assets/images/menu.svg" | relative_url }}" class="menu-icon" id="menu" alt="Menu" />
44
<img src="{{ "/assets/images/close.svg" | relative_url }}" class="close-icon" id="close" alt="Close menu" />
@@ -9,4 +9,4 @@
99
{% include nav.html %}
1010
<!-- {% include search-results.html %}<BR> -->
1111
</div>
12-
</sidebar>
12+
</nav>

‎_includes/tablerow.html‎

Lines changed: 20 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,23 @@
11
<tr>
2-
<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>
2+
<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>
3+
</tr>
4+
<tr>
35
<td class="td-second"><b><a class="menu" href="{{site.baseurl}}{{ template.url }}">{{ template.vendor }} {{ template.title }}</a></b></td>
4-
<td>{{ template.model | truncate: 18, '...'}}</td>
5-
<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>
6-
<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>
7-
<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>
8-
<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>
9-
<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>
10-
<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>
116
</tr>
7+
<tr>
8+
<td class="model">{{ template.model }}</td>
9+
</tr>
10+
{% if include.hide_compat %}
11+
<tr><td></td></tr> {# A hacky way of keeping a table layout more stable #}
12+
{% else %}
13+
<tr>
14+
<td class="td-compat">
15+
{% 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 %}
16+
{% 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 %}
17+
{% if template.compatible contains "z2m" %}<img alt="Zigbee2MQTT" title="Zigbee2MQTT" src="{{site.baseurl}}/assets/images/z2m-icon.png">{% endif %}
18+
{% if template.compatible contains "deconz" %}<img alt="deCONZ" title="deCONZ" src="{{site.baseurl}}/assets/images/deconz-icon.png">{% endif %}
19+
{% if template.compatible contains "z4d" %}<img alt="Zigbee for Domoticz" title="Zigbee for Domoticz" src="{{site.baseurl}}/assets/images/z4d-icon.png">{% endif %}
20+
{% 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 %}
21+
</td>
22+
</tr>
23+
{% endif %}

‎_sass/milligram.scss‎

Lines changed: 42 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -328,10 +328,15 @@ input[type='radio'] {
328328
.container {
329329
margin: 0 auto;
330330
max-width: 112.0rem;
331-
padding: 0 2.0rem;
331+
padding: 0;
332332
position: relative;
333333
width: 100%;
334334
}
335+
@media (min-width: 40rem) {
336+
.container {
337+
padding: 0 2rem;
338+
}
339+
}
335340

336341
.row {
337342
display: flex;
@@ -576,7 +581,7 @@ table {
576581

577582
td,
578583
th {
579-
border-bottom: 0.1rem solid #e1e1e1;
584+
border-bottom: 2px solid #e1e1e1;
580585
padding: 0.2rem 0.5rem;
581586
text-align: left;
582587
}
@@ -598,18 +603,23 @@ th:last-child {
598603

599604
.td-list,
600605
.th-list {
601-
border-bottom: 0.1rem solid #e1e1e1;
606+
border-bottom: 2px solid #e1e1e1;
602607
padding: 0.1rem 0.5rem;
603608
text-align: left;
604609
vertical-align: middle;
605610
}
606611

607612
.td-first,
608613
.th-first {
609-
padding-left: 1;
610614
text-align: center;
611-
width: 14%;
612-
min-width: 40px;
615+
width: 8%;
616+
min-width: 80px;
617+
}
618+
619+
.td-first img {
620+
display: block;
621+
max-height:75px;
622+
vertical-align: middle;
613623
}
614624

615625
.td-10,
@@ -622,14 +632,18 @@ th:last-child {
622632
// width: 150px;
623633
}
624634

625-
.td-compat {
626-
text-align: center;
627-
width: 30px;
628-
min-width: 25px;
629-
white-space: nowrap;
630-
overflow: hidden;
631-
text-overflow: ellipsis;
632-
padding: 0.1rem 0rem;
635+
td.td-compat {
636+
display: flex;
637+
gap: 8px;
638+
padding-bottom: 8px;
639+
padding-left: 16px;
640+
}
641+
642+
.td-compat img {
643+
width: 24px;
644+
display: block;
645+
margin-bottom: 8px;
646+
margin-top: 8px;
633647
}
634648

635649
.th-compat {
@@ -644,7 +658,21 @@ th:last-child {
644658
.th-second {
645659
padding-left: 0.6rem;
646660
width: 40%;
661+
font-size: 1.1em;
662+
line-height: 1.3;
663+
border-bottom: 0;
664+
}
647665

666+
td.td-second {
667+
padding-top: 8px;
668+
padding-left: 16px;
669+
}
670+
671+
td.model {
672+
font-size: 0.9em;
673+
border-bottom: 0;
674+
line-height: 1.2;
675+
padding-left: 16px;
648676
}
649677

650678
.td-last,

‎assets/css/docs.scss‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -69,13 +69,15 @@ a.menu {
6969
background: $navigation-background;
7070
padding: $base-height;
7171
overflow: auto;
72+
padding-bottom: 4em;
7273
}
7374

7475
.sidebar-mobile {
7576
display: none;
7677
height: $header-height;
7778
padding: $base-height;
7879
text-align: right;
80+
border-bottom: 2px solid #e1e1e1;
7981

8082
.close-icon, .menu-icon {
8183
width: 18px;
@@ -188,6 +190,10 @@ a.menu {
188190
border-right: none;
189191
height: $header-height;
190192

193+
.sidebar-main {
194+
padding-bottom: 8em;
195+
}
196+
191197
.sidebar-mobile {
192198
display: block;
193199

@@ -199,6 +205,7 @@ a.menu {
199205
&.opened {
200206
overflow: visible;
201207
height: auto;
208+
max-height: 100dvh;
202209
border-bottom: $sidebar-border;
203210

204211
.sidebar-mobile {

‎deconz.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ <h3> {{ type.name | capitalize }} </h3>
1616
{% for type in vendors %}
1717
{% assign type_sorted = type.items | sort_natural: 'title' %}
1818
{% for template in type_sorted %}
19-
{% include tablerow_nocompatibility.html %}
19+
{% include tablerow.html hide_compat=true %}
2020
{% endfor %}
2121
{% endfor %}
2222
</tbody>

‎index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ <h4></h4>
3030
<div>
3131
</div>
3232
<div class="row">
33-
<div class="column column-90">
33+
<div class="column">
3434
<h5><a href="last_added.html">Recently added:</a></h5>
3535
{% assign sorted = site.zigbee | sort: "date_added" | reverse %}
3636
<table>
@@ -42,4 +42,4 @@ <h5><a href="last_added.html">Recently added:</a></h5>
4242
</table>
4343
</div>
4444
</div>
45-
<span style="font-size:0.6em;">As an Amazon Associate I earn from qualifying purchases from provided device links.</span>
45+
<span style="font-size:0.6em;">As an Amazon Associate I earn from qualifying purchases from provided device links.</span>

‎iobroker.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ <h3> {{ type.name | capitalize }} </h3>
1616
{% for type in vendors %}
1717
{% assign type_sorted = type.items | sort_natural: 'title' %}
1818
{% for template in type_sorted %}
19-
{% include tablerow_nocompatibility.html %}
19+
{% include tablerow.html hide_compat=true %}
2020
{% endfor %}
2121
{% endfor %}
2222
</tbody>

‎vendors.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ <h3> {{ type.name }} </h3>
1515
{% for type in vendors %}
1616
{% assign type_sorted = type.items | sort_natural: 'title' %}
1717
{% for template in type_sorted %}
18-
{% include tablerow_nocompatibility.html %}
18+
{% include tablerow.html hide_compat=true %}
1919
{% endfor %}
2020
{% endfor %}
2121
</tbody>

‎z4d.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ <h3> {{ type.name | capitalize }} </h3>
1616
{% for type in vendors %}
1717
{% assign type_sorted = type.items | sort_natural: 'title' %}
1818
{% for template in type_sorted %}
19-
{% include tablerow_nocompatibility.html %}
19+
{% include tablerow.html hide_compat=true %}
2020
{% endfor %}
2121
{% endfor %}
2222
</tbody>

‎zha.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,12 @@ <h3> {{ type.name | capitalize }} </h3>
1414
{% assign vendor = type.items | group_by: 'vendor' %}
1515
{% assign vendors = vendor | sort_natural: 'name' %}
1616
{% for type in vendors %}
17-
{% assign type_sorted = type.items | sort_natural: 'title' %}
17+
{% assign type_sorted = type.items | sort_natural: 'title' %}
1818
{% for template in type_sorted %}
19-
{% include tablerow_nocompatibility.html %}
19+
{% include tablerow.html hide_compat=true %}
2020
{% endfor %}
2121
{% endfor %}
22-
</tbody>
23-
</table>
22+
</tbody>
23+
</table>
2424
{% endfor %}
2525

0 commit comments

Comments
 (0)