mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-29 04:06:54 +00:00
Reduce weight of integrations page + list everything once (#12260)
* Reduce weight of integrations page + list everything once * Empty commit to re-trigger build * Empty commit to re-trigger build
This commit is contained in:
Franck Nijhof
GitHub
parent
5f6f1bf435
commit
96a3575bca
@ -1,8 +1,8 @@
|
||||
#components-page{
|
||||
.component-search{
|
||||
#components-page {
|
||||
.component-search {
|
||||
margin-bottom: 24px;
|
||||
|
||||
input{
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 10px;
|
||||
|
||||
@ -35,8 +35,8 @@
|
||||
margin-bottom: 8px;
|
||||
|
||||
&.current {
|
||||
background-color: #3A5561;
|
||||
background-image: linear-gradient(to bottom, #3A5561,#3F6B7D);
|
||||
background-color: #3a5561;
|
||||
background-image: linear-gradient(to bottom, #3a5561, #3f6b7d);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -88,7 +88,7 @@
|
||||
align-items: flex-start;
|
||||
margin: -4px; // grid trick, has to match option-card's margin
|
||||
|
||||
p.note{
|
||||
p.note {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -100,20 +100,22 @@
|
||||
background-color: #fefefe;
|
||||
margin: 4px;
|
||||
border-radius: 2px;
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12),
|
||||
0 3px 1px -2px rgba(0, 0, 0, 0.2);
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
|
||||
.img-container {
|
||||
height: 50px;
|
||||
margin: 8px 0;
|
||||
margin: 12px 0;
|
||||
font: 0/0 a;
|
||||
|
||||
&:before { /* create a full-height inline block pseudo=element */
|
||||
content: ' ';
|
||||
&:before {
|
||||
/* create a full-height inline block pseudo=element */
|
||||
content: " ";
|
||||
display: inline-block;
|
||||
vertical-align: middle; /* vertical alignment of the inline element */
|
||||
vertical-align: middle; /* vertical alignment of the inline element */
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@ -132,128 +134,127 @@
|
||||
color: #000;
|
||||
line-height: 1.3em;
|
||||
height: 2.6em;
|
||||
}
|
||||
|
||||
.category {
|
||||
font-size: 14px;
|
||||
color: #AAA;
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// fade-in animation
|
||||
&.show-items .option-card{
|
||||
opacity:0;
|
||||
-webkit-animation:new-item-animation .2s linear forwards;
|
||||
-o-animation:new-item-animation .2s linear forwards;
|
||||
animation:new-item-animation .2s linear forwards;
|
||||
&.show-items .option-card {
|
||||
opacity: 0;
|
||||
-webkit-animation: new-item-animation 0.2s linear forwards;
|
||||
-o-animation: new-item-animation 0.2s linear forwards;
|
||||
animation: new-item-animation 0.2s linear forwards;
|
||||
}
|
||||
|
||||
// fade-out animation
|
||||
&.remove-items .option-card{
|
||||
-webkit-animation:removed-item-animation .2s cubic-bezier(.55,-0.04,.91,.94) forwards;
|
||||
-o-animation:removed-item-animation .2s cubic-bezier(.55,-0.04,.91,.94) forwards;
|
||||
animation:removed-item-animation .2s cubic-bezier(.55,-0.04,.91,.94) forwards
|
||||
&.remove-items .option-card {
|
||||
-webkit-animation: removed-item-animation 0.2s
|
||||
cubic-bezier(0.55, -0.04, 0.91, 0.94) forwards;
|
||||
-o-animation: removed-item-animation 0.2s
|
||||
cubic-bezier(0.55, -0.04, 0.91, 0.94) forwards;
|
||||
animation: removed-item-animation 0.2s cubic-bezier(0.55, -0.04, 0.91, 0.94)
|
||||
forwards;
|
||||
}
|
||||
}
|
||||
|
||||
// animations for fade-in and fade-out effects of option-cards
|
||||
@keyframes new-item-animation {
|
||||
from {
|
||||
opacity:0;
|
||||
-webkit-transform:scale(0);
|
||||
-ms-transform:scale(0);
|
||||
-o-transform:scale(0);
|
||||
transform:scale(0)
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
-o-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
to {
|
||||
opacity:1;
|
||||
-webkit-transform:scale(1);
|
||||
-ms-transform:scale(1);
|
||||
-o-transform:scale(1);
|
||||
transform:scale(1)
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes new-item-animation {
|
||||
from {
|
||||
opacity:0;
|
||||
-webkit-transform:scale(0);
|
||||
transform:scale(0)
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
to {
|
||||
opacity:1;
|
||||
-webkit-transform:scale(1);
|
||||
transform:scale(1)
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
@-o-keyframes new-item-animation {
|
||||
from {
|
||||
opacity:0;
|
||||
-o-transform:scale(0);
|
||||
transform:scale(0)
|
||||
opacity: 0;
|
||||
-o-transform: scale(0);
|
||||
transform: scale(0);
|
||||
}
|
||||
to {
|
||||
opacity:1;
|
||||
-o-transform:scale(1);
|
||||
transform:scale(1)
|
||||
opacity: 1;
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
// space blocker animation
|
||||
@keyframes openspace {
|
||||
to {
|
||||
height:auto
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes openspace {
|
||||
to {
|
||||
height:auto
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
@-o-keyframes openspace {
|
||||
to {
|
||||
height:auto
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// removal animation
|
||||
@keyframes removed-item-animation {
|
||||
from {
|
||||
opacity:1;
|
||||
-webkit-transform:scale(1);
|
||||
-ms-transform:scale(1);
|
||||
-o-transform:scale(1);
|
||||
transform:scale(1)
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
-ms-transform: scale(1);
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
to {
|
||||
-webkit-transform:scale(0);
|
||||
-ms-transform:scale(0);
|
||||
-o-transform:scale(0);
|
||||
transform:scale(0);
|
||||
opacity:0
|
||||
-webkit-transform: scale(0);
|
||||
-ms-transform: scale(0);
|
||||
-o-transform: scale(0);
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes removed-item-animation {
|
||||
from {
|
||||
opacity:1;
|
||||
-webkit-transform:scale(1);
|
||||
transform:scale(1)
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
to {
|
||||
-webkit-transform:scale(0);
|
||||
transform:scale(0);
|
||||
opacity:0
|
||||
-webkit-transform: scale(0);
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@-o-keyframes removed-item-animation {
|
||||
from {
|
||||
opacity:1;
|
||||
-o-transform:scale(1);
|
||||
transform:scale(1)
|
||||
opacity: 1;
|
||||
-o-transform: scale(1);
|
||||
transform: scale(1);
|
||||
}
|
||||
to {
|
||||
-o-transform:scale(0);
|
||||
transform:scale(0);
|
||||
opacity:0
|
||||
-o-transform: scale(0);
|
||||
transform: scale(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -74,7 +74,6 @@ regenerate: false
|
||||
<a href="{{url}}" class="option-card">
|
||||
<div class="img-container">{{{image}}}</div>
|
||||
<div class='title'>{{title}}</div>
|
||||
<div class='category'>{{cat}}</div>
|
||||
</a>
|
||||
{{/components}}
|
||||
{{^components}}
|
||||
@ -88,14 +87,15 @@ regenerate: false
|
||||
var allComponents = [
|
||||
{%- for component in components -%}
|
||||
{%- if component.ha_category -%}
|
||||
{%- assign sliced_version = component.ha_release | split: '.' -%}
|
||||
{%- assign minor_version = sliced_version[1]|plus: 0 -%}
|
||||
{%- assign major_version = sliced_version[0]|plus: 0 -%}
|
||||
{%- assign featured_first = true -%}
|
||||
{%- assign sliced_version = component.ha_release | split: '.' -%}
|
||||
{%- assign minor_version = sliced_version[1]|plus: 0 -%}
|
||||
{%- assign major_version = sliced_version[0]|plus: 0 -%}
|
||||
{% assign categories = "" | split: ',' %}
|
||||
{%- for ha_category in component.ha_category -%}
|
||||
{url:"{{ component.url }}", title:"{{component.title}}", cat:"{{ha_category | slugify}}", featured: {% if component.featured and featured_first %}true{% else %}false{% endif %}, v: "{{major_version}}.{{minor_version}}", logo: "{{component.logo}}"},
|
||||
{%- assign featured_first = false -%}
|
||||
{% capture category %}"{{ ha_category | slugify | downcase }}"{% endcapture %}
|
||||
{% assign categories = categories | push: category %}
|
||||
{%- endfor -%}
|
||||
{url:"{{ component.url }}", title:"{{component.title}}", cat: [{{categories|join: ","}}], featured: {% if component.featured %}true{% else %}false{% endif %}, v: "{{major_version}}.{{minor_version}}", logo: "{{component.logo}}"},
|
||||
{% endif -%}
|
||||
{%- endfor -%}
|
||||
false
|
||||
@ -112,7 +112,6 @@ allComponents.pop(); // remove placeholder element at the end
|
||||
// do the lowerCase transformation once
|
||||
for (i = 0; i < (allComponents.length); i++) {
|
||||
allComponents[i].titleLC = allComponents[i].title.toLowerCase();
|
||||
allComponents[i].catLC = allComponents[i].cat.toLowerCase();
|
||||
}
|
||||
|
||||
// sort the components alphabetically
|
||||
@ -169,7 +168,7 @@ allComponents.pop(); // remove placeholder element at the end
|
||||
search = decodeURIComponent(hash).substring(8).toLowerCase();
|
||||
filter = function (comp) {
|
||||
return (comp.titleLC.indexOf(search) !== -1) ||
|
||||
(comp.catLC.indexOf(search) !== -1);
|
||||
(comp.cat.find(c => c.includes("#")) != undefined);
|
||||
};
|
||||
|
||||
} else if (hash === '#featured' || hash === '') {
|
||||
@ -190,7 +189,7 @@ allComponents.pop(); // remove placeholder element at the end
|
||||
// regular filter categories
|
||||
search = hash.substring(1);
|
||||
filter = function (comp) {
|
||||
return comp.catLC === search;
|
||||
return comp.cat.includes(search);
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user