ileauchiens/maquette_backoffice
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

normalisation blog + gestion images

Browse Source
This commit is contained in:
pestak
2025-12-14 11:42:13 +01:00
parent 1950fd3902
commit b4e037f11d
12 changed files with 367 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
blog/html/accueil_blog.html
View File

@@ -5,9 +5,9 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin |Modifier le blog</title>
<link href="../../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="../../node_modules/bs-icon/icons.css">
<link rel="stylesheet" href="../../css/style.css">
<link href="/node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="/node_modules/bs-icon/icons.css">
<link rel="stylesheet" href="/css/style.css">
@@ -39,11 +39,9 @@
<li class="nav-item">
<a class="nav-link left-label" href="#">FAQ</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Fiche de renseignements</a>
</li>
<li class="nav-item">
<a class="nav-link left-label" href="#">Partenaires</a>
<a class="nav-link left-label" href="#">Vétérinaires</a>
</li>
</ul>
@@ -83,7 +81,7 @@
<header>
<h1 class="title fs-2">Modifier la page blog</h1>
</header>
<main>
<div class="content">
<section class="mb-5 section-categories">
@@ -153,7 +151,7 @@
</tbody>
</table>
</section>
</main>
</div>
</div>
</main>
<script src="../js/liste_categorie.js"></script>

85
blog/html/ajouter_article.html
View File

@@ -1,15 +1,16 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajouter un article</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../css/blog.css">
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
<script src="https://cdn.tiny.cloud/1/1up68ybfp3crmpssl9o7pu6d0e8v3okcnsinhoujnmak7wft/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
</head>
<body>
<header>
@@ -31,8 +32,8 @@
<li class="nav-item"><a class="nav-link" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link" href="#">Fiche de renseignements</a></li>
<li class="nav-item"><a class="nav-link" href="#">Partenaires</a></li>
<li class="nav-item"><a class="nav-link" href="#">Vétérinaires</a></li>
</ul>
<!-- MENU DROIT -->
@@ -53,7 +54,9 @@
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li><hr class="dropdown-divider"></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
@@ -72,11 +75,11 @@
<div id="messages" class="mb-3"></div>
<!-- Catégorie -->
<div class="mb-3">
<label class="form-label fw-bold">Catégorie *</label>
<select id="articleCategory" class="form-select">
<option value="">Choisissez une catégorie</option>
<label class="form-label fw-bold">Catégorie (obligatoire)</label>
<select id="articleCategory" class="form-select" required>
<option value="none" disabled selected>Choisissez une catégorie</option>
<option value="actualités">Actualités</option>
<option value="chien">Chien</option>
<option value="chat">Chat</option>
@@ -86,26 +89,45 @@
<!-- Titre -->
<div class="mb-4">
<label class="form-label fw-bold">Titre *</label>
<input type="text" id="articleTitle" class="form-control">
<label class="form-label fw-bold" for="articleTitle">Titre (obligatoire)</label>
<input type="text" id="articleTitle" class="form-control" placeholder="Entrez le titre de l'article"
required>
</div>
<!-- Contenu -->
<div class="mb-3">
<label class="form-label fw-bold">Contenu</label>
<textarea id="articleContent"></textarea>
<div class="row mb-3">
<div class="col-md-4 image">
<div class="mb-4">
<label class="form-label fw-bold" for="articleImage">Image (optionnelle)</label>
<input type="file" id="imageInput" class="form-control" accept="image/png, image/jpeg, image/jpg, image/webp">
</div>
<div class="preview-img-container">
</div>
</div>
<!-- Image -->
<div class="mb-4">
<label class="form-label fw-bold">Image</label>
<input type="file" id="articleImage" class="form-control">
<div class="col-md-8 conent">
<div class="mb-3">
<label class="form-label fw-bold" for="articleContent">Contenu (obligatoire)</label>
<div class="row">
</div>
<textarea id="articleContent" required></textarea>
</div>
</div>
</div>
<!-- Publié -->
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="articlePublished">
<label class="form-check-label">Publié</label>
<label class="form-check-label" for="articlePublished">Publié</label>
</div>
<!-- Boutons -->
@@ -116,18 +138,19 @@
</form>
</div>
<script src="../js/ajouter_article.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script>
tinymce.init({
selector: '#articleContent',
height: 400,
language: 'fr',
plugins: 'lists fullscreen',
toolbar: 'undo redo | bold italic underline | bullist numlist | fullscreen'
});
</script>
<script src="/js/imgLoad.js"></script>
<script src="../js/ajouter_article.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/node_modules/tinymce/tinymce.min.js"></script>
<script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
<script src="/js/tinyMce.js"></script>
<script src="/js/previewImage.js"></script>
</body>
</html>

