la partie publique a aussi droit à de plus jolis boutons
This commit is contained in:
parent
e8a46f15e3
commit
a82699c84e
13
about.php
13
about.php
@ -34,6 +34,11 @@ $siteStats = $stats->getStats();
|
||||
<div class="novel-header-background" style="background-image: url('<?= htmlspecialchars($about['background']) ?>');"></div>
|
||||
<?php endif; ?>
|
||||
<h1><?= htmlspecialchars($about['title']) ?></h1>
|
||||
<div class="header-actions">
|
||||
<a href="index.php" class="about-button">
|
||||
<i class="fas fa-home"></i> Accueil
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Contenu principal -->
|
||||
@ -131,11 +136,9 @@ $siteStats = $stats->getStats();
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<div class="back-to-home">
|
||||
<a href="index.php">← Retour à l'accueil</a>
|
||||
</div>
|
||||
|
||||
<button class="scroll-top" aria-label="Retour en haut de page">↑</button>
|
||||
<button class="scroll-top" aria-label="Retour en haut de page">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
</button>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
@ -4,6 +4,9 @@
|
||||
/* Import Google Fonts */
|
||||
@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');
|
||||
|
||||
/* Import Font Awesome */
|
||||
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css');
|
||||
|
||||
/* Variables globales */
|
||||
:root {
|
||||
/* Couleurs de fond */
|
||||
@ -759,4 +762,183 @@ body {
|
||||
.stats-value {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Styles pour les boutons avec icônes */
|
||||
.about-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
background-color: var(--accent-primary);
|
||||
color: var(--text-tertiary);
|
||||
text-decoration: none;
|
||||
border-radius: var(--radius-sm);
|
||||
transition: var(--transition);
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.about-button i {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.about-button:hover {
|
||||
background-color: var(--accent-secondary);
|
||||
}
|
||||
|
||||
/* Navigation entre chapitres */
|
||||
.chapter-nav {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.chapter-nav:hover {
|
||||
background-color: var(--bg-secondary);
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* Bouton retour en haut */
|
||||
.scroll-top {
|
||||
position: fixed;
|
||||
bottom: 2rem;
|
||||
right: 2rem;
|
||||
background-color: var(--bg-tertiary);
|
||||
color: var(--text-primary);
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
border: 1px solid var(--border-color);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.scroll-top i {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.scroll-top.visible {
|
||||
opacity: 1;
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.scroll-top:hover {
|
||||
background-color: var(--accent-primary);
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* Lien de retour */
|
||||
.back-to-home a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
color: var(--text-secondary);
|
||||
text-decoration: none;
|
||||
transition: var(--transition);
|
||||
padding: var(--spacing-sm) 0;
|
||||
}
|
||||
|
||||
.back-to-home a:hover {
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
/* Icônes dans la liste des chapitres */
|
||||
.chapters-list a {
|
||||
position: relative;
|
||||
padding-left: calc(var(--spacing-md) + 1.2rem);
|
||||
}
|
||||
|
||||
.chapters-list a::before {
|
||||
content: "\f15c"; /* Icône de document */
|
||||
font-family: "Font Awesome 6 Free";
|
||||
font-weight: 900;
|
||||
position: absolute;
|
||||
left: var(--spacing-sm);
|
||||
color: var(--accent-primary);
|
||||
}
|
||||
|
||||
.chapters-list .current-chapter::before {
|
||||
content: "\f02e"; /* Icône de marque-page */
|
||||
color: var(--text-tertiary);
|
||||
}
|
||||
|
||||
/* Pour les petits écrans */
|
||||
@media (max-width: 768px) {
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.about-button {
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
}
|
||||
|
||||
/* Modification des styles pour les chapitres en brouillon */
|
||||
.chapters-list .draft-chapter {
|
||||
opacity: 0.7;
|
||||
border-left: 3px solid var(--accent-primary);
|
||||
padding-left: calc(var(--spacing-sm) + 1.5rem) !important;
|
||||
}
|
||||
|
||||
.chapters-list .draft-chapter::before {
|
||||
content: "\f249";
|
||||
left: calc(var(--spacing-sm) + 0.3rem);
|
||||
}
|
||||
|
||||
.draft-label {
|
||||
font-size: 0.8em;
|
||||
background-color: var(--accent-primary);
|
||||
color: var(--text-tertiary);
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
margin-left: 8px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* S'assurer que l'étiquette de brouillon ne chevauche pas l'icône */
|
||||
.chapters-list a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
padding: var(--spacing-sm);
|
||||
padding-left: calc(var(--spacing-md) + 1.2rem);
|
||||
gap: var(--spacing-xs);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Pour conserver l'espace correct en cas de texte long */
|
||||
.chapter-title-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
white-space: normal;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.chapters-list a {
|
||||
padding-right: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.draft-label {
|
||||
font-size: 0.7em;
|
||||
padding: 1px 4px;
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
26
chapitre.php
26
chapitre.php
@ -79,8 +79,12 @@ $config = Config::load();
|
||||
<div class="novel-header-background" style="background-image: url('<?= htmlspecialchars($currentChapter['cover']) ?>');"></div>
|
||||
<?php endif; ?>
|
||||
<div class="header-actions">
|
||||
<a href="index.php" class="about-button">Accueil</a>
|
||||
<a href="roman.php?id=<?= urlencode($storyId) ?>" class="about-button">Roman</a>
|
||||
<a href="index.php" class="about-button">
|
||||
<i class="fas fa-home"></i> Accueil
|
||||
</a>
|
||||
<a href="roman.php?id=<?= urlencode($storyId) ?>" class="about-button">
|
||||
<i class="fas fa-book"></i> Roman
|
||||
</a>
|
||||
</div>
|
||||
<h1>
|
||||
<?= htmlspecialchars($currentChapter['title']) ?>
|
||||
@ -99,15 +103,15 @@ $config = Config::load();
|
||||
<div class="chapter-navigation">
|
||||
<?php if ($prevChapter): ?>
|
||||
<a href="?story=<?= urlencode($storyId) ?>&chapter=<?= urlencode($prevChapter['id']) ?>"
|
||||
class="chapter-nav prev-chapter">
|
||||
← <?= htmlspecialchars($prevChapter['title']) ?>
|
||||
class="chapter-nav prev-chapter">
|
||||
<i class="fas fa-chevron-left"></i> <?= htmlspecialchars($prevChapter['title']) ?>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
|
||||
<?php if ($nextChapter): ?>
|
||||
<a href="?story=<?= urlencode($storyId) ?>&chapter=<?= urlencode($nextChapter['id']) ?>"
|
||||
class="chapter-nav next-chapter">
|
||||
<?= htmlspecialchars($nextChapter['title']) ?> →
|
||||
class="chapter-nav next-chapter">
|
||||
<?= htmlspecialchars($nextChapter['title']) ?> <i class="fas fa-chevron-right"></i>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
@ -122,10 +126,10 @@ $config = Config::load();
|
||||
?>
|
||||
<li>
|
||||
<a href="?story=<?= urlencode($storyId) ?>&chapter=<?= urlencode($chapter['id']) ?>"
|
||||
class="<?= $chapter['id'] === $chapterId ? 'current-chapter' : '' ?> <?= $isDraft ? 'draft-chapter' : '' ?>">
|
||||
<?= htmlspecialchars($chapter['title']) ?>
|
||||
class="<?= $chapter['id'] === $chapterId ? 'current-chapter' : '' ?> <?= $isDraft ? 'draft-chapter' : '' ?>">
|
||||
<span class="chapter-title-text"><?= htmlspecialchars($chapter['title']) ?></span>
|
||||
<?php if ($isDraft && $canViewDrafts): ?>
|
||||
<span class="draft-label">(Brouillon)</span>
|
||||
<span class="draft-label">Brouillon</span>
|
||||
<?php endif; ?>
|
||||
</a>
|
||||
</li>
|
||||
@ -134,7 +138,9 @@ $config = Config::load();
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<button class="scroll-top" aria-label="Retour en haut de page">↑</button>
|
||||
<button class="scroll-top" aria-label="Retour en haut de page">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.draft-header::after {
|
||||
|
||||
@ -64,7 +64,9 @@ function formatDate($date) {
|
||||
</div>
|
||||
|
||||
<div class="header-actions">
|
||||
<a href="about.php" class="about-button">À propos</a>
|
||||
<a href="about.php" class="about-button">
|
||||
<i class="fas fa-info-circle"></i> À propos
|
||||
</a>
|
||||
</div>
|
||||
</header>
|
||||
</div>
|
||||
|
||||
17
roman.php
17
roman.php
@ -45,7 +45,9 @@ $canViewDrafts = Auth::check() && Auth::canAccessStory($storyId);
|
||||
<div class="novel-header-background" style="background-image: url('<?= htmlspecialchars($story['cover']) ?>');"></div>
|
||||
<?php endif; ?>
|
||||
<div class="header-actions">
|
||||
<a href="index.php" class="about-button">Accueil</a>
|
||||
<a href="index.php" class="about-button">
|
||||
<i class="fas fa-home"></i> Accueil
|
||||
</a>
|
||||
</div>
|
||||
<h1><?= htmlspecialchars($story['title']) ?></h1>
|
||||
</header>
|
||||
@ -71,13 +73,14 @@ $canViewDrafts = Auth::check() && Auth::canAccessStory($storyId);
|
||||
<p>Aucun chapitre publié disponible pour le moment.</p>
|
||||
<?php else:
|
||||
foreach ($visibleChapters as $chapter):
|
||||
$isDraft = $chapter['draft'] ?? false;
|
||||
?>
|
||||
<li>
|
||||
<a href="chapitre.php?story=<?= urlencode($story['id']) ?>&chapter=<?= urlencode($chapter['id']) ?>"
|
||||
class="<?= ($chapter['draft'] ?? false) ? 'draft-chapter' : '' ?>">
|
||||
<?= htmlspecialchars($chapter['title']) ?>
|
||||
<?php if (($chapter['draft'] ?? false) && $canViewDrafts): ?>
|
||||
<span class="draft-label">(Brouillon)</span>
|
||||
class="<?= $isDraft ? 'draft-chapter' : '' ?>">
|
||||
<span class="chapter-title-text"><?= htmlspecialchars($chapter['title']) ?></span>
|
||||
<?php if ($isDraft && $canViewDrafts): ?>
|
||||
<span class="draft-label">Brouillon</span>
|
||||
<?php endif; ?>
|
||||
</a>
|
||||
</li>
|
||||
@ -92,7 +95,9 @@ $canViewDrafts = Auth::check() && Auth::canAccessStory($storyId);
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<button class="scroll-top" aria-label="Retour en haut de page">↑</button>
|
||||
<button class="scroll-top" aria-label="Retour en haut de page">
|
||||
<i class="fas fa-arrow-up"></i>
|
||||
</button>
|
||||
|
||||
<style>
|
||||
.draft-chapter {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user