-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Live Components: PseSelector + CategoryFilters (#64)
* pseselector WIP * productCard wip * ProductCard * Live PseSelector Component * fix: add class to simulate :checked * fitlers: structure WIP * filter into form * live: form in pseSelector * filter: from validation onchange * feat: form group filters * fix form add cart * poc: tb in flexy * tb: add blocks in template * fix: bad condition * pse: submitform * cat: styling page * fix bad merged file * fix: item within href in breadcrumb * wip selector * test pse selector with only symfony form (#65) Co-authored-by: Lucanis <damien.foulhoux@gmail.com> * fix design product page * remove react pse selector --------- Co-authored-by: Robin Morel <rmorel@openstudio.fr> Co-authored-by: Alexandre <anoziere@openstudio.fr> Co-authored-by: Lucanis <damien.foulhoux@gmail.com>
- Loading branch information
1 parent
d73fbff
commit 380438d
Showing
72 changed files
with
6,257 additions
and
7,892 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import { Controller } from '@hotwired/stimulus'; | ||
import { getComponent } from '@symfony/ux-live-component'; | ||
|
||
class FiltersController extends Controller { | ||
async initialize() { | ||
this.component = await getComponent(this.element); | ||
} | ||
|
||
filterChange() { | ||
this.component.action('save'); | ||
} | ||
|
||
sortChange(e) { | ||
this.component.action('save', { order: e.target.value }); | ||
} | ||
resetForm() { | ||
this.component.action('save', { reset: true }); | ||
} | ||
} | ||
|
||
export default FiltersController; |
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,47 @@ | ||
.FilterChoice { | ||
&-label { | ||
@apply flex sm:text-black sm:font-semibold paragraph-4 sm:mb-2; | ||
} | ||
|
||
&-list { | ||
@apply flex-wrap gap-2 divide-y divide-grey-lighter sm:divide-y-0 sm:flex; | ||
} | ||
|
||
&--drawer { | ||
.FilterChoice-label { | ||
@media screen and (max-width: theme('screens.sm')) { | ||
position: relative; | ||
cursor: pointer; | ||
outline: none; | ||
border: 1px solid var(--grey-lighter); | ||
padding: 16px 14px; | ||
justify-content: space-between; | ||
align-items: center; | ||
font-size: 0; | ||
&:before { | ||
content: attr(data-select-label); | ||
font-size: rem-convert(14px); | ||
} | ||
&:after { | ||
content: ''; | ||
display: block; | ||
background: url('/assets/icons/chevron-small-down.svg') no-repeat | ||
center; | ||
height: rem-convert(20px); | ||
width: rem-convert(20px); | ||
} | ||
} | ||
} | ||
|
||
&.FilterChoice--rounded { | ||
.FilterChoice-label { | ||
@media screen and (max-width: theme('screens.md')) { | ||
border-radius: 50px; | ||
justify-content: center; | ||
color: var(--dark); | ||
border-color: currentColor; | ||
} | ||
} | ||
} | ||
} | ||
} |
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,73 @@ | ||
.Category { | ||
&-grid { | ||
display: grid; | ||
padding: 24px; | ||
|
||
@screen md { | ||
padding: 24px 48px; | ||
} | ||
@screen lg { | ||
padding: 44px 0; | ||
grid-template-columns: 240px 1fr; | ||
gap: 48px; | ||
margin: auto; | ||
max-width: calc(theme('screens.lg') - 80px); | ||
} | ||
|
||
@screen xl { | ||
gap: 66px; | ||
max-width: calc(theme('screens.xl') - 84px); | ||
} | ||
|
||
@screen 2xl { | ||
grid-template-columns: 310px 1fr; | ||
max-width: calc(theme('screens.2xl') - 100px); | ||
} | ||
} | ||
} | ||
|
||
.CategoryFilter { | ||
display: block; | ||
color: var(--black); | ||
|
||
@screen lg { | ||
padding: 0; | ||
margin-top: 48px; | ||
transform: none; | ||
position: relative; | ||
} | ||
|
||
&:before { | ||
@apply lg:hidden; | ||
} | ||
&-erase { | ||
@screen lg { | ||
position: absolute; | ||
top: 0; | ||
right: 0; | ||
} | ||
|
||
&::empty { | ||
display: none; | ||
} | ||
} | ||
|
||
.FilterPill { | ||
background-color: white; | ||
} | ||
|
||
.Accordion--filter { | ||
@apply lg:bg-white; | ||
|
||
.Accordion-summary, | ||
.Accordion-content { | ||
@apply lg:px-0; | ||
} | ||
} | ||
|
||
.Fieldset { | ||
&-group { | ||
@apply flex flex-col gap-1 lg:divide-y lg:gap-0; | ||
} | ||
} | ||
} |
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.