--- /dev/null
+html,
+body {
+ scroll-behavior: smooth;
+}
+.list-none {
+ list-style-type: none;
+}
+.icon-m img {
+ margin-right: 8px;
+}
+.delivery-anchor {
+ margin-bottom: 55px;
+}
+.delivery-anchor li:not(:last-child) {
+ margin-right: var(--space-32-54);
+}
+.delivery-anchor li.disabled {
+ opacity: 0.2;
+ pointer-events: none;
+}
+.delivery-anchor a {
+ color: var(--dark);
+}
+.delivery-glimpses {
+ margin-bottom: 30px;
+}
+.delivery-glimpses .block {
+ background-color: rgba(70, 127, 207, 0.5);
+ height: 354px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+}
+.delivery-glimpses .btn {
+ margin-top: 8px;
+}
+.delivery-glimpses p {
+ margin-bottom: 6px;
+}
+:root {
+ --space-3xs: clamp(0.25rem, calc(0.25rem + 0vw), 0.25rem);
+ --space-2xs: clamp(0.5rem, calc(0.5rem + 0vw), 0.5rem);
+ --space-xs: clamp(0.75rem, calc(0.75rem + 0vw), 0.75rem);
+ --space-s: clamp(1rem, calc(1rem + 0vw), 1rem);
+ --space-m: clamp(1.5rem, calc(1.5rem + 0vw), 1.5rem);
+ --space-l: clamp(2rem, calc(2rem + 0vw), 2rem);
+ --space-xl: clamp(3rem, calc(3rem + 0vw), 3rem);
+ --space-2xl: clamp(4rem, calc(4rem + 0vw), 4rem);
+ --space-3xl: clamp(6rem, calc(6rem + 0vw), 6rem);
+ --space-4xl: clamp(3.38rem, calc(3.38rem + 0vw), 3.38rem);
+ /* One-up pairs */
+ --space-3xs-2xs: clamp(0.25rem, calc(0.2rem + 0.25vw), 0.5rem);
+ --space-2xs-xs: clamp(0.5rem, calc(0.45rem + 0.25vw), 0.75rem);
+ --space-xs-s: clamp(0.75rem, calc(0.7rem + 0.25vw), 1rem);
+ --space-s-m: clamp(1rem, calc(0.9rem + 0.5vw), 1.5rem);
+ --space-m-l: clamp(1.5rem, calc(1.4rem + 0.5vw), 2rem);
+ --space-l-xl: clamp(2rem, calc(1.8rem + 1vw), 3rem);
+ --space-xl-2xl: clamp(3rem, calc(2.8rem + 1vw), 4rem);
+ --space-2xl-3xl: clamp(4rem, calc(3.6rem + 2vw), 6rem);
+ /* Custom pairs */
+ --space-32-54: clamp(2rem, calc(1.73rem + 1.38vw), 3.38rem);
+}
+/*# sourceMappingURL=delivery.css.map */
\ No newline at end of file
--- /dev/null
+{"version":3,"sources":["delivery.less"],"names":[],"mappings":"AAAA;AAAK;EACD,uBAAA;;AAGJ;EACI,qBAAA;;AAGJ,OAAQ;EACJ,iBAAA;;AAIA,SAAC;EACG,mBAAA;;AADJ,SAAC,OAEG,GAAE,IAAI;EACF,cAAc,kBAAd;;AAHR,SAAC,OAKG,GAAE;EACE,YAAA;EACA,oBAAA;;AAPR,SAAC,OASG;EACI,OAAO,WAAP;;AAGR,SAAC;EACG,mBAAA;;AADJ,SAAC,SAEG;EACI,yCAAA;EACA,aAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,sBAAA;;AARR,SAAC,SAUG;EACI,eAAA;;AAXR,SAAC,SAaG;EACI,kBAAA;;AAKZ;EACI,aAAa,eAAe,6BAA5B;EACA,aAAa,cAAe,2BAA5B;EACA,YAAY,eAAe,6BAA3B;EACA,WAAW,YAAe,uBAA1B;EACA,WAAW,cAAe,2BAA1B;EACA,WAAW,YAAe,uBAA1B;EACA,YAAY,YAAe,uBAA3B;EACA,aAAa,YAAe,uBAA5B;EACA,aAAa,YAAe,uBAA5B;EACA,aAAa,eAAe,6BAA5B;;EAGA,iBAAiB,eAAe,8BAAhC;EACA,gBAAgB,cAAe,gCAA/B;EACA,cAAc,eAAe,4BAA7B;EACA,aAAa,YAAe,6BAA5B;EACA,aAAa,cAAe,2BAA5B;EACA,cAAc,YAAe,yBAA7B;EACA,gBAAgB,YAAe,yBAA/B;EACA,iBAAiB,YAAe,yBAAhC;;EAGA,eAAe,YAAe,gCAA9B","file":"delivery.css"}
\ No newline at end of file
--- /dev/null
+html,body {
+ scroll-behavior: smooth;
+}
+
+.list-none {
+ list-style-type: none;
+}
+
+.icon-m img {
+ margin-right: 8px;
+}
+
+.delivery {
+ &-anchor {
+ margin-bottom: 55px;
+ li:not(:last-child) {
+ margin-right: var(--space-32-54);
+ }
+ li.disabled {
+ opacity: .2;
+ pointer-events: none;
+ }
+ a {
+ color: var(--dark);
+ }
+ }
+ &-glimpses {
+ margin-bottom: 30px;
+ .block {
+ background-color: rgba(70,127,207,.5);
+ height: 354px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-direction: column;
+ }
+ .btn {
+ margin-top: 8px;
+ }
+ p {
+ margin-bottom: 6px;
+ }
+ }
+}
+
+:root {
+ --space-3xs: clamp(0.25rem, calc(0.25rem + 0.00vw), 0.25rem);
+ --space-2xs: clamp(0.50rem, calc(0.50rem + 0.00vw), 0.50rem);
+ --space-xs: clamp(0.75rem, calc(0.75rem + 0.00vw), 0.75rem);
+ --space-s: clamp(1.00rem, calc(1.00rem + 0.00vw), 1.00rem);
+ --space-m: clamp(1.50rem, calc(1.50rem + 0.00vw), 1.50rem);
+ --space-l: clamp(2.00rem, calc(2.00rem + 0.00vw), 2.00rem);
+ --space-xl: clamp(3.00rem, calc(3.00rem + 0.00vw), 3.00rem);
+ --space-2xl: clamp(4.00rem, calc(4.00rem + 0.00vw), 4.00rem);
+ --space-3xl: clamp(6.00rem, calc(6.00rem + 0.00vw), 6.00rem);
+ --space-4xl: clamp(3.38rem, calc(3.38rem + 0.00vw), 3.38rem);
+
+ /* One-up pairs */
+ --space-3xs-2xs: clamp(0.25rem, calc(0.20rem + 0.25vw), 0.50rem);
+ --space-2xs-xs: clamp(0.50rem, calc(0.45rem + 0.25vw), 0.75rem);
+ --space-xs-s: clamp(0.75rem, calc(0.70rem + 0.25vw), 1.00rem);
+ --space-s-m: clamp(1.00rem, calc(0.90rem + 0.50vw), 1.50rem);
+ --space-m-l: clamp(1.50rem, calc(1.40rem + 0.50vw), 2.00rem);
+ --space-l-xl: clamp(2.00rem, calc(1.80rem + 1.00vw), 3.00rem);
+ --space-xl-2xl: clamp(3.00rem, calc(2.80rem + 1.00vw), 4.00rem);
+ --space-2xl-3xl: clamp(4.00rem, calc(3.60rem + 2.00vw), 6.00rem);
+
+ /* Custom pairs */
+ --space-32-54: clamp(2.00rem, calc(1.73rem + 1.38vw), 3.38rem);
+}
trans('backpack::crud.admin') => url(config('backpack.base.route_prefix'), 'dashboard'),
trans('backpack::base.my_account') => false,
];
+ $statusText = $fluidbook->status ? 'prêt' : 'en cours de production';
+ $qrCodeDesktop = QrCode::size(200)->generate($fluidbook->getPreviewURL());
@endphp
-@section('header')
- <section class="container-fluid">
- <h2>
- <span class="font-weight-light">Bonjour Arnaud, votre Fluidbook est prêt !</span>
- </h2>
- <h2>
- <span class="text-capitalize">{{ 'Fluidbook MGEN - Valeurs mutualistes - N°328' }}</span>
- </h2>
- <div class="">
- <ul class="d-flex flex-md-row flex-sm-column">
- <li><img src="{{ url('images/icons/icon-eye.svg') }}" />Aperçu de votre Fluidbook</li>
- <li><img src="{{ url('images/icons/icon-settings.svg') }}" />Paramètres du Fluidbook</li>
- <li><img src="{{ url('images/icons/icon-like.svg') }}" />Faites connaitre votre Fluidbook</li>
- <li><img src="{{ url('images/icons/icon-stats.svg') }}" />Mesurez votre audience</li>
- </ul>
- </div>
- </section>
+@section('after_styles')
+ <link rel="stylesheet" href="/packages/fluidbook/toolbox/css/delivery.css" />
@endsection
@section('content')
<div class="row">
- <div class="col-md-8 bold-labels">
+ <div class="col-md-9 bold-labels">
<div class="w-100">
- <div class="card">
+ <section class="container-fluid animated fadeIn">
+ <h2 class="m-0">
+ <span class="font-weight-light">Bonjour{{ ' '.Auth::user()->firstname ?: '' }}, votre Fluidbook est {{ __($statusText) }} !</span>
+ </h2>
+ @if($fluidbook->status)
+ <h2 class="mb-4">
+ <span class="text-capitalize">{{ $fluidbook->title }}</span>
+ </h2>
+ @else
+ <p style="line-height: 22px;">Vous pouvez voir ci-dessous les différentes versions de votre Fluidbook et vérifier ses
+ caractéristiques. <br>Si tout vous convient, faites le savoir à votre chef de projet, il vous
+ préparera les livrables.</p>
+ @endif
+ <div class="delivery-anchor">
+ <ul class="d-flex flex-md-row flex-sm-column list-none p-0 icon-m">
+ <li><a href="#s_glimpses" class="text-decoration-none"><img src="{{ url('images/icons/icon-eye.svg') }}" />Aperçu de votre Fluidbook</a></li>
+ <li><a href="#s_settings" class="text-decoration-none"><img src="{{ url('images/icons/icon-settings.svg') }}" />Paramètres du Fluidbook</a></li>
+ <li class="{{ !$fluidbook->statusText ? 'disabled' : '' }}"><a href="#s_social" class="text-decoration-none"><img src="{{ url('images/icons/icon-like.svg') }}" />Faites connaitre votre Fluidbook</a></li>
+ <li class="{{ !$fluidbook->statusText ? 'disabled' : '' }}"><a href="#s_stats" class="text-decoration-none"><img src="{{ url('images/icons/icon-stats.svg') }}" />Mesurez votre audience</a></li>
+ </ul>
+ </div>
+ </section>
+ <div id="s_glimpses" class="card">
<div class="card-body">
- <div>
- <h2 id="s_section_apercu">Aperçu de votre Fluidbook XXXXX - FR</h2>
+ <div class="mb-4">
+ <h2 class="m-0">Aperçu de votre Fluidbook {{ $fluidbook->id }} -
+ <span class="text-uppercase">{{ $fluidbook->locale }}</span>
+ </h2>
<span>Cliquez sur l’une des versions ci-dessous pour la visualiser :</span>
</div>
- <div class="glimpses row">
+ <div class="delivery-glimpses row">
<div class="preview col-md-6">
<p>Version Desktop</p>
+ <div class="block">
+ <a href="{{ $fluidbook->getPreviewURL() }}" target="_blank" class="btn bg-primary">Voir</a>
+ </div>
</div>
<div class="preview col-md-3">
<p>Version Mobile</p>
+ <div class="block">
+ <a href="#" data-featherlight="#scanBoxMobile" class="btn bg-primary">Voir</a>
+ </div>
+ <div class="featherlight" id="scanBoxMobile">
+ {{ $qrCodeDesktop }}
+ </div>
</div>
<div class="preview col-md-3">
<p>Version Mobile-first</p>
+ <div class="block">
+ <a href="" class="btn bg-primary">Voir</a>
+ </div>
</div>
</div>
- <div class="indication align-items-center flex-row d-flex">
+ <div class="indication align-items-center flex-row d-flex icon-m">
<img src="{{ url('images/icons/icon-indication.svg') }}" />
- <p class="m-0">Attention, ces liens temporaires de démo ne doivent être utilisés que pour la validation du
- Fluidbook. Merci de ne pas les partager !</p>
+ <p class="m-0">Attention, ces liens temporaires de démo ne doivent être utilisés que pour
+ la validation du Fluidbook. Merci de ne pas les partager !</p>
</div>
</div>
</div>
- <div class="card">
+ <div id="s_settings" class="card">
<div class="card-body">
<div>
- <h2 id="s_section_apercu">Paramètres du Fluidbook</h2>
+ <h2 class="m-0">Paramètres du Fluidbook</h2>
<span>Voici les caractéristiques et fonctionnalités de votre Fluidbook</span>
</div>
- <div>
- <table id="crudTable" class="bg-white table table-striped table-hover nowrap rounded shadow-xs border-xs mt-2 dataTable dtr-inline" data-responsive-table="1" data-has-details-row="0" data-has-bulk-actions="1" cellspacing="0" aria-describedby="crudTable_info"><thead>
- <tbody>
- <tr class="odd">
- <td class="dtr-control">
- <span class="crud_bulk_actions_checkbox">
- <input type="checkbox" class="crud_bulk_actions_line_checkbox" data-primary-key-value="d24fd37801195185c4b4e11092b197de5f8943d4">
- </span>
- </td>
- </tr>
- </tbody>
- </table>
+ <div class="row mb-3">
+ <div class="col-md-6">
+ <table class="bg-white table table-striped table-hover nowrap rounded shadow-xs border-xs mt-2 dataTable dtr-inline" data-responsive-table="1" data-has-details-row="0" data-has-bulk-actions="1" cellspacing="0" aria-describedby="crudTable_info">
+ <tbody>
+ <tr class="odd">
+ <td class="dtr-control">
+ <p></p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <div class="col-md-6">
+ <table class="bg-white table table-striped table-hover nowrap rounded shadow-xs border-xs mt-2 dataTable dtr-inline" data-responsive-table="1" data-has-details-row="0" data-has-bulk-actions="1" cellspacing="0" aria-describedby="crudTable_info">
+ <tbody>
+ <tr class="odd">
+ <td class="dtr-control">
+ <p></p>
+ </td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <div class="row mb-3">
+ <div class="col-md-6">
+ <p>Principales fonctionnalités activées</p>
+ </div>
+ <div class="col-md-6">
+ <p>Principales fonctionnalités désactivées</p>
+ </div>
+ </div>
+ <div class="">
+ <p class="m-0">Vous souhaitez modifier un paramètre ou une fonctionnalité ?
+ <a href="mailto:">Contactez votre chef de projet</a>
+ </p>
+ </div>
+ </div>
+ </div>
+ @if($fluidbook->statusText)
+ <div id="s_social" class="card">
+ <div class="card-body">
+ <div class="">
+ <h2>Faites connaitre votre Fluidbook</h2>
+ <p>Pour gagner en visibilité, vous devez donner de la visibilité à votre Fluidbook sur votre
+ site web, votre blog, vos réseaux sociaux, etc. verez ci-dessous quelques images pour
+ vous aider à le diffuser.</p>
+ </div>
+ <div class="row">
+ <div class="col-sm-12">
+ <p>Images pour réseaux sociaux</p>
+ </div>
+ <div class="col-md-4">
+ <p>Facebook</p>
+ </div>
+ <div class="col-md-4">
+ <p>Twitter</p>
+ </div>
+ <div class="col-md-4">
+ <p>Linkedin</p>
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-sm-12">
+ <p>Images de promotion (sites web, emails, newsletters etc.)</p>
+ </div>
+ <div class="col-md-4">
+ </div>
+ <div class="col-md-4">
+ </div>
+ <div class="col-md-4">
+ </div>
+ </div>
+ <div class="row">
+ <div class="col-sm-12">
+ <p>Mini Fluidbook animé</p>
+ </div>
+ <div class="col-md-4">
+ </div>
+ <div class="col-md-4">
+ </div>
+ <div class="col-md-4">
+ </div>
+ </div>
+ </div>
+ </div>
+ <div id="s_stats" class="card">
+ <div class="card-body">
+ <div class="">
+ <h2>Mesurez votre audience</h2>
+ <p>Les statistiques vous aident à mesurer l'efficacité de votre Fluidbook et vous
+ fournissent des informations précieuses sur votre public. Connaître les préférences et
+ les besoins de vos lecteurs constitue également une base solide pour améliorer votre
+ document.</p>
+ </div>
+ <div class="row">
+ <div class="col-md-6">
+ <div class="card">
+ <div class="card-body">
+ <h3 class="font-xl">Statistiques Fluidbook</h3>
+ <p>Avec notre module de statistiques intégré, vous savez combien de personnes ont vu
+ votre Fluidbook, quelles pages les ont le plus intéressé, quels mots-clés ils ont
+ cherché, etc...</p>
+ <a href="" class="btn bg-primary">Voir les statistiques</a>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="card">
+ <div class="card-body">
+ <h3 class="font-xl">Statistiques Google Analytics</h3>
+ <p>Fluidbook est conçu pour fonctionner avec Google Analytics et Google Tag Manager
+ (GTM) pour vous donner accès à l'un des outils de statistiques gratuits les plus
+ puissants du marché.</p>
+ <a href="" class="btn bg-default" target="_blank" rel="noopener">Voir la notice</a>
+ <div class="mt-3">
+ <p class="m-0">Vous souhaitez activer Google Analytics dans votre Fluidbook ?</p>
+ <a href="mailto:">Contactez votre chef de projet</a>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
</div>
+ @endif
+
+ <div class="card bg-dark">
+ <div class="card-body">
+ <h2>Une question sur votre Fluidbook ?</h2>
+ <p>Vous avez remarqué une erreur ou vous souhaitez changer un paramètre ?</p>
+ <a href="" class="btn bg-primary">Contacter votre chef de projet</a>
+ </div>
+ </div>
</div>
</div>
+ @if($fluidbook->statusText)
+ <div class="col-md-3">
+ <div class="card position-sticky" style="top: 50px">
+ <div class="card-body">
+ <h2>Publiez votre Fluidbook</h2>
+ <p>L’adresse d’hébergement a déjà été configurée, vous pouvez mettre votre Fluidbook directement en ligne en
+ cliquant ci-dessous :</p>
+ <a href="" class="btn bg-primary">Installer sur le serveur d’hébergement</a>
+ </div>
+ </div>
+ </div>
+ @endif
</div>
@endsection
projects / fluidbook-toolbox.git / commitdiff