williamandClaude Sonnet 5
7730b3688f
Trois retours distincts : - Plus de présélection du thème déjà appliqué à l'ouverture — un choix toujours explicite de l'utilisateur. - L'état vide (.docTemplatePreviewEmpty) restait visible EN MÊME TEMPS que l'iframe une fois un thème sélectionné : `display:flex` posé directement dessus battait le `display:none` natif de [hidden] (même bug déjà rencontré pour .docSidebarTabPanel[hidden] plus tôt dans le projet) — les deux se partageaient flex:1, coupant l'aperçu en deux au lieu de lui laisser tout l'espace. - L'aperçu ne montrait que la première page du modèle sans aucun moyen d'en voir les autres : la route /document/<slug>/theme/<id>/preview rend désormais TOUTES les pages, une barre Précédent/Suivant (entièrement côté client, aucun aller-retour serveur supplémentaire) permet de naviguer entre elles. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
111 lines
2.9 KiB
HTML
111 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Aperçu — {{ theme.name }}</title>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='document/document-editor.css') }}">
|
||
{% if theme.font_url %}
|
||
<link rel="stylesheet" href="{{ theme.font_url }}">
|
||
{% endif %}
|
||
<link rel="stylesheet" href="{{ url_for('static', filename=theme.css_path) }}">
|
||
<style>
|
||
html, body {
|
||
margin: 0;
|
||
padding: 0;
|
||
height: 100%;
|
||
background: #efece4;
|
||
display: flex;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.previewPages {
|
||
flex: 1;
|
||
min-height: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
padding: 16px;
|
||
overflow: auto;
|
||
}
|
||
|
||
.previewPages .docPage[hidden] {
|
||
display: none;
|
||
}
|
||
|
||
.previewNav {
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 14px;
|
||
padding: 10px;
|
||
background: #1a1b20;
|
||
color: #fff;
|
||
font: 600 13px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||
}
|
||
|
||
.previewNav button {
|
||
border: none;
|
||
background: #2a2c33;
|
||
color: #fff;
|
||
border-radius: 6px;
|
||
padding: 6px 12px;
|
||
cursor: pointer;
|
||
font: inherit;
|
||
}
|
||
|
||
.previewNav button:disabled {
|
||
opacity: 0.4;
|
||
cursor: default;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="previewPages">
|
||
{% for rendered_page in rendered_pages %}
|
||
<div class="docPage" data-page-index="{{ loop.index0 }}" {% if not loop.first %}hidden{% endif %}>
|
||
<div class="docPageContent">
|
||
{{ rendered_page | safe }}
|
||
</div>
|
||
</div>
|
||
{% endfor %}
|
||
</div>
|
||
{% if rendered_pages|length > 1 %}
|
||
<div class="previewNav">
|
||
<button type="button" id="previewPrevBtn">‹ Précédent</button>
|
||
<span id="previewPageLabel"></span>
|
||
<button type="button" id="previewNextBtn">Suivant ›</button>
|
||
</div>
|
||
{% endif %}
|
||
<script>
|
||
(function previewPageNav() {
|
||
var pages = Array.prototype.slice.call(document.querySelectorAll('.previewPages .docPage'));
|
||
if (pages.length <= 1) return;
|
||
var current = 0;
|
||
var prevBtn = document.getElementById('previewPrevBtn');
|
||
var nextBtn = document.getElementById('previewNextBtn');
|
||
var label = document.getElementById('previewPageLabel');
|
||
|
||
function render() {
|
||
pages.forEach(function pageAt(page, index) {
|
||
page.hidden = index !== current;
|
||
});
|
||
label.textContent = 'Page ' + (current + 1) + ' / ' + pages.length;
|
||
prevBtn.disabled = current === 0;
|
||
nextBtn.disabled = current === pages.length - 1;
|
||
}
|
||
|
||
prevBtn.addEventListener('click', function goPrev() {
|
||
if (current > 0) { current -= 1; render(); }
|
||
});
|
||
nextBtn.addEventListener('click', function goNext() {
|
||
if (current < pages.length - 1) { current += 1; render(); }
|
||
});
|
||
render();
|
||
}());
|
||
</script>
|
||
</body>
|
||
</html>
|