Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Live Components: PseSelector + CategoryFilters #64

Merged
merged 22 commits into from
Oct 25, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions assets/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,11 @@ import './bootstrap.js';

import HeaderScript from '@components/Layout/Header/Header.js';
import MobileDrawer from './js/mobileDrawer';
import filterSelectFunction from '@components/Molecules/Filters/FilterSelect/FilterSelect';
import filterSelect from '@components/Molecules/Filters/FilterSelect/FilterSelect';
import { quantityButton } from '@components/Molecules/Button/button';
import { FieldInputFunction } from '@components/Molecules/Fields/FieldInput/FieldInput';
import { ModalFunction } from '@components/Molecules/Modal/Modal';
import { slider } from '@js/slider';
import ProductGallery from '@components/Layout/ProductGallery/ProductGallery';
import PasswordControlsFunction from '@components/Molecules/PasswordControls/PasswordControls';
import headerButtonProfileFunction from '@components/Molecules/HeaderButton/HeaderButtonProfile';

Expand All @@ -28,10 +27,9 @@ function main() {

HeaderScript();
MobileDrawer();
filterSelectFunction();
filterSelect();
quantityButton();
slider();
ProductGallery();
PasswordControlsFunction();
StepsFunction();
FieldInputFunction();
Expand Down
21 changes: 21 additions & 0 deletions assets/controllers/filters_controller.js
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;
47 changes: 47 additions & 0 deletions assets/css/form.css
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;
}
}
}
}
}
76 changes: 70 additions & 6 deletions assets/css/mobileDrawer.css
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
.MobileDrawer {
@apply transition-transform translate-y-full;

position: fixed;
left: 0;
right: 0;
Expand All @@ -9,10 +11,10 @@
padding-top: rem-convert(50px);
padding-bottom: rem-convert(42px);
border-radius: rem-convert(20px) rem-convert(20px) 0px 0px;
@apply transition-transform translate-y-full;
z-index: 20;

&:before {
content: "";
content: '';
position: absolute;
top: rem-convert(16px);
left: calc(50% - 21px);
Expand Down Expand Up @@ -41,10 +43,6 @@
@apply translate-y-0;
}

@screen md {
display: none;
}

&-overlay {
position: fixed;
top: 0;
Expand All @@ -55,4 +53,70 @@
mix-blend-mode: multiply;
z-index: 10;
}

&--reset-sm {
@screen sm {
all: revert;

&:before {
content: none;
}
.MobileDrawer-header {
display: none;
}
& + .MobileDrawer-overlay {
display: none;
}
}
}
&--reset-md {
@screen md {
all: revert;

&:before {
content: none;
}
.MobileDrawer-header {
display: none;
}
& + .MobileDrawer-overlay {
display: none;
}
}
}

&--reset-lg {
@screen lg {
all: revert;

&:before {
content: none;
}

.MobileDrawer-header {
display: none;
}
& + .MobileDrawer-overlay {
display: none;
}
}
}

&--reset-xl {
@screen xl {
all: revert;

&:before {
content: none;
}

.MobileDrawer-header {
display: none;
}

& + .MobileDrawer-overlay {
display: none;
}
}
}
}
73 changes: 73 additions & 0 deletions assets/css/pages/category.css
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;
}
}
}
100 changes: 94 additions & 6 deletions assets/css/pages/product.css
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
.Product {
&-imageContainer {
width: 594px;
img {
width: 100%;
}
}
&-imageContainer {
width: 594px;
img {
width: 100%;
}
}

&Gallery-item {
border: 1px solid transparent;
Expand All @@ -13,3 +13,91 @@
}
}
}

.ProductPage {
color: var(--black);
&-grid {
display: grid;

@screen lg {
grid-template-rows: auto auto;
grid-template-columns: repeat(12, 1fr);
gap: 46px 54px;
margin-bottom: 90px;
}
@screen xl {
gap: 16px 20px;
}
}

&-gallery {
order: 1;
position: relative;
right: 50%;
left: 50%;
order: 1;
width: 100vw;
margin-right: -50vw;
margin-left: -50vw;

@screen sm {
position: static;
width: auto;
margin: 0;
}
@screen lg {
grid-column: 1 / 7;
}
@screen xl {
grid-column: 1 / 8;
}
}

&-infos {
order: 2;
margin-top: 30px;

@screen lg {
grid-row: 1 / 3;
grid-column: 7 / 13;
margin: 0;
}

@screen xl {
grid-column: 9 / 13;
}
}

&-description {
order: 3;
@screen lg {
grid-column: 1 / 7;
}
@screen xl {
grid-column: 2 / 8;
}
}
}

.PseSelector {
display: grid;
gap: 30px;

legend {
@sreen lg {
display: none;
}
}

.Fieldset {
&-group {
@apply grid sm:gap-4;

li:last-child {
.FilterChoice-label {
border-top: none;
}
}
}
}
}
6 changes: 4 additions & 2 deletions assets/icons/arrow-right.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 5 additions & 3 deletions assets/icons/bell.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading