From: Stephen Cameron Date: Mon, 3 Jun 2019 16:19:30 +0000 (+0200) Subject: Category and product detail pages. WIP #2767 @6.5 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=dd4988fe13cffebd174eae06a52b2f2f197764fe;p=pmi.git Category and product detail pages. WIP #2767 @6.5 --- diff --git a/public/images/icon-close.svg b/public/images/icon-close.svg new file mode 100644 index 0000000..a120653 --- /dev/null +++ b/public/images/icon-close.svg @@ -0,0 +1 @@ + diff --git a/resources/styles/components/products.styl b/resources/styles/components/products.styl new file mode 100644 index 0000000..fe3c425 --- /dev/null +++ b/resources/styles/components/products.styl @@ -0,0 +1,11 @@ +.products + + // Grid view of products + &-grid + // When in auto grid mode, make the minimum width a bit + // larger so we end up with 3 cols at the largest size. + // We don't need breakpoints because CSS Grid will + // automatically change the number of columns based + // on this min-width setting... + &.grid-cols-auto + grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)) diff --git a/resources/views/components/grid.blade.php b/resources/views/components/grid.blade.php index 2f47abb..078086e 100644 --- a/resources/views/components/grid.blade.php +++ b/resources/views/components/grid.blade.php @@ -5,10 +5,6 @@ columns as there are child elements until a minimum width for each column is hit, then the columns will start to wrap - Possible column classes (listed here so PurgeCSS doesn't strip them): - grid-cols-auto (default) - grid-cols-1, grid-cols-2, grid-cols-3, grid-cols-4 - eg. ... diff --git a/resources/views/pages/product-detail.blade.php b/resources/views/pages/product-detail.blade.php new file mode 100644 index 0000000..5c73343 --- /dev/null +++ b/resources/views/pages/product-detail.blade.php @@ -0,0 +1,86 @@ +@extends('layouts/app') + +@section('content') + + + + + Modèle 1200
+ de 1.5 kN à 900kN + + + + {{-- Product details --}} +
+ {{-- Product images --}} +
+
+
+ + + @for ($i = 1; $i <= 3; $i++) +
+
+ @endfor + +
+ + {{-- Product text --}} + +
    +
  • Non-linéarité ± 0.03 % pleine échelle
    • +
  • Compensation mécanique des efforts transverses.
    • +
  • Utilise des jauges de contrainte Interface auto compensées.
    • +
  • Compensation barométrique
    • +
  • Sensibilité à la température < 0.0015% / °C
    • +
  • Etendue de mesure de 1.25 kN à 450 kN
    • +
  • Protection en surcharge : 300% de la gamme de mesure
    • +
  • Disponible en double ponts
    • +
+ +

Télécharger la fiche produit

+ + Ajouter à ma sélection + + + +
+ + + + + + + + + {{-- Product Grid --}} + + @for($i = 1; $i <= 4; $i++) +
+ {{-- Image holder --}} +
+
+ + {{-- Product details --}} +
+

Modèle 1200 de 1.5 kN à 900kN

+
    +
  • Étendue de mesure : 1.5 kN à 900 kN
    • +
  • Sortie élevée : 2 ou 4 mV/V
    • +
  • Précision : 0.04% à 0.07% pleine échelle
    • +
  • Compensé pour les efforts transverses
    • +
+

+ Voir la fiche produit +

+
+
+ @endfor + + + + +@endsection diff --git a/resources/views/pages/products.blade.php b/resources/views/pages/products.blade.php new file mode 100644 index 0000000..1dea93c --- /dev/null +++ b/resources/views/pages/products.blade.php @@ -0,0 +1,149 @@ +@extends('layouts/app') + +@section('content') + + @php + $category = last(explode('/', $category)) + @endphp + + + + + + + + + + + +

+ La mesure de force se réalise avec les capteurs de force ou des cellules de charge. Ils sont constitués d'un corps d'épreuve sur lequel sont collées des jauges de contrainte. La mesure de force s'exprime en Newton. +

+ + + + + + + + + + + +
+ +
+

Catégorie

+ @php + $categories = [ + 'Capteur de force - Galette', + 'Capteur en "S" et miniatures', + 'Capteur bouton inox', + 'Conditionneurs et acquistion', + 'Capteur 3 axes', + 'Capteur 6 axes', + 'Plateforme 6 axes', + ]; + @endphp + + @foreach ($categories as $i => $category) +
+ +
({{ rand(10, 95) }})
+
+ @endforeach + +
+ +

Filtre 01

+ @for ($i = 1; $i <= 5; $i++) +
+ +
({{ rand(10, 95) }})
+
+ @endfor + +
+ +

Filtre 02

+ @for ($i = 1; $i <= 5; $i++) +
+ +
({{ rand(10, 95) }})
+
+ @endfor + +
+
+ + {{-- Main Products Grid Area --}} +
+ + {{-- Grid summary header --}} +
+
+
    +
  • + Capteur de force - Galette + Remove +
    • +
  • + Option 01 + Remove +
    • +
  • + Option C + Remove +
    • +
  • + Option D + Remove +
    • +
+
+
12 Résultats
+
+ + {{-- Product Grid --}} + + @for($i = 1; $i <= 12; $i++) +
+ {{-- Image holder --}} +
+
+ + {{-- Product details --}} +
+

Modèle 1200 de 1.5 kN à 900kN

+
    +
  • Étendue de mesure : 1.5 kN à 900 kN
    • +
  • Sortie élevée : 2 ou 4 mV/V
    • +
  • Précision : 0.04% à 0.07% pleine échelle
    • +
  • Compensé pour les efforts transverses
    • +
+

+ Voir la fiche produit +

+
+
+ @endfor + + +
+ + + + +@endsection diff --git a/routes/web.php b/routes/web.php index 5b0ec82..2fb07dd 100644 --- a/routes/web.php +++ b/routes/web.php @@ -15,6 +15,14 @@ Route::get('/', function () { return view('pages.home'); }); +Route::get('/products/{category}/{id}', function ($category, $id = null) { + return view('pages.product-detail', compact('category', 'id')); +})->where(['category' => '.*']); + +Route::get('/products/{category}', function ($category) { + return view('pages.products', compact('category')); +})->where(['name' => '.*']); + // Temporary catch all for testing nav and breadcrumbs Route::get('/{name}', function ($name) { return view('pages.test', compact('name')); diff --git a/tailwind.config.js b/tailwind.config.js index e7e88d8..96c42cd 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -33,6 +33,9 @@ module.exports = { }, maxWidth: { 'text': '480px' // Or 30rem? + }, + padding: { + '100p': '100%', // Used for proportional padding to make a square } }, }, diff --git a/webpack.mix.js b/webpack.mix.js index 9bb4975..dcff99b 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -34,7 +34,9 @@ mix.js('resources/js/app.js', 'public/js') // } // } }) - .purgeCss(); + .purgeCss({ + whitelistPatterns: [/grid-.*/], // Don't purge the grid-* custom classes since they can be used dynamically + }); // Enable unique hashed filenames when in production if (mix.inProduction()) {