Améliorations et aperçus en petit écran du menu
This commit is contained in:
parent
9260cc5219
commit
a65f4110b8
|
@ -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 :
|
||||
|
|
|
@ -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");
|
||||
|
||||
});
|
||||
|
|
|
@ -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) {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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)',
|
||||
|
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
}
|
||||
}
|
|
@ -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");
|
||||
}
|
||||
|
|
|
@ -26,13 +26,6 @@ nav li ul {
|
|||
display: none;
|
||||
}
|
||||
|
||||
@media (max-width: 799px){
|
||||
.navfixedburgerconnected {
|
||||
position: relative;
|
||||
top : 0px;
|
||||
}
|
||||
}
|
||||
|
||||
#themeShowAll,
|
||||
#themeHelp,
|
||||
#themeFonts,
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
|
@ -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);
|
||||
}
|
||||
}
|
|
@ -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']),
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue