diff --git a/config/README.md b/config/README.md index 71c9cfe..dddfac0 100644 --- a/config/README.md +++ b/config/README.md @@ -37,13 +37,13 @@ https://github.com/ngocjohn/hass-config/assets/96962827/acc1a4db-b92e-4ab1-ac9d- - 34,946 + 35,226 34 - 164 + 179 63 54 32 - 1063 + 1148 215 38 @@ -165,8 +165,9 @@ https://github.com/ngocjohn/hass-config/assets/96962827/acc1a4db-b92e-4ab1-ac9d- My dashboard is basically a cool fusion of ideas, mainly inspired by the awesome [Matt8707](https://github.com/matt8707/hass-config) 🌟. I threw in some extra goodies to make it perfect for my needs! 🚀 Wide Image -Movies Image -System Info Image +Movies Image +System Info Image +Github stats Image The floorplan is crafted using the [Ha Floorplan](https://github.com/ExperienceLovelace/ha-floorplan) Lovelace plugin, and it features interactive controls thanks to the [Honeycomb Menu](https://github.com/Sian-Lee-SA/honeycomb-menu). diff --git a/config/dashboards/subviews/github-stats.yaml b/config/dashboards/subviews/github-stats.yaml index 728fc05..b797b60 100644 --- a/config/dashboards/subviews/github-stats.yaml +++ b/config/dashboards/subviews/github-stats.yaml @@ -3,19 +3,21 @@ title: GITHUB STATS path: github-stats subview: false theme: tablet - +xbackground: >- + linear-gradient(170deg, rgba(22, 24, 29, 0.6) 80%, rgba(156, 156, 210, 0.6) 160%) type: sections -max_columns: 6 +max_columns: 9 +dense_section_placement: true sections: - type: grid - column_span: 2 + column_span: 3 cards: - &github_heading_card type: custom:streamline-card template: github_heading_card variables: - heading_title: 🚘 Vehicle status card - - total_entity: sensor.vehicle_status_card_total + - total_entity: sensor.vehicle_status_card_total_2 - latest_entity: sensor.vehicle_status_latest - stars_entity: sensor.vehicle_status_card_stars - repo_link: https://github.com/ngocjohn/vehicle-status-card @@ -65,11 +67,11 @@ sections: variables: - device_id: ngocjohn/vehicle-status-card - type: grid - column_span: 2 + column_span: 3 cards: - <<: *github_heading_card variables: - heading_title: 🚙 Vehicle info car + heading_title: 🚙 Vehicle info card total_entity: sensor.vehicle_info_card latest_entity: sensor.vehicle_latest_release_download stars_entity: sensor.repo_vehicle_stars @@ -98,8 +100,9 @@ sections: device_id: ngocjohn/vehicle-info-card bar_color: rgb(196, 74, 34) fill_color: 'rgba(196, 74, 34, 0.2)' + - type: grid - column_span: 2 + column_span: 3 cards: - <<: *github_heading_card variables: @@ -133,7 +136,7 @@ sections: bar_color: 'rgba(0, 255, 208, 0.7)' fill_color: 'rgba(0, 255, 208, 0.2)' - type: grid - column_span: 2 + column_span: 3 cards: - <<: *github_heading_card variables: @@ -175,7 +178,7 @@ sections: total_entity: 'sensor.hass_config_forks' latest_entity: sensor.hass_config_latest_tag stars_entity: 'sensor.hass_config_stars' - repo_link: https://github.com/ngocjohn/lunar-phase + repo_link: https://github.com/ngocjohn/hass-config - type: entities grid_options: columns: full @@ -220,3 +223,25 @@ sections: label: Vehicle Status grid_options: columns: full + - type: grid + column_span: 2 + cards: + - type: heading + heading: 🚀 Github stats + tap_action: + action: url + url_path: https://github.com/ngocjohn + grid_options: + columns: full + - type: markdown + grid_options: + columns: full + card_mod: + style: | + ha-markdown { + padding: 0 !important; + } + content: >- + [![GitHub Streak](https://github-readme-streak-stats.herokuapp.com?user=ngocjohn&theme=transparent&hide_border=true&short_numbers=true&date_format=j%2Fn%5B%2FY%5D&card_width=600&stroke=634EEB7A)](https://git.io/streak-stats) + ![Top Langs](https://github-readme-stats.vercel.app/api/top-langs/?username=ngocjohn&layout=compact&theme=catppuccin_mocha&hide_border=true&count_private=true&card_width=600&hide=html,shell) + ![GitHub Stats](https://github-readme-stats.vercel.app/api?username=ngocjohn&theme=one_dark_pro&show_icons=true&hide_border=true&count_private=true&hide_title=true&card_width=600&rank_icon=default&text_bold=false) diff --git a/config/dashboards/templates/button_card_templates/tpl_base.yaml b/config/dashboards/templates/button_card_templates/tpl_base.yaml index 5889f46..6ffb3ac 100755 --- a/config/dashboards/templates/button_card_templates/tpl_base.yaml +++ b/config/dashboards/templates/button_card_templates/tpl_base.yaml @@ -904,15 +904,12 @@ extra_styles: border-radius: 0.9rem; } #name { - font-size: 1rem; + font-size: 0.8rem; } #state { - font-size: 0.9rem; - font-weight: 400 !important; - } - ha-icon { - width: calc(var(--chips-card-icon-size) * var(--chips-phone)); + font-size: 0.7rem; } + #img-cell > ha-state-icon { color: var(--primary-text-color); width: 24px; @@ -925,7 +922,7 @@ extra_styles: opacity: 0.4; } .svgicon { - width: 34px !important; + width: 24px !important; } } .marquee { diff --git a/config/dashboards/templates/button_card_templates/tpl_chips.yaml b/config/dashboards/templates/button_card_templates/tpl_chips.yaml index bf8aae0..c00e833 100644 --- a/config/dashboards/templates/button_card_templates/tpl_chips.yaml +++ b/config/dashboards/templates/button_card_templates/tpl_chips.yaml @@ -93,7 +93,7 @@ chips: name: - justify-self: start # - padding: 0 0.4vw 0 0 - # - line-height: 160% + - line-height: calc(100% + 5px) - letter-spacing: 0.06em img-cell: - display: inline-flex @@ -197,7 +197,8 @@ chip_air: - color: '#97989c' - background: linear-gradient(to bottom, rgba(53, 59, 83, 0.8) 0%, rgba(10, 14, 34, 0.8) 50%, rgba(53, 59, 83, 0.8) 100%) # - border-bottom-color: rgba(10, 14, 34, 1) - # - padding: 0.2vw + - padding: 0.2vw + - max-height: 76px state: - color: &color > [[[ diff --git a/config/dashboards/templates/button_card_templates/tpl_sectors.yaml b/config/dashboards/templates/button_card_templates/tpl_sectors.yaml index 1c20e92..06ff42e 100755 --- a/config/dashboards/templates/button_card_templates/tpl_sectors.yaml +++ b/config/dashboards/templates/button_card_templates/tpl_sectors.yaml @@ -114,12 +114,13 @@ rooms_base: card: - background: > [[[ + if (entity && entity.state !== undefined) + if (variables.washing_on) { return variables.washing_on ? `linear-gradient(to top, rgba(250, 250, 250, 0.75) 0%, rgba(10,14,34,0.8) 100%)` : 'rgba(115, 115, 115, 0.2)'; - } - else { + } else { return variables.state_on ? 'rgba(250, 250, 250, 0.75)' : 'rgba(115, 115, 115, 0.2)'; diff --git a/config/dashboards/templates/streamline-card.yaml b/config/dashboards/templates/streamline-card.yaml index 1152e91..e5d526f 100644 --- a/config/dashboards/templates/streamline-card.yaml +++ b/config/dashboards/templates/streamline-card.yaml @@ -1209,12 +1209,16 @@ github_heading_card: - repo_link: null card: type: heading - icon: '' + card_mod: + style: + .: | + .container { + flex-wrap: wrap !important; + } heading: '[[heading_title]]' heading_style: title grid_options: columns: full - rows: 1 tap_action: action: url url_path: '[[repo_link]]' @@ -1242,7 +1246,7 @@ github_graph_card: header: hide showCurrentValues: false legendVisible: false - defaultTimeRange: 1w + defaultTimeRange: 3d tooltip: size: full uiLayout: diff --git a/config/themes/tablet.yaml b/config/themes/tablet.yaml index e8c43ce..0a85993 100644 --- a/config/themes/tablet.yaml +++ b/config/themes/tablet.yaml @@ -108,9 +108,7 @@ tablet: # --app-header-background-color: rgba(0,0,0,1); --app-header-background-color: rgba(22, 24, 29, 1); } - hui-view { - background: linear-gradient(180deg, rgba(22, 24, 29, 1) 0%, rgba(23, 26, 37, 1) 42%, rgba(22, 24, 29, 1) 100%) !important; - } + #view { background-image: linear-gradient(180deg, rgba(22, 24, 29, 1) 0%, rgba(23, 26, 37, 1) 42%, rgba(22, 24, 29, 1) 100%) !important; overflow: hidden !important; diff --git a/docs/README.md b/docs/README.md index 71c9cfe..dddfac0 100644 --- a/docs/README.md +++ b/docs/README.md @@ -37,13 +37,13 @@ https://github.com/ngocjohn/hass-config/assets/96962827/acc1a4db-b92e-4ab1-ac9d- - 34,946 + 35,226 34 - 164 + 179 63 54 32 - 1063 + 1148 215 38 @@ -165,8 +165,9 @@ https://github.com/ngocjohn/hass-config/assets/96962827/acc1a4db-b92e-4ab1-ac9d- My dashboard is basically a cool fusion of ideas, mainly inspired by the awesome [Matt8707](https://github.com/matt8707/hass-config) 🌟. I threw in some extra goodies to make it perfect for my needs! 🚀 Wide Image -Movies Image -System Info Image +Movies Image +System Info Image +Github stats Image The floorplan is crafted using the [Ha Floorplan](https://github.com/ExperienceLovelace/ha-floorplan) Lovelace plugin, and it features interactive controls thanks to the [Honeycomb Menu](https://github.com/Sian-Lee-SA/honeycomb-menu).