Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Home Assistant 2022.11 compatibility #47

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

ov1d1u
Copy link

@ov1d1u ov1d1u commented Nov 3, 2022

Home Assistant 2022.11 added borders around cards. This PR comes with the option to hide them.

@piitaya piitaya mentioned this pull request Nov 3, 2022
@piitaya
Copy link

piitaya commented Nov 3, 2022

I think we can also edit the readme to add the new keep option.

@ov1d1u
Copy link
Author

ov1d1u commented Nov 3, 2022

@piitaya Added, thanks for pointing it out!

@Getslow6
Copy link

Getslow6 commented Nov 4, 2022

@piitaya or @ov1d1u, do you know if its possible to get the resulting stack-in-card.js file (or contents in a pastebin?) without waiting for the new release? I tried making the edits in my local file based on your source edits, but the release pipeline obfuscates the code and I'm not that experienced in javascript to be able to edit it myself 😅

@ov1d1u
Copy link
Author

ov1d1u commented Nov 4, 2022

@Getslow6 I added a compiled .js file to my repository, in the releases section, you can download it from https://github.com/ov1d1u/stack-in-card/releases/download/0.2.1/stack-in-card.js

@Rudd-O
Copy link

Rudd-O commented Nov 5, 2022

Can this please be merged? Thansk.

@Rudd-O
Copy link

Rudd-O commented Nov 5, 2022

Uh oh the documentation README has not been updated!

@correctomundo79
Copy link

correctomundo79 commented Nov 7, 2022

@Getslow6 I added a compiled .js file to my repository, in the releases section, you can download it from https://github.com/ov1d1u/stack-in-card/releases/download/0.2.1/stack-in-card.js

Thanks for this! I'm just wondering what the exact syntax would be to prevent borders on child cards. I assume:

type: custom:stack-in-card
mode: vertical
keep:
  - border: false
cards:

but that doesn't seem to work?

@Getslow6
Copy link

Getslow6 commented Nov 7, 2022

@Getslow6 I added a compiled .js file to my repository, in the releases section, you can download it from https://github.com/ov1d1u/stack-in-card/releases/download/0.2.1/stack-in-card.js

Thanks for this! I'm just wondering what the exact syntax would be to prevent borders on child cards. I assume:

type: custom:stack-in-card mode: vertical keep:

  • border: false
    cards:

but that doesn't seem to work?

Try removing the cache of your browser (not just reload). You don't need the keep section, so:

type: custom:stack-in-card
mode: vertical
cards:

@correctomundo79
Copy link

Try removing the cache of your browser (not just reload). You don't need the keep section, so:

type: custom:stack-in-card
mode: vertical
cards:

Nope, tried that already, but no difference. Thanks anyway.

@strikeir13
Copy link

@Getslow6 I added a compiled .js file to my repository, in the releases section, you can download it from https://github.com/ov1d1u/stack-in-card/releases/download/0.2.1/stack-in-card.js

I overwrote the existing stack-in-card.js file with this one, cleared my browser cache, and tried many combinations of keep: but nothing worked. Are there any other steps required to make this work?

@ronaldheft
Copy link

@strikeir13 Are you using HACS? Do you have a *.js.gz file in the folder?

If so, you need to delete that, as HACS will serve up the gzipped version. After deleting the file, clear your cache again.

@strikeir13
Copy link

@strikeir13 Are you using HACS? Do you have a *.js.gz file in the folder?

If so, you need to delete that, as HACS will serve up the gzipped version. After deleting the file, clear your cache again.

That did it! Thank you!

@Rudd-O
Copy link

Rudd-O commented Nov 10, 2022

What's preventing this from getting merged? Can I be added to the reviewers list? Thanks.

@amjidkhan
Copy link

Any idea when this will be merged?

@amjidkhan
Copy link

https://github.com/ov1d1u/stack-in-card/releases/download/0.2.1/stack-in-card.js

Can you advise a novice user the steps?

@almighty059
Copy link

@Getslow6 I uploaded your compiled .js file from your repository and it works to remove the borders but can I use the keep: feature to keep the border? It doesn't seem to be working although I'be never really had any luck using that feature. Thanks.

Copy link

@Rudd-O Rudd-O left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Needs README changes please. Other than that you should have a green light from me.

@ov1d1u
Copy link
Author

ov1d1u commented Nov 14, 2022

@Rudd-O I also updated the README.md file a while ago to reflect the new border options, is there something I have missed?

@almighty059
Copy link

