Skip to content

Commit 24c2575

Browse files
balloobballoob
committed
Update component index page
1 parent a56d6c2 commit 24c2575

File tree

2 files changed

+75
-45
lines changed

2 files changed

+75
-45
lines changed

‎sass/custom/_paulus.scss

Lines changed: 39 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -299,21 +299,6 @@ p.note {
299299
transition-property: transform, opacity;
300300
}
301301

302-
.filter-button-group {
303-
margin-bottom: 16px;
304-
305-
.btn {
306-
margin-right: 8px;
307-
margin-bottom: 8px;
308-
text-decoration: none;
309-
310-
&.current {
311-
background-color: #3A5561;
312-
background-image: linear-gradient(to bottom, #3A5561,#3F6B7D);
313-
}
314-
}
315-
}
316-
317302
#componentContainer {
318303
a {
319304
display: inline-block;
@@ -365,6 +350,45 @@ p.note {
365350
}
366351
}
367352

353+
@media only screen and (max-width: $lap-end) {
354+
#components-page {
355+
.filter-button-group {
356+
margin-bottom: 16px;
357+
358+
.btn {
359+
display: inline-block;
360+
margin-right: 8px;
361+
margin-bottom: 8px;
362+
363+
&.current {
364+
background-color: #3A5561;
365+
background-image: linear-gradient(to bottom, #3A5561,#3F6B7D);
366+
}
367+
}
368+
}
369+
}
370+
}
371+
372+
@media only screen and (min-width: $desk-start) {
373+
#components-page {
374+
.filter-button-group {
375+
.btn {
376+
display: block;
377+
background: 0;
378+
color: black;
379+
box-shadow: none;
380+
text-shadow: none;
381+
padding: 2px;
382+
383+
&.current {
384+
font-weight: bold;
385+
}
386+
}
387+
}
388+
}
389+
}
390+
391+
368392
.aside-module {
369393
.section {
370394
margin-bottom: 16px;

‎source/components/index.html

Lines changed: 36 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -20,40 +20,46 @@
2020
{% assign components = site.components | sort: 'title' %}
2121
{% assign categories = components | sort: 'ha_category' | map: 'ha_category' | uniq %}
2222

23-
<div class="filter-button-group">
24-
<a href='#all' class="btn">All</a>
25-
<a href='#featured' class="btn">Featured</a>
26-
27-
{% for category in categories %}
28-
{% if category and category != 'Other' %}
29-
<a href='#{{ category | slugify }}' class="btn">{{ category }}</a>
30-
{% endif %}
31-
{% endfor %}
32-
33-
<a href='#other' class="btn">Other</a>
34-
</div>
35-
36-
<div id="componentContainer">
37-
{% for component in components %}
38-
{% if component.ha_category %}
39-
<a href='{{ component.url }}'
40-
class='{{ component.ha_category | slugify }}{% if component.featured %} featured{% endif %}'
41-
{% unless component.featured %}style='display: none'{% endunless %}>
42-
<div class='img-container'>
43-
{% if component.logo %}
44-
<img src='/images/supported_brands/{{ component.logo }}'>
45-
{% endif %}
46-
</div>
47-
<div class='title'>{{ component.title }}</div>
48-
<div class='category'>{{ component.ha_category }}</div>
49-
</a>
50-
{% endif %}
51-
{% endfor %}
23+
<div class="grid">
24+
<div class="grid__item one-sixth lap-one-whole palm-one-whole">
25+
26+
<div class="filter-button-group">
27+
<a href='#all' class="btn">All</a>
28+
<a href='#featured' class="btn">Featured</a>
29+
30+
{% for category in categories %}
31+
{% if category and category != 'Other' %}
32+
<a href='#{{ category | slugify }}' class="btn">
33+
{{ category }}
34+
({{ components | where: 'ha_category', category | size }})
35+
</a>
36+
{% endif %}
37+
{% endfor %}
38+
39+
<a href='#other' class="btn">Other</a>
40+
</div>
41+
</div>
42+
<div class="grid__item five-sixths lap-one-whole palm-one-whole" id="componentContainer">
43+
{% for component in components %}
44+
{% if component.ha_category %}
45+
<a href='{{ component.url }}'
46+
class='{{ component.ha_category | slugify }}{% if component.featured %} featured{% endif %}'
47+
{% unless component.featured %}style='display: none'{% endunless %}>
48+
<div class='img-container'>
49+
{% if component.logo %}
50+
<img src='/images/supported_brands/{{ component.logo }}'>
51+
{% endif %}
52+
</div>
53+
<div class='title'>{{ component.title }}</div>
54+
<div class='category'>{{ component.ha_category }}</div>
55+
</a>
56+
{% endif %}
57+
{% endfor %}
58+
</div>
5259
</div>
5360

5461
{% comment %}
5562
## Pages without categories
56-
5763
{% for component in components %}
5864
{% unless component.ha_category %}
5965
<p>{{ component.title }}</p>

0 commit comments

Comments
 (0)