Skip to content

Commit 44ec891

Browse files
GadgetoidGadgetoid
committed
Switch facets to flex, fix bugs.
1 parent 63ea690 commit 44ec891

4 files changed

Lines changed: 82 additions & 46 deletions

File tree

‎common/layout.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<meta name="description" content="{{description}}" />
77
<meta name="viewport" content="width=device-width, initial-scale=1"></meta>
88
<link href='{{resource_url}}prettify/prettify.css' rel='stylesheet' />
9-
<link href="{{resource_url}}pinout.scss.css?v=20251207v3" rel="stylesheet">
9+
<link href="{{resource_url}}pinout.scss.css?v=20251207v4" rel="stylesheet">
1010
<link href="{{resource_url}}print.css" rel="stylesheet" media="print">
1111
<link rel="shortcut icon" href="{{resource_url}}pinout-logo.png" type="image/png">
1212
<meta name="generator" content="Pinout.xyz @ https://github.com/pinout-xyz/pinout.xyz, timestamp: {{v}}"/>
@@ -25,7 +25,7 @@ <h1 class="logo"><a title="Raspberry Pi GPIO Pinout home" href="/"><img src="{{r
2525
</footer>
2626
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
2727
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
28-
<script src='{{resource_url}}pinout.js?v=20251207v2'></script>
28+
<script src='{{resource_url}}pinout.js?v=20251207v4'></script>
2929
<script src='{{resource_url}}boards.js'></script>
3030
</body>
3131
</html>

