mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-10 02:46:53 +00:00
Update component index page
This commit is contained in:
parent
a56d6c282c
commit
24c257576c
@ -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;
|
||||
|
@ -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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user