14
blog/html/ajouter_categorie.html
View File

@@ -5,7 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajouter une catégorie</title>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/blog.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
@@ -28,8 +28,8 @@
<li class="nav-item"><a class="nav-link" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link" href="#">Fiche de renseignements</a></li>
<li class="nav-item"><a class="nav-link" href="#">Partenaires</a></li>
<li class="nav-item"><a class="nav-link" href="#">Vétérinaires</a></li>
</ul>
<!-- MENU DROIT -->
@@ -70,12 +70,12 @@
<form id="addCategoryForm">
<div class="mb-4">
<label class="form-label fw-bold">Nom de la catégorie *</label>
<label class="form-label fw-bold">Nom de la catégorie (obligatoire)</label>
<input
type="text"
id="categoryName"
class="form-control"
placeholder="Actualité, chien, chat…">
placeholder="Actualité, chien, chat…" required>
</div>
<div class="mb-3">
@@ -98,5 +98,9 @@
<script src="../js/ajouter_categorie.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/node_modules/tinymce/tinymce.min.js"></script>
<script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
<script src="/js/tinyMce.js"></script>
</body>
</html>

86
blog/html/modifier_article.html
View File

@@ -4,16 +4,11 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifier un article</title>
<link rel="stylesheet" href="../../css/blog.css">
<script src="https://cdn.tiny.cloud/1/1up68ybfp3crmpssl9o7pu6d0e8v3okcnsinhoujnmak7wft/tinymce/6/tinymce.min.js" referrerpolicy="origin"></script>
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<header>
<nav class="navbar navbar-expand-xxl bg-body-tertiary shadow-sm">
<div class="container-fluid align-items-center">
@@ -33,8 +28,8 @@
<li class="nav-item"><a class="nav-link" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link" href="#">Fiche de renseignements</a></li>
<li class="nav-item"><a class="nav-link" href="#">Partenaires</a></li>
<li class="nav-item"><a class="nav-link" href="#">Vétérinaires</a></li>
</ul>
<!-- MENU DROIT -->
@@ -68,49 +63,56 @@
<div class="container">
<h2 class="mb-4 text-center">Modifier un article</h2>
<div id="messages" class="mb-3"></div>
<form id="editArticleForm">
<!-- Titre -->
<div class="mb-3">
<label class="form-label fw-bold">Titre *</label>
<input type="text" id="articleTitle" class="form-control">
<label class="form-label fw-bold">Titre (obligatoire)</label>
<input type="text" id="articleTitle" class="form-control" value="Les chats, ces réveils matin détraqués">
</div>
<div class="mb-4 categorie">
<label class="form-label fw-bold" for="categories">Catégorie (obligatoire)</label>
<select id="categories" class="form-select">
<option value="none" disabled>Choisissez une catégorie</option>
<option value="actualités">Actualités</option>
<option value="chien">Chien</option>
<option value="chat" selected>Chat</option>
<option value="boutique">Boutique</option>
</select>
</div>
<!-- Contenu -->
<div class="row mb-3">
<div class="col-md-4 image">
<div class="mb-4">
<label class="form-label fw-bold" for="articleImage">Image (optionnelle)</label>
<input type="file" id="imageInput" class="form-control" accept="image/png, image/jpeg, image/jpg, image/webp">
</div>
<div class="preview-img-container">
</div>
</div>
<div class="col-md-8 conent">
<div class="mb-3">
<label class="form-label fw-bold">Contenu</label>
<textarea id="articleContent"></textarea>
</div>
<label class="form-label fw-bold" for="articleContent">Contenu (obligatoire)</label>
<div class="row">
<!-- Catégorie -->
<div class="mb-4">
<label class="form-label fw-bold">Catégorie</label>
<input type="text" id="articleCategory" class="form-control" list="categories">
<datalist id="categories">
<option value="actualités">
<option value="chien">
<option value="chat">
<option value="boutique">
</datalist>
</div>
<!-- Image -->
<div class="mb-4">
<label class="fw-bold">Image actuelle</label>
<div>
<img id="imagePreview" class="preview-img mb-2 d-none" alt="apercu image">
<input type="file" id="articleImage" class="form-control">
<textarea id="articleContent" required></textarea>
</div>
</div>
</div>
<!-- Publié -->
<div class="form-check mb-3">
<input class="form-check-input" type="checkbox" id="articlePublished">
<label class="form-check-label">Publié (sera publié sur facebook)</label>
<label class="form-check-label">Publié</label>
</div>
<!-- Boutons -->
@@ -125,20 +127,10 @@
<script src="../js/modifier_article.js"></script>
<script src="/node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script>
tinymce.init({
selector: "#articleContent",
height: 400,
language: "fr",
plugins: "lists fullscreen",
toolbar: "undo redo | bold italic underline | bullist numlist | fullscreen",
branding: false,
promotion: false,
menubar: false
});
</script>
<script src="/node_modules/tinymce/tinymce.min.js"></script>
<script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
<script src="/js/tinyMce.js"></script>
<script src="/js/previewImage.js"></script>
</body>
</html>

