Improve the layout of the filters

lyndasantiago → made their first commit to this issue’s fork.

Hi @nagatahmed are you working on this? Because I want to give it a try.

I am unassigning @nagatahmed from this issue due to no activity since March/April.

I would like to take this forward, but before starting development, I need to clarify a few things.

This issue seems to involve changing the layout of the filters. However, I am a bit unclear about the types of filters being referenced. Specifically:

1. Text filter – Could you please clarify what this refers to?
2. Multiple choice filter – Are these the checkbox filters?
3. Boolean filters – Are these referring to the "Sort by" filters?

Once these points are clarified, I’ll be able to proceed accordingly.

Thank you!

Hey, Before creating an MR, I wanted to discuss the approach I’ve taken to update the layout of the filters.

I’ve made the necessary code changes and attached a screenshot of the updated UI below for reference.

In the Search.svelte

<div class="boolean-filters-wrapper">
          {#each Object.entries(filterDefinitions) as [name, filter]}
            {#if filter._type === 'boolean'}
              <BooleanFilter
                definition={filter}
                {name}
                changeHandler={onFilterChange}
              />
            {/if}
          {/each}
</div> 

Could you please review and let me know if this approach seems correct, or if you’d suggest any changes or improvements?

Thanks!

That looks pretty good to me, and is in line with what I was imagining.

Hi @phenaproxima Thank you for the feedback. I’ve pushed the changes and attached screenshots for both desktop and mobile views.
Please review the complete code and let me know if any further changes are needed.

Hi

I have tested this issue on Drupal 11.

Steps

1. Go to the Extend
2. Click on the Contrib module
3. Observe the the filters

After applying MR815 successfully, observe that the filter type is as per the requirement. On mobile device the filter typesa re stacked one on the other.

Hence this can be moved to RTBC +1.

Attaching the screenshot for reference.

Confirmed that this looks fine at all widths. I'm sure we could touch up the styling a little bit in some ways (more vertical spacing), but that can happen separately.

I agree, this is ready to go. Tagging for backport to 2.0.x as well.

merged to 2.1.x and cherry-picked clean to 2.0.x