These are my two dashboards, one for mobile and one for tablet, quite simple but I like to keep them minimal
Tablet (Lenovo tab k10 )
Mobile
Joel_DE
May 8, 2024, 8:45pm
146
would you still recommend a TAB A7 for a dashboard that is interacted with in HA?
or should i pay more for a8 or a9?
a7 is super cheap $100
idro
May 15, 2024, 4:33pm
147
Which is the theme you used?
Imygaf
May 21, 2024, 3:14pm
148
Hi
Thanks
100% mobile oriented, works for me.
Icons turn yellow when somwthing is ON… alarm ON, Front Door Locked, Cameras detecting movement, one of lights is ON, Wifi enabled, etc…
In order to fix the sidebar not loading I altered the code for the sidebar slightly. See the most recent post of mine in this “open issue”.
opened 09:11PM - 14 May 23 UTC
Hi,
I have an issue where the bottom card doesn't show most of the time. I thin… k it is about 1/10 times that the bottom card actually shows up. There is plenty of space for the card to show up as questioned in #10. Are anyone else having this problem, or am I the only one?
I do have a log error, but I am not sure if it is related or not:
```
Logger: frontend.js.latest.202305033
Source: components/system_log/__init__.py:257
First occurred: 23.08.18 (3 occurrences)
Last logged: 23.08.18
https://ha.[REDACTED].dk/tablet-dashboard/overview:0:0 Uncaught
https://ha.[REDACTED].dk/hacsfiles/sidebar-card/sidebar-card.js?hacstag=2418255740194:18109:33 Uncaught TypeError: cardElement.setConfig is not a function
```
The bottom card that I am using, is the default one from the readme. Here is the full sidebar that I am using:
```
digitalClock: true
date: true
dateFormat: "dddd, LL"
width: 23.5
hideTopMenu: true
hideHassSidebar: true
bottomCard:
type: horizontal-stack
cardOptions:
cards:
- type: "custom:button-card"
color_type: card
color: rgb(255, 255, 255)
icon: mdi:home
- type: "custom:button-card"
color_type: card
color: rgb(255, 255, 255)
icon: mdi:lightbulb
cardStyle: |
:host {
width: 100%;
background-color:#FFF;
}
debug: true
showTopMenuOnMobile: true
template: |
<li>
{% if now().hour < 5 %} Godnat {{'\U0001F634'}}
{% elif now().hour < 12 %} Godmorgen {{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Godeftermiddag {{'\U0001F44B\U0001F3FB'}}
{% else %} Godaften {{'\U0001F44B\U0001F3FB'}}{% endif %}
</li>
{% if is_state('binary_sensor.garden_gate_north', 'on') %} <li>Havelåge Nord er åben!</li> {% endif %}
{% if is_state('binary_sensor.garden_gate_south', 'on') %} <li>Havelåge Syd er åben!</li> {% endif %}
{% if states('sensor.antal_lys_taendt') | float > 0 %} <li>{{states('sensor.antal_lys_taendt')}} lys tændt</li> {% endif %}
style: |
:host {
--sidebar-background: #1E2022;
--sidebar-text-color: #BCBDBD;
--font-family: "Roboto", sans-serif;
--sidebar-selected-text-color: #FFF;
--sidebar-selected-icon-color: #FFF;
}
.sidebar-inner {
margin-top: 2em !important;
}
.type-picture-elements {
background-color: #121212 !important;
}
.digitalClock {
font-weight: 200;
font-size: 5.5em !important;
margin-left: 10% !important;
}
.date {
font-size: 1.3em !important;
margin-left: 10% !important;
margin-top: -0.8em !important;
font-weight: 300;
color: #606263 !important;
}
.type-picture-elements {
border-radius: 0 !important;
}
body {
--ha-card-border-radius: 0 !important;
}
.sidebarMenu li {
height: 1.5em;
border-radius: 100px !important;
font-size: 2em !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
flex-wrap: wrap;
justify-content: space-between;
}
sidebarMenu:
- action: navigate
navigation_path: "/tablet-dashboard/overview"
name: "Oversigt"
active: true
icon: mdi:home
- action: navigate
navigation_path: "/tablet-dashboard/enheder"
name: "Enheder"
icon: mdi:devices
- action: navigate
navigation_path: "/tablet-dashboard/energy"
name: "Energi"
icon: mdi:lightning-bolt
- action: navigate
navigation_path: "/tablet-dashboard/energyprices"
name: "Elpriser"
icon: mdi:lightning-bolt
```
1 Like