24
blog/html/modifier_categorie.html
View File

@@ -1,14 +1,16 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modifier une catégorie</title>
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="../../css/blog.css">
<link rel="stylesheet" href="/node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<!-- HEADER -->
@@ -31,8 +33,8 @@
<li class="nav-item"><a class="nav-link" href="#">Boutique</a></li>
<li class="nav-item"><a class="nav-link" href="#">Prestations</a></li>
<li class="nav-item"><a class="nav-link" href="#">FAQ</a></li>
<li class="nav-item"><a class="nav-link" href="#">Fiche de renseignements</a></li>
<li class="nav-item"><a class="nav-link" href="#">Partenaires</a></li>
<li class="nav-item"><a class="nav-link" href="#">Vétérinaires</a></li>
</ul>
<!-- MENU DROIT -->
@@ -53,7 +55,9 @@
</a>
<ul class="dropdown-menu dropdown-menu-end">
<li><a class="dropdown-item" href="#">Profil</a></li>
<li><hr class="dropdown-divider"></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Sortir</a></li>
</ul>
</li>
@@ -73,14 +77,15 @@
<div class="mb-4">
<label class="form-label fw-bold">Nom de la catégorie (obligatoire)</label>
<input type="text" id="categoryName" class="form-control" placeholder="Entrez le nom de la catégorie" required>
<input type="text" id="categoryName" class="form-control" placeholder="Entrez le nom de la catégorie"
required>
</div>
<div class="mb-3">
<label class="form-label fw-bold">Description (optionnel)</label>
<textarea id="categorieDescription" class="form-control" rows="4" placeholder="Entrez une description" required></textarea>
<textarea id="categorieDescription" class="form-control" rows="4"></textarea>
</div>
<div class="d-flex gap-3 mt-4">
@@ -94,7 +99,10 @@
<script src="../js/modifier_categorie.js"></script>
<script src="../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="/node_modules/tinymce/tinymce.min.js"></script>
<script src="/node_modules/tinymce-i18n/langs8/fr-FR.js"></script>
<script src="/js/tinyMce.js"></script>
</body>
</html>

18
blog/js/ajouter_article.js
View File

