Améliorations et aperçus en petit écran du menu

This commit is contained in:
Deltacms 2023-06-28 09:13:35 +02:00
parent 9260cc5219
commit a65f4110b8
21 changed files with 299 additions and 86 deletions

View File

@ -4,7 +4,7 @@
- Modifications :
- Une troisième langue d'administration est disponible : espagnol / castillan,
- Thème / Menu : le menu en petit écran (burger) dispose maintenant de ses propres paramètres,
- Edition de page / emplacement dans le menu : une page désactivée est signalée par le curseur 'not-allowed' en grand écran et par une icône en petit écran, son lien est inactif,
- Edition de page / emplacement dans le menu : une page désactivée est signalée par le curseur 'not-allowed' et par une typographie italique en petit écran, son lien est inactif,
- Nouveaux gabarits pour l'éditeur Tinymce : accordéon à 3 et 4 paragraphes,
- Statislite 4.8 : comptage des liens cliqués pour lesquels la class 'clicked_link_count' a été ajoutée par l'éditeur de liens de Tinymce.
- Corrections :

View File

@ -632,13 +632,47 @@ $(document).ready(function(){
}
}).trigger("resize");
/* Suppression du décalage vertical de la bannière en petit écran
* si menu burger fixe et bannière dans le site et bannière visible
/* Décalage en petit écran de la bannière ou de la section si le menu burger est fixe et non caché
* n'opère pas sur les pages de configuration du thème
*/
if($(window).width() < 800) {
<?php if( $this->getData(['theme','menu', 'burgerFixed'])=== true && $this->getData(['theme','header', 'position'])=== 'site' && $this->getData(['theme','header', 'tinyHidden'])=== false && ( $this->getData(['theme','header', 'homePageOnly'])=== false || $this->getUrl(0) === $this->getData(['locale','homePageId']) ) ){ ?>
$("#site.container").css("padding-top","0");
<?php } ?>
// Variables du thème
var positionNav = <?php echo json_encode($this->getData(['theme', 'menu', 'position'])); ?>;
var burgerFixed = <?php echo json_encode($this->getData(['theme', 'menu', 'burgerFixed'])); ?>;
var namePage = <?php echo json_encode($this->getUrl(0)); ?>;
if( positionNav !=='hide' && burgerFixed === true && namePage !== 'theme'){
var positionHeader = <?php echo json_encode($this->getData(['theme', 'header', 'position'])); ?>;
var tinyHidden = <?php echo json_encode($this->getData(['theme', 'header', 'tinyHidden'])); ?>;
var homePageOnly = <?php echo json_encode($this->getData(['theme', 'header', 'homePageOnly'])); ?>;
var bannerMenuHeight = $("nav #toggle").css("height");
bannerMenuHeightSection = ( parseInt( bannerMenuHeight.replace("px","") ) + 10 ).toString() + "px";
var burgerOverlay = <?php echo json_encode($this->getData(['theme', 'menu', 'burgerOverlay'])); ?>;
var homePageId = <?php echo json_encode($this->getData(['locale', 'homePageId'])); ?>;
var offsetBanner = "0";
if( burgerOverlay === false) offsetBanner = bannerMenuHeight;
// Si la bannière est visible la décaler
if( tinyHidden === false && ( homePageOnly === false || namePage === homePageId )){
$("#site.container header, header.container").css("padding-top",offsetBanner);
} else {
// sinon décaler la section
$("section").css("padding-top",bannerMenuHeightSection);
}
// Si la bannière est cachée décaler la section
if( positionHeader === 'hide'){
$("section").css("padding-top",bannerMenuHeightSection);
}
}
}
/* Positionnement vertical du bandeau du menu burger si il est fixe et si un utilisateur est connecté
*/
$(window).on("resize", function() {
if($(window).width() < 800) {
<?php if( $this->getData(['theme','menu', 'burgerFixed'])=== true){ ?>
var barHeight = $(" #bar ").css("height");
$(".navfixedburgerconnected").css("top",barHeight);
<?php } ?>
}
}).trigger("resize");
});

View File

