Eigenes Widget - merkwürdige Darstellung

GUI Relevanten, PaperUI, BasicUI, HabPanel ...

Moderatoren: seppy, udo1toni

Antworten
Domino1707
Beiträge: 6
Registriert: 24. Jan 2022 10:54

Eigenes Widget - merkwürdige Darstellung

Beitrag von Domino1707 »

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):

Bild

Am Rechner sieht es aber total verschoben aus:

Bild

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%
Hat einer von Euch eine Idee, was ich falsch gemacht habe? So richtig kenne ich mit den CSS-gedöns nicht aus :roll:

Antworten