Hey all.
I have my phone dashboard pretty much done. Now for the tablet. Has anyone got some examples they can share, with how they are dealing with the extra real estate?
Also for anyone using Sonarr and Radarr ect upcoming media cards. Sam Wakefield wrote some awesome custom code to modernise the card and make it look so much better, works really well with Minimalist (as you can see by the pics)
Im wondering if one of the devs can see the value of templating it and make it into its own card for us?
This is code for my media view, which has;
Recently Added
Upcoming TV
Upcoming Movies
Again, credit to Sam Wakefield and the card makers for their awesome work 
title: "Media"
path: "media"
cards:
- type: "custom:button-card"
template: chip_back
variables:
ulm_chip_back_path: home
- type: horizontal-stack
cards:
- type: picture-elements
image: /local/box.png
card_mod:
style: |
ha-card {
height: 648px !important;
width: 1px !important;
overflow: visible !important;
background: transparent;
}
elements:
- type: custom:upcoming-media-card
title: Recently Added
label:
date: ddmm
style:
top: 5px
left: 5px
width: 1px
height: 260px
transform: translate(0%, 0%)
entity: sensor.plex_recently_added
image_style: poster
flag: false
icon: none
max: 6
box_shadows: false
border_color: transparent
accent_color: transparent
title_text: $empty
line1_text: $day, $date
line2_text: $number - $runtime
line3_text: $empty
line4_text: $empty
title_size: large
line1_size: large
text_shadows: false
card_mod:
style: |
ha-card.type-custom-upcoming-media-card {
background: transparent;
padding: 0px !important;
box-shadow: none;
overflow: visible !important;
}
ha-card > div {
padding: 0px !important;
}
#main.plex_poster {
margin: 0px !important;
overflow: visible !important;
position: absolute !important;
width: 148px !important;
}
#main.plex_poster:nth-of-type(2) {
left: 181px !important;
}
#main.plex_poster:nth-of-type(3) {
left: 0px !important;
top: 350px;
}
#main.plex_poster:nth-of-type(4) {
top: 350px;
left: 181px !important;
}
#main.plex_poster:nth-of-type(5) {
top: 625px;
left: 0px !important;
}
#main.plex_poster:nth-of-type(6) {
top: 625px;
left: 181px !important;
}
.plex_poster .plex_container_poster {
border-radius: 10px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
margin: 0px;
padding: 0px;
width: 168px;
height: 258px;
}
.plex_poster .plex_svg_poster {
margin: 0px;
position: absolute;
top: 166px;
left: 0px;
width: 153px !important;
border-radius: 0px 10px 10px 0px;
background-color: rgba(44, 45, 67, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition-duration: 150ms;
}
.plex_poster .plex_svg_poster:hover {
opacity: 0%;
transition-duration: 200ms;
}
.plex_line0_poster {
font-size: 14px !important;
}
.plex_line1_poster {
font-size: 21px !important;
fill: white !important;
opacity: 80%;
}
.plex_line2_poster {
font-size: 22px !important;
fill: white !important;
opacity: 80%;
}
- type: custom:upcoming-media-card
title: Upcoming TV
date: ddmm
style:
top: 900px
left: 5px
width: 1px
height: 260px
transform: translate(0%, 0%)
entity: sensor.sonarr_upcoming_media
image_style: poster
flag: false
icon: none
max: 6
box_shadows: false
border_color: transparent
accent_color: transparent
title_text: $empty
line1_text: $day, $date
line2_text: $number - $runtime
line3_text: $empty
line4_text: $empty
title_size: large
line1_size: large
text_shadows: false
card_mod:
style: |
ha-card.type-custom-upcoming-media-card {
background: transparent;
padding: 0px !important;
width: 229px !important;
height: 260px !important;
box-shadow: none;
overflow: visible !important;
}
ha-card > div {
padding: 0px !important;
}
#main.sona_poster {
margin: 0px !important;
overflow: visible !important;
position: absolute !important;
width: 148px !important;
}
#main.sona_poster:nth-of-type(2) {
left: 181px !important;
}
#main.sona_poster:nth-of-type(3) {
left: 0px !important;
top: 350px;
}
#main.sona_poster:nth-of-type(4) {
top: 350px;
left: 181px !important;
}
#main.sona_poster:nth-of-type(5) {
top: 620px;
left: 0px !important;
}
#main.sona_poster:nth-of-type(6) {
top: 620px;
left: 181px !important;
}
.sona_poster .sona_container_poster {
border-radius: 10px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
margin: 0px;
padding: 0px;
width: 168px;
height: 258px;
}
.sona_poster .sona_svg_poster {
margin: 0px;
position: absolute;
top: 166px;
left: 0px;
width: 153px !important;
border-radius: 0px 10px 10px 0px;
background-color: rgba(44, 45, 67, 0.6);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition-duration: 150ms;
}
.sona_poster .sona_svg_poster:hover {
opacity: 0%;
transition-duration: 200ms;
}
.sona_line0_poster {
font-size: 14px !important;
}
.sona_line1_poster {
font-size: 21px !important;
fill: white !important;
opacity: 80%;
}
.sona_line2_poster {
font-size: 22px !important;
fill: white !important;
opacity: 80%;
}
- type: custom:upcoming-media-card
title: Upcoming Movies
date: ddmm
style:
top: 1800px
left: 5px
width: 1px
height: 260px
transform: translate(0%, 0%)
entity: sensor.radarr_upcoming_media
image_style: poster
flag: false
icon: none
max: 6
box_shadows: false
border_color: transparent
accent_color: transparent
title_text: $empty
line1_text: $date
line2_text: $empty
line3_text: $empty
line4_text: $empty
title_size: large
line1_size: large
text_shadows: false
card_mod:
style: |
ha-card.type-custom-upcoming-media-card {
background: transparent;
padding: 0px !important;
width: 229px !important;
height: 260px !important;
box-shadow: none;
overflow: visible !important;
}
ha-card > div {
padding: 0px !important;
}
#main.rada_poster {
margin: 0px !important;
overflow: visible !important;
position: absolute !important;
width: 168px;
}
#main.rada_poster:nth-of-type(2) {
left: 181px !important;
}
#main.rada_poster:nth-of-type(3) {
top: 350px;
left: 0px !important;
}
#main.rada_poster:nth-of-type(4) {
left: 181px !important;
top: 350px;
}
#main.rada_poster:nth-of-type(5) {
left: 0px !important;
top: 400px;
}
#main.rada_poster:nth-of-type(6) {
left: 181px !important;
top: 400px;
}
.rada_poster .rada_container_poster {
border-radius: 10px;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2);
margin: 0px;
padding: 0px;
width: 168px;
height: 258px;
}
.rada_poster .rada_svg_poster {
margin: 0px;
position: absolute;
top: 5px;
left: 5px;
width: 51px !important;
height: 28px;
border-radius: 20px;
background-color: rgba(44, 45, 67, 0.3);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
padding: 0px 0px 2px 7px;
}
.rada_line0_poster {
font-size: 0px !important;
}
.rada_line1_poster {
font-size: 55px !important;
fill: white !important;
opacity: 90%;
}