‎resources/boards.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -129,10 +129,11 @@ jQuery(document).ready(function(){
129129
for(var idx in hash){
130130
var kv = hash[idx].replace('#','').split('=');
131131
if(kv.length == 2 && typeof(filters[kv[0]]) != 'undefined'){
132-
filters[kv[0]] = decodeURIComponent(kv[1]);
132+
var val = decodeURIComponent(kv[1]);
133+
filters[kv[0]] = val;
133134
$('.item').each(function(idx,obj){
134135
obj = $(obj);
135-
if(obj.data('key') == kv[0] && obj.data('val') == kv[1]) obj.addClass('selected');
136+
if(obj.data('key') == kv[0] && obj.data('val') == val) obj.addClass('selected');
136137
});
137138
}
138139
}

‎resources/pinout.scss‎

Lines changed: 46 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -248,39 +248,35 @@ Boards Page
248248
}
249249

250250
.facets {
251-
padding: 0;
252-
background: none;
253-
border-top-right-radius: 10px;
254-
border-bottom-right-radius: 10px;
255-
margin-right: 18px;
256-
margin-bottom: 18px;
257-
258251
h4 {
259252
text-transform: capitalize;
260253
font-size: 1.2em;
261-
margin: 10px 0 0 0;
254+
margin: 0 0 .2em 0;
262255
color:$color-dark;
263256
}
264257

265258
ul, li {
266-
margin:0;
267-
padding:0;
259+
margin: 0;
260+
padding: 0;
268261
list-style:none;
269262
}
270263

264+
.facet {
265+
display: flex;
266+
flex-wrap: wrap;
267+
gap: 2px;
268+
margin-bottom: .5em;
269+
}
270+
271271
.facet li {
272-
display: inline-block;
273-
padding: 6px 7px 6px 7px;
274-
margin-top: 2px;
275-
margin-right: 2px;
272+
padding: 8px;
276273
background: $color-green;
277274
color: #FFF;
278-
line-height: 160%;
279-
font-size:.6em;
280-
cursor:pointer;
281-
text-transform:capitalize;
275+
font-size: .6em;
276+
cursor: pointer;
277+
text-transform: capitalize;
282278

283-
&:hover, &.selected {
279+
&.selected {
284280
color: $color-green;
285281
background: lighten($color-green, 35);
286282
}
@@ -290,7 +286,7 @@ Boards Page
290286
background: $color-pink;
291287
}
292288

293-
.facet:nth-of-type(2) li:hover, .facet:nth-of-type(2) li.selected {
289+
.facet:nth-of-type(2) li.selected {
294290
color: $color-pink;
295291
background: lighten($color-pink, 35);
296292
}
@@ -299,7 +295,7 @@ Boards Page
299295
background: $color-blue;
300296
}
301297

302-
.facet:nth-of-type(1) li:hover, .facet:nth-of-type(1) li.selected {
298+
.facet:nth-of-type(1) li.selected {
303299
color: $color-blue;
304300
background: lighten($color-blue, 35);
305301
}
@@ -395,7 +391,6 @@ Left Column
395391
padding: 8px;
396392
background: darken($color-purple, 5%);
397393
color: #FFF;
398-
line-height: 1.45em;
399394
flex: 1;
400395
white-space: pre;
401396
font-size: .7em;
@@ -692,8 +687,11 @@ code {
692687
display: grid;
693688
}
694689

695-
.facets .facet li {
696-
font-size: .8em;
690+
.facets .facet {
691+
margin-bottom: 2em;
692+
li {
693+
font-size: .8em;
694+
}
697695
}
698696
section {
699697
grid-column: 2;
@@ -782,6 +780,10 @@ code {
782780
#boards > ul {
783781
grid-template-columns: 1fr 1fr 1fr 1fr;
784782
}
783+
784+
#interfaces {
785+
max-width: 675px;
786+
}
785787
}
786788

787789
@media screen and (prefers-color-scheme: dark) {
@@ -828,4 +830,24 @@ code {
828830
pre, .prettyprint {
829831
background-color: #f7f7f9;
830832
}
833+
}
834+
835+
@media (hover: hover) {
836+
// On tablet/mobile, facets will behave like mutually exclusive buttons
837+
// with a toggle on/off and no hover state. Normally a hover would "stick"
838+
// on so we only enable it if the "hover" state is supported.
839+
.facets .facet {
840+
li:hover {
841+
color: $color-green;
842+
background: lighten($color-green, 35);
843+
}
844+
&:nth-of-type(2) li:hover {
845+
color: $color-pink;
846+
background: lighten($color-pink, 35);
847+
}
848+
&:nth-of-type(1) li:hover {
849+
color: $color-blue;
850+
background: lighten($color-blue, 35);
851+
}
852+
}
831853
}

‎resources/pinout.scss.css‎

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -230,52 +230,46 @@ Boards Page
230230
color: #333333;
231231
}
232232

233-
.facets {
234-
padding: 0;
235-
background: none;
236-
border-top-right-radius: 10px;
237-
border-bottom-right-radius: 10px;
238-
margin-right: 18px;
239-
margin-bottom: 18px;
240-
}
241233
.facets h4 {
242234
text-transform: capitalize;
243235
font-size: 1.2em;
244-
margin: 10px 0 0 0;
236+
margin: 0 0 0.2em 0;
245237
color: #073642;
246238
}
247239
.facets ul, .facets li {
248240
margin: 0;
249241
padding: 0;
250242
list-style: none;
251243
}
244+
.facets .facet {
245+
display: flex;
246+
flex-wrap: wrap;
247+
gap: 2px;
248+
margin-bottom: 0.5em;
249+
}
252250
.facets .facet li {
253-
display: inline-block;
254-
padding: 6px 7px 6px 7px;
255-
margin-top: 2px;
256-
margin-right: 2px;
251+
padding: 8px;
257252
background: #859900;
258253
color: #FFF;
259-
line-height: 160%;
260254
font-size: 0.6em;
261255
cursor: pointer;
262256
text-transform: capitalize;
263257
}
264-
.facets .facet li:hover, .facets .facet li.selected {
258+
.facets .facet li.selected {
265259
color: #859900;
266260
background: rgb(231.6666666667, 255, 76.5);
267261
}
268262
.facets .facet:nth-of-type(2) li {
269263
background: #D33682;
270264
}
271-
.facets .facet:nth-of-type(2) li:hover, .facets .facet:nth-of-type(2) li.selected {
265+
.facets .facet:nth-of-type(2) li.selected {
272266
color: #D33682;
273267
background: rgb(243.0571428571, 200.4428571429, 221.0714285714);
274268
}
275269
.facets .facet:nth-of-type(1) li {
276270
background: #268BD2;
277271
}
278-
.facets .facet:nth-of-type(1) li:hover, .facets .facet:nth-of-type(1) li.selected {
272+
.facets .facet:nth-of-type(1) li.selected {
279273
color: #268BD2;
280274
background: rgb(184.2943548387, 218.3004032258, 242.2056451613);
281275
}
@@ -359,7 +353,6 @@ Left Column
359353
padding: 8px;
360354
background: rgb(89.8033980583, 95.4223300971, 188.6966019417);
361355
color: #FFF;
362-
line-height: 1.45em;
363356
flex: 1;
364357
white-space: pre;
365358
font-size: 0.7em;
@@ -641,6 +634,9 @@ code {
641634
.board #interfaces {
642635
display: grid;
643636
}
637+
.facets .facet {
638+
margin-bottom: 2em;
639+
}
644640
.facets .facet li {
645641
font-size: 0.8em;
646642
}
@@ -726,6 +722,9 @@ code {
726722
#boards > ul {
727723
grid-template-columns: 1fr 1fr 1fr 1fr;
728724
}
725+
#interfaces {
726+
max-width: 675px;
727+
}
729728
}
730729
@media screen and (prefers-color-scheme: dark) {
731730
body {
@@ -770,3 +769,17 @@ code {
770769
background-color: #f7f7f9;
771770
}
772771
}
772+
@media (hover: hover) {
773+
.facets .facet li:hover {
774+
color: #859900;
775+
background: rgb(231.6666666667, 255, 76.5);
776+
}
777+
.facets .facet:nth-of-type(2) li:hover {
778+
color: #D33682;
779+
background: rgb(243.0571428571, 200.4428571429, 221.0714285714);
780+
}
781+
.facets .facet:nth-of-type(1) li:hover {
782+
color: #268BD2;
783+
background: rgb(184.2943548387, 218.3004032258, 242.2056451613);
784+
}
785+
}

0 commit comments

Comments
 (0)