@ov1d1u the border: feature is working for me but when I try to use the keep: feature and set the border or something else to true it does not work. I don't know if I'm using the wrong syntax or exactly what wrong but I can't get a value of true to work for anything within the keep: feature. The README.md file has as long as I known never had an actual example of it being used. The only example that it has is of how to use the --keep-background: feature for a specific entity. Could you also possibly add that to the README.md file and double check to see if it's actually working.? Thanks.

@ov1d1u
Copy link
Author

ov1d1u commented Nov 15, 2022

@almighty059 I think you misunderstood the documentation a bit. The example given here regarding how to use --keep-background only applies to a card of type custom:button-card. The right way to use the keep object is somethink like this:

type: custom:stack-in-card
title: My Stack In Card
mode: vertical
keep:
  border: true
cards:
  - type: horizontal-stack
    cards:
      - type: button
        entity: sun.sun
      - type: button
        entity: sun.sun
  - type: vertical-stack
    cards:
      - type: entities
        entities:
          - sun.sun

Anyway, I added support for the --keep-border css variable, to use it you should do something like:

type: custom:stack-in-card
title: My Stack In Card
mode: vertical
cards:
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        entity: sun.sun
        styles:
          card:
            - '--keep-border': 'true'
      - type: button
        entity: sun.sun
  - type: vertical-stack
    cards:
      - type: entities
        entities:
          - sun.sun

I also updated the documentation to reflect the usage of the keep object, even if it goes a little beyond the scope of this PR.

@almighty059
Copy link

almighty059 commented Nov 16, 2022

@ov1d1u thanks for the reply. Just to clarify, I was referring to the code in your keep: example (outside the stack), not --keep-background (inside the stack). It has never worked for me because I never knew the correct way to implement it. I've tried various ways by changing where I put it, how I indented it, putting a - before it, putting a ; after it, etc. but nothing ever worked. After seeing your example, I finally know the correct way to use it and now it works. That's also what I was referring to when I said that there is no example of how it's used (outside of the stack) in the README file. The only example shown is --keep-background which is for when it's used inside the stack. Thanks again for the help and I apologize for straying outside the scope of the PR.

@ildar170975 ildar170975 mentioned this pull request Nov 30, 2022
@ildar170975
Copy link

This fix does not solve problems with a case "a stack inside another stack"- see #51

@ViktuK359
Copy link

What am I doing wrong, I installed "custom:stack-in-card" it through HACS and gives it out when filling out the card
Custom element doesn't exist: stack-in-card

@bokub
Copy link

bokub commented Mar 1, 2023

It looks like this PR will never be merged, so I decided to remove the borders myself with some CSS, and it's actually very easy, you just need to install the Mod Card, and add the following to every stacked card:

type: custom:stack-in-card
+ card_mod:
+   style: 'ha-card {--ha-card-border-width: 0}'
Before After
type: custom:stack-in-card 
cards:
  ...
ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ
ㅤ
type: custom:stack-in-card
card_mod:
  style: 'ha-card {--ha-card-border-width: 0}'
cards:
  ...
image image

@Rudd-O
Copy link

Rudd-O commented Mar 1, 2023

Why will this PR not get merged? It should!

@bokub
Copy link

bokub commented Mar 2, 2023

Why will this PR not get merged? It should!

I'm just guessing based on the fact that this repo's last commit was in 2020

@Rudd-O
Copy link

Rudd-O commented Mar 3, 2023

Does anyone know what happened to the maintainer of this project?

@ncd7
Copy link

ncd7 commented Sep 10, 2023

Any news on probability of this getting merged?

@Kalitsune
Copy link

There's no maintainer unfortunately, the project isn't maintained since 2020 according to the README.md :(
image

The community is still pretty active with this card thought and there's a few PR fixing the principal bugs so if someone want to make a custom repo to do the aggregation of all of these changes I think it would be pretty useful and would not require a lot of time and efforts

@Kalitsune Kalitsune mentioned this pull request Jan 2, 2024
@ildar170975
Copy link

@ov1d1u
Hi.
I do see --keep-border working in this config (similar to your example):

  - type: custom:stack-in-card
    cards:
      - type: custom:button-card
        entity: sun.sun
        styles:
          card:
            - '--keep-border': 'true'
      - type: custom:button-card
        entity: sun.sun

The upper button definitely has own border:

image

But I cannot use --keep-border with other cards like standard Entity, History-graph:

  - type: custom:stack-in-card
    cards:
      - type: entity
        entity: sun.sun
        card_mod:
          style: |
            ha-card {
              --keep-border: true;
            }
      - type: entity
        entity: sun.sun

image

as well as with

--keep-border: 'true';

Does it mean that your added --keep-border may only be used with a custom:button-card?

The earlier added --keep-background does work with standard cards as well.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.