@@ -2,6 +2,7 @@ const form = document.getElementById("ajouterArticleForm");
const messages = document.getElementById("messages");
const imgField = document.getElementById("articleImage");
const imgPreview = document.getElementById("imagePreview");
const titleField = document.getElementById("articleTitle");
const categoryField = document.getElementById("articleCategory");
const publishedField = document.getElementById("articlePublished");
@@ -26,6 +27,9 @@ function imageValide(file) {
return ["image/jpeg", "image/png"].includes(file.type);
}
// Preview image on selection via generic loader (global)
const imgLoader = window.initImagePreview && window.initImagePreview("articleImage", "articleImagePreview", ["image/jpeg", "image/png"]);
form.addEventListener("submit", function (e) {
e.preventDefault();
@@ -91,6 +95,9 @@ form.addEventListener("submit", function (e) {
// Reset
form.reset();
tinymce.get("articleContent").setContent("");
if (imgLoader && typeof imgLoader.reset === "function") {
imgLoader.reset();
}
// Redirection
setTimeout(() => {
@@ -98,13 +105,4 @@ form.addEventListener("submit", function (e) {
}, 1500);
});
/* =========================
TinyMCE
========================= */
tinymce.init({
selector: "#articleContent",
height: 400,
language: "fr",
plugins: "lists fullscreen",
toolbar: "undo redo | bold italic underline | bullist numlist | fullscreen"
});

16
blog/js/modifier_article.js
View File

@@ -3,6 +3,7 @@ const messages = document.getElementById("messages");
const imgField = document.getElementById("articleImage");
const titleField = document.getElementById("articleTitle");
const imgPreview = document.getElementById("imagePreview");
const contentField = document.getElementById("articleContent");
const categoryField = document.getElementById("articleCategory");
const publishedField = document.getElementById("articlePublished");
@@ -31,6 +32,21 @@ function imageValide(file) {
return ["image/jpeg", "image/png", "image/gif"].includes(file.type);
}
// Preview image on selection
imgField.addEventListener("change", function () {
const file = imgField.files && imgField.files[0];
if (!file || !imageValide(file)) {
if (imgPreview) {
imgPreview.src = "";
imgPreview.classList.add("d-none");
}
return;
}
const url = URL.createObjectURL(file);
imgPreview.src = url;
imgPreview.classList.remove("d-none");
});
form.addEventListener("submit", function (e) {
e.preventDefault();

11
css/blog.css
View File

@@ -1,11 +0,0 @@
body {
background: #f4f6f9;
}
.container {
margin: 40px auto;
}
.ck-editor__editable {
min-height: 350px;
}

0
css/citations.css
View File

2
css/prestation.css
View File

@@ -1,2 +0,0 @@
body { background: #f4f6f981; }
.container { margin-top: 50px; }

33
css/style.css
View File

@@ -48,3 +48,36 @@ Divers
a.tox-promotion-link {
display: none !important;
}
body {
background: #f4f6f981;
}
.container {
margin: 50px auto;
}
/*=============================================================================
Placeholders (global)
=============================================================================*/
[placeholder] {
font-size: 0.9rem !important;
font-style: italic !important;
}
/*=============================================================================
Image Previews
=============================================================================*/
.preview-img-container{
margin-top: -.8rem;
width: 100%;
height: 20.3rem;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
border-radius: .25rem;
margin-bottom: 1rem;
background-color: rgb(238, 236, 236);
}

19
js/previewImage.js Normal file
View File

@@ -0,0 +1,19 @@
/**
*
* Preview image when selected in input field
*/
document.getElementById("imageInput").addEventListener("change", function (e) {
const file = e.target.files[0];
const preview = document.querySelector(".preview-img-container");
if (file && ["image/jpeg", "image/png"].includes(file.type)) {
const reader = new FileReader();
reader.onload = function (event) {
preview.innerHTML = `<img src="${event.target.result}" alt="Aperçu de l'image" class="img-fluid">`;
};
reader.readAsDataURL(file);
preview.style.backgroundColor = "transparent";
} else {
preview.innerHTML = `<p class="text-muted">Aucun aperçu disponible <br> Le format n'est pas autorisé</p>`;
}
})