🔄 Simple Swipe Card - A Custom Card for Easy Card Navigation

Share your Projects! Dashboards & Frontend
, ,
21

Hello, thanks for the work - looking to replace the old swipe card not maintained and with bugs.

I see an issue with select card - when you click on the select card it jumps and mess up the swipe card :

type: custom:simple-swipe-card
auto_hide_pagination: 0
cards:
  - type: vertical-stack
    cards:
      - type: custom:mushroom-select-card
        entity: select.402030387033006197_programs
        icon: mdi:progress-check
        name: Programs
        fill_container: true
  - type: vertical-stack
    cards:
      - type: custom:timer-bar-card
        entity: sensor.audi_q4_sportback_e_tron_charging_state
        name: Audi Q4 temps de charge restant
        icon: mdi:battery-charging-medium
        active_state: charging
        end_time:
          entity: sensor.audi_q4_sportback_e_tron_charging_complete_time
        text_width: 4em
        bar_width: calc(70% - 10em)
        invert: true
        mushroom:
          primary_info: name
          secondary_info: state
22

I suppose that the intention of having this card is to act as a container that you can swipe - But I face problems when the card is not ‘standard’ card.
For example this code with a fold entity row card is not showed correctly in the swipe card, but well outside the swipe card :slight_smile:

type: custom:simple-swipe-card
auto_hide_pagination: 0
cards:
- type: vertical-stack
  cards:
    - type: custom:vertical-stack-in-card
      cards:
        - type: custom:fold-entity-row
          head:
            type: custom:mushroom-template-card
            entity: light.toutes_les_lampes_salon
            icon: |
              {{ state_attr(entity ,'icon') }}
            icon_color: |-
              {% if is_state(entity, 'on') %}
                red
              {% else %}
                green
              {% endif %}
            primary: |
              {{ state_attr(entity, 'friendly_name') }}
            secondary: >
              {{ expand(states.light.toutes_les_lampes_salon) | selectattr(
              'state', 'eq', 'on') | list | count }} allumée(s)
            tap_action:
              action: toggle
            card_mod:
              style: |
                ha-card {
                  box-shadow: none;
                }
          padding: 10
          entities:
            - type: custom:auto-entities
              card:
                square: false
                columns: 1
                type: grid
              card_param: cards
              filter:
                include:
                  - group: light.toutes_les_lampes_salon
                    options:
                      type: custom:decluttering-card
                      template: lamp_template
                      variables:
                        - entity: this.entity_id
                        - name: null
              sort:
                method: state
                reverse: true
      card_mod:
        style:
          fold-entity-row$: |
            ha-icon {
              background: none !important;
              margin-right: 24px !important;
              --toggle-icon-width: 21px !important;
              color: rgb(var(--rgb-disabled-color));
            }
          .: |
            .card-content {
              padding: 0;
            }

The content: image

In the swipe card:
image

23

@Tommy_Lecossois , can you please open GitHub reports for both issues with as much as information as possible. Please explain in detail what is happening so I can take a look at fixing this, if possible.

1 Like
24

are you sure this crd config is as it is supposed to be? you nest vertical stacks, and the vertical-stack-in-card at that, which has always been problematic.

Why not just use an entities card there? that would hold the fold-entity-row and the underlying auto-entities

makes for a much more efficient card, maybe fix this too…

1 Like
25

Indeed, thanks… You pointed out the problem… So this bug can be cancelled.
But not the other I suppose.

1 Like
26

I will also open another bug / improvement :slight_smile:
We cannot use sliders, it’s sliding and swiping at the same time. This was also a problem from the swipe-card.

27

I had that too, you need to hold and swipe , not hover and swipe

Then of course , you can not slide a slider …
Maybe just bit the best solution for the problem

Maybe a special ‘area’ under the container needs to be added to be able to do all that.

With that we could probably also hover and swipe, like we can in the ha toolbar views

1 Like
28

On the old swipe card, I was doing a card mod to convert the navigation dots in sort of button on top.

image

    card_mod:
      style:
        swipe-card$: |
          .swiper-container {
            margin: 0 0 0 0 !important;
            padding: 65px 0px 0px 0px !important;
          }
          .swiper-pagination-bullets {
            position: absolute;
            top: 5px;
            bottom: inherit !important;
            width: 100%;
          }
          .swiper-pagination-bullets>span {
            margin: 0px !important;
            min-width: 70px;
            min-height: 40px;
            padding-top: 5px;
            border-radius: 0;
            background: rgb(117 190 218 / 30%);            
          }
          .swiper-pagination-bullets>span:last-child {
          border-radius: 0px 10px 10px 0px;
          }
          .swiper-pagination-bullets>span:first-child {
          border-radius: 10px 0 0 10px;
          }
          .swiper-pagination-bullets>span:nth-child(1):before {
            content: '💡';
            font-size: 25px !important;
          }
          .swiper-pagination-bullets>span:nth-child(2):before {
            content: "♨️";
            font-size: 25px !important;
          }
          .swiper-pagination-bullets>span:nth-child(3):before {
            content: "🚨";
            font-size: 25px !important;
          }
          .swiper-pagination-bullets>span:nth-child(4):before {
            content: "🔌";
            font-size: 25px !important;
          }
        .: |
          ha-card {
            padding: 0px !important;
            border: none !important;
            box-shadow: none !important;      
            background: none !important;
          }

Do you know what I should change to have the same with this release?
I know that I could use an input select with nice buttons on top changing the ‘state synchronization’ value but… :slight_smile: