OK, this approach breaks it down quite nicely.
What do you mean with “more complex” functions? I would have thought that the 3 buttons triggering an ON/OFF signal are quite straight forward?
On first read, I misinterpreted the description of the buttons needing multiple different pushes some of which trigger rules.
I see it now, and you’re right. The function should be fairly easy to add in if the buttons are just sending simple ON/OFF commands.
1 Like
OK. Then I will come back once the first card is set up and working as desired. 
Thank you for the support!
OK, this is where I got so far.
All content is hard coded so far as I want to get the styling right.
I am not 100% sure whether my approach behaves nicely on different screens (smartphone, tablet, 4k monitor).
What I can see on my phone as an example is that the “Wachstumsphase” (Growth phase) label is moving on top of the toggle button as soon as there is not enough space. The card looks “denser” on my phone. The screenshot here is from a 4k monitor.
How can I influence the background image? I.e. make it opaque or darker? With oh-location-card it is straight forward as you can set a brightness property. But how does it work with f7-cards?
uid: plantCard
tags: []
props:
parameters: []
timestamp: Oct 10, 2023, 3:02:35 PM
component: f7-card
config:
style:
border-radius: 20px
background: url(/static/baddg.jpg)
background-size: cover
height: 200px
width: 344px
--font-size-title: 24px
--font-weight-title: 740
--font-size-location: 20px
--font-color-addInfo: rgb(200,200,200)
--font-size-addInfo: 13px
--font-weight-addInfo: 400
slots:
default:
- component: f7-row
config:
style:
height: 100%
slots:
default:
- component: f7-col
config:
style:
width: 50%
height: 100%
padding-top: 15px
padding-left: 35px
slots:
default:
- component: f7-row
config:
style:
align-content: flex-start
height: 50%
slots:
default:
- component: Label
config:
style:
width: 100%
font-size: var(--font-size-title)
font-weight: var(--font-weight-title)
text: Drachenpalme
- component: Label
config:
style:
font-size: var(--font-size-location)
text: Erdgeschoss
- component: f7-row
config:
style:
height: 45%
display: flex
align-content: flex-end
slots:
default:
- component: Label
config:
style:
width: 100%
color: var(--font-color-addInfo)
font-size: var(--font-size-addInfo)
font-weight: var(--font-weight-addInfo)
text: Gießen in 5 Tagen
- component: Label
config:
style:
color: var(--font-color-addInfo)
font-size: var(--font-size-addInfo)
font-weight: var(--font-weight-addInfo)
text: Düngen in 17 Tagen
- component: f7-col
config:
style:
width: 50%
height: 100%
padding-top: 20px
padding-right: 5px
slots:
default:
- component: f7-row
config:
style:
justify-content: flex-end
height: 50%
slots:
default:
- component: oh-icon
config:
style:
padding-right: 10px
icon: iconify:mdi:watering-can
color: blue
height: 45px
- component: oh-icon
config:
style:
padding-right: 20px
icon: iconify:game-icons:fertilizer-bag
color: green
height: 40px
- component: f7-row
config:
style:
height: 45%
display: flex
align-content: flex-end
align-items: center
justify-content: flex-end
slots:
default:
- component: Label
config:
style:
padding-right: 15px
color: var(--font-color-addInfo)
font-size: var(--font-size-addInfo)
font-weight: var(--font-weight-addInfo)
text: Wachstumsphase
- component: oh-toggle
config:
item: Debug_Knopf
color: '=(items[Debug_Knopf].state == "ON") ? "" : "green"'
Looks like a great start.
This is, in my opinion, the hardest part of styling. In particular font size. There are a couple of ways you might want to try and handle this.
- You’re forcing the font sizes with your css variables. But there are already built in f7 font size variables that you could use instead if you prefer: CSS Variables Reference | Framework7 Documentation many of these will be auto-calculated by the f7 library to be responsive to both mobile and desktop views.
- You can use the
deviceobject in your widget to respond to a desktop vs mobile display.device.desktopwill be true on desktop browsers and false on mobile so you could define your font size css variables like this
--font-size-title: =(device.desktop)?('24px'):('16px')
Other than that I find that relying more of flex spacing than absolute width and height of containers helps with responsive design. That will probably help you with the problem of the text over-running the switch component.
You can always take a look at how the oh version of a component is defined to get an idea. In this case the location cards come from the base model card here, and the background is not actually a background setting, it is an image in the f7 header:
You can use html tags as components too, so you can put your own img in the card and apply a style directly to that image. You’ll just have to adjust the positioning of the first f7-row after that to be absolutely positioned over the image.
- component: f7-card
config:
...
slots:
default:
- component: img
config:
src: /static/baddg.jpg
style:
filter: brightness(25%)
If you want to keep the image as a background style of the card, then it gets a little trickier. Applying a filter to a background image directly is not something that’s supported in css to my knowledge, so you’ll have to find some clever work-around. My first instinct would be to stack backgrounds. You can define more than one background with css, so you can probably define the image as the lower background and then a solid black background above that with an alpha value that would serve to turn down the brightness of the image.
1 Like
Wonderful! Thank you for the kind feedback. It really motivates me going further.
So you mean the width: 50% or height: xyz% directives for the rows/columns should be avoided and in the best case one only uses the align-items, justify-content and align-content properties to get a smooth experience?
That’s what I do for most of my widgets. Here’s a really helpful resource to give you an idea of everything you can do with flexbox alignment:
1 Like
So, regarding the background image I decided to use the “overlay” approach. Inside the development environment it looks as expected:
But when looking at it on an overview page the black layer is above all other layers:
What we can also see is that the flex-spacing is somehow ignored. The same happens on my phone.
Any idea why?
uid: plantCard
tags: []
props:
parameters: []
timestamp: Oct 11, 2023, 11:14:06 AM
component: f7-card
config:
style:
border-radius: 20px
background: url(/static/baddg.jpg)
background-size: cover
height: 200px
width: calc(340px - 2*var(--f7-card-header-padding-horizontal))
--font-size-title: 22px
--font-weight-title: 740
--font-size-location: 18px
--font-color-addInfo: rgb(200,200,200)
--font-size-addInfo: =(device.desktop)?('12px'):('10px')
--font-weight-addInfo: 400
display: flex
flex-wrap: wrap
slots:
default:
- component: f7-block
config:
style:
position: absolute
top: -16px
width: 100%
height: 100%
background: rgba(0, 0, 0, 0.4)
border-radius: 20px
- component: f7-row
config:
style:
position: absolute
top: 0
left: 0
slots:
default:
- component: f7-col
config:
style:
width: 48%
height: 100%
padding-top: 15px
padding-left: 35px
slots:
default:
- component: f7-row
config:
style:
align-content: flex-start
height: 50%
slots:
default:
- component: Label
config:
style:
width: 100%
font-size: var(--font-size-title)
font-weight: var(--font-weight-title)
text: Drachenpalme
- component: Label
config:
style:
font-size: var(--font-size-location)
text: Erdgeschoss
- component: f7-row
config:
style:
height: 45%
display: flex
align-content: flex-end
slots:
default:
- component: Label
config:
style:
width: 100%
color: var(--font-color-addInfo)
font-size: var(--font-size-addInfo)
font-weight: var(--font-weight-addInfo)
text: Gießen in 5 Tagen
- component: Label
config:
style:
color: var(--font-color-addInfo)
font-size: var(--font-size-addInfo)
font-weight: var(--font-weight-addInfo)
text: Düngen in 17 Tagen
- component: f7-col
config:
style:
width: 52%
height: 100%
padding-top: 20px
padding-right: 5px
slots:
default:
- component: f7-row
config:
style:
justify-content: flex-end
height: 50%
slots:
default:
- component: oh-icon
config:
style:
padding-right: 10px
icon: iconify:mdi:watering-can
color: blue
height: 45px
- component: oh-icon
config:
style:
padding-right: 5px
icon: iconify:game-icons:fertilizer-bag
color: green
height: 40px
- component: f7-row
config:
style:
height: 45%
display: flex
align-content: flex-end
align-items: center
justify-content: flex-end
slots:
default:
- component: Label
config:
style:
align-content: flex-end
padding-right: 15px
color: var(--font-color-addInfo)
font-size: var(--font-size-addInfo)
font-weight: var(--font-weight-addInfo)
text: Wachstumsphase
- component: oh-toggle
config:
style:
transform: =(device.desktop)?'':'scale(0.8)'
item: Debug_Knopf
color: '=(items[Debug_Knopf].state == "ON") ? "" : "green"'
Edit: I realized I have to add a top: -16px property to the f7-block otherwise the black image won’t cover the whole picture. This seems a litte bit odd to me. I’d also like to know why I need to do this. Any suggestions?
This one perfectly good solution. In fact, if you do this, then you don’t need the extra f7-block, just set the background on your first f7-row (you’ll also need to set border-radius on the row to match the card, 20px, if I recall, and give it 100% height and width).
My guess is that this will fix both of the problems you are seeing.
It shouldn’t happen that the editor view and the display view are any different, but I’ve seen a couple of examples of it over time. It just means that there’s some upstream css setting in the main window that is for some reason overriding one on your card. The flex styling is still working, but instead of you f7-row being the full height of the card, it’s height is reduced. That’s why I suspect that the fix above will fix the issue: it explicitly sets the height of that first f7-row explicitly.
So… I’d say the widget is ready for now and it behaves as I want it to behave.
This is the code containing still some hard-coded parts as I don’t have access to item labels when not using oh-repeater.
uid: plantCard
tags: []
props:
parameters:
- context: item
description: Die zu pflegende Pflanze
label: Pflanze
name: plant
required: true
type: TEXT
timestamp: Oct 12, 2023, 3:11:14 PM
component: f7-card
config:
style:
border-radius: 20px
background: url(/static/baddg.jpg)
background-size: cover
height: 200px
width: calc(340px - 2*var(--f7-card-header-padding-horizontal))
--font-size-title: 22px
--font-weight-title: 740
--font-size-location: 18px
--font-color-addInfo: rgb(200,200,200)
--font-size-addInfo: =(device.desktop)?('12px'):('10px')
--font-weight-addInfo: 400
display: flex
flex-wrap: wrap
slots:
default:
- component: f7-row
config:
style:
position: absolute
height: 100%
width: 100%
background: rgba(0, 0, 0, 0.4)
border-radius: 20px
slots:
default:
- component: f7-col
config:
style:
width: 48%
height: 100%
padding-top: 15px
padding-left: 35px
slots:
default:
- component: f7-row
config:
style:
align-content: flex-start
height: 50%
slots:
default:
- component: Label
config:
style:
width: 100%
font-size: var(--font-size-title)
font-weight: var(--font-weight-title)
color: white
text: Testpflanze
- component: Label
config:
style:
font-size: var(--font-size-location)
color: white
text: Erdgeschoss
- component: f7-row
config:
style:
height: 45%
display: flex
align-content: flex-end
slots:
default:
- component: Label
config:
style:
width: 100%
color: var(--font-color-addInfo)
font-size: var(--font-size-addInfo)
font-weight: var(--font-weight-addInfo)
text: "= (@(props.plant + '_TageBisGiessen') > 1) ? 'Gießen in ' + @(props.plant + '_TageBisGiessen') + ' Tagen' : (@(props.plant + '_TageBisGiessen') == 1) ? 'Morgen gießen' : ''"
- component: Label
config:
style:
color: var(--font-color-addInfo)
font-size: var(--font-size-addInfo)
font-weight: var(--font-weight-addInfo)
text: "= (@(props.plant + '_TageBisDuengen') > 1) ? 'Düngen in ' + @(props.plant + '_TageBisDuengen') + ' Tagen' : (@(props.plant + '_TageBisDuengen') == 1) ? 'Morgen düngen' : ''"
- component: f7-col
config:
style:
width: 52%
height: 100%
padding-top: 20px
padding-right: 5px
slots:
default:
- component: f7-row
config:
style:
justify-content: flex-end
height: 50%
slots:
default:
- component: oh-button
config:
style:
height: auto
icon-f7: drop_fill
iconSize: 40
iconColor: "=(items[props.plant + '_Giessen'].state == 'ON') ? 'blue' : 'gray'"
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: = props.plant + '_Giessen'
tooltip: Pflanze gegossen
- component: oh-button
config:
style:
height: auto
icon-f7: eyedropper_full
iconSize: 40
iconColor: "=(items[props.plant + '_Duengen'].state == 'ON') ? 'green' : 'gray'"
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: = props.plant + '_Duengen'
tooltip: Pflanze gedüngt
- component: f7-row
config:
style:
height: 45%
display: flex
align-content: flex-end
align-items: center
justify-content: flex-end
slots:
default:
- component: Label
config:
style:
align-content: flex-end
padding-right: 15px
color: var(--font-color-addInfo)
font-size: var(--font-size-addInfo)
font-weight: var(--font-weight-addInfo)
text: Wachstumsphase
- component: oh-toggle
config:
style:
transform: =(device.desktop)?'':'scale(0.75)'
item: = props.plant + '_Ruhephase'
color: green
Now comes the tricky part. I’d like to use oh-repeater in order to iterate through all plants. A plant can be detected by the non-semantic tag ["Plant"].
What’s the logic on the styling side to get as many plant cards drawn as plants do exist?
My current thoughts are from a hierarchical perspective in pseudo-code:
f7-block # Main container carries all cards and makes sure that the cards are aligned correctly depending on the screen width
config:
style:
flex-wrap: wrap # Wrap cards for smaller screens
slots:
default:
- component: oh-repeater
sourceType: itemsWithTags
itemTags: Plant # To only get plants
slots:
default:
# and from here on simply pasting the code from above starting at the f7-card??????
- component: f7-card
config:
style:
border-radius: 20px
background: url(...) # url from item's metadata
(...)
Would this work?
That’s pretty much the approach I would take. You just have to make sure you understand the loop object that results from the repeater call.
If you want to see it, you can use the API explorer and use the items end point with the plant tag and correct metadata namespace. That should return the same JSON object that the repeater will use.
Hooray! We are getting there! 
Two questions I have:
- To get the location I’m currently doing quite an ugly hack. In my model the location is the 2nd group a plant is member of and each location has the following naming schema: “Location_Somelocation”. In German it is “Ort_Wohnzimmer” as an example. Due to this I can create a correct label with:
loop.item.groupNames[1].replace("Ort_", "")
However, is there a more generic solution which is using the semantic model like
loop.item.location.label (which does not work unfortunately)?
- The positioning of the cards is not correct at the moment. They are all stacked inside a column and I can only move the column. The
flex-direction: rowproperty seems to be ignored. Any idea why?
I would expect the cards to be next to each other.
uid: plantCards
tags: []
props:
parameters:
- context: item
description: Die zu pflegenden Pflanzen
label: Pflanze
name: plant
required: true
type: TEXT
timestamp: Oct 13, 2023, 11:20:49 AM
component: f7-block
config:
style:
display: flex
flex-direction: row
flex-wrap: wrap
justify-content: space-around
slots:
default:
- component: oh-repeater
config:
for: item
sourceType: itemsWithTags
itemTags: Plant
slots:
default:
- component: f7-card
config:
style:
border-radius: 20px
background: url(/static/baddg.jpg)
background-size: cover
height: 200px
width: calc(340px - 2*var(--f7-card-header-padding-horizontal))
--font-size-title: 22px
--font-weight-title: 740
--font-size-location: 18px
--font-color-addInfo: rgb(200,200,200)
--font-size-addInfo: =(device.desktop)?('12px'):('10px')
--font-weight-addInfo: 400
display: flex
flex-wrap: wrap
slots:
default:
- component: f7-row
config:
style:
position: absolute
height: 100%
width: 100%
background: rgba(0, 0, 0, 0.4)
border-radius: 20px
slots:
default:
- component: f7-col
config:
style:
width: 48%
height: 100%
padding-top: 15px
padding-left: 35px
slots:
default:
- component: f7-row
config:
style:
align-content: flex-start
height: 50%
slots:
default:
- component: Label
config:
style:
width: 100%
font-size: var(--font-size-title)
font-weight: var(--font-weight-title)
color: white
text: =loop.item.label
- component: Label
config:
style:
font-size: var(--font-size-location)
color: white
text: =loop.item.groupNames[1].replace("Ort_", "")
- component: f7-row
config:
style:
height: 45%
display: flex
align-content: flex-end
slots:
default:
- component: Label
config:
style:
width: 100%
color: var(--font-color-addInfo)
font-size: var(--font-size-addInfo)
font-weight: var(--font-weight-addInfo)
text: "= (@(loop.item.name + '_TageBisGiessen') > 1) ? 'Gießen in ' + @(loop.item.name + '_TageBisGiessen') + ' Tagen' : (@(loop.item.name + '_TageBisGiessen') == 1) ? 'Morgen gießen' : ''"
- component: Label
config:
style:
color: var(--font-color-addInfo)
font-size: var(--font-size-addInfo)
font-weight: var(--font-weight-addInfo)
text: "= (@(loop.item.name + '_TageBisDuengen') > 1) ? 'Düngen in ' + @(loop.item.name + '_TageBisDuengen') + ' Tagen' : (@(loop.item.name + '_TageBisDuengen') == 1) ? 'Morgen düngen' : ''"
- component: f7-col
config:
style:
width: 52%
height: 100%
padding-top: 20px
padding-right: 5px
slots:
default:
- component: f7-row
config:
style:
justify-content: flex-end
height: 50%
slots:
default:
- component: oh-button
config:
style:
height: auto
icon-f7: drop_fill
iconSize: 40
iconColor: "=(items[loop.item.name + '_Giessen'].state == 'ON') ? 'blue' : 'gray'"
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: = loop.item.name + '_Giessen'
tooltip: Pflanze gegossen
- component: oh-button
config:
style:
height: auto
icon-f7: eyedropper_full
iconSize: 40
iconColor: "=(items[loop.item.name + '_Duengen'].state == 'ON') ? 'green' : 'gray'"
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: = loop.item.name + '_Duengen'
tooltip: Pflanze gedüngt
- component: f7-row
config:
style:
height: 45%
display: flex
align-content: flex-end
align-items: center
justify-content: flex-end
slots:
default:
- component: Label
config:
style:
align-content: flex-end
padding-right: 15px
color: var(--font-color-addInfo)
font-size: var(--font-size-addInfo)
font-weight: var(--font-weight-addInfo)
text: Wachstumsphase
- component: oh-toggle
config:
style:
transform: =(device.desktop)?'':'scale(0.75)'
item: = loop.item.name + '_Ruhephase'
color: green
Nope, no matter which way you get the parent semantic group (you could also use the semantic metadata) you will only get the name of the location group, not the label. So, you would still be required to create the label from the item name.
This is a little tricky. The default configuration for a repeater has all the repeated elements inside an additional div container. So your flex settings are not being ignored, but that root f7-block has only one child which is that container div and that container doesn’t have any flex settings. The solution to this is to add fragment: true to your repeater config this will remove that extra container and all your cards will be direct children of the root block and be subject to it’s flex directives.
1 Like
Ok. So many fine details to take care of. 
Nevertheless, I think I‘m done so far. I‘ll give it a test and finalize some smaller details. After that I shall provide the widget to the marketplace.
Highly appreciate your support @JustinG
Hey, I could still need some help regarding the background images of the card. I fail to retrieve the image dynamically.
The data structure for the items to be looped through in the oh-repeater looks as follows:
Group thePlant
"The plant"
(AllPlants)
["Plant", "The location"]
{
image=" " [link="/static/plants/aNeatPicture.jpg"]
}
When using this widget config:
- component: oh-repeater
config:
for: item
fragment: true
itemTags: Plant
sourceType: itemsWithTags
fetchMetadata: image
slots:
default:
- component: f7-card
config:
style:
(...)
background: url(loop.item.metadata.image.config.link)
The cards do not show any background.
When using a hard link to an image like this:
background: url(/static/plants/aNeatPicture.jpg)
a picture is shown.
When debugging with a label
text: =loop.item.metadata.image.config.link
it shows for the test item:
/static/plants/aNeatPicture.jpg
So the link is correctly retrieved.
Where is the error? :-/
The trick here is that you need an expression that that will evaluate to the string "url(/static/plants/aNeatPicture.jpg)". So first, the yaml value has to start with an =, and then you need to use that expression to build the string. There are a few ways to do this, I would recommend using a string template:
background: =`url(${loop.item.metadata.image.config.link})`
Inside the `` everything is treated as a string except for the expressions inside ${ } which are evaluated.
1 Like
Thank you again. That was it. Now the widget looks finalized (for now). I will make a post on the marketplace soon.
Errm… it’s me again. I did some more tweaks to the widget inspired and a lot copycatted by OH3 - Expandable F7-card - Add-ons / UIs - openHAB Community
Again I tried to come up with the logic that I only assign all my plants in one group to the widget and it draws all the cards.
This works and looks nicely in the widget development area but does not really work on the main page. Clicking on a card on the main page only shows the card content in a blurred way. Clicking anywhere will close the card and everything looks as initially. I tried to play with the z-index but that did not really work out.
Any idea?
Here the card looks nicely inside the dev tools:
Clicking on a card when the widget is on the main page looks like this:
The code:
uid: plant_cards
tags: []
props:
parameters:
- context: item
description: Die zu pflegenden Pflanzen
label: Pflanze
name: plant
required: true
type: TEXT
parameterGroups: []
timestamp: Oct 17, 2023, 2:35:21 PM
component: f7-block
config:
style:
display: flex
flex-direction: row
flex-wrap: wrap
z-index: 100
slots:
default:
- component: oh-repeater
config:
for: item
fragment: true
itemTags: Plant
sourceType: itemsWithTags
fetchMetadata: image
slots:
default:
- component: f7-card
config:
expandable: true
swipeToClose: true
backdrop: true
class:
- card-expandable-animate-width
style:
height: 200px
width: 320px
--font-color-addInfo: rgb(200,200,200)
--font-size-addInfo: 12px
--font-size-location: 22px
--font-size-title: 24px
--font-weight-addInfo: 400
--font-weight-title: 740
--mobileVerticalOffset: =(device.desktop)?('10px'):('40px')
slots:
default:
- component: oh-button
config:
icon-f7: ellipsis
iconSize: 30px
color: black
style:
position: absolute
bottom: 5px
right: 0
padding-top: 10px
padding-bottom: 35px
z-index: 90
class:
- cell-open-button
- card-opened-fade-out
- component: oh-button
config:
class:
- card-opened-fade-out
- card-closed-fade-in
- card-prevent-open
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: = loop.item.name + '_Giessen'
icon-f7: drop_fill
iconColor: "=(items[loop.item.name + '_Giessen'].state == 'ON') ? 'blue' : 'gray'"
iconSize: 40
style:
height: auto
position: absolute
top: 10px
right: 65px
z-index: 90
tooltip: Pflanze gegossen
- component: oh-button
config:
class:
- card-opened-fade-out
- card-closed-fade-in
- card-prevent-open
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: = loop.item.name + '_Duengen'
icon-f7: eyedropper_full
iconColor: "=(items[loop.item.name + '_Duengen'].state == 'ON') ? 'green' : 'gray'"
iconSize: 40
style:
height: auto
position: absolute
top: 10px
right: 15px
z-index: 90
tooltip: Pflanze gedüngt
- component: f7-card-content
config:
style:
width: 100%
slots:
default:
- component: oh-button
config:
class:
- card-opened-fade-in
- card-closed-fade-out
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: = loop.item.name + '_Giessen'
icon-f7: drop_fill
iconColor: "=(items[loop.item.name + '_Giessen'].state == 'ON') ? 'blue' : 'gray'"
iconSize: 40
style:
height: auto
position: absolute
top: var(--mobileVerticalOffset)
right: 105px
z-index: 90
tooltip: Pflanze gegossen
- component: oh-button
config:
class:
- card-opened-fade-in
- card-closed-fade-out
action: toggle
actionCommand: ON
actionCommandAlt: OFF
actionItem: loop.item.name + '_Duengen'
icon-f7: eyedropper_full
iconColor: "=(items[loop.item.name + '_Duengen'].state == 'ON') ? 'green' : 'gray'"
iconSize: 40
style:
height: auto
position: absolute
top: var(--mobileVerticalOffset)
right: 45px
z-index: 90
tooltip: Pflanze gedüngt
- component: oh-button
config:
iconF7: xmark_circle_fill
iconSize: 30px
color: black
style:
position: absolute
top: var(--mobileVerticalOffset)
right: 0
padding-top: 10px
padding-bottom: 35px
z-index: 90
class:
- card-opened-fade-in
- cell-close-button
- card-close
- component: f7-block
config:
class:
- no-padding
style:
height: 200px
background: =`url(${loop.item.metadata.image.config.link})`
background-size: cover
- component: f7-block
config:
style:
background: rgba(0, 0, 0, 0.4)
position: absolute
height: 216px
width: 100%
top: 0
- component: f7-block
config:
class:
- no-padding
style:
height: 200px
position: absolute
top: 15px
left: 30px
slots:
default:
- component: f7-row
config:
style:
height: 75px
display: flex
flex-direction: row
flex-wrap: wrap
slots:
default:
- component: f7-col
config:
style:
width: 50%
slots:
default:
- component: Label
config:
text: =loop.item.label
style:
padding-top: 15px
font-size: var(--font-size-title)
font-weight: var(--font-weight-title)
- component: Label
config:
text: "=loop.item.tags[1] == 'Plant' ? loop.item.tags[0] : loop.item.tags[1]"
style:
font-size: var(--font-size-location)
- component: f7-row
config:
style:
height: 110px
white-space: nowrap
flex-wrap: nowrap
align-items: flex-end
slots:
default:
- component: f7-col
slots:
default:
- component: Label
config:
text: "= (items[loop.item.name + '_TageBisGiessen'].state > 1) ? 'Gießen in ' + items[loop.item.name + '_TageBisGiessen'].state + ' Tagen' : (items[loop.item.name + '_TageBisGiessen'].state == 1) ? 'Morgen gießen' : 'Heute gießen'"
style:
color: var(--font-color-addInfo)
font-size: var(--font-size-addInfo)
font-weight: var(--font-weight-addInfo)
- component: Label
config:
text: "= (items[loop.item.name + '_TageBisDuengen'].state > 1) ? 'Düngen in ' + items[loop.item.name + '_TageBisDuengen'].state + ' Tagen' : (items[loop.item.name + '_TageBisDuengen'].state == 1) ? 'Morgen düngen' : 'Heute düngen'"
visible: = items[loop.item.name + '_TageBisDuengen'].state != 999
style:
color: var(--font-color-addInfo)
font-size: var(--font-size-addInfo)
font-weight: var(--font-weight-addInfo)
- component: f7-block
config:
class:
- card-prevent-open
- card-content-padding
style:
height: 300px
z-index: 110
slots:
default:
- component: oh-list
config:
class:
- padding
slots:
default:
- component: oh-list-item
config:
title: Gießen notwendig
item: Testpflanze_Giessen
icon: f7:drop
iconColor: "=(items[loop.item.name + '_Giessen'].state == 'ON') ? 'blue' : 'white'"
after: "=(items[loop.item.name + '_Giessen'].state == 'ON') ? 'Ja' : 'Nein'"
- component: oh-list-item
config:
title: Düngen notwendig
item: Testpflanze_Duengen
icon: f7:eyedropper
iconColor: "=(items[loop.item.name + '_Duengen'].state == 'ON') ? 'green' : 'white'"
after: "=(items[loop.item.name + '_Duengen'].state == 'ON') ? 'Ja' : 'Nein'"
- component: Label
config:
text: Gießplanung
style:
padding: 7px
border-bottom: 1px solid grey
font-weight: 600
color: gray
margin-top: 10px
- component: oh-stepper-item
config:
item: = loop.item.name + '_TageBisGiessen'
title: Tage bis Gießen
icon: f7:calendar
color: blue
raised: true
round: true
autorepeat: true
autorepeatDynamic: false
enableInput: true
fill: true
- component: oh-stepper-item
config:
item: = loop.item.name + '_TageBisDuengen'
title: Tage bis Düngen
icon: f7:calendar
color: blue
raised: true
round: true
autorepeat: true
autorepeatDynamic: false
enableInput: true
fill: true
- component: oh-toggle-item
config:
title: Wachstumsphase
icon: f7:sun_max
color: green
iconColor: yellow
item: = loop.item.name + '_Wachstumsphase'
- component: Label
config:
text: Gieß- und Düngeparameter
style:
padding: 7px
border-bottom: 1px solid grey
font-weight: 600
color: gray
margin-top: 10px
- component: oh-stepper-item
config:
item: = loop.item.name + '_Giessintervall_Wachstumsphase'
title: Gießintervall Wachstumsphase
icon: f7:drop_fill
iconColor: blue
color: blue
raised: true
round: true
autorepeat: true
autorepeatDynamic: false
enableInput: true
fill: true
- component: oh-stepper-item
config:
item: = loop.item.name + '_Giessintervall_Ruhephase'
title: Gießintervall Ruhephase
icon: f7:drop
iconColor: blue
color: blue
raised: true
round: true
autorepeat: true
autorepeatDynamic: false
enableInput: true
fill: true
- component: oh-stepper-item
config:
item: = loop.item.name + '_Duengeintervall_Wachstumsphase'
title: Düngeintervall Wachstumsphase
icon: f7:eyedropper_full
iconColor: green
color: blue
raised: true
round: true
autorepeat: true
autorepeatDynamic: false
enableInput: true
fill: true
- component: oh-stepper-item
config:
item: = loop.item.name + '_Duengeintervall_Ruhephase'
title: Düngeintervall Ruhephase
icon: f7:eyedropper_halffull
iconColor: green
color: blue
raised: true
round: true
fill: true
I’ve seen reports of this sort of thing before. I’ve never really looked into it so I don’t know the exact source of the issue. I think that the reason there’s a difference between what you see in the two views is that the overview page is only sort of a real page, it’s a tab within the home page, and this means that there are some style settings and that have different directives and some different page architecture as well.
For the time being you should just be able to set backdrop: false on your cards instead and that should disable the blurring so that you don’t see the issue.
If I have a chance I’ll look into more sometime soon.
2 Likes
Yeah, I can live with this workaround. 