@ -1678,9 +1678,11 @@ class common {
// Lexique
include('./core/lang/'. $this->getData(['config', 'i18n', 'langAdmin']) . '/lex_core.php');
$menuClass = ''; $burgerclass =''; $burgerclassshort ='';
// Groupe du client connecté (1, 2, 3, 4) ou non connecté (0)
$groupUser = $this->getUser('group') === false ? 0 : $this->getUser('group');
// Ajout de la class navfixedburgerconnected ou navfixedburgerlogout si le bandeau (texte ou logo + icône burger) du menu burger est fixe
if( $this->getData(['theme', 'menu', 'burgerFixed']) === true ){
if( $this->getUser('password') === $this->getInput('DELTA_USER_PASSWORD') AND $this->getUser('group') > self::GROUP_MEMBER ) {
if( $groupUser >= 2 ) {
$burgerclass = 'class="navfixedburgerconnected"';
$burgerclassshort = 'navfixedburgerconnected';
} else {
@ -1688,7 +1690,7 @@ class common {
$burgerclassshort = 'navfixedburgerlogout';
}
} else {
if( $this->getUser('password') === $this->getInput('DELTA_USER_PASSWORD') AND $this->getUser('group') > self::GROUP_MEMBER) {
if( $groupUser >= 2 ) {
$burgerclass = 'class="navburgerconnected"';
$burgerclassshort = 'navburgerconnected';
}
@ -1697,7 +1699,7 @@ class common {
case 'top':
// Détermine si le menu est fixe en haut de page lorsque l'utilisateur n'est pas connecté
if ( $this->getData(['theme', 'menu', 'position']) === 'top' AND $this->getData(['theme', 'menu', 'fixed']) === true ){
if( $this->getUser('password') === $this->getInput('DELTA_USER_PASSWORD') AND $this->getUser('group') > self::GROUP_MEMBER) {
if( $groupUser >= 2 ) {
echo '<nav id="navfixedconnected" '.$burgerclass.'>';
} else {
echo '<nav id="navfixedlogout" '.$burgerclass.'>';
@ -1767,8 +1769,6 @@ class common {
</div>
<div id="menu" <?php echo $menuClass; ?> > <?php
// Groupe du client connecté (1, 2, 3, 4) ou non connecté (0)
$groupUser = $this->getUser('group') === false ? 0 : $this->getUser('group');
// Met en forme les items du menu
$itemsLeft = '';
$currentPageId = $this->getData(['page', $this->getUrl(0)]) ? $this->getUrl(0) : $this->getUrl(2);
@ -2632,9 +2632,6 @@ class core extends common {
$css .= $this->getData(['theme', 'site', 'width']) === '75vw'
? '.button, button{font-size:0.8em;}'
: '';
if( $this->getData([ 'theme', 'menu', 'burgerFixed']) === true) {
$css .= '@media screen and (max-width: 799px) { #site.container { padding-top: 60px; } }';
}
$css .= '#site{background-color:' . $this->getData(['theme', 'site', 'backgroundColor']) . ';border-radius:' . $this->getData(['theme', 'site', 'radius']) . ';box-shadow:' . $this->getData(['theme', 'site', 'shadow']) . ' #212223;}';
$colors = helper::colorVariants($this->getData(['theme', 'button', 'backgroundColor']));
$css .= '.speechBubble,.button,.button:hover,button[type=\'submit\'],.pagination a,.pagination a:hover,input[type=\'checkbox\']:checked + label:before,input[type=\'radio\']:checked + label:before,.helpContent{background-color:' . $colors['normal'] . ';color:' . $colors['text'] . '}';
@ -2736,20 +2733,7 @@ class core extends common {
$colors = helper::colorVariants($this->getData(['theme', 'menu', 'burgerBackgroundColorSub']));
$css .= 'nav #menu .navSub a{background-color:' . $colors['normal'] . '}';
$css .= '}';
// Site en petit écran décalé si le menu burger fixe et non caché et si la bannière est masquée en petit écran ou cachée
if( $this->getData(['theme', 'menu', 'burgerFixed']) && $this->getData(['theme', 'menu', 'position']) !== 'hide' &&
( $this->getData(['theme', 'header', 'tinyHidden']) || $this->getData(['theme', 'header', 'position']) === 'hide' ) ){
// Calcul de la hauteur du menu burger
$fontsize = $this->getData(['theme', 'text', 'fontSize']);
$pospx = strpos($fontsize, 'px');
$fontsize = (int) substr( $fontsize, 0, $pospx);
$height = $this->getData(['theme', 'menu', 'height']);
$pospx = strpos($height, 'px');
$height = (int) substr( $height, 0, $pospx);
$heightBurgerMenu = 2*($height + $fontsize)-6;
//décalage de la hauteur du menu - quelques pixels
$css .= '@media screen and (max-width: 799px){#site{padding-top:'.$heightBurgerMenu.'px !important;}}';
}
// Partie commune aux 2 types d'écran
// Appliquer au menu les réglages de largeur minimale suivant l'option tous ou pages parent uniquement
foreach($this->getHierarchy() as $parentPageId => $childrenPageIds) {

View File

@ -136,7 +136,10 @@
font-size: 0.8rem !important ;
}
section {
padding: 10px !important ;
padding-top: 10px;
padding-right: 10px !important ;
padding-left: 10px !important ;
padding-bottom: 10px !important ;
}
/* siteContainer */
.siteContainer {
@ -245,9 +248,8 @@
.navfixedburgerconnected {
position: fixed;
z-index: 11;
top: 90px;
/*top: dans core.js.php*/
padding: 0px;
/*pour fixed*/
width:100%;
}
.navfixedburgerlogout{
@ -255,7 +257,6 @@
z-index: 10;
top: 0;
padding: 0px;
/*pour fixed*/
width:100%;
}
.navfixedburgerconnected #menu, .navburgerconnected #menu{
@ -341,9 +342,3 @@
}
}
/* Menu burger sur très petit écran */
@media (max-width: 361px) {
.navfixedburgerconnected {
top: 135px;
}
}

View File

@ -386,7 +386,8 @@ class init extends common {
'burgerActiveColor' => '',
'burgerBackgroundColorSub' => 'rgba(83, 107, 143, 1)',
'burgerIconLink1' => 'accueil',
'burgerIconLink2' => ''
'burgerIconLink2' => '',
'burgerOverlay' => true
],
'site' => [
'backgroundColor' => 'rgba(255, 255, 255, 1)',

View File

@ -210,7 +210,7 @@ $text['core_theme_view']['menu'][3] = 'Settings';
$text['core_theme_view']['menu'][4] = 'Position';
$text['core_theme_view']['menu'][5] = 'Layout';
$text['core_theme_view']['menu'][6] = 'Rounded edges';
$text['core_theme_view']['menu'][7] = 'Around the selected page';
$text['core_theme_view']['menu'][7] = 'Around the selected page.';
$text['core_theme_view']['menu'][8] = 'Height';
$text['core_theme_view']['menu'][9] = 'Alignment of content';
$text['core_theme_view']['menu'][10] = 'Align menu with content';
@ -244,7 +244,6 @@ $text['core_theme_view']['menu'][37] = 'Minimum width of a tab';
$text['core_theme_view']['menu'][38] = 'Minimum width of menu tabs. The submenu has a width imposed by that of the parent tab.';
$text['core_theme_view']['menu'][39] = 'On: all / Off: with submenu only';
$text['core_theme_view']['menu'][40] = 'Layout of menu items. The width of the menu banner is automatically adjusted.';
$text['core_theme_view']['menu'][41] = 'Colors and contents for small screens < 800 pixels, burger menu';
$text['core_theme_view']['menu'][42] = 'Fixed burger menu';
$text['core_theme_view']['menu'][43] = 'Banner text';
@ -260,6 +259,11 @@ $text['core_theme_view']['menu'][52] = 'Link to page';
$text['core_theme_view']['menu'][53] = 'This choice allows a shortcut to an important page like the home page.';
$text['core_theme_view']['menu'][54] = 'Core icon';
$text['core_theme_view']['menu'][55] = 'This icon will be visible in the central part of the burger menu banner';
$text['core_theme_view']['menu'][56] = 'When fixed the banner of the burger menu is at the top of the screen or under the administration bar.';
$text['core_theme_view']['menu'][57] = 'Overlay menu banner and header';
$text['core_theme_view']['menu'][58] = 'The header, when visible, will be superimposed on the menu banner, which usually involves making the color of the menu banner transparent';
$text['core_theme_view']['menu'][59] = "Only the 'Hidden' option has an effect in small screen (<800 pixels) if the burger menu is fixed.";
$text['core_theme_view']['menu'][60] = 'Settings for wide screens >= 800 pixels';
$text['core_theme_view']['site'][0] = 'Back';
$text['core_theme_view']['site'][1] = 'Help';

View File

@ -210,7 +210,7 @@ $text['core_theme_view']['menu'][3] = 'Configuración';
$text['core_theme_view']['menu'][4] = 'Posición';
$text['core_theme_view']['menu'][5] = 'Diseño';
$text['core_theme_view']['menu'][6] = 'Bordes redondeados';
$text['core_theme_view']['menu'][7] = 'Alrededor de la página seleccionada';
$text['core_theme_view']['menu'][7] = 'Alrededor de la página seleccionada.';
$text['core_theme_view']['menu'][8] = 'Altura';
$text['core_theme_view']['menu'][9] = 'Alineación de contenido';
$text['core_theme_view']['menu'][10] = 'Alinear el menú con el contenido';
@ -244,7 +244,6 @@ $text['core_theme_view']['menu'][37] = 'Ancho mínimo de pestaña';
$text['core_theme_view']['menu'][38] = 'Ancho mínimo de las pestañas del menú. El submenú tiene un ancho impuesto por el de la pestaña principal.';
$text['core_theme_view']['menu'][39] = 'Activado: todo / Desactivado: solo con submenú';
$text['core_theme_view']['menu'][40] = 'Disposición del elemento de menú. El ancho del banner del menú se adapta automáticamente.';
$text['core_theme_view']['menu'][41] = 'Colores y contenidos para pantallas pequeñas < 800 píxeles, menú hamburguesa';
$text['core_theme_view']['menu'][42] = 'Menú de hamburguesas fijo';
$text['core_theme_view']['menu'][43] = 'Texto del banner';
@ -260,6 +259,11 @@ $text['core_theme_view']['menu'][52] = 'Enlace a la página';
$text['core_theme_view']['menu'][53] = 'Esta opción permite un acceso directo a una página importante como la página de inicio.';
$text['core_theme_view']['menu'][54] = 'Icono principal';
$text['core_theme_view']['menu'][55] = 'Este ícono será visible en la parte central del banner del menú de hamburguesas';
$text['core_theme_view']['menu'][56] = 'Cuando se arregla, el banner del menú de hamburguesas está en la parte superior de la pantalla o debajo de la barra de administración.';
$text['core_theme_view']['menu'][57] = 'Banner y banner de menú superpuesto';
$text['core_theme_view']['menu'][58] = 'El banner, cuando esté visible, se superpondrá al banner del menú, lo que generalmente implica hacer que el color del banner del menú sea transparente';
$text['core_theme_view']['menu'][59] = "Solo la opción 'Oculto' tiene efecto en pantalla pequeña (<800 píxeles) si el menú de hamburguesas está fijo.";
$text['core_theme_view']['menu'][60] = 'Ajustes para pantallas anchas >= 800 píxeles';
$text['core_theme_view']['site'][0] = 'Atrás';
$text['core_theme_view']['site'][1] = 'Ayuda';

View File

@ -210,7 +210,7 @@ $text['core_theme_view']['menu'][3] = 'Paramètres';
$text['core_theme_view']['menu'][4] = 'Position';
$text['core_theme_view']['menu'][5] = 'Disposition';
$text['core_theme_view']['menu'][6] = 'Bords arrondis';
$text['core_theme_view']['menu'][7] = 'Autour de la page sélectionnée';
$text['core_theme_view']['menu'][7] = 'Autour de la page sélectionnée.';
$text['core_theme_view']['menu'][8] = 'Hauteur';
$text['core_theme_view']['menu'][9] = 'Alignement du contenu';
$text['core_theme_view']['menu'][10] = 'Aligner le menu avec le contenu';
@ -244,7 +244,6 @@ $text['core_theme_view']['menu'][37] = 'Largeur minimale d\'un onglet';
$text['core_theme_view']['menu'][38] = 'Largeur minimum des onglets du menu.Le sous-menu a une largeur imposée par celle de l\'onglet parent.';
$text['core_theme_view']['menu'][39] = 'On : tous / Off : avec sous-menu uniquement';
$text['core_theme_view']['menu'][40] = 'Disposition des items du menu. La largeur du bandeau du menu, elle, s\'adapte automatiquement.';
$text['core_theme_view']['menu'][41] = 'Couleurs et contenus pour les petits écrans < 800 pixels, menu burger';
$text['core_theme_view']['menu'][42] = 'Menu burger fixe';
$text['core_theme_view']['menu'][43] = 'Texte du bandeau';
@ -261,8 +260,10 @@ $text['core_theme_view']['menu'][53] = 'Ce choix permet un raccourci vers une pa
$text['core_theme_view']['menu'][54] = 'Icône centrale';
$text['core_theme_view']['menu'][55] = 'Cette icône sera visible dans la partie centrale du bandeau du menu burger';
$text['core_theme_view']['menu'][56] = 'Quand il est fixe le bandeau du menu burger est en haut d\'écran ou sous la barre d\'administration.';
$text['core_theme_view']['menu'][57] = 'Superposition du bandeau du menu et de la bannière';
$text['core_theme_view']['menu'][58] = 'La bannière, quand elle est visible, sera superposée au bandeau du menu, ce qui implique le plus souvent de rendre la couleur du bandeau du menu transparente';
$text['core_theme_view']['menu'][59] = "Seule l'option 'Caché' a un effet en petit écran (<800 pixels) si le menu burger est fixe.";
$text['core_theme_view']['menu'][60] = 'Paramètres pour les écrans larges >= 800 pixels';
$text['core_theme_view']['site'][0] = 'Retour';
$text['core_theme_view']['site'][1] = 'Aide';

View File

@ -598,7 +598,8 @@ class theme extends common {
'burgerActiveColor' => $this->getInput('themeMenuBurgerActiveColor'),
'burgerBackgroundColorSub' => $this->getInput('themeMenuBurgerBackgroundColorSub'),
'burgerIconLink1' => $this->getInput('themeMenuBurgerIconLink1'),
'burgerIconLink2' => $this->getInput('themeMenuBurgerIconLink2')
'burgerIconLink2' => $this->getInput('themeMenuBurgerIconLink2'),
'burgerOverlay' => $this->getInput('themeMenuBurgerOverlay', helper::FILTER_BOOLEAN)
]]);
// Valeurs en sortie

View File

@ -53,3 +53,30 @@ $("#themeBodyImage").on("change", function() {
}
}).trigger("change");
/* Décalage de la bannière ou de la section particulier à cette page
* petit écran et menu burger fixe et non caché
*/
if($(window).width() < 800) {
// Variables du thème
var positionNav = <?php echo json_encode($this->getData(['theme', 'menu', 'position'])); ?>;
var positionHeader = <?php echo json_encode($this->getData(['theme', 'header', 'position'])); ?>;
var tinyHidden = <?php echo json_encode($this->getData(['theme', 'header', 'tinyHidden'])); ?>;
var bannerMenuHeight = $("nav #toggle").css("height");
bannerMenuHeightSection = ( parseInt( bannerMenuHeight.replace("px","") ) + 10 ).toString() + "px";
var burgerFixed = <?php echo json_encode($this->getData(['theme', 'menu', 'burgerFixed'])); ?>;
var burgerOverlay = <?php echo json_encode($this->getData(['theme', 'menu', 'burgerOverlay'])); ?>;
if( positionNav !=='hide' && burgerFixed === true && burgerOverlay === false){
// Bannière masquée décaler la section
if( tinyHidden === true ){
$("section").css("padding-top",bannerMenuHeightSection);
} else {
// Bannière non masquée décaler la bannière
$("header").css("padding-top",bannerMenuHeight);
}
}
if( positionNav !=='hide' && burgerFixed === true && ( burgerOverlay === true && tinyHidden === true || positionHeader === 'hide' )){
// Bannière masquée ou cachée décaler la section
$("section").css("padding-top",bannerMenuHeightSection);
}
}

View File

@ -322,3 +322,31 @@ $("#themeFooterPosition").on("change", function() {
}
}).trigger("change");
*/
/* Décalage de la bannière ou de la section particulier à cette page
* petit écran et menu burger fixe et non caché
*/
if($(window).width() < 800) {
// Variables du thème
var positionNav = <?php echo json_encode($this->getData(['theme', 'menu', 'position'])); ?>;
var positionHeader = <?php echo json_encode($this->getData(['theme', 'header', 'position'])); ?>;
var tinyHidden = <?php echo json_encode($this->getData(['theme', 'header', 'tinyHidden'])); ?>;
var bannerMenuHeight = $("nav #toggle").css("height");
bannerMenuHeightSection = ( parseInt( bannerMenuHeight.replace("px","") ) + 10 ).toString() + "px";
var burgerFixed = <?php echo json_encode($this->getData(['theme', 'menu', 'burgerFixed'])); ?>;
var burgerOverlay = <?php echo json_encode($this->getData(['theme', 'menu', 'burgerOverlay'])); ?>;
if( positionNav !=='hide' && burgerFixed === true && burgerOverlay === false){
// Bannière masquée décaler la section
if( tinyHidden === true ){
$("section").css("padding-top",bannerMenuHeightSection);
} else {
// Bannière non masquée décaler la bannière
$("header").css("padding-top",bannerMenuHeight);
}
}
if( positionNav !=='hide' && burgerFixed === true && ( burgerOverlay === true && tinyHidden === true || positionHeader === 'hide' )){
// Bannière masquée ou cachée décaler la section
$("section").css("padding-top",bannerMenuHeightSection);
}
}

View File

@ -92,7 +92,6 @@ $("input, select").on("change", function() {
// Position de la bannière
var positionNav = <?php echo json_encode($this->getData(['theme', 'menu', 'position'])); ?>;
var positionHeader = $("#themeHeaderPosition").val();
switch(positionHeader) {
case 'hide':
$("nav").show().prependTo("#site");
@ -120,6 +119,8 @@ $("input, select").on("change", function() {
css += 'nav{margin:0 20px}';
}
break;
case "top":
break;
}
break;
case 'body':
@ -253,3 +254,27 @@ $("#themeHeaderFeature").on("change", function() {
$("#themeHeaderTextColorWrapper").hide();
}
}).trigger("change");
/* Décalage de la bannière ou de la section particulier à cette page
* petit écran et menu burger fixe et non caché
*/
if($(window).width() < 800) {
// Variables du thème
var positionNav = <?php echo json_encode($this->getData(['theme', 'menu', 'position'])); ?>;
var positionHeader = <?php echo json_encode($this->getData(['theme', 'header', 'position'])); ?>;
var tinyHidden = <?php echo json_encode($this->getData(['theme', 'header', 'tinyHidden'])); ?>;
var bannerMenuHeight = $("nav #toggle").css("height");
bannerMenuHeightSection = ( parseInt( bannerMenuHeight.replace("px","") ) + 10 ).toString() + "px";
var burgerFixed = <?php echo json_encode($this->getData(['theme', 'menu', 'burgerFixed'])); ?>;
var burgerOverlay = <?php echo json_encode($this->getData(['theme', 'menu', 'burgerOverlay'])); ?>;
if( positionNav !=='hide' && burgerFixed === true && burgerOverlay === false){
// Décalage de la bannière de la hauteur du menu
$("header").css("padding-top",bannerMenuHeight);
}
if( positionNav !=='hide' && burgerFixed === true && positionHeader === 'hide' ){
// si bannière cachée décalage de la section
$("header").removeClass("displayNone");
$("section").css("padding-top",bannerMenuHeightSection);
}
if( positionHeader === 'body' && tinyHidden === true) $("header.bannerDisplay").css("display","block");
}

View File

@ -26,13 +26,6 @@ nav li ul {
display: none;
}
@media (max-width: 799px){
.navfixedburgerconnected {
position: relative;
top : 0px;
}
}
#themeShowAll,
#themeHelp,
#themeFonts,

View File

@ -90,3 +90,32 @@ $("section")
$(".speechBubble").text(" <?php echo $text['core_theme_view']['index'][0]; ?> ");
}
<?php } ?>
/* Décalage de la bannière ou de la section particulier à cette page
* petit écran et menu burger fixe et non caché
*/
if($(window).width() < 800) {
// Variables du thème
var positionNav = <?php echo json_encode($this->getData(['theme', 'menu', 'position'])); ?>;
var positionHeader = <?php echo json_encode($this->getData(['theme', 'header', 'position'])); ?>;
var tinyHidden = <?php echo json_encode($this->getData(['theme', 'header', 'tinyHidden'])); ?>;
var bannerMenuHeight = $("nav #toggle").css("height");
bannerMenuHeightSection = ( parseInt( bannerMenuHeight.replace("px","") ) + 10 ).toString() + "px";
var burgerFixed = <?php echo json_encode($this->getData(['theme', 'menu', 'burgerFixed'])); ?>;
var burgerOverlay = <?php echo json_encode($this->getData(['theme', 'menu', 'burgerOverlay'])); ?>;
if( positionNav !=='hide' && burgerFixed === true){
// si bannière masquée
if( tinyHidden === true ){
// Décalage de la bannière et de la section
$("header").css("padding-top",bannerMenuHeight);
$("section").css("padding-top",bannerMenuHeightSection);
} else {
// Bannière non masquée décaler la bannière
$("header").css("padding-top",bannerMenuHeight);
}
}
if( positionNav !=='hide' && burgerFixed === true && positionHeader === 'hide'){
// si bannière cachée décalage de la section
$("section").css("padding-top",bannerMenuHeightSection);
}
}

View File

@ -91,7 +91,7 @@ $("input, select").on("change", function() {
// Position du menu
switch($("#themeMenuPosition").val()) {
case 'hide':
$("nav").hide();
$("nav").show();
break;
case 'site-first':
$("nav").show().prependTo("#site");
@ -137,17 +137,19 @@ $("input, select").on("change", function() {
$("#menu").addClass("container");
}
// Largeur du menu quand la bannière est au dessus du site et limitée aus site
if( <?php echo json_encode($this->getData(['theme', 'header', 'position']) === 'body'); ?> && <?php echo json_encode($this->getData(['theme', 'header', 'wide']) === 'container'); ?>){
if( $("#themeMenuPosition").val() === 'body-first' || $("#themeMenuPosition").val() === 'body-second'){
// Menu avant ou après la bannière
$("nav").css("width", "<?php echo $this->getData(['theme', 'site', 'width']); ?>");
$("nav").css("display", "block");
$("nav").css("margin", "auto");
} else {
$("nav").css("width", document.body.clientWidth + 20);
$("nav").css("max-width", document.body.clientWidth + 20);
$("body").css("margin", "0px");
// Largeur du menu quand la bannière est au dessus du site et limitée aus site en grand écran
if( $(window).width() >= 800 ){
if( <?php echo json_encode($this->getData(['theme', 'header', 'position']) === 'body'); ?> && <?php echo json_encode($this->getData(['theme', 'header', 'wide']) === 'container'); ?>){
if( $("#themeMenuPosition").val() === 'body-first' || $("#themeMenuPosition").val() === 'body-second'){
// Menu avant ou après la bannière
$("nav").css("width", "<?php echo $this->getData(['theme', 'site', 'width']); ?>");
$("nav").css("display", "block");
$("nav").css("margin", "auto");
} else {
$("nav").css("width", document.body.clientWidth + 20);
$("nav").css("max-width", document.body.clientWidth + 20);
$("body").css("margin", "0px");
}
}
}
@ -240,6 +242,17 @@ $("#themeMenuBurgerActiveColorAuto").on("change", function() {
}
}).trigger("change");
// Affiche la sélection de superposition bandeau du menu / bannière
$("#themeMenuBurgerFixed").on("change", function() {
if ($(this).is(':checked') ) {
console.log('checked');
$("#themeMenuBurgerOverlayWrapper").slideDown();
} else {
console.log('no checked');
$("#themeMenuBurgerOverlayWrapper").slideUp();
}
}).trigger("change");
// Affiche / Cache la sélection des Icones ou du titre pour le menu burger
$("#themeMenuBurgerContent").on("change", function() {
switch($(this).val()) {
@ -265,3 +278,31 @@ $("#themeMenuBurgerContent").on("change", function() {
break;
}
}).trigger("select");
/* Décalage de la bannière ou de la section particulier à cette page
* petit écran et menu burger fixe et non caché
*/
if($(window).width() < 800) {
$(".container").css("max-width","100%");
// Variables du thème
var positionNav = <?php echo json_encode($this->getData(['theme', 'menu', 'position'])); ?>;
var positionHeader = <?php echo json_encode($this->getData(['theme', 'header', 'position'])); ?>;
var tinyHidden = <?php echo json_encode($this->getData(['theme', 'header', 'tinyHidden'])); ?>;
var bannerMenuHeight = $("nav #toggle").css("height");
bannerMenuHeightSection = ( parseInt( bannerMenuHeight.replace("px","") ) + 10 ).toString() + "px";
var burgerFixed = <?php echo json_encode($this->getData(['theme', 'menu', 'burgerFixed'])); ?>;
var burgerOverlay = <?php echo json_encode($this->getData(['theme', 'menu', 'burgerOverlay'])); ?>;
if( positionNav !=='hide' && burgerFixed === true && burgerOverlay === false){
// Bannière masquée décaler la section
if( tinyHidden === true ){
$("section").css("padding-top",bannerMenuHeightSection);
} else {
// Bannière non masquée décaler la bannière
$("header").css("padding-top",bannerMenuHeight);
}
}
if( positionNav !=='hide' && burgerFixed === true && ( burgerOverlay === true && tinyHidden === true || positionHeader === 'hide' )){
// Bannière masquée ou cachée décaler la section
$("section").css("padding-top",bannerMenuHeightSection);
}
}

View File

@ -39,33 +39,42 @@ echo template::formOpen('themeMenuForm'); ?>
<div class="block">
<div class="blockTitle"><?php echo $text['core_theme_view']['menu'][3]; ?></div>
<div class="row">
<div class="col6">
<div class="col4">
<?php
if( $this->getData(['theme', 'header', 'position']) == "site"){
echo template::select('themeMenuPosition', $menuPositionsSite, [
'label' => $text['core_theme_view']['menu'][4],
'help' => $text['core_theme_view']['menu'][59],
'selected' => $this->getData(['theme', 'menu', 'position'])
]);
} elseif( $this->getData(['theme', 'header', 'position']) == "body"){
echo template::select('themeMenuPosition', $menuPositionsBody, [
'label' => $text['core_theme_view']['menu'][4],
'help' => $text['core_theme_view']['menu'][59],
'selected' => $this->getData(['theme', 'menu', 'position'])
]);
}else{
echo template::select('themeMenuPosition', $menuPositionsHide, [
'label' => $text['core_theme_view']['menu'][4],
'help' => $text['core_theme_view']['menu'][59],
'selected' => $this->getData(['theme', 'menu', 'position'])
]);
}?>
</div>
<div class="col6 themeMenuWideWrapper">
<?php echo template::select('themeMenuWide', $containerWides, [
'label' => $text['core_theme_view']['menu'][5],
'help' => $text['core_theme_view']['menu'][40],
'selected' => $this->getData(['theme', 'menu', 'wide'])
]); ?>
</div>
</div>
<div class="col4">
<?php echo template::select('themeMenuHeight', $menuHeights, [
'label' => $text['core_theme_view']['menu'][8],
'selected' => $this->getData(['theme', 'menu', 'height'])
]); ?>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col12">
<div class="block">
<div class="blockTitle"><?php echo $text['core_theme_view']['menu'][60]; ?></div>
<div class="row">
<div class="col4">
<?php echo template::select('themeMenuRadius', $menuRadius, [
@ -74,18 +83,19 @@ echo template::formOpen('themeMenuForm'); ?>
'help' => $text['core_theme_view']['menu'][7]
]); ?>
</div>
<div class="col4">
<?php echo template::select('themeMenuHeight', $menuHeights, [
'label' => $text['core_theme_view']['menu'][8],
'selected' => $this->getData(['theme', 'menu', 'height'])
]); ?>
</div>
<div class="col4">
<?php echo template::select('themeMenuTextAlign', $aligns, [
'label' => $text['core_theme_view']['menu'][9],
'selected' => $this->getData(['theme', 'menu', 'textAlign'])
]); ?>
</div>
<div class="col4 themeMenuWideWrapper">
<?php echo template::select('themeMenuWide', $containerWides, [
'label' => $text['core_theme_view']['menu'][5],
'help' => $text['core_theme_view']['menu'][40],
'selected' => $this->getData(['theme', 'menu', 'wide'])
]); ?>
</div>
</div>
<div class="row">
<div class="col4">
@ -207,7 +217,13 @@ echo template::formOpen('themeMenuForm'); ?>
'help' => $text['core_theme_view']['menu'][56]
]); ?>
</div>
<div class="col3">
<div class="col3">
<?php echo template::checkbox('themeMenuBurgerOverlay', true, $text['core_theme_view']['menu'][57], [
'checked' => $this->getData(['theme', 'menu', 'burgerOverlay']),
'help' => $text['core_theme_view']['menu'][58]
]); ?>
</div>
<div class="col4 offset2">
<?php echo template::select('themeMenuBurgerContent', $burgerContent, [
'label' => $text['core_theme_view']['menu'][16],
'selected' => $this->getData(['theme', 'menu', 'burgerContent']),

View File

@ -58,7 +58,8 @@ $("input, select").on("change",function() {
css += ".button, button{font-size:1em;}";
}
// Largeur du site
var margin = $("#themeSiteMargin").is(":checked") ? 0 : '20px' ;
var margin = '20px';
if ( $("#themeSiteMargin").is(":checked") || $(window).width() < 800 ) margin = '0px' ;
css += ".container{max-width:" + $("#themeSiteWidth").val() + "}";
if ($("#themeSiteWidth").val() === "100%") {
css += "#site{margin: 0px auto;} body{margin:0 auto;} #bar{margin:0 auto;} body > header{margin:0 auto;} body > nav {margin: 0 auto;} body > footer {margin:0 auto;}";
@ -101,3 +102,32 @@ $("input, select").on("change",function() {
.appendTo("head");
}).trigger("change");
/* Décalage de la bannière ou de la section particulier à cette page
* petit écran et menu burger fixe et non caché
*/
if($(window).width() < 800) {
$(".container").css("max-width","100%");
// Variables du thème
var positionNav = <?php echo json_encode($this->getData(['theme', 'menu', 'position'])); ?>;
var positionHeader = <?php echo json_encode($this->getData(['theme', 'header', 'position'])); ?>;
var tinyHidden = <?php echo json_encode($this->getData(['theme', 'header', 'tinyHidden'])); ?>;
var bannerMenuHeight = $("nav #toggle").css("height");
bannerMenuHeightSection = ( parseInt( bannerMenuHeight.replace("px","") ) + 10 ).toString() + "px";
var burgerFixed = <?php echo json_encode($this->getData(['theme', 'menu', 'burgerFixed'])); ?>;
var burgerOverlay = <?php echo json_encode($this->getData(['theme', 'menu', 'burgerOverlay'])); ?>;
if( positionNav !=='hide' && burgerFixed === true && burgerOverlay === false){
// Bannière masquée décaler la section
if( tinyHidden === true ){
$("section").css("padding-top",bannerMenuHeightSection);
} else {
// Bannière non masquée décaler la bannière
$("header").css("padding-top",bannerMenuHeight);
}
}
if( positionNav !=='hide' && burgerFixed === true && ( burgerOverlay === true && tinyHidden === true || positionHeader === 'hide' )){
// Bannière masquée ou cachée décaler la section
$("section").css("padding-top",bannerMenuHeightSection);
}
}