style calendar strip sessions mobile
This commit is contained in:
isUnknown
parent
84aea86cdb
commit
166427783a
10 changed files with 98 additions and 35 deletions
|
|
@ -100,6 +100,7 @@
|
|||
|
||||
@media screen and (max-width: 800px) {
|
||||
.calendar-strip {
|
||||
--padding-vertical: 1rem;
|
||||
margin-top: 2rem;
|
||||
border-top: var(--border);
|
||||
}
|
||||
|
|
@ -137,4 +138,20 @@
|
|||
.calendar-strip__days .week > ul {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.calendar-strip .session {
|
||||
grid-template-columns: 1.2fr 2fr 0.4fr;
|
||||
column-gap: 3vw;
|
||||
}
|
||||
|
||||
.calendar-strip .session .ticket-link > figure {
|
||||
margin-right: 0;
|
||||
}
|
||||
.calendar-strip .session .ticket-link svg {
|
||||
width: 2rem;
|
||||
}
|
||||
.session__info--book-sold-out,
|
||||
.session__info--book-free {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -208,6 +208,11 @@ img.show {
|
|||
.mobile-group {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.desktop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.logo {
|
||||
font-size: 6vw;
|
||||
}
|
||||
|
|
|
|||
5
assets/js/alpine.min.js
vendored
Normal file
5
assets/js/alpine.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
assets/js/dayjs-fr.js
Normal file
1
assets/js/dayjs-fr.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("dayjs")):"function"==typeof define&&define.amd?define(["dayjs"],n):(e="undefined"!=typeof globalThis?globalThis:e||self).dayjs_locale_fr=n(e.dayjs)}(this,(function(e){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=n(e),i={name:"fr",weekdays:"dimanche_lundi_mardi_mercredi_jeudi_vendredi_samedi".split("_"),weekdaysShort:"dim._lun._mar._mer._jeu._ven._sam.".split("_"),weekdaysMin:"di_lu_ma_me_je_ve_sa".split("_"),months:"janvier_février_mars_avril_mai_juin_juillet_août_septembre_octobre_novembre_décembre".split("_"),monthsShort:"janv._févr._mars_avr._mai_juin_juil._août_sept._oct._nov._déc.".split("_"),weekStart:1,yearStart:4,formats:{LT:"HH:mm",LTS:"HH:mm:ss",L:"DD/MM/YYYY",LL:"D MMMM YYYY",LLL:"D MMMM YYYY HH:mm",LLLL:"dddd D MMMM YYYY HH:mm"},relativeTime:{future:"dans %s",past:"il y a %s",s:"quelques secondes",m:"une minute",mm:"%d minutes",h:"une heure",hh:"%d heures",d:"un jour",dd:"%d jours",M:"un mois",MM:"%d mois",y:"un an",yy:"%d ans"},ordinal:function(e){return""+e+(1===e?"er":"")}};return t.default.locale(i,null,!0),i}));
|
||||
1
assets/js/dayjs-weekOfYear.js
Normal file
1
assets/js/dayjs-weekOfYear.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).dayjs_plugin_weekOfYear=t()}(this,(function(){"use strict";var e="week",t="year";return function(i,n,r){var f=n.prototype;f.week=function(i){if(void 0===i&&(i=null),null!==i)return this.add(7*(i-this.week()),"day");var n=this.$locale().yearStart||1;if(11===this.month()&&this.date()>25){var f=r(this).startOf(t).add(1,t).date(n),s=r(this).endOf(e);if(f.isBefore(s))return 1}var a=r(this).startOf(t).date(n).startOf(e).subtract(1,"millisecond"),o=this.diff(a,e,!0);return o<0?r(this).startOf("week").week():Math.ceil(o)},f.weeks=function(e){return void 0===e&&(e=null),this.week(e)}}}));
|
||||
1
assets/js/dayjs.min.js
vendored
Normal file
1
assets/js/dayjs.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
13
assets/js/swiper-bundle.min.css
vendored
Normal file
13
assets/js/swiper-bundle.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
14
assets/js/swiper-bundle.min.js
vendored
Normal file
14
assets/js/swiper-bundle.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -162,37 +162,43 @@
|
|||
:style="'--color: ' + session.color"
|
||||
class="session"
|
||||
>
|
||||
<a class="session__event-link" :href="session.eventUrl" title="En savoir plus"></a>
|
||||
<div class="session__info session__info--slot">
|
||||
<p x-html="`${session.day} ${monthName}`"></p>
|
||||
<p x-html="session.time"></p>
|
||||
<div class="left-column mobile-group">
|
||||
<a class="session__event-link" :href="session.eventUrl" title="En savoir plus"></a>
|
||||
<div class="session__info session__info--slot">
|
||||
<p x-html="`${session.day} ${monthName}`"></p>
|
||||
<p x-html="`session.time"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="session__info session__info--title">
|
||||
<p><strong x-html="`<strong>${session.title}</strong>`"></strong></p>
|
||||
<p x-html="session.authors"></p>
|
||||
<div class="middle-column mobile-group">
|
||||
<div class="session__info session__info--title">
|
||||
<p><strong x-html="`<strong>${session.title}</strong>`"></strong></p>
|
||||
<p x-html="session.authors"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div x-text="session.duration ? session.duration : ''" class="session__info session__info--duration desktop"></div>
|
||||
<div x-text="`${session.place}`" class="session__info session__info--place desktop"></div>
|
||||
<div class="right-column mobile-group">
|
||||
<template x-if="!session.ticketingUrl">
|
||||
<div class="session__info session__info--book session__info--book-free">
|
||||
<a class="ticket-link" target="_blank" title="Entrée libre" disabled><?php snippet('ticket') ?> <span class="desktop">Entrée libre</span></a>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="session.bookableStock === 0">
|
||||
<div class="session__info session__info--book session__info--book-sold-out">
|
||||
<a class="ticket-link" title="Plus de places disponibles" disabled><?php snippet('ticket') ?> <span class="desktop">Complet</span></a>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="session.bookableStock > stockThreshold">
|
||||
<div class="session__info session__info--book session__info--book-open">
|
||||
<a class="ticket-link" title="Plateforme de réservation" :href="session.ticketingUrl" target="_blank"><?php snippet('ticket') ?> <span class="desktop">Billetterie</span></a>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="session.bookableStock !== 0 && session.bookableStock < stockThreshold">
|
||||
<div class="session__info session__info--book session__info--book-few-places">
|
||||
<a class="ticket-link" title="Plateforme de réservation" :href="session.ticketingUrl" target="_blank"><?php snippet('ticket') ?> <span class="desktop">Plus que quelques places !</span></a>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<div x-text="session.duration ? session.duration : ''" class="session__info session__info--duration"></div>
|
||||
<div x-text="`${session.place}`" class="session__info session__info--place"></div>
|
||||
<template x-if="!session.ticketingUrl">
|
||||
<div class="session__info session__info--book">
|
||||
<a class="ticket-link" target="_blank" title="Entrée libre" disabled><?php snippet('ticket') ?> Entrée libre</a>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="session.bookableStock === 0">
|
||||
<div class="session__info session__info--book">
|
||||
<a class="ticket-link" title="Plus de places disponibles" disabled><?php snippet('ticket') ?> Complet</a>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="session.bookableStock > stockThreshold">
|
||||
<div class="session__info">
|
||||
<a class="ticket-link" title="Plateforme de réservation" :href="session.ticketingUrl" target="_blank"><?php snippet('ticket') ?> Billetterie</a>
|
||||
</div>
|
||||
</template>
|
||||
<template x-if="session.bookableStock !== 0 && session.bookableStock < stockThreshold">
|
||||
<div class="session__info">
|
||||
<a class="ticket-link" title="Plateforme de réservation" :href="session.ticketingUrl" target="_blank"><?php snippet('ticket') ?> Plus que quelques places !</a>
|
||||
</div>
|
||||
</template>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -11,21 +11,21 @@
|
|||
<meta name="robots" content="noindex,nofollow">
|
||||
|
||||
<!-- Alpine -->
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
<script defer src="<?= url('assets/js/alpine.min.js') ?>"></script>
|
||||
|
||||
<!-- Calendar -->
|
||||
<?php if ($page->isHomePage() || $page->template() == 'event' || $page->template() == 'program'): ?>
|
||||
<!-- dayjs -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/fr.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/weekOfYear.js"></script>
|
||||
<script src="<?= url('assets/js/dayjs.min.js') ?>"></script>
|
||||
<script src="<?= url('assets/js/dayjs-fr.js') ?>"></script>
|
||||
<script src="<?= url('assets/js/dayjs-weekOfYear.js') ?>"></script>
|
||||
<?= js('/assets/js/calendar.js') ?>
|
||||
<?php endif ?>
|
||||
|
||||
<!-- Swiper -->
|
||||
<?php if ($page->template() == 'event'): ?>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" defer />
|
||||
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js" defer></script>
|
||||
<link rel="stylesheet" href="<?= url('assets/js/swiper.bundle.min.css') ?>" defer />
|
||||
<script src="<?= url('assets/js/swiper.bundle.min.js') ?>" defer></script>
|
||||
<script src="<?= url('assets/js/swiper.js') ?>" defer></script>
|
||||
<?php endif ?>
|
||||
<script src="<?= url('assets/js/script.js') ?>" type="module" defer></script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue