Skip to content

Commit

Permalink
Merge pull request #2230 from ewels/filterbar-tweaks
Browse files Browse the repository at this point in the history 
Filter bar tweaks
  • Loading branch information
@mashehu
mashehu authored Feb 3, 2024
2 parents 84ac318 + 3a31adf commit 3589c7e
Show file tree
Hide file tree
Showing 7 changed files with 87 additions and 132 deletions.
159 changes: 50 additions & 109 deletions src/components/FilterBar.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@
function handleExlusiveFilter(fil) {
// remove focus from button
event.target.blur();
CurrentFilter.set([{ name: fil }]);
}
function handleSort(sor) {
Expand All @@ -46,18 +45,18 @@
});
</script>

<div class="filter-bar mb-2">
<div class="d-none d-lg-flex w-100 justify-content-center">
<div class="filter-bar mb-2 px-2">
<div class="d-flex w-100 justify-content-between justify-content-md-center">
<input
type="text"
class="form-control w-25 me-2"
class="form-control w-25 me-2 searchbar"
bind:value={search}
on:keyup={handleSearch}
placeholder="Search"
placeholder="&#xF002; Search"
/>

{#if $Filters.length > 0 && $Filters[0].name}
<div class="ms-3 d-flex align-items-center">
Show:
<div class="d-none d-xl-block ms-3 d-flex align-items-center">
<div class="btn-group ms-1 filter-buttons d-flex" role="group" aria-label="Filter listing">
{#each $Filters as fil}
<button
Expand Down Expand Up @@ -86,33 +85,53 @@
{/each}
</div>
</div>
{/if}
{#if sortBy.length > 1}
<div class="ms-3 d-none d-xl-flex align-items-center">
<span class="text-nowrap">Sort by: </span>
<div class="btn-group ms-1 sort-buttons" role="group" aria-label="Sort buttons">
{#each sortBy as sor (sor)}
<input
type="radio"
class="btn-check"
name="sort"
id={sor.replace(' ', '-')}
checked={$SortBy.startsWith(sor)}
on:click={() => handleSort(sor)}
/>
<label class="btn btn-outline-success text-nowrap" for={sor.replace(' ', '-')}>{sor}</label>
{/each}
<div class="d-xl-none ms-1 ms-md-3 align-items-center">
<div class="dropdown">
<button
class="btn btn-outline-success dropdown-toggle text-nowrap"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<slot name="filter-name">Status</slot>
</button>
<ul class="dropdown-menu">
{#each $Filters as fil}
<li>
<div
class="dropdown-item"
title="Filter"
class:active={$CurrentFilter.find((f) => f.name === fil.name)}
on:click={() => handleFilter(fil.name)}
on:keydown={() => handleFilter(fil.name)}
role="button"
tabindex="0"
>
{#if fil.icon}
<i class={fil.icon + ' fa-fw me-1'} />
{/if}
{fil.name}
{#if fil.count >= 0}
<span class="badge bg-secondary ms-1">{fil.count}</span>
{/if}
</div>
</li>
{/each}
</ul>
</div>
</div>
<div class="ms-3 d-inline d-xl-none align-items-center">
{/if}
{#if sortBy.length > 1}
<div class="ms-1 ms-md-3 align-items-center">
<div class="dropdown">
<button
class="btn btn-outline-success dropdown-toggle text-nowrap"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
Sorted by: <span class="text-nowrap d-none d-xl-inline">{$SortBy}</span>
<i class="fa-solid fa-arrow-down-wide-short me-1"></i>
<span class="d-none d-md-inline">{$SortBy}</span>
</button>
<ul class="dropdown-menu">
{#each sortBy as sor (sor)}
Expand All @@ -136,8 +155,7 @@
</div>
{/if}
{#if displayStyle.length > 1}
<div class="ms-3 d-flex align-items-center">
Display:
<div class="ms-1 ms-md-3 d-flex align-items-center">
<div class="btn-group ms-1 display-buttons" role="group" aria-label="Display style">
{#each displayStyle as dis}
<button
Expand All @@ -154,88 +172,11 @@
</div>
{/if}
</div>
<div class="d-lg-none dropdown-center text-center">
<button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
Filter & Sort
</button>
<div class="dropdown-menu">
<input
type="text"
class="form-control mt-0 mb-2"
bind:value={search}
on:keyup={handleSearch}
placeholder="Filter"
/>
{#if $Filters.length > 0}
<div class="mx-1 mb-2 align-items-center">
<span>Show:</span>
<div class="btn-group-vertical mx-1 filter-buttons d-flex" role="group" aria-label="Filter listing">
{#each $Filters as fil}
<button
type="button"
data-bs-toggle="tooltip"
data-bs-placement="top"
title={'Double click to only show items from this category'}
class={fil.class
? 'btn text-nowrap flex-fill btn-outline-' + fil.class
: 'btn text-nowrap w-100 btn-outline-success'}
class:active={$CurrentFilter.find((f) => f.name === fil.name)}
on:click={() => handleFilter(fil.name)}
on:dblclick={() => handleExlusiveFilter(fil.name)}
on:mouseout={() => event.target.blur()}
on:blur={() => event.target.blur()}
>
{#if fil.icon}
<i class={fil.icon + ' me-1'} />
{/if}
{fil.name}
{#if fil.count >= 0}
<span class="badge bg-secondary ms-1">{fil.count}</span>
{/if}
</button>
{/each}
</div>
</div>
{/if}
{#if sortBy.length > 1}
<div class="mx-2 mb-2 d-flex align-items-center">
Sort:
<div class="btn-group-vertical ms-1 sort-buttons" role="group" aria-label="Sort buttons">
{#each sortBy as sor (sor)}
<input
type="radio"
class="btn-check"
name="sort-sm"
id={sor.replace(' ', '-') + '-sm'}
checked={sor === $SortBy}
on:click={() => handleSort(sor)}
/>
<label class="btn btn-outline-success text-nowrap" for={sor.replace(' ', '-') + '-sm'}
>{sor}</label
>
{/each}
</div>
</div>
{/if}
{#if displayStyle.length > 1}
<div class="mx-2 d-flex align-items-center">
Display:
<div class="btn-group ms-1 display-buttons" role="group" aria-label="Sort buttons">
{#each displayStyle as dis}
<button
type="button"
class="btn btn-outline-success text-nowrap"
on:click={() => handleDisplayStyle(dis.name)}
class:active={$DisplayStyle === dis.name}
><i class={dis.icon} />
</button>
{/each}
</div>
</div>
{/if}
</div>
</div>
</div>

<style>
<style lang="scss">
@import '../styles/_variables.scss';
.searchbar {
font-family: $font-family-sans-serif, 'Font Awesome 6 Pro';
}
</style>
5 changes: 5 additions & 0 deletions src/components/ListingTableHeader.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,4 +49,9 @@
background-color: $body-tertiary-bg-dark;
}
}
@include media-breakpoint-down(lg) {
.text-nowrap {
white-space: normal !important;
}
}
</style>
16 changes: 9 additions & 7 deletions src/components/component/ComponentListing.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,15 +89,17 @@
});
</script>

<div class={`listing grid px-2 py-4 ${components[0].type}`}>
<div class={`listing px-0 px-lg-2 py-4 ${components[0].type}`}>
{#if $DisplayStyle === 'grid'}
{#each paginatedItems as component (component.name)}
<div class="g-col-12 g-col-md-6 g-col-xl-4 g-col-xxl-3">
<ComponentCard {component} />
</div>
{/each}
<div class="grid">
{#each paginatedItems as component (component.name)}
<div class="g-col-12 g-col-md-6 g-col-xl-4 g-col-xxl-3">
<ComponentCard {component} />
</div>
{/each}
</div>
{:else}
<table class="table table-responsive mx-3">
<table class="table table-responsive">
<thead>
<tr>
<ListingTableHeader name="Name" />
Expand Down
2 changes: 1 addition & 1 deletion src/components/event/EventListing.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@
</script>

<div>
<FilterBar filter={event_types} displayStyle={[]} sortBy={[]} />
<FilterBar filter={event_types} displayStyle={[]} sortBy={[]}><span slot="filter-name">Event type</span></FilterBar>
<div class="events">
{#if currentEvents.length > 0}
<div class="mb-3 col-12">
Expand Down
5 changes: 2 additions & 3 deletions src/components/footer/Footer.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ import NfCoreLogo from '/images/logo/nf-core-logo.svg?raw';
import IconSocial from '@components/IconSocial.astro';
---

<footer class="footer bg-body-secondary text-body-secondary">
<footer class="footer bg-body-secondary text-body-secondary py-4 py-lg-5">
<div class="container">
<div class="row align-items-center">
<div class="text-center text-lg-start col-12 col-lg d-flex flex-column justify-content-between">
<div class="">
<a href="/" class="text-decoration-none">
<a href="/" class="text-decoration-none d-inline-block">
<div class="hide-dark align-middle">
<Fragment set:html={NfCoreLogo} />
</div>
Expand Down Expand Up @@ -75,7 +75,6 @@ import IconSocial from '@components/IconSocial.astro';
}

footer {
padding: 3rem 0 3rem;
& a {
color: $gray-600;
&:hover,
Expand Down
28 changes: 16 additions & 12 deletions src/components/pipeline/PipelinesListing.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -131,21 +131,25 @@
});
</script>

<div class="listing grid px-2 py-4">
<div class="listing px-2 py-4">
{#if $DisplayStyle === 'grid'}
{#if filteredPipelines.length === 0 && $SearchQuery !== ''}
<div class="alert alert-warning" role="alert">
No pipelines found. Try changing your search query or filters.
</div>
{:else}
{#each filteredPipelines as pipeline (pipeline.name)}
<div class="g-col-12 g-col-md-6 g-col-xl-4 g-col-xxl-3">
<PipelineCard {pipeline} />
<div class="grid">
{#if filteredPipelines.length === 0 && $SearchQuery !== ''}
<div class="g-col-12 g-col-md-8 g-start-md-3">
<div class="alert alert-secondary text-center" role="alert">
No pipelines found. Try changing your search query or filters.
</div>
</div>
{/each}
{/if}
{:else}
{#each filteredPipelines as pipeline (pipeline.name)}
<div class="g-col-12 g-col-md-6 g-col-xl-4 g-col-xxl-3">
<PipelineCard {pipeline} />
</div>
{/each}
{/if}
</div>
{:else}
<table class="table table-hove table-responsive mx-3">
<table class="table table-hove table-responsive">
<thead>
<tr>
<ListingTableHeader name="Name" />
Expand Down
4 changes: 4 additions & 0 deletions src/layouts/PageLayout.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,11 @@ if (frontmatter) {
</BaseLayout>

<style lang="scss">
@import '@styles/_variables.scss';
.mainpage {
min-height: calc(100vh - 14.5rem); // offset for header and footer
@include media-breakpoint-down(lg) {
min-height: calc(100vh - 16rem); // offset for header and footer
}
}
</style>

0 comments on commit 3589c7e

Please sign in to comment.