diff --git a/Gemfile.lock b/Gemfile.lock index d0104628300..358a4a87a1d 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -197,4 +197,4 @@ RUBY VERSION ruby 2.6.2p47 BUNDLED WITH - 2.5.3 + 2.5.3 \ No newline at end of file diff --git a/sass/homeassistant/pages/_component_page.scss b/sass/homeassistant/pages/_component_page.scss index 610f8420522..0a30a85239e 100644 --- a/sass/homeassistant/pages/_component_page.scss +++ b/sass/homeassistant/pages/_component_page.scss @@ -5,22 +5,156 @@ font-weight: 500; letter-spacing: .005em; color: $gray; + padding-top: 8px; text-transform: uppercase; } } + .component-search { margin-bottom: 24px; + min-height: 80px; input { width: 100%; padding: 10px; - background-color: #fefefe; border-radius: 8px; border: 1px solid; border-color: #7c7c7c #c3c3c3 #ddd; } } + + .grid-filters { + @media only screen and (min-width: $desk-start) { + display: flex; + } + } + + .integration-filter-radio { + display: flex; + border: none; + padding: 0; + grid-gap: 10px; + } + + .filter-button { + display: flex; + align-items: center; + margin-bottom: 0; + width: fit-content; + font-size: 1rem; + box-shadow: none; + background-color: $blue; + color: white; + border-radius: 24px; + + input { + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + padding-left: 16px; + display: block; + margin-left: 10px; + flex-shrink: 0; + height: 1rem; + width: 1rem; + border-radius: 100%; + border-color: transparent; + background-color: white; + + &:checked { + background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22%231abcf2%22%20transform%3D%22rotate(90)%22%3E%3Ccircle%20cx%3D%228%22%20cy%3D%228%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); + } + } + + label { + display: block; + width: 100%; + padding: 4px 16px 4px 10px; + } + } + + .integration-filter.integration-filter-select { + position: relative; + + &::after { + content: " "; + position: absolute; + top: 50%; + margin-top: 2px; + right: 8px; + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-top: 5px solid black; + } + + .ha_category { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + color: #222; + width: 100%; + margin-bottom: 15px; + text-align-last: center; + font-size: 16px; + line-height: 24px; + border: 2px solid $primary-color; + border-top-right-radius: 0px; + border-top-left-radius: 0px; + border-bottom-right-radius: 5px; + border-bottom-left-radius: 5px; + border-top: 0; + position: relative; + top: -2px; + padding: 5px 5px 2px; + + &:focus-visible { + outline: none; + } + } + } + + .filter-title { + background: $primary-color; + color: white; + text-align: center; + border-top-right-radius: 5px; + border-top-left-radius: 5px; + padding: 5px; + margin-top: 0; + margin-bottom: -2px; + text-transform: capitalize; + font-size: 18px; + position: relative; + z-index: 1; + } + + .active-filter { + margin: 10px 5px 0px 0px; + padding: 5px 10px; + min-width: 100px; + background-color: $primary-color; + border-radius: 28px; + border: none; + color: white; + font-size: 14px; + letter-spacing: 0.5px; + text-transform: capitalize; + line-height: 18px; + + span { + display: flex; + align-items: center; + } + + iconify-icon { + display: inline-block; + margin-left: 5px; + } + } + select { font-family: $sans-serif; border: 0; @@ -44,6 +178,10 @@ width: 100%; } + div.alert { + text-align: center; + } + .option-card { flex: 0 0 auto; aspect-ratio: 1; @@ -147,7 +285,7 @@ a.option-card:hover { img { max-width: 48px; max-height: 48px; - } + } } .title { @@ -201,7 +339,7 @@ a.option-card:hover { } .category_select { display: block; - } + } .category_list { display: none; } @@ -330,4 +468,4 @@ a.option-card:hover { to { opacity: 0; } -} +} \ No newline at end of file diff --git a/source/integrations/index.html b/source/integrations/index.html index 908979ca990..0f47a65fe1d 100644 --- a/source/integrations/index.html +++ b/source/integrations/index.html @@ -23,68 +23,38 @@ regenerate: false {%- assign components = site.integrations | sort: 'title' -%} {%- assign components_by_version = site.integrations | group_components_by_release -%} {%- assign categories = components | map: 'ha_category' | join: ',' | downcase | split: ',' | uniq | sort -%} +{%- assign iot_classes = "Local Push,Local Polling,Cloud Push,Cloud Polling,Assumed State,Calculated,Configurable" | +join: ',' | split: ',' -%} +{% assign quality_scales = +"icon:🏆,name:platinum|icon:🥇,name:gold|icon:🥈,name:silver|icon:🥉,name:bronze|icon:🏠,name:internal|icon:💾,name:legacy" +| split: "|" +%}
-
-
-
- All {{tot}} +
+
+
+ +
- -
- Featured - Partner brands +
+ +
- -
- - +
+ +
+
+
-
- - {%- for category in categories -%} - {%- assign category_name = "" -%} - {%- assign components_count = 0 -%} - {%- for comp in components -%} - {%- assign comp_categories = comp.ha_category | join: ',' | downcase -%} - {%- if comp_categories contains category -%} - {%- if category_name == "" -%} - {%- for cat in comp.ha_category -%} - {%- assign lower_cat = cat | downcase -%} - {%- if lower_cat == category -%} - {%- assign category_name = cat -%} - {%- endif -%} - {%- endfor -%} - {%- endif -%} - {%- assign components_count = components_count | plus: 1 -%} - {%- endif -%} - {%- endfor -%} - {%- if category != 'other' and components_count != 0 -%} - {%- if category_name == "" -%} - {%- assign category_name = category | capitalize -%} - {%- endif -%} - {{ category_name }} {{ components_count }} - {%- endif -%} - {%- endfor -%} - Other {{ components | where: 'ha_category', 'Other' | size }} -
- -
- - + {%- for category in categories -%} {%- assign category_name = "" -%} {%- assign components_count = 0 -%} @@ -106,154 +76,341 @@ regenerate: false {%- if category_name == "" -%} {%- assign category_name = category | capitalize -%} {%- endif -%} - + {%- endif -%} {%- endfor -%} - + + +
+
+
+
+

Version

+ +
+
+ +
+
+

IoT Class

+ +
+
+ +
+
+

Quality Scale

+ +
-
+ +
- +
+
+ + +