jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-23 01:06:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update component index page

Browse Source
This commit is contained in:
Paulus Schoutsen 2016-08-14 13:44:15 -07:00
parent a56d6c282c
commit 24c257576c
2 changed files with 72 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
sass/custom/_paulus.scss
View File

@ -299,21 +299,6 @@ p.note {
transition-property: transform, opacity;
}
.filter-button-group {
margin-bottom: 16px;
.btn {
margin-right: 8px;
margin-bottom: 8px;
text-decoration: none;
&.current {
background-color: #3A5561;
background-image: linear-gradient(to bottom, #3A5561,#3F6B7D);
}
}
}
#componentContainer {
a {
display: inline-block;
@ -365,6 +350,45 @@ p.note {
}
}
@media only screen and (max-width: $lap-end) {
#components-page {
.filter-button-group {
margin-bottom: 16px;
.btn {
display: inline-block;
margin-right: 8px;
margin-bottom: 8px;
&.current {
background-color: #3A5561;
background-image: linear-gradient(to bottom, #3A5561,#3F6B7D);
}
}
}
}
}
@media only screen and (min-width: $desk-start) {
#components-page {
.filter-button-group {
.btn {
display: block;
background: 0;
color: black;
box-shadow: none;
text-shadow: none;
padding: 2px;
&.current {
font-weight: bold;
}
}
}
}
}
.aside-module {
.section {
margin-bottom: 16px;

60
source/components/index.html
View File

@ -20,40 +20,46 @@ Support for these components is provided by the Home Assistant community.
{% assign components = site.components | sort: 'title' %}
{% assign categories = components | sort: 'ha_category' | map: 'ha_category' | uniq %}
<div class="filter-button-group">
<a href='#all' class="btn">All</a>
<a href='#featured' class="btn">Featured</a>
<div class="grid">
<div class="grid__item one-sixth lap-one-whole palm-one-whole">
{% for category in categories %}
{% if category and category != 'Other' %}
<a href='#{{ category | slugify }}' class="btn">{{ category }}</a>
{% endif %}
{% endfor %}
<div class="filter-button-group">
<a href='#all' class="btn">All</a>
<a href='#featured' class="btn">Featured</a>
<a href='#other' class="btn">Other</a>
</div>
{% for category in categories %}
{% if category and category != 'Other' %}
<a href='#{{ category | slugify }}' class="btn">
{{ category }}
({{ components | where: 'ha_category', category | size }})
</a>
{% endif %}
{% endfor %}
<div id="componentContainer">
{% for component in components %}
{% if component.ha_category %}
<a href='{{ component.url }}'
class='{{ component.ha_category | slugify }}{% if component.featured %} featured{% endif %}'
{% unless component.featured %}style='display: none'{% endunless %}>
<div class='img-container'>
{% if component.logo %}
<img src='/images/supported_brands/{{ component.logo }}'>
{% endif %}
</div>
<div class='title'>{{ component.title }}</div>
<div class='category'>{{ component.ha_category }}</div>
</a>
{% endif %}
{% endfor %}
<a href='#other' class="btn">Other</a>
</div>
</div>
<div class="grid__item five-sixths lap-one-whole palm-one-whole" id="componentContainer">
{% for component in components %}
{% if component.ha_category %}
<a href='{{ component.url }}'
class='{{ component.ha_category | slugify }}{% if component.featured %} featured{% endif %}'
{% unless component.featured %}style='display: none'{% endunless %}>
<div class='img-container'>
{% if component.logo %}
<img src='/images/supported_brands/{{ component.logo }}'>
{% endif %}
</div>
<div class='title'>{{ component.title }}</div>
<div class='category'>{{ component.ha_category }}</div>
</a>
{% endif %}
{% endfor %}
</div>
</div>
{% comment %}
## Pages without categories
{% for component in components %}
{% unless component.ha_category %}
<p>{{ component.title }}</p>