From: Stephen Cameron Date: Wed, 22 Apr 2020 16:57:01 +0000 (+0200) Subject: WIP #3445 @8 X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=2e5bbe91d6156953fd7b59c81e525b17602765c1;p=ccv-wordpress.git WIP #3445 @8 --- diff --git a/wp-content/mu-plugins/cube/src/Forms/Consultation.php b/wp-content/mu-plugins/cube/src/Forms/Consultation.php index 92ff4ee..e46e376 100644 --- a/wp-content/mu-plugins/cube/src/Forms/Consultation.php +++ b/wp-content/mu-plugins/cube/src/Forms/Consultation.php @@ -12,7 +12,7 @@ class Consultation extends Base wp_enqueue_script('ccv-consultation', asset('scripts/consultation.js'), ['jquery'], null, true); wp_enqueue_script('lity', asset('scripts/lity.js'), ['jquery'], null, true); - wp_enqueue_style('lity-css', asset('styles/lity.min.css')); + wp_enqueue_style('lity-css', asset('styles/lity.css')); } diff --git a/wp-content/themes/CCV/config/assets.php b/wp-content/themes/CCV/config/assets.php index b323db1..e72573e 100644 --- a/wp-content/themes/CCV/config/assets.php +++ b/wp-content/themes/CCV/config/assets.php @@ -36,7 +36,7 @@ return [ 'strategy' => 'relative', 'path' => get_theme_file_path('/dist'), 'uri' => get_theme_file_uri('/dist'), - 'manifest' => get_theme_file_path('/dist/assets.json'), + 'manifest' => get_theme_file_path('/dist/mix-manifest.json'), ] ] ]; diff --git a/wp-content/themes/CCV/resources/assets/images/lightbox-close.svg b/wp-content/themes/CCV/resources/assets/images/lightbox-close.svg new file mode 100644 index 0000000..6611208 --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/images/lightbox-close.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/wp-content/themes/CCV/resources/assets/styles/common/admin.styl b/wp-content/themes/CCV/resources/assets/styles/common/admin.styl index 51dd41c..27134dc 100644 --- a/wp-content/themes/CCV/resources/assets/styles/common/admin.styl +++ b/wp-content/themes/CCV/resources/assets/styles/common/admin.styl @@ -38,7 +38,7 @@ body.admin-bar +above($breakpoint-admin-bar) position: relative - #mobile-menu, .lity-close + #mobile-menu top: $admin-bar-height +below($breakpoint-admin-bar) diff --git a/wp-content/themes/CCV/resources/assets/styles/components/lity-lightbox.styl b/wp-content/themes/CCV/resources/assets/styles/components/lity-lightbox.styl index 6dfa755..89b380d 100644 --- a/wp-content/themes/CCV/resources/assets/styles/components/lity-lightbox.styl +++ b/wp-content/themes/CCV/resources/assets/styles/components/lity-lightbox.styl @@ -1,3 +1,5 @@ +@import '~lity/dist/lity.css' + //=== Lity Lightbox customisations .lity background-color: rgba(#2E2C40, 0.8) @@ -6,3 +8,70 @@ .lity-active body overflow: hidden height: 100vw + +.lity-wrap + @apply flex items-center justify-center + + &:before // Not needed since we're using flexbox, also removes gap on small screens + display: none + +.lity-container + box-shadow: 0 0 8px rgba(0, 0, 0, 0.6) + + // Extra specificity needed here because Webpack seems to import CSS from node_modules in wrong order when in dev mode + .lity-content + horizontal-spacing(5vw) + constrain(padding-top, 5vw) + constrain(padding-bottom, 3.25vw) + background-color: #fff + width: 90vw // 5% gap on either side + max-width: 980px + max-height: 90vh !important // Gives 5% top and bottom gap + overflow-y: auto // Scroll internally if content is too tall for screen + + +below(600px) + width: 100vw + height: 100vh + max-height: 100vh !important + + &:after + box-shadow: none + + // Lity applies a max-height inline to the lightbox internal content + // but that stops the padding at the bottom working so we unset it + > *:first-child + max-height: none !important + + .lity-close + @apply bg-pink + position: absolute + top: 0 + right: 0 + constrain(width, 3.75vw) + constrain(height, 3.75vw) + opacity: 1 + transition: opacity 0.3s ease + transition-delay: 0.15s // Slight delay to give content box time to grow enough + + // Hide while loading and closing + .lity-loading &, + .lity-closed & + opacity: 0 + + // When lightbox is closing there's no transition or delay + // because we want the button to disappear immediately so + // we don't get a weird overlap with shrinking content box + .lity-closed & + transition-duration: 0s + transition-delay: 0s + + &:after + content: '' + position: absolute + top: 0 + left: 0 + width: 100% + height: @width + background: url('../images/lightbox-close.svg') top right no-repeat + background-size: contain + z-index: 10 diff --git a/wp-content/themes/CCV/resources/views/forms/consultation.blade.php b/wp-content/themes/CCV/resources/views/forms/consultation.blade.php index 3f81f07..4c98792 100644 --- a/wp-content/themes/CCV/resources/views/forms/consultation.blade.php +++ b/wp-content/themes/CCV/resources/views/forms/consultation.blade.php @@ -136,7 +136,40 @@ {{ __("Envoyez-nous l'ensemble des fichiers contenus sur votre CD :", "ccv") }}

