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'));
}
'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'),
]
]
];
--- /dev/null
+<svg xmlns="http://www.w3.org/2000/svg" width="75" height="75" viewBox="0 0 75 75">
+ <g transform="translate(-1522 -3611)">
+ <rect width="75" height="75" transform="translate(1522 3611)" fill="#ff078b"/>
+ <line x2="30.767" y2="30.767" transform="translate(1544.117 3632.117)" fill="none" stroke="#fff" stroke-width="4"/>
+ <line x2="30.767" y2="30.767" transform="translate(1574.883 3632.117) rotate(90)" fill="none" stroke="#fff" stroke-width="4"/>
+ </g>
+</svg>
+above($breakpoint-admin-bar)
position: relative
- #mobile-menu, .lity-close
+ #mobile-menu
top: $admin-bar-height
+below($breakpoint-admin-bar)
+@import '~lity/dist/lity.css'
+
//=== Lity Lightbox customisations
.lity
background-color: rgba(#2E2C40, 0.8)
.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
{{ __("Envoyez-nous l'ensemble des fichiers contenus sur votre CD :", "ccv") }}
</p>
- <a href="https://uploader.purview.net/client/scmgeneste/" target="_blank" class="btn mt-6" data-lity data-update-imagery-type>{{ __('Parcourir', 'ccv') }}</a>
+ <a href="#purview_uploader" target="_blank" class="btn mt-6" data-lity data-update-imagery-type>{{ __('Parcourir', 'ccv') }}</a>
+
+ {{-- IMAGE UPLOAD POPUP --}}
+ <div id="purview_uploader" class="lity-hide spaced">
+
+ <h3 class="text-lg font-body font-normal">
+ {{ __('Envoyez vos images au CCV Montpellier en vue d’une téléconsultation', 'ccv') }}
+ </h3>
+
+ <p>
+ {{ __('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') }}
+ </p>
+
+ <p>
+ {{ __('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') }}
+ <br>
+ {{ __('Le téléchargement des images se fait automatiquement.', 'ccv') }}
+ </p>
+
+ <p>
+ {{ __('Les fichiers de scanner et IRM comportent souvent de nombreuses images et le téléchargement peut prendre plusieurs minutes, c’est normal.', 'ccv') }}
+ </p>
+
+ <iframe class="block w-full overflow-hidden" height="320" src="https://uploader.purview.net/client/scmgeneste/" scrolling="no" data-service="uploader.purview"></iframe>
+
+ <p>
+ {{ __('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') }}
+ </p>
+
+ <p>
+ {{ __('4. Vous pouvez fermer cette fenêtre et terminer de compléter le formulaire de demande d’avis médical.', 'ccv') }}
+ </p>
+ </div>
+
</div>
</div>
// Source path helper
const src = path => `resources/assets/${path}`;
+const stylusConfig = {
+ use: [
+ require('rupture')()
+ ]
+};
+
+const stylusOptions = {
+ postCss: [
+ require('lost'),
+ ]
+};
// Public Path
mix
});
// 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');
// 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`)
whitelistPatterns: [
...whitelistPatterns,
/mm.*/, // MMenu
+ /lity.*/, // Lity lightbox
],
});
projects / ccv-wordpress.git / commitdiff
