sortabrilliant / card-catalog Goto Github PK

I think we are setting too many of the CSS settings instead of just letting them inherit theme styles. I see this now:

For example, with the buttons if I remove all the CSS (except for white-space: nowrap;) they end up looking like this, which I think matches much better.

We also need to set it up so when you click on something it adds the active class or something so the button changes color and people know which one is selected.

With the search bar if we change it from class="search" to "type="search" it ends up looking much nicer as it inherits the theme styles:

What the difference between the default style and the list one? The look the same but the default one seems to have more space than the other one. I don't think we need both. I would get remove the list one and just have default and grid.

Also on the backend the list and default one look fine but on the frontend the text is aligned to the left.

You have this line of CSS

.wp-block-sortabrilliant-card-catalog .far {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 400 !important;
}

But it ends up messing up the text when I think you just want it to apply to the icon. What if we changed it to this:

.wp-block-sortabrilliant-card-catalog .far:before {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 400 !important;
}

We need the files to download instead of opening. In my test site I am using videos and they just open in a new window instead of downloading.

I just found out about the download attribute. Can we use that:
https://www.w3schools.com/tags/att_a_download.asp

For the filter list we probably need to have ones for every type of file we have icons for. I'm using videos and there isn't a filter for that.

Also the filter for a particular file type should appear unless the file type is being used in that card catalog block.