stashapp / stash

An organizer for your porn, written in Go. Documentation: https://docs.stashapp.cc
https://stashapp.cc/
GNU Affero General Public License v3.0
9.22k stars 795 forks source link

[Feature] Saved Filters' ease of use #1509

Open ghfsa opened 3 years ago

ghfsa commented 3 years ago

Is your feature request related to a problem? Please describe. I'm sure 'Saved Filters' would be the most frequently used function in most pages. Also, the entries in these filters would only grow in number over time. The drop down view only shows a few filters at a time & it most always needs scrolling and going through the list sequentially. It'd get repetitive fast I guess. I think that repetition of scrolling & going through sequentially is also because of shortcomings of the 'list' form display.

Describe the solution you'd like I think, It'd be more efficient to display the saved filter either as 'cloud' so that more filters could be seen at a given time. Even displaying the Saved Filters in 'multiple columns' in the drop-down would work.

EDIT: I agree with user GsMumbo's comment below. Grouping would be essential & efficient with increasing number of entries. As long as it doesnt require a click to see the Group's entries.

GsMumbo commented 3 years ago

Alternatively allowing folders / groups would be nice. That way for example you can separate out your workflow filters (unrated, missing performer, etc) from your browsing (filtered by tag, rating, etc).

7dJx1qP commented 3 years ago

Here's custom CSS that expands the dropdown to two columns. It's responsive, so if the screen becomes too narrow it reverts back to a single column.

@media (min-width: 600px) {
ul.saved-filter-list {
    display: flex;
    flex-wrap: wrap;
}
.saved-filter-list-menu {
    width: 600px;
}
.saved-filter-list .dropdown-item-container {
    flex: 0 0 50%;
}
}

And this CSS can be added to expand it to three columns, also responsive:

@media (min-width: 900px) {
.saved-filter-list-menu {
    width: 900px;
}
.saved-filter-list .dropdown-item-container {
    flex: 0 0 33.33%;
}
}

The same pattern can be applied to add even more columns.

This custom CSS can be used to expand the max height of the dropdown:

div.saved-filter-list-menu.dropdown-menu {
    max-height: 500px;
}
ul.saved-filter-list {
    max-height: 430px;
}

The default values are 300px and 230px which I've increased to 500px and 430px in this example.

ghfsa commented 2 years ago

Thanks a lot @7dJx1qP ....only saw this today. One question. Because of the 'Saved Filters' position, the box starts at center left of screen due to which only two columns are possible for me. Can its position be shifted to left as to be more in center? That way more columns may be possible. Thanks!