Hello,
I built my first expandable f7-card, which works almost as expected.
However I need your help to sort out some points:
-
I’m not sure the approach I use to expand the card is correct. I suppose the design can be simplified and improved. I guess the css classes are not used properly.
-
The items aligned on the right site of the card (Gauge and Grass Icon) are not at the right position when the card is collapsed again
Correct - before the card was expanded:
Wrong: after the card was closed: The Icon and Gauge moved out the visible area.
- The icon to close the expanded card does not work and is stretched
Thanks for any hint 
Below is the code I use - still with dummy item entries for testing.
uid: widget_Bewaesserung_v1-3
tags: []
props:
parameters:
- description: A text prop
label: Prop 1
name: prop1
required: false
type: TEXT
- context: item
description: An item to control
label: Item
name: item
required: false
type: TEXT
parameterGroups: []
timestamp: Mar 13, 2021, 6:56:54 PM
component: f7-card
config:
expandable: true
swipeToClose: true
backdrop: true
class:
- no-padding
style:
height: 200px
margin: 10px
box-shadow: var(--f7-card-expandable-box-shadow)
slots:
default:
- component: oh-button
config:
iconF7: gear
iconSize: 30px
color: black
style:
position: absolute
top: 0
right: 0
padding-top: 10px
padding-bottom: 35px
z-index: 999
class:
- cell-open-button
- card-opened-fade-out
- float-right
- component: oh-button
config:
iconF7: xmark_circle_fill
iconSize: 30px
color: black
style:
position: absolute
top: 0
right: 0
padding-top: 10px
padding-bottom: 35px
z-index: 999
class:
- card-opened-fade-in
- cell-close-button
- float-right
- component: oh-link
config:
action: toggle
actionItem: Bewaesserung_Rasen_Schalter
actionCommand: ON
actionCommandAlt: OFF
class:
- card-prevent-open
style:
width: 100%
height: 200px
position: absolute
top: 0
left: 0
z-index: 0
- component: f7-card-content
config:
style:
width: 100%
slots:
default:
- component: f7-icon
config:
material: grass
size: 80px
color: green
style:
position: absolute
right: 3%
top: 120px
opacity: 40%
- component: f7-block
config:
style:
margin: 0px
height: 200px
slots:
default:
- component: f7-row
config:
class:
- display-flex
- align-items-center
- justify-content-space-between
style:
white-space: nowrap
flex-wrap: nowrap
height: 75px
weight: 100%
slots:
default:
- component: f7-col
config:
style:
height: 75px
width: auto
class:
- display-flex
- flex-direction-column
- align-items-flex-start
slots:
default:
- component: Label
config:
text: Büsche hinten
style:
font-size: 25px
font-weight: 600
- component: f7-chip
config:
text: "=items.Bewaesserung_Rasen_Schalter.state === 'ON' ? 'Bewässerung aktiv' : 'AUS'"
color: "=items.Bewaesserung_Rasen_Schalter.state === 'ON' ? 'green' : 'gray'"
- component: f7-col
config:
style:
margin-top: 15px
width: auto
class:
- display-flex
- flex-direction-column
slots:
default:
- component: oh-gauge
config:
min: 0
max: 90
type: semicircle
value: 40
labelText: 20 min
borderWidth: 20
size: 100
borderBgColor: "#d2d2d2"
borderColor: "#4287f5"
visible: "=items.Bewaesserung_Rasen_Schalter.state === 'ON' ? true : false"
style:
width: 100%
- component: f7-row
config:
style:
white-space: nowrap
flex-wrap: nowrap
height: 30px
width: 16%
class:
- display-flex
- flex-direction-row
- align-items-flex-start
- justify-content-flex-start
slots:
default:
- component: f7-icon
config:
f7: cloud_rain
size: 20px
color: gray
visible: "=items.Bewaesserung_Rasen_Regenautomatik.state === 'ON' ? true : false"
style:
padding-right: 5px
- component: f7-icon
config:
f7: umbrella
size: 20px
color: gray
visible: "=Number.parseInt(items.item_Netatmo_Regen_Niederschlag.displayState) >= 1 ? true : false"
style:
padding-right: 5px
- component: f7-row
config:
style:
flex-wrap: nowrap
height: 10px
width: 180px
class:
- display-flex
- flex-direction-row
- align-items-flex-start
slots:
default:
- component: f7-col
config:
style:
width: 40%
class:
- display-flex
- flex-direction-column
- align-items-center
slots: {}
- component: f7-row
config:
style:
margin-top: 10px
align-content: flex-end
height: 50px
slots:
default:
- component: f7-col
config:
style:
flex-wrap: nowrap
width: 100%
align-content: flex-start
class:
- display-flex
- flex-direction-column
- align-items-flex-start
slots:
default:
- component: f7-row
config:
style:
flex-wrap: nowrap
slots:
default:
- component: f7-icon
config:
f7: alarm
size: 20px
color: blue
visible: "=items.Bewaesserung_Rasen_Timer.state === 'ON' ? true : false"
style:
margin-top: 0px
- component: Label
config:
text: 19. April, 18:30
visible: "=items.Bewaesserung_Rasen_Timer.state === 'ON' ? true : false"
style:
margin-left: 5px
font-size: 14px
font-weight: 600
- component: f7-icon
config:
f7: timer
size: 20px
color: blue
visible: "=items.Bewaesserung_Rasen_Timer.state === 'ON' ? true : false"
style:
margin-top: 0px
margin-left: 10px
- component: Label
config:
text: 35min
visible: "=items.Bewaesserung_Rasen_Timer.state === 'ON' ? true : false"
style:
margin-left: 5px
font-size: 14px
font-weight: 600
- component: f7-row
config:
style:
margin-top: 5px
flex-wrap: nowrap
slots:
default:
- component: f7-icon
config:
material: restore
color: gray
size: 18px
style:
margin-top: 0px
margin-left: 0px
- component: Label
config:
text: 14. April, 18:30
style:
margin-left: 8px
font-size: 12px
color: gray
- component: f7-icon
config:
f7: timer
size: 15px
color: gray
style:
margin-top: 2px
margin-left: 10px
- component: Label
config:
text: 20min
style:
margin-left: 3px
font-size: 12px
color: gray
- component: f7-block
config:
class:
- card-prevent-open
- card-content-padding
style:
height: 300px
slots:
default:
- component: oh-list
config:
class:
- padding
slots:
default:
- component: oh-stepper-item
config:
title: Ausschalt Timer (min)
item: Bewaesserung_Rasen_Ausschalt_Timer
icon: f7:timer
color: blue
raised: true
round: true
autorepeat: true
autorepeatDynamic: false
min: 0
max: 90
- component: Label
config:
text: =props.Title?props.Title:"Timer Settings"
style:
padding: 7px
border-bottom: 1px solid grey
font-weight: 600
color: gray
margin-top: 10px
- component: oh-toggle-item
config:
title: Timer
icon: f7:alarm
color: green
item: Bewaesserung_Rasen_Timer
- component: oh-input-item
config:
title: Startzeit
type: datepicker
sendButton: true
item: Bewaesserung_Rasen_Timer_Startzeit
outline: false
calendarParams:
timePicker: true
dateFormat:
month: short
day: numeric
hour: numeric
minute: numeric
style:
--f7-input-bg-color: "#ededed"
- component: oh-stepper-item
config:
item: Bewaesserung_Rasen_Timer_Laufzeit
title: Laufzeit (min)
icon: f7:timer
color: blue
raised: true
round: true
autorepeat: true
autorepeatDynamic: false
min: 0
max: 90
- component: oh-stepper-item
config:
item: Bewaesserung_Rasen_Interval
title: Interval (Tage)
icon: f7:arrow_2_circlepath
color: blue
raised: true
round: true
autorepeat: true
autorepeatDynamic: false
min: 0
max: 90
- component: Label
config:
text: =props.Title?props.Title:"Wettersteuerung"
style:
padding: 7px
border-bottom: 1px solid grey
font-weight: 600
color: gray
margin-top: 10px
- component: oh-toggle-item
config:
title: Regenautomatik
icon: f7:cloud_rain
color: green
item: Bewaesserung_Rasen_Regenautomatik
- component: oh-stepper-item
config:
item: Bewaesserung_Rasen_Regenautomatik_Grenzwert
title: Grenzwert Regen (mm)
icon: f7:chart_bar
color: blue
raised: true
round: true
autorepeat: true
autorepeatDynamic: false
min: 0
max: 90
