(wip) Style products list and form

app/frontend/src/javascript/components/store/product-form.tsx

@@ -126,7 +126,7 @@ export const ProductForm: React.FC<ProductFormProps> = ({ product, title, onSucc
         </div>
       </header>
       <form className="product-form" onSubmit={onSubmit}>
-        <div className="grp">
+        <div className="layout">
           <FormInput id="name"
                      register={register}
                      rules={{ required: true }}
@@ -137,32 +137,38 @@ export const ProductForm: React.FC<ProductFormProps> = ({ product, title, onSucc
           <FormInput id="sku"
                      register={register}
                      formState={formState}
-                     label={t('app.admin.store.product_form.sku')} />
+                     label={t('app.admin.store.product_form.sku')}
+                     className='span-3' />
         </div>
-        <FormInput id="slug"
-                   register={register}
-                   rules={{ required: true }}
-                   formState={formState}
-                   label={t('app.admin.store.product_form.slug')} />
-        <FormSwitch control={control}
-                    id="is_active"
+        <div className="layout">
+          <FormInput id="slug"
+                    register={register}
+                    rules={{ required: true }}
                     formState={formState}
-                    label={t('app.admin.store.product_form.is_show_in_store')} />
+                    label={t('app.admin.store.product_form.slug')}
+                    className='span-7' />
+          <FormSwitch control={control}
+                      id="is_active"
+                      formState={formState}
+                      label={t('app.admin.store.product_form.is_show_in_store')}
+                      className='span-3' />
+        </div>
 
         <hr />
 
         <div className="price-data">
-          <div className="grp">
+          <div className="layout">
             <h4 className='span-7'>{t('app.admin.store.product_form.price_and_rule_of_selling_product')}</h4>
             <FormSwitch control={control}
                         id="is_active_price"
                         label={t('app.admin.store.product_form.is_active_price')}
                         tooltip={t('app.admin.store.product_form.is_active_price')}
                         defaultValue={isActivePrice}
-                        onChange={toggleIsActivePrice} />
+                        onChange={toggleIsActivePrice}
+                        className='span-3' />
           </div>
           {isActivePrice && <div className="price-fields">
-            <div className="grp">
+            <div className="flex">
               <FormInput id="amount"
                          type="number"
                          register={register}

app/frontend/src/javascript/components/store/products-list.tsx

@@ -31,20 +31,26 @@ export const ProductsList: React.FC<ProductsListProps> = ({ products, onEdit, on
   };
 
   return (
-    <div>
+    <>
       {products.map((product) => (
-        <div key={product.id}>
-          {product.name}
-          <div className="buttons">
-            <FabButton className="edit-btn" onClick={editProduct(product)}>
-              <i className="fa fa-edit" />
-            </FabButton>
-            <FabButton className="delete-btn" onClick={deleteProduct(product.id)}>
-              <i className="fa fa-trash" />
-            </FabButton>
+        <div className='products-list-item' key={product.id}>
+          <div className='itemInfo'>
+            <img src='https://via.placeholder.com/300' alt='' className='itemInfo-thumbnail' />
+            <p className="itemInfo-name">{product.name}</p>
+          </div>
+          <div className=''></div>
+          <div className='actions'>
+            <div className='manage'>
+              <FabButton className='edit-btn' onClick={editProduct(product)}>
+                <i className='fas fa-pen' />
+              </FabButton>
+              <FabButton className='delete-btn' onClick={deleteProduct(product.id)}>
+                <i className='fa fa-trash' />
+              </FabButton>
+            </div>
           </div>
         </div>
       ))}
-    </div>
+    </>
   );
 };

app/frontend/src/javascript/components/store/products.tsx

@@ -65,11 +65,46 @@ const Products: React.FC<ProductsProps> = ({ onSuccess, onError }) => {
           <FabButton className="main-action-btn" onClick={newProduct}>{t('app.admin.store.products.create_a_product')}</FabButton>
         </div>
       </header>
-      <ProductsList
-        products={products}
-        onEdit={editProduct}
-        onDelete={deleteProduct}
-      />
+      <div className='layout'>
+        <div className='products-filters span-3'>
+          <header>
+            <h3>Filtrer</h3>
+            <div className='grpBtn'>
+            <FabButton className="is-black">Clear</FabButton>
+            </div>
+          </header>
+        </div>
+        <div className='products-list span-7'>
+          <div className='status'>
+            <div className='count'>
+              <p>Result count: <span>{products.length}</span></p>
+            </div>
+            <div className="">
+              <div className='sort'>
+                <p>Display options:</p>
+              </div>
+              <div className='visibility'>
+
+              </div>
+            </div>
+          </div>
+          <div className='features'>
+            <div className='features-item'>
+              <p>feature name</p>
+              <button><i className="fa fa-times" /></button>
+            </div>
+            <div className='features-item'>
+              <p>long feature name</p>
+              <button><i className="fa fa-times" /></button>
+            </div>
+          </div>
+          <ProductsList
+            products={products}
+            onEdit={editProduct}
+            onDelete={deleteProduct}
+          />
+        </div>
+      </div>
     </div>
   );
 };

app/frontend/src/stylesheets/modules/base/fab-button.scss

@@ -62,4 +62,15 @@
       opacity: 0.75;
     }
   }
+  &.is-black {
+    border-color: var(--gray-hard-darkest);
+    background-color: var(--gray-hard-darkest);
+    color: var(--gray-soft-lightest);
+    &:hover {
+      border-color: var(--gray-hard-darkest);
+      background-color: var(--gray-hard-darkest);
+      color: var(--gray-soft-lightest);
+      opacity: 0.75;
+    }
+  }
 }

app/frontend/src/stylesheets/modules/form/form-checklist.scss

@@ -7,7 +7,7 @@
 
   .checklist {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 1.6rem 3.2rem;
 
     .checklist-item input {

app/frontend/src/stylesheets/modules/store/products.scss

@@ -34,6 +34,19 @@
       @include title-lg;
       color: var(--gray-hard-darkest) !important;
     }
+    h3 {
+      margin: 0;
+      @include text-lg(600);
+      color: var(--gray-hard-darkest) !important;
+    }
+  }
+
+  .layout {
+    display: flex;
+    align-items: flex-end;
+    gap: 0 3.2rem;
+    .span-7 { flex: 1 1 70%; }
+    .span-3 { flex: 1 1 30%; }
   }
 
   .main-action-btn {
@@ -55,18 +68,146 @@
 
 .products {
   max-width: 1600px;
+
+  .layout {
+    align-items: flex-start;
+  }
+
+  &-filters {
+    padding-top: 1.6rem;
+    border-top: 1px solid var(--gray-soft-dark);
+  }
+
+  &-list {
+    .status {
+      padding: 1.6rem 2.4rem;
+      display: flex;
+      justify-content: space-between;
+      background-color: var(--gray-soft);
+      border-radius: var(--border-radius);
+      p { margin: 0; }
+      .count {
+        p {
+          display: flex;
+          align-items: center;
+          @include text-sm;
+          span {
+            margin-left: 1.6rem;
+            @include text-lg(600);
+          }
+        }
+      }
+    }
+    .features {
+      margin: 2.4rem 0 1.6rem;
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 1.6rem 2.4rem;
+      &-item {
+        padding-left: 1.6rem;
+        display: flex;
+        align-items: center;
+        background-color: var(--information-light);
+        border-radius: 100px;
+        color: var(--information-dark);
+        p { margin: 0; }
+        button {
+          width: 3.2rem;
+          height: 3.2rem;
+          background: none;
+          border: none;
+        }
+      }
+    }
+
+    &-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0.6rem 0.8rem;
+      border: 1px solid var(--gray-soft-dark);
+      border-radius: var(--border-radius);
+      background-color: var(--gray-soft-lightest);
+      &:not(:first-child) {
+        margin-top: 1.6rem;
+      }
+  
+      .itemInfo {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+  
+        &-thumbnail {
+          width: 4.8rem;
+          height: 4.8rem;
+          margin-right: 1.6rem;
+          object-fit: cover;
+          border-radius: var(--border-radius);
+          background-color: var(--gray-soft);
+        }
+        &-name {
+          margin: 0;
+          @include text-base;
+          font-weight: 600;
+          color: var(--gray-hard-darkest);
+        }
+      }
+  
+      .actions {
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        .manage {
+          overflow: hidden;
+          display: flex;
+          border-radius: var(--border-radius-sm);
+          button {
+            @include btn;
+            border-radius: 0;
+            color: var(--gray-soft-lightest);
+            &:hover { opacity: 0.75; }
+          }
+          .edit-btn {background: var(--gray-hard-darkest) }
+          .delete-btn {background: var(--error) }
+        }
+      }
+    }
+  }
 }
 
 .new-product,
 .edit-product {
   max-width: 1300px;
+  padding-right: 1.6rem; 
+  padding-left: 1.6rem; 
 
   .product-form {
-    .grp {
+    .flex {
       display: flex;
-      gap: 2.4rem 3.2rem;
-      .span-7 {
-        min-width: 70%;
+      flex-wrap: wrap;
+      align-items: flex-end;
+      gap: 0 3.2rem;
+      & > * {
+        flex: 1 1 320px;
+      }
+    }
+
+    .layout {
+      @media (max-width: 1023px) {
+        .span-3,
+        .span-7 {
+          flex-basis: 50%;
+        }
+      }
+      @media (max-width: 767px) {
+        flex-wrap: wrap;
+      }
+    }
+    
+    .price-data {
+      .layout {
+        align-items: center;
       }
     }
   }

app/frontend/templates/admin/store/index.html

@@ -17,7 +17,7 @@
 <section class="m-lg admin-store-manage">
   <div class="row">
 
-    <div class="col-md-12">
+    <div>
       <uib-tabset justified="true" active="tabs.active">
 
         <uib-tab heading="{{ 'app.admin.store.settings' | translate }}" index="0" select="selectTab()">

app/frontend/templates/admin/store/product_edit.html

@@ -27,7 +27,7 @@
   </div>
   <div class="row">
 
-    <div class="col-md-12">
+    <div>
       <edit-product product-id="productId" on-success="onSuccess" on-error="onError"/>
     </div>
 

app/frontend/templates/admin/store/product_new.html

@@ -27,7 +27,7 @@
   </div>
   <div class="row">
 
-    <div class="col-md-12">
+    <div>
       <new-product on-success="onSuccess" on-error="onError"/>
     </div>