Modifier les marges d'un horizontal-stack

Arnault · Avril 12, 2021, 1:12

Bonjour à tous,

Je cherche à modifier les marges gauche et droite d’un horizontal-stack. Voici mon YAML simplifié au maximun :

type: vertical-stack
cards:
  - type: horizontal-stack
    cards:
      - type: button
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: Automatique
          target:
            entity_id: input_select.pool_pump_preselection
        name: Automatique
        show_icon: true
        icon: 'mdi:calendar'
        show_state: false
        show_name: true
        hold_action:
          action: none
      - type: button
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: Marche forcée
          target:
            entity_id: input_select.pool_pump_preselection
        name: Marche forcée
        show_icon: true
        icon: 'mdi:engine'
        hold_action:
          action: none
      - type: button
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: 'Off'
          target:
            entity_id: input_select.pool_pump_preselection
        show_icon: true
        name: Arrêt
        icon: 'mdi:engine-off'
        hold_action:
          action: none
    style:
      hui-horizontal-stack-card:
        $: |
          #root {
            margin-left: 16px;
            margin-right: 16px;
          }

Je n’arrive pas à faire fonctionner mon style.

Dans la documentation (GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card) il est écrit :

There are some cards where card-mod just won’t work. Those cards often are not really cards at all, but change how other cards work. Examples include: conditional , entity-filter , horizontal-stack and vertical-stack as well as some custom cards, like layout-card , auto-entities and state-switch among others.

For those cases, a special mod-card is provided as a workaround:

Du coup je suis perdu, je ne sais pas si je peux modifier ou pas le style de ma pile horizontal et si oui, je ne sais comment.

Merci d’avance

Clemalex · Avril 12, 2021, 2:20

J’en ai un peu parlé ici : https://forum.hacf.fr/t/carte-differentes-en-mode-portrait-paysage/4127/5?u=clemalex

Mais ta carte horizontale étant dans une carte verticale, tu devrais pouvoir attaquer dessus avec card-mod.

Je peux regarder ce soir si tu veux mais peux tu montrer sur une capture d’écran ce que tu souhaites diminuer/augmenter ?

Arnault · Avril 12, 2021, 2:46

Merci @Clemalex

J’ai regardé un peu ton lien, mais je vois pas trop comment ça peux m’aider à m’en sortir…

Voilà la présentation actuelle et j’aimerais que les deux cartes horizontale soient callées sur les trais vert soit 16 pixels de marge gauche et droite.

Screen

Voila mon YAML complet :

type: vertical-stack
cards:
  - type: markdown
    content: >-
      Le mode de filtration de la piscine est actuellement réglé sur
      **{{states('sensor.pool_pump')}}**. Sur quel mode de filtration doit être
      réglé la filtration ?
    style:
      .: |
        ha-card {
          box-shadow: none !important;
          text-align: justify;
        }
  - type: horizontal-stack
    cards:
      - type: button
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: Automatique
          target:
            entity_id: input_select.pool_pump_preselection
        name: Automatique
        show_icon: true
        icon: 'mdi:calendar'
        show_state: false
        show_name: true
        hold_action:
          action: none
      - type: button
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: Marche forcée
          target:
            entity_id: input_select.pool_pump_preselection
        name: Marche forcée
        show_icon: true
        icon: 'mdi:engine'
        hold_action:
          action: none
      - type: button
        tap_action:
          action: call-service
          service: input_select.select_option
          service_data:
            option: 'Off'
          target:
            entity_id: input_select.pool_pump_preselection
        show_icon: true
        name: Arrêt
        icon: 'mdi:engine-off'
        hold_action:
          action: none
    style:
      hui-horizontal-stack-card:
        $: |
          #root {
            margin-left: 16px;
            margin-right: 16px;
          }
  - type: conditional
    conditions:
      - entity: input_select.pool_pump_preselection
        state: Marche forcée
    card:
      type: markdown
      content: Combien de temps la filtration doit être en marche forcée ?
      style:
        .: |
          ha-card {
            box-shadow: none !important;
            text-align: justify;
  - type: conditional
    conditions:
      - entity: input_select.pool_pump_preselection
        state: Marche forcée
    card:
      type: horizontal-stack
      cards:
        - type: button
          tap_action:
            action: call-service
            service: input_select.select_option
            service_data:
              option: 1 jour
            target:
              entity_id: input_select.pump_forced_duration_preselection
          name: 1 jour
          show_icon: false
          hold_action:
            action: none
        - type: button
          tap_action:
            action: call-service
            service: input_select.select_option
            service_data:
              option: 2 jours
            target:
              entity_id: input_select.pump_forced_duration_preselection
          name: 2 jours
          show_icon: false
          hold_action:
            action: none
        - type: button
          tap_action:
            action: call-service
            service: input_select.select_option
            service_data:
              option: 1 semaine
            target:
              entity_id: input_select.pump_forced_duration_preselection
          name: 1 semaine
          show_icon: false
          hold_action:
            action: none
  - type: 'custom:button-card'
    entity: input_select.pool_pump_preselection
    tap_action:
      action: call-service
      service: automation.trigger
      service_data:
        skip_condition: true
        entity_id: automation.piscine_changement_saison
    layout: icon_label
    show_label: true
    show_name: false
    color_type: card
    state:
      - value: Automatique
        icon: 'mdi:calendar'
        label: Valider le fonctionnement automatique
      - value: Marche forcée
        icon: 'mdi:engine'
        label: |
          [[[
            return 'Valider la marche forcée ' + states['input_select.pump_forced_duration_preselection'].state;
          ]]]
      - value: 'Off'
        icon: 'mdi:engine-off'
        label: Valider l'arrêt de la filtration
    styles:
      card:
        - margin: 0px 16px 16px 16px
        - width: calc(100% - 32px)
        - background-color: 'rgb(204, 0, 0)'
        - color: white
      grid:
        - grid-template-columns: 20% 1fr
      label:
        - justify-self: start
        - padding-left: 0px

Merci du temps que tu consacres à toutes les réponses.

Arnault · Avril 13, 2021, 8:28

A force de tester, de relire la doc, de retester, de chercher sur les forums, de relire la doc, etc… j’ai trouvé ce qu’il me manquait :

type: custom:mod-card
card:
  type: vertical-stack # for example
  ...
card_mod:
  style: |
    ha-card {
      ...
    }

J’ai pu réduite mes marges sur ma pile horizontale pour avoir un affichage parfait :

Popup

Et si ca peut aider certains, voici le YAML de la popup :

popup_cards:
  sensor.pool_pump:
	title: Mode de fonctionnement
	card:
	  type: vertical-stack
	  cards:
		- type: markdown
		  content: >-
			Le mode de filtration de la piscine est actuellement réglé sur
			**{{states('sensor.pool_pump')}}**. Sur quel mode doit être
			réglé la filtration ?
		  style:
			.: |
			  ha-card {
				box-shadow: none !important;
				text-align: justify;
			  }
		- type: 'custom:mod-card'
		  card:
			type: horizontal-stack
			cards:
			  - type: 'custom:button-card'
				entity: input_select.pool_pump_preselection
				icon: 'mdi:calendar'
				name: Automatique
				show_state: false
				color_type: card
				size: 25%
				tap_action:
				  action: call-service
				  service: input_select.select_option
				  service_data:
					option: Automatique
					entity_id: input_select.pool_pump_preselection
				state:
				  - value: Automatique
					color: 'rgb(253, 216, 53)'
				  - value: Marche forcée
					color: 'rgb(255, 255, 255)'
				  - value: 'Off'
					color: 'rgb(255, 255, 255)'
				styles:
				  name:
					- font-size: 14px
			  - type: 'custom:button-card'
				entity: input_select.pool_pump_preselection
				icon: 'mdi:engine'
				name: Marche forcée
				show_state: false
				color_type: card
				size: 25%
				tap_action:
				  action: call-service
				  service: input_select.select_option
				  service_data:
					option: Marche forcée
					entity_id: input_select.pool_pump_preselection
				state:
				  - value: Automatique
					color: 'rgb(255, 255, 255)'
				  - value: Marche forcée
					color: 'rgb(253, 216, 53)'
				  - value: 'Off'
					color: 'rgb(255, 255, 255)'
				styles:
				  name:
					- font-size: 14px
			  - type: 'custom:button-card'
				entity: input_select.pool_pump_preselection
				icon: 'mdi:engine-off'
				name: Eteint
				show_state: false
				color_type: card
				size: 25%
				tap_action:
				  action: call-service
				  service: input_select.select_option
				  service_data:
					option: 'Off'
					entity_id: input_select.pool_pump_preselection
				state:
				  - value: Automatique
					color: 'rgb(255, 255, 255)'
				  - value: Marche forcée
					color: 'rgb(255, 255, 255)'
				  - value: 'Off'
					color: 'rgb(253, 216, 53)'
				styles:
				  name:
					- font-size: 14px
		  card_mod:
			style: |
			  ha-card {
				margin-left: 16px;
				margin-right: 16px;
			  }
		- type: conditional
		  conditions:
			- entity: input_select.pool_pump_preselection
			  state: Marche forcée
		  card:
			type: markdown
			content: Quelle durée pour la marche forcée ?
			style:
			  .: |
				ha-card {
				  box-shadow: none !important;
				  text-align: justify;
		- type: conditional
		  conditions:
			- entity: input_select.pool_pump_preselection
			  state: Marche forcée
		  card:
			type: 'custom:mod-card'
			card:
			  type: horizontal-stack
			  cards:
				- type: 'custom:button-card'
				  entity: input_select.pump_forced_duration_preselection
				  name: 1 jour
				  show_state: false
				  show_icon: false
				  color_type: card
				  size: 25%
				  tap_action:
					action: call-service
					service: input_select.select_option
					service_data:
					  option: 1 jour
					  entity_id: input_select.pump_forced_duration_preselection
				  state:
					- value: 1 jour
					  color: 'rgb(253, 216, 53)'
					- value: 2 jours
					  color: 'rgb(255, 255, 255)'
					- value: 1 semaine
					  color: 'rgb(255, 255, 255)'
				  styles:
					name:
					  - font-size: 14px
				- type: 'custom:button-card'
				  entity: input_select.pump_forced_duration_preselection
				  name: 2 jours
				  show_state: false
				  show_icon: false
				  color_type: card
				  size: 25%
				  tap_action:
					action: call-service
					service: input_select.select_option
					service_data:
					  option: 2 jours
					  entity_id: input_select.pump_forced_duration_preselection
				  state:
					- value: 1 jour
					  color: 'rgb(255, 255, 255)'
					- value: 2 jours
					  color: 'rgb(253, 216, 53)'
					- value: 1 semaine
					  color: 'rgb(255, 255, 255)'
				  styles:
					name:
					  - font-size: 14px
				- type: 'custom:button-card'
				  entity: input_select.pump_forced_duration_preselection
				  name: 1 semaine
				  show_state: false
				  show_icon: false
				  color_type: card
				  size: 25%
				  tap_action:
					action: call-service
					service: input_select.select_option
					service_data:
					  option: 1 semaine
					  entity_id: input_select.pump_forced_duration_preselection
				  state:
					- value: 1 jour
					  color: 'rgb(255, 255, 255)'
					- value: 2 jours
					  color: 'rgb(255, 255, 255)'
					- value: 1 semaine
					  color: 'rgb(253, 216, 53)'
				  styles:
					name:
					  - font-size: 14px
			card_mod:
			  style: |
				ha-card {
				  margin-left: 16px;
				  margin-right: 16px;
				}
		- type: 'custom:button-card'
		  entity: input_select.pool_pump_preselection
		  tap_action:
			action: call-service
			service: automation.trigger
			service_data:
			  skip_condition: true
			  entity_id: automation.piscine_changement_saison
		  layout: icon_label
		  show_label: true
		  show_name: false
		  color_type: card
		  state:
			- value: Automatique
			  icon: 'mdi:calendar'
			  label: Valider le mode automatique
			- value: Marche forcée
			  icon: 'mdi:engine'
			  label: |
				[[[
				  return 'Valider la marche forcée ' + states['input_select.pump_forced_duration_preselection'].state;
				]]]
			- value: 'Off'
			  icon: 'mdi:engine-off'
			  label: Valider l'arrêt de la filtration
		  styles:
			card:
			  - margin: 30px 16px 16px 16px
			  - width: calc(100% - 32px)
			  - background-color: 'rgb(204, 0, 0)'
			  - color: white
			grid:
			  - grid-template-columns: 20% 1fr
			label:
			  - justify-self: start
			  - padding-left: 0px
	style:
	  $: |
		.mdc-dialog {
		  backdrop-filter: blur(10px) !important;
		  -webkit-backdrop-filter: blur(10px) !important;
		}
	  .: |
		mwc-icon-button ha-icon {
		  font-size: 0px;
		}
		app-toolbar {
		  color: var(--primary-text-color) !important;
		  background-color: var(--primary-background-color) !important;
		  border-bottom: 1px solid var(--mdc-dialog-scroll-divider-color, rgba(0, 0, 0, 0.12)) !important;
		}

Argonaute · Avril 13, 2021, 8:53

Merci pour le partage ! Le résultat rend bien.
Par contre popup cards est deprecated. Vas tu changer pour browser_mod ou préfères tu ce composant ?

Arnault · Avril 13, 2021, 9:13

Je n’ai pas popup-card d’installer mais bien browser_mod. J’utilise le remplacement de la popup more info comme indiqué dans la doc ci-dessous :

Argonaute · Avril 13, 2021, 6:19

Vu, merci. Je n’utilise pas encore et j’avais juste fait quelques tests avec le service: browser_mod.popup. C’est top, même si les « forks » très poussés de Thomas Loven m’inquiètent et que la prudence imposerait de les utiliser avec parcimonie pour assurer la pérennité de nos implémentations.

Arnault · Avril 13, 2021, 6:52

Mon but est d’utiliser un minimum d’extension pour stabiliser au max HA !!! Mais browser_mod et card-mod me semblent indispensables

Clemalex · Avril 13, 2021, 10:01

au final, tu as compris (c’est la méthode que vers laquelle je t’orientais si tu ne pouvais pas attaquer la carte native