Add header, jQuery and Home page content
Julien Rosset
1 year ago
parent
af44fc426b
commit
73ccec5e08
@ -1,3 +0,0 @@
|
||||
#flashes {
|
||||
font-size : 0.75rem;
|
||||
}
|
||||
@ -0,0 +1,18 @@
|
||||
header, footer {
|
||||
background-color : var(--bs-body-bg);
|
||||
width : 100%;
|
||||
margin : 0;
|
||||
|
||||
&:not(.overlay-not-fixed) {
|
||||
position : fixed;
|
||||
z-index : 10;
|
||||
}
|
||||
}
|
||||
header {
|
||||
top : 0;
|
||||
height : 30px;
|
||||
border-bottom : 1px solid black;
|
||||
}
|
||||
footer {
|
||||
bottom : 0;
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
pre.xdebug-var-dump {
|
||||
position : relative;
|
||||
background-color : rgb(255, 255, 255);
|
||||
z-index : 10000;
|
||||
margin-bottom : 0;
|
||||
}
|
||||
@ -1,2 +1,3 @@
|
||||
@import 'bootstrap';
|
||||
@import 'flahses';
|
||||
@import 'xdebug';
|
||||
@import 'layout';
|
||||
|
||||
@ -0,0 +1,163 @@
|
||||
export default class Utils {
|
||||
/**
|
||||
* Une variable vaut-elle "undefined" ?
|
||||
*
|
||||
* @param {any} variable La variable à tester
|
||||
*
|
||||
* @returns {boolean} Vrai si la variable vaut "undefined", sinon Faux
|
||||
*/
|
||||
static isUndefined (variable) {
|
||||
return typeof variable === 'undefined';
|
||||
}
|
||||
/**
|
||||
* Une variable est-elle une chaîne de caractère ?
|
||||
*
|
||||
* @param {any} variable La variable à tester
|
||||
*
|
||||
* @returns {boolean} Vrai si la variable est uen chaîne de caractères, sinon Faux
|
||||
*/
|
||||
static isString (variable) {
|
||||
return typeof variable === 'string' || variable instanceof String;
|
||||
}
|
||||
/**
|
||||
* Une variable est-elle une chaine de caractère vide ou équivalent (undefined ou null) ?
|
||||
*
|
||||
* @param {any} variable La variable à tester
|
||||
*
|
||||
* @returns {boolean} Vrai si la variable est une chaine de caractères vide (ou équivalent)
|
||||
*/
|
||||
static empty_str (variable) {
|
||||
return Utils.isUndefined(variable) || variable === null || variable === '';
|
||||
}
|
||||
|
||||
/**
|
||||
* Vérifie qu'au moins une case à cocher d'une liste de cases à cocher est bien cochée
|
||||
*
|
||||
* @param {jQuery} list Une liste de case à cocher
|
||||
*
|
||||
* @returns {boolean} Vrai si au moins l'un de case à cocher est cochée.
|
||||
*/
|
||||
static checkAtLeastOnChecked (list) {
|
||||
return list.filter(':checked').length > 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Est-ce qu'un objet jQuery possède un attribut et qu'il est différent de Faux
|
||||
*
|
||||
* @param {jQuery} objJquery L'objet jQuery
|
||||
* @param {string} attrName Le nom de l'attribut
|
||||
*
|
||||
* @returns {boolean} Vrai si l'attribut existe et est différent de Faux.
|
||||
*/
|
||||
static hasAttr (objJquery, attrName) {
|
||||
let val = objJquery.attr(attrName);
|
||||
return !Utils.isUndefined(val) && val !== false;
|
||||
}
|
||||
/**
|
||||
* Récupère le formulaire associé à un champ
|
||||
*
|
||||
* Tient compte de l'attribut "form" si renseigné.
|
||||
*
|
||||
* @param {jQuery} input Le champ pour lequel on veut le formulaire
|
||||
*
|
||||
* @returns {jQuery} Le formulaire correspondant
|
||||
*/
|
||||
static getFormOfInput (input) {
|
||||
let form;
|
||||
|
||||
if (Utils.hasAttr(input, 'form')) {
|
||||
form = $('#' + input.attr('form'));
|
||||
}
|
||||
else {
|
||||
form = input.parents('form').first();
|
||||
}
|
||||
|
||||
return form;
|
||||
}
|
||||
|
||||
/**
|
||||
* Supprime les doublons d'un tableau
|
||||
*
|
||||
* @param {any[]} array Le tableau à dédoublonner
|
||||
*
|
||||
* @returns {any[]} Le tableau dédoublonné
|
||||
*/
|
||||
static array_uniq (array) {
|
||||
return Array.from(new Set(array));
|
||||
}
|
||||
|
||||
/**
|
||||
* Met la première lettre d'une chaine de caractères en majuscule
|
||||
*
|
||||
* @param {string} string La chaine de caractères
|
||||
*
|
||||
* @returns {string} La chaine de caractères avec la première lettre en majuscule
|
||||
*/
|
||||
static string_ucFirst (string) {
|
||||
return string.charAt(0).toUpperCase() + string.slice(1);
|
||||
}
|
||||
|
||||
/**
|
||||
* Calcule la taille RÉELLE d'un élément jQuery
|
||||
*
|
||||
* Prends la plus grande valeur entre la hauteur CSS de l'élément et la hauteur réelle de ses enfants.
|
||||
*
|
||||
* Cela permet de "corriger" le problème des conteneurs plus petit que leurs enfants
|
||||
*
|
||||
* @param {jQuery} element
|
||||
*
|
||||
* @returns {int} La hauteur réelle (en px)
|
||||
*/
|
||||
static getElementRealHeight (element) {
|
||||
if (element.length <= 0) {
|
||||
return 0;
|
||||
}
|
||||
const elementHeight = element.outerHeight(true);
|
||||
|
||||
let childrenHeight = 0;
|
||||
element.children().each(function () {
|
||||
childrenHeight = Utils.getElementRealHeight($(this));
|
||||
});
|
||||
|
||||
return parseInt(childrenHeight > elementHeight ? childrenHeight : elementHeight, 10);
|
||||
}
|
||||
|
||||
/**
|
||||
* Ajoute des arguments à une URL
|
||||
*
|
||||
* @param {object} arguments Les arguments à ajouter
|
||||
* @param {string} url L'URL à laquelle ajouter les arguments ; celle actuelle (location.href) si non fournie
|
||||
*
|
||||
* @return {string} L'URL de résultat
|
||||
*/
|
||||
static addArgumentsToUrl (args, url = undefined) {
|
||||
if (Utils.isUndefined(url)) {
|
||||
url = document.location.href;
|
||||
}
|
||||
|
||||
let urlObj = new URL(url);
|
||||
for (const [argumentName, argumentValue] of Object.entries(args)) {
|
||||
urlObj.searchParams.set(argumentName, argumentValue);
|
||||
}
|
||||
|
||||
return urlObj.toString();
|
||||
}
|
||||
|
||||
/**
|
||||
* Récupère une valeur data-*, avec gestion valeur par défaut
|
||||
*
|
||||
* @param {jQuery} element L'élément jQuery
|
||||
* @param {string} key La clé de la donnée voulue
|
||||
* @param {any} defaultValue La valeur par défaut
|
||||
*
|
||||
* @return {any} La valeur de la donnée
|
||||
*/
|
||||
static getData (element, key, defaultValue = undefined) {
|
||||
const value = element.data(key);
|
||||
if (Utils.isUndefined(value)) {
|
||||
return defaultValue;
|
||||
}
|
||||
|
||||
return value;
|
||||
}
|
||||
}
|
||||
@ -1,63 +1,22 @@
|
||||
{% extends "/html.html.twig" %}
|
||||
{% extends "/symfony.html.twig" %}
|
||||
|
||||
{% block headContent %}
|
||||
{% block headContentMeta %}
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
{% endblock %}
|
||||
|
||||
<title>{% block title %}{% endblock %}</title>
|
||||
|
||||
{% block CSS %}{% endblock %}
|
||||
|
||||
{% block JS_head %}{% endblock %}
|
||||
{% block headerTag %}
|
||||
<header class="pb-2">
|
||||
{% endblock %}
|
||||
|
||||
{% block bodyTag %}
|
||||
<body id="page-{{ app.current_route }}">
|
||||
{% endblock %}
|
||||
{% block bodyContent %}
|
||||
{% block headerTag %}
|
||||
<header>
|
||||
{% endblock %}
|
||||
{% block headerContent %}{% endblock %}
|
||||
</header>
|
||||
|
||||
{% block divBodyTag %}
|
||||
<div id="div-body" class="d-flex flex-row">
|
||||
{% endblock %}
|
||||
{% block asideLeft %}{% endblock %}
|
||||
|
||||
{% block centerDivBodyTag %}
|
||||
<div id="div-body-center" class="d-flex flex-column flex-grow-1">
|
||||
{% endblock %}
|
||||
|
||||
{% block sectionTop %}{% endblock %}
|
||||
|
||||
{% include '/_flashes.html.twig' %}
|
||||
|
||||
{% block sectionBefore %}{% endblock %}
|
||||
{% block mainTag %}
|
||||
<main>
|
||||
{% endblock %}
|
||||
{% block mainContent %}{% endblock %}
|
||||
</main>
|
||||
{% block sectionAfter %}{% endblock %}
|
||||
</div>
|
||||
{% block asideRight %}{% endblock %}
|
||||
{% block headerContent %}
|
||||
<nav class="navbar-light d-flex flex-column justify-content-start fixed-top">
|
||||
<div class="d-flex justify-content-between w-100 px-2">
|
||||
<!--region Website name-->
|
||||
<a class="navbar-brand" href="/">
|
||||
Web EDM
|
||||
</a>
|
||||
<!--endregion-->
|
||||
<!--region menu-->
|
||||
<div class="d-flex align-items-center">
|
||||
<a href="#" class="me-3">Sign In</a>
|
||||
<a href="#" class="me-3">Sign Up</a>
|
||||
</div>
|
||||
<!--endregion-->
|
||||
</div>
|
||||
|
||||
{% block footerTag %}
|
||||
<footer>
|
||||
{% endblock %}
|
||||
{% block footerContent %}{% endblock %}
|
||||
</footer>
|
||||
|
||||
<div class="d-none">
|
||||
{% block bodyHidden %}{% endblock %}
|
||||
</div>
|
||||
|
||||
{% block JS %}
|
||||
{% block importmap %}{{ importmap('app') }}{% endblock %}
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
</nav>
|
||||
{% endblock %}
|
||||
@ -0,0 +1,63 @@
|
||||
{% extends "/html.html.twig" %}
|
||||
|
||||
{% block headContent %}
|
||||
{% block headContentMeta %}
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
{% endblock %}
|
||||
|
||||
<title>{% block title %}{% endblock %}</title>
|
||||
|
||||
{% block CSS %}{% endblock %}
|
||||
|
||||
{% block JS_head %}{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
{% block bodyTag %}
|
||||
<body id="page-{{ app.current_route }}">
|
||||
{% endblock %}
|
||||
{% block bodyContent %}
|
||||
{% block headerTag %}
|
||||
<header>
|
||||
{% endblock %}
|
||||
{% block headerContent %}{% endblock %}
|
||||
</header>
|
||||
|
||||
{% block divBodyTag %}
|
||||
<div id="div-body" class="d-flex flex-row">
|
||||
{% endblock %}
|
||||
{% block asideLeft %}{% endblock %}
|
||||
|
||||
{% block centerDivBodyTag %}
|
||||
<div id="div-body-center" class="d-flex flex-column flex-grow-1">
|
||||
{% endblock %}
|
||||
|
||||
{% block sectionTop %}{% endblock %}
|
||||
|
||||
{% include '/_flashes.html.twig' %}
|
||||
|
||||
{% block sectionBefore %}{% endblock %}
|
||||
{% block mainTag %}
|
||||
<main>
|
||||
{% endblock %}
|
||||
{% block mainContent %}{% endblock %}
|
||||
</main>
|
||||
{% block sectionAfter %}{% endblock %}
|
||||
</div>
|
||||
{% block asideRight %}{% endblock %}
|
||||
</div>
|
||||
|
||||
{% block footerTag %}
|
||||
<footer>
|
||||
{% endblock %}
|
||||
{% block footerContent %}{% endblock %}
|
||||
</footer>
|
||||
|
||||
<div class="d-none">
|
||||
{% block bodyHidden %}{% endblock %}
|
||||
</div>
|
||||
|
||||
{% block JS %}
|
||||
{% block importmap %}{{ importmap('app') }}{% endblock %}
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue