From 98e10631d1c8f52d2cbaad41c2bb2450c302b69e Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Tue, 4 Jun 2019 22:07:45 +0200 Subject: [PATCH] WIP #2738 @8 --- public/images/icon-close-thin.svg | 1 + public/images/icon-close.svg | 2 +- public/images/pmi-logo.svg | 28 +---------- resources/js/app.js | 16 ++++++- resources/js/components/Search.vue | 9 ++-- resources/styles/components/cart.styl | 35 +++++++++++++- resources/styles/components/text-block.styl | 7 ++- .../views/components/text-block.blade.php | 5 +- resources/views/layouts/app.blade.php | 2 + .../views/pages/product-detail.blade.php | 11 +++-- resources/views/pages/products.blade.php | 2 +- resources/views/partials/cart.blade.php | 4 +- resources/views/partials/header.blade.php | 48 +++++++++++++++++-- tailwind.config.js | 1 + 14 files changed, 124 insertions(+), 47 deletions(-) create mode 100644 public/images/icon-close-thin.svg diff --git a/public/images/icon-close-thin.svg b/public/images/icon-close-thin.svg new file mode 100644 index 0000000..4844901 --- /dev/null +++ b/public/images/icon-close-thin.svg @@ -0,0 +1 @@ + diff --git a/public/images/icon-close.svg b/public/images/icon-close.svg index a120653..ad0d1de 100644 --- a/public/images/icon-close.svg +++ b/public/images/icon-close.svg @@ -1 +1 @@ - + diff --git a/public/images/pmi-logo.svg b/public/images/pmi-logo.svg index e36e6db..8e375cf 100644 --- a/public/images/pmi-logo.svg +++ b/public/images/pmi-logo.svg @@ -1,27 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - + diff --git a/resources/js/app.js b/resources/js/app.js index 962c369..048f8d4 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -27,5 +27,19 @@ files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files( */ const app = new Vue({ - el: '#app' + el: '#app', + + data: { + showSearchBar: false + }, + + methods: { + // Todo: find a better way to structure this with Vue + openCart() { + document.body.classList.add('cart-open'); + } + } + + + }); diff --git a/resources/js/components/Search.vue b/resources/js/components/Search.vue index d3ee9b9..34ce91c 100644 --- a/resources/js/components/Search.vue +++ b/resources/js/components/Search.vue @@ -27,13 +27,16 @@ export default { data() { - return { - visible: false - } + return {} }, mounted() { console.log('Search component mounted.') + }, + + props: ['visible'], + methods: { + } } diff --git a/resources/styles/components/cart.styl b/resources/styles/components/cart.styl index 50cd81e..a6966fe 100644 --- a/resources/styles/components/cart.styl +++ b/resources/styles/components/cart.styl @@ -1,4 +1,4 @@ -.cart +.cart-header &-title @apply mr-4 @@ -17,3 +17,36 @@ font-size: 14px padding-left: 11px padding-right: 4px + + &-popout + display: none + position: absolute + top: 0 + constrain(right, 5vw) + width: 450px + max-height: 100vh + background-color: #fff + + &-title + background-color: #314D6E + height: 134px // Todo: handle this when header is smaller (on scroll down) + + &-content + max-height: calc(100vh - 134px - 120px) + overflow-y: auto + +// Show cart popout when .cart-open is applied to body +.cart-open + .cart-header-popout + display: block + + // Also show overlay under cart popout + .body-overlay + position: fixed + top: 0 + right: 0 + bottom: 0 + left: 0 + z-index: 15 + background-color: theme('colors.navy') + opacity: 0.1 diff --git a/resources/styles/components/text-block.styl b/resources/styles/components/text-block.styl index 823da83..011bcf7 100644 --- a/resources/styles/components/text-block.styl +++ b/resources/styles/components/text-block.styl @@ -1,8 +1,11 @@ .text-block +below($breakpoint-columns) - padding-left: 0 - padding-right: 0 + // If padding hasn't been customised, this class will be + // set and we can assume the padding should be reset + &.text-block-default-padding + padding-left: 0 + padding-right: 0 &-body @apply max-w-text diff --git a/resources/views/components/text-block.blade.php b/resources/views/components/text-block.blade.php index 5d43db7..5c8cae5 100644 --- a/resources/views/components/text-block.blade.php +++ b/resources/views/components/text-block.blade.php @@ -2,14 +2,15 @@ @php // Default classes $class = $class ?? ''; - $padding = $padding ?? 'pl-2v'; + $padding = $padding ?? 'text-block-default-padding pl-2v'; + $titleTag = $titleTag ?? 'h2'; $titleClass = $titleClass ?? 'h1'; @endphp
@isset($title) -

{{ $title }}

+ <{{ $titleTag }} class="{{ $titleClass }}">{{ $title }} @endisset
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php index a51dec7..8fd674c 100644 --- a/resources/views/layouts/app.blade.php +++ b/resources/views/layouts/app.blade.php @@ -32,6 +32,8 @@ @include('partials.footer')
+
+ @include('cubist::body.end') diff --git a/resources/views/pages/product-detail.blade.php b/resources/views/pages/product-detail.blade.php index 5c73343..dd3b8ba 100644 --- a/resources/views/pages/product-detail.blade.php +++ b/resources/views/pages/product-detail.blade.php @@ -3,7 +3,7 @@ @section('content') - + Modèle 1200
de 1.5 kN à 900kN @@ -11,7 +11,7 @@ {{-- Product details --}} -
+
{{-- Product images --}}
{{-- Product text --}} - +
  • Non-linéarité ± 0.03 % pleine échelle
  • Compensation mécanique des efforts transverses.
    • @@ -42,7 +42,10 @@

    Télécharger la fiche produit

    - Ajouter à ma sélection + Ajouter à ma sélection + + ? + diff --git a/resources/views/pages/products.blade.php b/resources/views/pages/products.blade.php index 1dea93c..6795090 100644 --- a/resources/views/pages/products.blade.php +++ b/resources/views/pages/products.blade.php @@ -14,7 +14,7 @@ - +

    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. diff --git a/resources/views/partials/cart.blade.php b/resources/views/partials/cart.blade.php index 89f4ae4..1292c2a 100644 --- a/resources/views/partials/cart.blade.php +++ b/resources/views/partials/cart.blade.php @@ -1,2 +1,2 @@ -My Selection -0 +My Selection +0 diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php index f4a150a..60f5fe3 100644 --- a/resources/views/partials/header.blade.php +++ b/resources/views/partials/header.blade.php @@ -11,15 +11,57 @@

    @include('partials.nav') - @svg('search', 'nav-search-icon text-white fill-current hover:text-blue cursor-pointer') + + @svg('search', 'nav-search-icon') +
    -
    +
    @include('partials.cart')
    +
    +
    + + {{ __('My Selection') }} + + + + @svg('icon-close-thin') + +
    +
    + + @for ($i = 1; $i <= 6; $i++) +
    +
    +
    +
    +
    Capteur de force
    Modèle 1220
    +
    + Quantité +
    + - + 3 + + +
    +
    + + Supprimer + +
    +
    + @endfor + +
    +
    + Obtenir un devis +
    +
    +
    - + diff --git a/tailwind.config.js b/tailwind.config.js index 96c42cd..d51ceec 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -17,6 +17,7 @@ module.exports = { 'navy': '#152F4E', 'navy-dark': '#0C213A', 'blue': '#0EAADA', + 'red': '#F81E60', 'grey': { '100': '#F7F8FC', '200': '#EEF1F8', -- 2.39.5