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

29

For the one interested on this approach, you can do it with the following div :

 simple-swipe-card 
    .slide   
    .pagination     
    .pagination-dot      
    .pagination-dot:first-child     
    .pagination-dot:last-child   
    .pagination-dot:nth-child(1)::before
30

I like the new fade in effect it looks clean but anyway you can add an option to change the direction of the fade in from the top to the side so it makes it look like its a slideable card?

31

How does the grid_options option work because I have 2 big cards and if I put them in a vertical swipe card, they won’t be fully shown (because the maximum height is 250px). And it sais to use the grid_options but how does this work because I have tried a lot and everytime it’s basically just a vertical stack and not a swipe card.

image
image287×868 4.39 KB

image
image344×911 304 Bytes

The top image is when I don’t swipe and the one on the bottom is when I swiped.

32

You can set the grid_options in the Layout tab of the visual editor of the card, or you can add the following configuration to you yaml:

type: custom:simple-swipe-card
swipe_direction: vertical
cards:
  - [your cards]
grid_options:
  columns: 12
  rows: 3
1 Like
33

Thanks! It looks much better now.

34

Hi! Great work, I use it extensively on y wall mounted dashboard. Quick question, what’s the easiest way to replace/translate the “Add item” text placeholder?

35

IMG_0332
IMG_03322488×2048 361 KB

Can I remove the rounded corners? Using it as a single full screen card on a NSpanel pro so want to make the corers square to fill the screen

36

Since one of the last updates, Simple Swipe Card changes the height of the card. The image shows the same bubble card embedded in a simple swipe card at the top and only the one bubble card at the bottom:

image
image515×123 9.18 KB

As you can see, the upper card is smaller and therefore the icon is no longer vertically centered.

37

Please open a BUG report on the Github page as that’s the place where I track the issues. Provide as much details as possible. Please also include which version works fine and since which version it doesn’t. Also include your yaml so I can reproduce it myself.

38

I’m trying to figure out which update it first appeared with.

It could also be that it came with the last HA patch, but I can’t or don’t want to jump back so easily.

In any case, I can only detect the behavior in connection with the Simple Swipe Card.

39

You can easily switch Simple Swipe Card versions through HACS and figure out which version has the wrong behavior. You don’t have to switch HA versions.

40

Yes I know. I have switched back several version without change the behavior. So maybe it was a HA update?