Eigenes Widget - merkwürdige Darstellung
Verfasst: 30. Apr 2022 07:55
Hallo zusammen,
ich habe ein vorhanden Widget aus dem englischsprachigen Forum angepasst. Im Ziel wollte ich die Kerninfos eines Raums darstellen.
Auf dem iPhone sieht auch alles super aus (rechts oben):
Am Rechner sieht es aber total verschoben aus:
Code ist folgender:
Hat einer von Euch eine Idee, was ich falsch gemacht habe? So richtig kenne ich mit den CSS-gedöns nicht aus
ich habe ein vorhanden Widget aus dem englischsprachigen Forum angepasst. Im Ziel wollte ich die Kerninfos eines Raums darstellen.
Auf dem iPhone sieht auch alles super aus (rechts oben):
Am Rechner sieht es aber total verschoben aus:
Code ist folgender:
Code: Alles auswählen
uid: Cell_Card_1a_small
tags: []
props:
parameters:
- description: Small title on top of the card
label: Title
name: title
required: false
type: TEXT
- description: Icon on top of the card (only f7 icons (without f7:))
label: Icon
name: icon
required: false
type: TEXT
- description: rgba or HEX
label: Background Color
name: bgcolor
required: false
type: TEXT
- label: Header
name: text_header
required: false
type: TEXT
- description: Page which will be opened as popup
label: Page ID
name: page
required: false
- context: item
description: select group for status lights
label: Item
name: status
required: false
type: TEXT
- context: item
description: select item for temperature
label: Item
name: temp
required: false
type: TEXT
- context: item
description: Anz Fenster
label: Item
name: windows_numbers
required: false
type: TEXT
- context: item
description: select item for set temperature
label: Item
name: settemp
required: false
type: TEXT
- context: item
description: select item for humidity
label: Item
name: humidity
required: false
type: TEXT
- context: item
description: select item for blinds group (SUM)
label: Item
name: blinds_closed
required: false
type: TEXT
- context: item
description: select item for windows(s)
label: Item
name: windows
required: false
type: TEXT
- context: item
description: select item for numbers of windows
label: Item
name: windows_numbers
required: false
type: TEXT
timestamp: Apr 20, 2022, 9:23:14 AM
component: f7-card
config:
style:
background-color: "=props.bgcolor ? props.bgcolor : ''"
border-radius: var(--f7-card-expandable-border-radius)
box-shadow: 5px 5px 10px 1px rgba(0,0,0,0.1)
class:
- padding: 0px
height: 100px
margin-left: 5px
margin-right: 5px
noShadow: false
slots:
content:
- component: f7-block
config:
style:
left: 20px
position: absolute
top: -30%
slots:
default:
- component: f7-icon
config:
f7: =props.icon
size: 17
style:
margin-right: -10px
visible: "=props.icon ? true : false"
- component: Label
config:
style:
font-size: 15px
margin-left: 30px
margin-top: -20px
text: "=props.title ? props.title : ''"
- component: f7-block
config:
style:
bottom: -230%
left: 16px
position: absolute
slots:
default:
- component: f7-chip
config:
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: "=(Number(items[props.status].state) > 0) ? 'lightbulb' : 'lightbulb_slash'"
iconSize: 15
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
bottom: 16px
font-size: 10px
left: 35%
text: =items[props.status].state + '/' + Math.trunc(items[props.status_anz].state,0)
visible: =items[props.status_anz].state <> 0
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
font-size: 10px
text: "=items[props.door_state].state === 'ON' ? '' : ''"
visible: "=props.door_state ? true : false"
slots:
media:
- component: oh-icon
config:
icon: "=items[props.door_state].state === 'ON' ? 'door-open' : 'door-closed'"
style:
filter: "='brightness(' + (themeOptions.dark === 'dark' ? '1' : '0.4') + ')'"
height: 18px
- component: f7-chip
config:
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
bottom: 15%
font-size: 10px
left: -34%
top: 5px
text: =items[props.windows].state + '/' + Math.trunc(items[props.windows_numbers].state,0)
visible: =items[props.windows_numbers].state > 0
slots:
media:
- component: oh-icon
config:
icon: window-open
style:
filter: "='brightness(' + (themeOptions.dark === 'dark' ? '1' : '0.4') + ')'"
height: 18px
- component: f7-chip
config:
font-size: 10px
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
font-size: 10px
left: 35%
top: -23px
text: =Math.trunc(items[props.blinds].state,0) + '/' + Math.trunc(items[props.windows_numbers].state,0)
visible: =items[props.windows_numbers].state > 0
slots:
media:
- component: oh-icon
config:
icon: "=(Number(items[props.blinds].state) === 0) ? 'cinemascreen-30' : 'cinemascreen-100'"
style:
filter: "='brightness(' + (themeOptions.dark === 'dark' ? '100' : '0.3') + ')'"
height: 18px
- component: f7-block
config:
style:
bottom: -125%
left: 16px
position: absolute
slots:
default:
- component: f7-chip
config:
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: thermometer
iconSize: 15
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
font-size: 10px
text: "=(items[props.temp].displayState ? items[props.temp].displayState : items[props.temp].state) + (props.settemp ? ' (' + items[props.settemp].state + ')' : '')"
visible: "=props.temp ? true : false"
- component: f7-chip
config:
iconColor: "=themeOptions.dark === 'dark' ? 'white' : 'black'"
iconF7: drop
iconSize: 15
style:
--f7-chip-bg-color: rgba(255, 255, 255, 0)
bottom: 10px
font-size: 10px
text: =items[props.humidity].state
visible: "=props.humidity ? true : false"
- component: oh-link
config:
action: popup
actionModal: ='page:' + props.page
style:
height: 110px
left: 0px
position: absolute
top: 0px
width: 100%