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 '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 headerTag %}
|
||||||
{% block headContentMeta %}
|
<header class="pb-2">
|
||||||
<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 %}
|
{% endblock %}
|
||||||
|
{% block headerContent %}
|
||||||
{% block bodyTag %}
|
<nav class="navbar-light d-flex flex-column justify-content-start fixed-top">
|
||||||
<body id="page-{{ app.current_route }}">
|
<div class="d-flex justify-content-between w-100 px-2">
|
||||||
{% endblock %}
|
<!--region Website name-->
|
||||||
{% block bodyContent %}
|
<a class="navbar-brand" href="/">
|
||||||
{% block headerTag %}
|
Web EDM
|
||||||
<header>
|
</a>
|
||||||
{% endblock %}
|
<!--endregion-->
|
||||||
{% block headerContent %}{% endblock %}
|
<!--region menu-->
|
||||||
</header>
|
<div class="d-flex align-items-center">
|
||||||
|
<a href="#" class="me-3">Sign In</a>
|
||||||
{% block divBodyTag %}
|
<a href="#" class="me-3">Sign Up</a>
|
||||||
<div id="div-body" class="d-flex flex-row">
|
</div>
|
||||||
{% endblock %}
|
<!--endregion-->
|
||||||
{% 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>
|
</div>
|
||||||
|
</nav>
|
||||||
{% block footerTag %}
|
{% endblock %}
|
||||||
<footer>
|
|
||||||
{% endblock %}
|
|
||||||
{% block footerContent %}{% endblock %}
|
|
||||||
</footer>
|
|
||||||
|
|
||||||
<div class="d-none">
|
|
||||||
{% block bodyHidden %}{% endblock %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{% block JS %}
|
|
||||||
{% block importmap %}{{ importmap('app') }}{% endblock %}
|
|
||||||
{% endblock %}
|
|
||||||
{% 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