-
Notifications
You must be signed in to change notification settings - Fork 43
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Signed-off-by: Cintia Sanchez Garcia <[email protected]>
- Loading branch information
1 parent
e1b19f5
commit 769f8b5
Showing
11 changed files
with
698 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| .filterBtn { | ||
| height: 28px; | ||
| font-size: 0.8rem; | ||
| } | ||
|
|
||
| .dot { | ||
| height: 0.8rem; | ||
| width: 0.8rem; | ||
| left: 1.8rem; | ||
| top: -0.4rem; | ||
| } | ||
|
|
||
| .checksList { | ||
| max-height: 300px; | ||
| } | ||
|
|
||
| .title { | ||
| font-size: 0.8rem; | ||
| color: var(--color4); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| import { SVGIcon, SVGIconKind } from 'common'; | ||
| import isEmpty from 'lodash/isEmpty'; | ||
| import { Accessor, createSignal, For, JSXElement, Show } from 'solid-js'; | ||
|
|
||
| import { ActiveFilters, FilterCategory, FilterSection } from '../../types'; | ||
| import Section from '../common/Section'; | ||
| import { Sidebar } from '../common/Sidebar'; | ||
| import styles from './MobileFilters.module.css'; | ||
|
|
||
| interface Props { | ||
| filters: FilterSection[]; | ||
| updateActiveFilters: (value: FilterCategory, options: string[]) => void; | ||
| resetFilters: () => void; | ||
| initialActiveFilters: Accessor<ActiveFilters>; | ||
| children: JSXElement; | ||
| } | ||
|
|
||
| const MobileFilters = (props: Props) => { | ||
| const [openSidebar, setOpenSidebar] = createSignal<boolean>(false); | ||
|
|
||
| return ( | ||
| <div> | ||
| <div class="position-relative"> | ||
| <button | ||
| title="Filters" | ||
| class={`position-relative btn btn-sm btn-secondary text-white btn-sm rounded-0 py-0 me-0 me-md-4 ${styles.filterBtn} btnIconMobile me-3`} | ||
| onClick={() => setOpenSidebar(true)} | ||
| > | ||
| <div class="d-flex flex-row align-items-center"> | ||
| <SVGIcon kind={SVGIconKind.Filters} /> | ||
| <div class="d-none d-lg-block fw-semibold ps-2">Filters</div> | ||
| </div> | ||
| </button> | ||
| <Show when={!isEmpty(props.initialActiveFilters())}> | ||
| <div | ||
| class={`d-block d-lg-none position-absolute p-1 border border-3 border-white bg-dark rounded-circle ${styles.dot}`} | ||
| /> | ||
| </Show> | ||
| </div> | ||
| <Sidebar | ||
| label="Filters" | ||
| header={ | ||
| <div class="d-flex flex-row align-items-beseline"> | ||
| <div>Filters</div> | ||
| <Show when={!isEmpty(props.initialActiveFilters())}> | ||
| <button | ||
| type="button" | ||
| title="Reset filters" | ||
| onClick={() => { | ||
| props.resetFilters(); | ||
| setOpenSidebar(false); | ||
| }} | ||
| class="btn btn-sm btn-link text-muted py-0" | ||
| aria-label="Reset filters" | ||
| > | ||
| (reset all) | ||
| </button> | ||
| </Show> | ||
| </div> | ||
| } | ||
| visibleButton={false} | ||
| open={openSidebar()} | ||
| onOpenStatusChange={() => setOpenSidebar(false)} | ||
| > | ||
| <div class="position-relative p-3"> | ||
| <div class="mb-4"> | ||
| <div class="d-flex flex-row align-items-center pb-2"> | ||
| <small class={`fw-semibold me-2 ${styles.title}`}>Order</small> | ||
| </div> | ||
| {props.children} | ||
| </div> | ||
|
|
||
| <div class="row g-4 g-lg-5 mb-4 mb-lg-5"> | ||
| <For each={props.filters}> | ||
| {(section: FilterSection) => { | ||
| return ( | ||
| <Section | ||
| section={section} | ||
| activeFilters={props.initialActiveFilters()[section.value]} | ||
| updateActiveFilters={props.updateActiveFilters} | ||
| colClass="col-12" | ||
| sectionClass={`border p-2 overflow-y-auto ${styles.checksList}`} | ||
| device="mobile" | ||
| /> | ||
| ); | ||
| }} | ||
| </For> | ||
| </div> | ||
| </div> | ||
| </Sidebar> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default MobileFilters; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,95 @@ | ||
| .tableLayout { | ||
| table-layout: fixed; | ||
| } | ||
|
|
||
| .thead { | ||
| font-size: 0.8rem; | ||
| } | ||
|
|
||
| .thead th { | ||
| color: var(--bs-gray-600); | ||
| } | ||
|
|
||
| .tableContent td { | ||
| font-size: 0.8rem; | ||
| line-height: 2; | ||
| } | ||
|
|
||
| .projectNameCell { | ||
| width: 18%; | ||
| } | ||
|
|
||
| .logoWrapper { | ||
| height: 20px; | ||
| width: 18px; | ||
| min-width: 18px; | ||
| } | ||
|
|
||
| .logo { | ||
| font-size: 1rem; | ||
| max-width: 100%; | ||
| max-height: 100%; | ||
| height: auto; | ||
| } | ||
|
|
||
| .title { | ||
| font-size: 0.9rem; | ||
| } | ||
|
|
||
| .select { | ||
| border-color: #ced4da !important; | ||
| font-size: 0.75rem; | ||
| min-width: 175px; | ||
| } | ||
|
|
||
| @media (max-width: 1199.98px) { | ||
| .select { | ||
| width: 150px; | ||
| } | ||
|
|
||
| .thead { | ||
| font-size: 0.6rem; | ||
| } | ||
|
|
||
| .tableContent td { | ||
| font-size: 0.65rem; | ||
| line-height: 2; | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: 991.98px) { | ||
| .projectNameCell { | ||
| width: 23%; | ||
| } | ||
|
|
||
| .projectBtn { | ||
| font-size: 0.8rem; | ||
| } | ||
|
|
||
| .maturity { | ||
| font-size: 90%; | ||
| } | ||
| } | ||
|
|
||
| @media only screen and (max-width: 575.98px) { | ||
| .thead { | ||
| font-size: 0.5rem; | ||
| } | ||
|
|
||
| .tableContent td { | ||
| font-size: 0.6rem; | ||
| line-height: 1.75; | ||
| } | ||
|
|
||
| .projectNameCell { | ||
| width: 30%; | ||
| } | ||
|
|
||
| .projectBtn { | ||
| font-size: 0.7rem; | ||
| } | ||
|
|
||
| .maturity { | ||
| font-size: 80%; | ||
| } | ||
| } |
Oops, something went wrong.