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-28 11:47:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Reduce weight of integrations page + list everything once (#12260)

Browse Source 
* 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 2020-03-04 09:03:27 +01:00 committed by GitHub
parent 5f6f1bf435
commit 96a3575bca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 82 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
sass/custom/_component_page.scss
View File

@ -1,8 +1,8 @@
#components-page{ #components-page {
.component-search{ .component-search {
margin-bottom: 24px; margin-bottom: 24px;
input{ input {
width: 100%; width: 100%;
padding: 10px; padding: 10px;
@ -35,8 +35,8 @@
margin-bottom: 8px; margin-bottom: 8px;
&.current { &.current {
background-color: #3A5561; background-color: #3a5561;
background-image: linear-gradient(to bottom, #3A5561,#3F6B7D); background-image: linear-gradient(to bottom, #3a5561, #3f6b7d);
} }
} }
} }
@ -88,7 +88,7 @@
align-items: flex-start; align-items: flex-start;
margin: -4px; // grid trick, has to match option-card's margin margin: -4px; // grid trick, has to match option-card's margin
p.note{ p.note {
width: 100%; width: 100%;
} }
@ -100,20 +100,22 @@
background-color: #fefefe; background-color: #fefefe;
margin: 4px; margin: 4px;
border-radius: 2px; 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; padding: 8px;
text-align: center; text-align: center;
text-decoration: none; text-decoration: none;
.img-container { .img-container {
height: 50px; height: 50px;
margin: 8px 0; margin: 12px 0;
font: 0/0 a; font: 0/0 a;
&:before { /* create a full-height inline block pseudo=element */ &:before {
content: ' '; /* create a full-height inline block pseudo=element */
content: " ";
display: inline-block; display: inline-block;
vertical-align: middle; /* vertical alignment of the inline element */ vertical-align: middle; /* vertical alignment of the inline element */
height: 100%; height: 100%;
} }
@ -132,128 +134,127 @@
color: #000; color: #000;
line-height: 1.3em; line-height: 1.3em;
height: 2.6em; height: 2.6em;
} margin-top: 20px;
.category {
font-size: 14px;
color: #AAA;
} }
} }
// fade-in animation // fade-in animation
&.show-items .option-card{ &.show-items .option-card {
opacity:0; opacity: 0;
-webkit-animation:new-item-animation .2s linear forwards; -webkit-animation: new-item-animation 0.2s linear forwards;
-o-animation:new-item-animation .2s linear forwards; -o-animation: new-item-animation 0.2s linear forwards;
animation:new-item-animation .2s linear forwards; animation: new-item-animation 0.2s linear forwards;
} }
// fade-out animation // fade-out animation
&.remove-items .option-card{ &.remove-items .option-card {
-webkit-animation:removed-item-animation .2s cubic-bezier(.55,-0.04,.91,.94) forwards; -webkit-animation: removed-item-animation 0.2s
-o-animation:removed-item-animation .2s cubic-bezier(.55,-0.04,.91,.94) forwards; cubic-bezier(0.55, -0.04, 0.91, 0.94) forwards;
animation:removed-item-animation .2s cubic-bezier(.55,-0.04,.91,.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 // animations for fade-in and fade-out effects of option-cards
@keyframes new-item-animation { @keyframes new-item-animation {
from { from {
opacity:0; opacity: 0;
-webkit-transform:scale(0); -webkit-transform: scale(0);
-ms-transform:scale(0); -ms-transform: scale(0);
-o-transform:scale(0); -o-transform: scale(0);
transform:scale(0) transform: scale(0);
} }
to { to {
opacity:1; opacity: 1;
-webkit-transform:scale(1); -webkit-transform: scale(1);
-ms-transform:scale(1); -ms-transform: scale(1);
-o-transform:scale(1); -o-transform: scale(1);
transform:scale(1) transform: scale(1);
} }
} }
@-webkit-keyframes new-item-animation { @-webkit-keyframes new-item-animation {
from { from {
opacity:0; opacity: 0;
-webkit-transform:scale(0); -webkit-transform: scale(0);
transform:scale(0) transform: scale(0);
} }
to { to {
opacity:1; opacity: 1;
-webkit-transform:scale(1); -webkit-transform: scale(1);
transform:scale(1) transform: scale(1);
} }
} }
@-o-keyframes new-item-animation { @-o-keyframes new-item-animation {
from { from {
opacity:0; opacity: 0;
-o-transform:scale(0); -o-transform: scale(0);
transform:scale(0) transform: scale(0);
} }
to { to {
opacity:1; opacity: 1;
-o-transform:scale(1); -o-transform: scale(1);
transform:scale(1) transform: scale(1);
} }
} }
// space blocker animation // space blocker animation
@keyframes openspace { @keyframes openspace {
to { to {
height:auto height: auto;
} }
} }
@-webkit-keyframes openspace { @-webkit-keyframes openspace {
to { to {
height:auto height: auto;
} }
} }
@-o-keyframes openspace { @-o-keyframes openspace {
to { to {
height:auto height: auto;
} }
} }
// removal animation // removal animation
@keyframes removed-item-animation { @keyframes removed-item-animation {
from { from {
opacity:1; opacity: 1;
-webkit-transform:scale(1); -webkit-transform: scale(1);
-ms-transform:scale(1); -ms-transform: scale(1);
-o-transform:scale(1); -o-transform: scale(1);
transform:scale(1) transform: scale(1);
} }
to { to {
-webkit-transform:scale(0); -webkit-transform: scale(0);
-ms-transform:scale(0); -ms-transform: scale(0);
-o-transform:scale(0); -o-transform: scale(0);
transform:scale(0); transform: scale(0);
opacity:0 opacity: 0;
} }
} }
@-webkit-keyframes removed-item-animation { @-webkit-keyframes removed-item-animation {
from { from {
opacity:1; opacity: 1;
-webkit-transform:scale(1); -webkit-transform: scale(1);
transform:scale(1) transform: scale(1);
} }
to { to {
-webkit-transform:scale(0); -webkit-transform: scale(0);
transform:scale(0); transform: scale(0);
opacity:0 opacity: 0;
} }
} }
@-o-keyframes removed-item-animation { @-o-keyframes removed-item-animation {
from { from {
opacity:1; opacity: 1;
-o-transform:scale(1); -o-transform: scale(1);
transform:scale(1) transform: scale(1);
} }
to { to {
-o-transform:scale(0); -o-transform: scale(0);
transform:scale(0); transform: scale(0);
opacity:0 opacity: 0;
} }
} }

19
source/integrations/index.html
View File

@ -74,7 +74,6 @@ regenerate: false
<a href="{{url}}" class="option-card"> <a href="{{url}}" class="option-card">
<div class="img-container">{{{image}}}</div> <div class="img-container">{{{image}}}</div>
<div class='title'>{{title}}</div> <div class='title'>{{title}}</div>
<div class='category'>{{cat}}</div>
</a> </a>
{{/components}} {{/components}}
{{^components}} {{^components}}
@ -88,14 +87,15 @@ regenerate: false
var allComponents = [ var allComponents = [
{%- for component in components -%} {%- for component in components -%}
{%- if component.ha_category -%} {%- if component.ha_category -%}
{%- assign sliced_version = component.ha_release | split: '.' -%} {%- assign sliced_version = component.ha_release | split: '.' -%}
{%- assign minor_version = sliced_version[1]|plus: 0 -%} {%- assign minor_version = sliced_version[1]|plus: 0 -%}
{%- assign major_version = sliced_version[0]|plus: 0 -%} {%- assign major_version = sliced_version[0]|plus: 0 -%}
{%- assign featured_first = true -%} {% assign categories = "" | split: ',' %}
{%- for ha_category in component.ha_category -%} {%- 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}}"}, {% capture category %}"{{ ha_category | slugify | downcase }}"{% endcapture %}
{%- assign featured_first = false -%} {% assign categories = categories | push: category %}
{%- endfor -%} {%- 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 -%} {% endif -%}
{%- endfor -%} {%- endfor -%}
false false
@ -112,7 +112,6 @@ allComponents.pop(); // remove placeholder element at the end
// do the lowerCase transformation once // do the lowerCase transformation once
for (i = 0; i < (allComponents.length); i++) { for (i = 0; i < (allComponents.length); i++) {
allComponents[i].titleLC = allComponents[i].title.toLowerCase(); allComponents[i].titleLC = allComponents[i].title.toLowerCase();
allComponents[i].catLC = allComponents[i].cat.toLowerCase();
} }
// sort the components alphabetically // sort the components alphabetically
@ -169,7 +168,7 @@ allComponents.pop(); // remove placeholder element at the end
search = decodeURIComponent(hash).substring(8).toLowerCase(); search = decodeURIComponent(hash).substring(8).toLowerCase();
filter = function (comp) { filter = function (comp) {
return (comp.titleLC.indexOf(search) !== -1) || return (comp.titleLC.indexOf(search) !== -1) ||
(comp.catLC.indexOf(search) !== -1); (comp.cat.find(c => c.includes("#")) != undefined);
}; };
} else if (hash === '#featured' || hash === '') { } else if (hash === '#featured' || hash === '') {
@ -190,7 +189,7 @@ allComponents.pop(); // remove placeholder element at the end
// regular filter categories // regular filter categories
search = hash.substring(1); search = hash.substring(1);
filter = function (comp) { filter = function (comp) {
return comp.catLC === search; return comp.cat.includes(search);
}; };
} }