- {{ __('Parcourir', 'ccv') }} + {{ __('Parcourir', 'ccv') }} + + {{-- IMAGE UPLOAD POPUP --}} +
+ +

+ {{ __('Envoyez vos images au CCV Montpellier en vue d’une téléconsultation', 'ccv') }} +

+ +

+ {{ __('1. Munissez-vous du CD de votre examen (scanner, IRM, etc) et copiez-le sur votre ordinateur. Un dossier avec le nom du CD va être automatiquement généré.', 'ccv') }} +

+ +

+ {{ __('2. Glissez ce dossier dans la zone ci-dessous. Ou cliquez sur le bouton « Folders and Disks » et sélectionnez le dossier entier correspondant à votre CD.', 'ccv') }} +
+ {{ __('Le téléchargement des images se fait automatiquement.', 'ccv') }} +

+ +

+ {{ __('Les fichiers de scanner et IRM comportent souvent de nombreuses images et le téléchargement peut prendre plusieurs minutes, c’est normal.', 'ccv') }} +

+ + + +

+ {{ __('3. Une fois vos images envoyées, la barre de chargement disparait et le descriptif des images apparaît. Le CCV Montpellier aura accès de son côté à vos images.', 'ccv') }} +

+ +

+ {{ __('4. Vous pouvez fermer cette fenêtre et terminer de compléter le formulaire de demande d’avis médical.', 'ccv') }} +

+
+ diff --git a/wp-content/themes/CCV/webpack.mix.js b/wp-content/themes/CCV/webpack.mix.js index 6b84e37..860acca 100644 --- a/wp-content/themes/CCV/webpack.mix.js +++ b/wp-content/themes/CCV/webpack.mix.js @@ -15,6 +15,17 @@ const publicPath = path => `${mix.config.publicPath}/${path}`; // Source path helper const src = path => `resources/assets/${path}`; +const stylusConfig = { + use: [ + require('rupture')() + ] +}; + +const stylusOptions = { + postCss: [ + require('lost'), + ] +}; // Public Path mix @@ -32,16 +43,7 @@ mix.browserSync({ }); // Styles -mix.stylus(src`styles/app.styl`, 'styles', { - use: [ - require('rupture')() - ] -}).options({ - postCss: [ - require('lost'), - ] - }) - .tailwind(); +mix.stylus(src`styles/app.styl`, 'styles', stylusConfig).options(stylusOptions).tailwind(); // Separate resources for Flatpickr since it is only needed on specific pages mix.stylus(src`styles/flatpickr.styl`, 'styles'); @@ -62,7 +64,7 @@ mix.js(src`scripts/app.js`, 'scripts') // Lity lightbox mix.copy('node_modules/lity/dist/lity.js', publicPath`scripts`); -mix.copy('node_modules/lity/dist/lity.min.css', publicPath`styles`); +mix.stylus(src`styles/components/lity-lightbox.styl`, 'styles/lity.css', stylusConfig).options(stylusOptions).tailwind(); // Assets mix.copyDirectory(src`images`, publicPath`images`) @@ -124,5 +126,6 @@ mix.purgeCss({ whitelistPatterns: [ ...whitelistPatterns, /mm.*/, // MMenu + /lity.*/, // Lity lightbox ], });