--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 10.828 10.828"><g fill="none" stroke="#6b7287" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"><path d="M9.413 1.414l-8 8"/><path d="M1.413 1.414l8 8"/></g></svg>
--- /dev/null
+.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))
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.
<grid cols="4" gap="md" class="md:grid-cols-3 sm:grid-cols-2">
...
--- /dev/null
+@extends('layouts/app')
+
+@section('content')
+
+ <content class="pt-1v">
+ <text-block title-class="h1 text-6xl">
+ <slot name="title">
+ Modèle 1200<br>
+ de 1.5 kN à 900kN
+ </slot>
+ </text-block>
+
+ {{-- Product details --}}
+ <div class="flex mb-2v">
+ {{-- Product images --}}
+ <div class="product-detail-images-wrapper flex-grow" style="max-width: 348px">
+ <div class="product-detail-images-main border-gray-100 border-4 pb-100p w-full bg-center bg-contain bg-no-repeat mb-3"
+ style="background-image: url({{ asset('storage/products/1.png') }});">
+ </div>
+
+ <grid cols="3" gap="sm">
+ @for ($i = 1; $i <= 3; $i++)
+ <div class="product-detail-images-main border-gray-100 border-4 pb-100p w-full bg-center bg-contain bg-no-repeat"
+ style="background-image: url({{ asset('storage/products/1.png') }});">
+ </div>
+ @endfor
+ </grid>
+ </div>
+
+ {{-- Product text --}}
+ <text-block class="product-detail-text">
+ <ul>
+ <li>Non-linéarité ± 0.03 % pleine échelle</li>
+ <li>Compensation mécanique des efforts transverses.</li>
+ <li>Utilise des jauges de contrainte Interface auto compensées.</li>
+ <li>Compensation barométrique</li>
+ <li>Sensibilité à la température < 0.0015% / °C</li>
+ <li>Etendue de mesure de 1.25 kN à 450 kN</li>
+ <li>Protection en surcharge : 300% de la gamme de mesure</li>
+ <li>Disponible en double ponts</li>
+ </ul>
+
+ <p class="mt-4"><a href="#">Télécharger la fiche produit</a></p>
+
+ <link-button href="#">Ajouter à ma sélection</link-button>
+ </text-block>
+
+
+ </div>
+
+ </content>
+
+ <full-width class="bg-grey-100">
+ <content>
+
+ <text-block title="Produits associés" title-class="h2" />
+
+ {{-- Product Grid --}}
+ <grid cols="auto" class="products-grid">
+ @for($i = 1; $i <= 4; $i++)
+ <div class="product-grid-item bg-grey-200">
+ {{-- Image holder --}}
+ <div class="bg-white pb-100p bg-contain bg-center bg-no-repeat"
+ style="background-image: url({{ asset("storage/products/1.png") }})">
+ </div>
+
+ {{-- Product details --}}
+ <div class="p-4">
+ <h3>Modèle 1200 de 1.5 kN à 900kN</h3>
+ <ul class="text-sm">
+ <li>Étendue de mesure : 1.5 kN à 900 kN </li>
+ <li>Sortie élevée : 2 ou 4 mV/V </li>
+ <li>Précision : 0.04% à 0.07% pleine échelle</li>
+ <li>Compensé pour les efforts transverses</li>
+ </ul>
+ <p class="mt-4">
+ <a href="/products/force/123">Voir la fiche produit</a>
+ </p>
+ </div>
+ </div>
+ @endfor
+ </grid>
+
+ </content>
+ </full-width>
+@endsection
--- /dev/null
+@extends('layouts/app')
+
+@section('content')
+
+ @php
+ $category = last(explode('/', $category))
+ @endphp
+
+ <full-width padding="pb-1v">
+ <content>
+ <columns>
+ <column>
+ <img src="{{ asset('storage/uploads/images/products-intro.jpg') }}" alt="">
+ </column>
+
+ <column>
+ <text-block class="pt-2v" title_class="h1 overlap-left" :title="isset($category) ? ucfirst($category) : 'Lorem ipsum'">
+
+ <p>
+ 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.
+ </p>
+ </text-block>
+
+ </column>
+ </columns>
+ </content>
+
+ </full-width>
+
+ <full-width class="bg-grey-100" padding="pt-1v pb-2v">
+ <content class="flex relative items-start">
+
+ <div class="products-filters-wrapper sticky top-0 mr-1v pt-4 whitespace-no-wrap">
+
+ <div class="products-filters bg-white p-4">
+ <h3 class="text-base mb-2">Catégorie</h3>
+ @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)
+ <div class="flex justify-between py-1 text-sm">
+ <label for="cat_{{ $i }}">
+ <input type="checkbox" id="cat_{{ $i }}" class="mr-2">
+ {{ $category }}
+ </label>
+ <div class="products-filters-count pl-8">({{ rand(10, 95) }})</div>
+ </div>
+ @endforeach
+
+ <hr class="h-px bg-grey-200 my-4">
+
+ <h3 class="text-base mb-2">Filtre 01</h3>
+ @for ($i = 1; $i <= 5; $i++)
+ <div class="flex justify-between py-1 text-sm">
+ <label for="filter_1_{{ $i }}">
+ <input type="checkbox" id="filter_1_{{ $i }}" class="mr-2">
+ Option 0{{ $i }}
+ </label>
+ <div class="products-filters-count pl-8">({{ rand(10, 95) }})</div>
+ </div>
+ @endfor
+
+ <hr class="h-px bg-grey-200 my-4">
+
+ <h3 class="text-base mb-2">Filtre 02</h3>
+ @for ($i = 1; $i <= 5; $i++)
+ <div class="flex justify-between py-1 text-sm">
+ <label for="filter_2_{{ $i }}">
+ <input type="checkbox" id="filter_2_{{ $i }}" class="mr-2">
+ Option {{ chr($i + 64) }}
+ </label>
+ <div class="products-filters-count pl-8">({{ rand(10, 95) }})</div>
+ </div>
+ @endfor
+
+ </div>
+ </div>
+
+ {{-- Main Products Grid Area --}}
+ <div class="products-grid flex-grow">
+
+ {{-- Grid summary header --}}
+ <div class="products-grid-summary
+ sticky top-0 z-10 bg-grey-100 pt-4 pb-4 flex justify-between items-center
+ md:block">
+ <div class="products-grid-active-filters flex-grow text-sm">
+ <ul class="flex flex-wrap -mb-3 md:mb-0">
+ <li class="bg-white whitespace-no-wrap py-2 px-4 rounded-full mr-3 mb-3 hover:bg-grey-200 cursor-pointer">
+ Capteur de force - Galette
+ <img src="{{ asset('images/icon-close.svg') }}" alt="Remove" class="inline-block ml-3">
+ </li>
+ <li class="bg-white whitespace-no-wrap py-2 px-4 rounded-full mr-3 mb-3 hover:bg-grey-200 cursor-pointer">
+ Option 01
+ <img src="{{ asset('images/icon-close.svg') }}" alt="Remove" class="inline-block ml-3">
+ </li>
+ <li class="bg-white whitespace-no-wrap py-2 px-4 rounded-full mr-3 mb-3 hover:bg-grey-200 cursor-pointer">
+ Option C
+ <img src="{{ asset('images/icon-close.svg') }}" alt="Remove" class="inline-block ml-3">
+ </li>
+ <li class="bg-white whitespace-no-wrap py-2 px-4 rounded-full mr-3 mb-3 hover:bg-grey-200 cursor-pointer">
+ Option D
+ <img src="{{ asset('images/icon-close.svg') }}" alt="Remove" class="inline-block ml-3">
+ </li>
+ </ul>
+ </div>
+ <div class="products-grid-result-count pl-4 md:pl-0 font-display whitespace-no-wrap">12 Résultats</div>
+ </div>
+
+ {{-- Product Grid --}}
+ <grid cols="auto" class="products-grid mt-6">
+ @for($i = 1; $i <= 12; $i++)
+ <div class="product-grid-item bg-grey-200">
+ {{-- Image holder --}}
+ <div class="bg-white pb-100p bg-contain bg-center bg-no-repeat"
+ style="background-image: url({{ asset("storage/products/1.png") }})">
+ </div>
+
+ {{-- Product details --}}
+ <div class="p-4">
+ <h3>Modèle 1200 de 1.5 kN à 900kN</h3>
+ <ul class="text-sm">
+ <li>Étendue de mesure : 1.5 kN à 900 kN </li>
+ <li>Sortie élevée : 2 ou 4 mV/V </li>
+ <li>Précision : 0.04% à 0.07% pleine échelle</li>
+ <li>Compensé pour les efforts transverses</li>
+ </ul>
+ <p class="mt-4">
+ <a href="/products/force/123">Voir la fiche produit</a>
+ </p>
+ </div>
+ </div>
+ @endfor
+ </grid>
+
+ </div>
+
+
+ </content>
+ </full-width>
+@endsection
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'));
},
maxWidth: {
'text': '480px' // Or 30rem?
+ },
+ padding: {
+ '100p': '100%', // Used for proportional padding to make a square
}
},
},
// }
// }
})
- .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()) {
projects / pmi.git / commitdiff
