menu burger mises au point

This commit is contained in:
Deltacms 2023-07-06 07:36:37 +02:00
parent 9740bb0291
commit 8424b197b1
10 changed files with 81 additions and 44 deletions

View File

@ -166,7 +166,7 @@ core.noticeRemove = function(id) {
core.start = function() {
/* 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
* dans le cas d'une bannière affichée uniquement en page d'accueil
*/
$(window).on("resize", function() {
if($(window).width() < 800) {
@ -174,26 +174,20 @@ core.start = function() {
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'])); ?>;
// bannerMenuHeight et bannerMenuHeightSection transmis par core.php/showMenu()
var burgerOverlay = <?php echo json_encode($this->getData(['theme', 'menu', 'burgerOverlay'])); ?>;
var homePageId = <?php echo json_encode($this->getData(['locale', 'homePageId'])); ?>;
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'])); ?>;
// bannerMenuHeight et bannerMenuHeightSection transmis par core.php / showMenu()
var burgerOverlay = <?php echo json_encode($this->getData(['theme', 'menu', 'burgerOverlay'])); ?>;
var homePageId = <?php echo json_encode($this->getData(['locale', 'homePageId'])); ?>;
if( positionNav !=='hide' && burgerFixed === true && tinyHidden === false && homePageOnly === true){
var offsetBanner = "0";
if( burgerOverlay === false) offsetBanner = bannerMenuHeight;
// Si la bannière est visible la décaler
if( tinyHidden === false && ( homePageOnly === false || namePage === homePageId )){
if( 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);
}
$("section").css("padding-top", bannerMenuHeightSection);
}
}
}
}).trigger("resize");

View File

@ -2258,7 +2258,8 @@ class common {
}
?><header <?php echo empty($headerClass) ? '' : 'class="' . $headerClass . '"'; ?> >
<?php if ($this->getData(['theme','header','feature']) === 'wallpaper' ) {
<?php if ($this->getData(['theme','header','feature']) === 'wallpaper' ) {
echo '<div id="wallPaper">';
echo ($this->getData(['theme','header','linkHomePage']) ) ? '<a class="headertitle" href="' . helper::baseUrl(false) . '">' : '';
if(
$this->getData(['theme', 'header', 'textHide']) === false
@ -2269,7 +2270,8 @@ class common {
<?php else: ?>
<span id="themeHeaderTitle">&nbsp;</span>
<?php endif;
echo ( $this->getData(['theme','header','linkHomePage']) ) ? '</a>' : '';
echo ( $this->getData(['theme','header','linkHomePage']) ) ? '</a>' : '';
echo '</div>';
} elseif( $this->getData(['theme','header','feature']) === 'feature') { ?>
<div id="featureContent">
<?php echo $this->getData(['theme','header','featureContent']);?>
@ -2670,18 +2672,18 @@ class core extends common {
// Bannière de type papier peint
if ($this->getData(['theme','header','feature']) === 'wallpaper' ) {
$css .= 'header{background-size:' . $this->getData(['theme','header','imageContainer']).'}';
$css .= 'header{background-color:' . $colors['normal'];
$css .= 'header #wallPaper{background-size:' . $this->getData(['theme','header','imageContainer']).'}';
$css .= 'header #wallPaper{background-color:' . $colors['normal'];
// Valeur de hauteur traditionnelle
$css .= ';height:' . $this->getData(['theme', 'header', 'height']) . ';line-height:' . $this->getData(['theme', 'header', 'height']) ;
$css .= ';text-align:' . $this->getData(['theme', 'header', 'textAlign']) . '}';
if($themeHeaderImage = $this->getData(['theme', 'header', 'image'])) {
$css .= 'header{background-image:url("../file/source/' . $themeHeaderImage . '");background-position:' . $this->getData(['theme', 'header', 'imagePosition']) . ';background-repeat:' . $this->getData(['theme', 'header', 'imageRepeat']) . '}';
$css .= 'header #wallPaper{background-image:url("../file/source/' . $themeHeaderImage . '");background-position:' . $this->getData(['theme', 'header', 'imagePosition']) . ';background-repeat:' . $this->getData(['theme', 'header', 'imageRepeat']) . '}';
}
$colors = helper::colorVariants($this->getData(['theme', 'header', 'textColor']));
$css .= 'header span{color:' . $colors['normal'] . ';font-family:"' . $this->getData(['fonts', $this->getData(['theme', 'header', 'font']), 'name']) . '",sans-serif;font-weight:' . $this->getData(['theme', 'header', 'fontWeight']) . ';font-size:' . $this->getData(['theme', 'header', 'fontSize']) . ';text-transform:' . $this->getData(['theme', 'header', 'textTransform']) . '}';
$css .= 'header #wallPaper span{color:' . $colors['normal'] . ';font-family:"' . $this->getData(['fonts', $this->getData(['theme', 'header', 'font']), 'name']) . '",sans-serif;font-weight:' . $this->getData(['theme', 'header', 'fontWeight']) . ';font-size:' . $this->getData(['theme', 'header', 'fontSize']) . ';text-transform:' . $this->getData(['theme', 'header', 'textTransform']) . '}';
}
// Bannière au contenu personnalisé
@ -2692,7 +2694,25 @@ class core extends common {
//$css .= '.bannerDisplay img { width: auto;max-height:' . $this->getData(['theme', 'header', 'height']) . ';}';
}
// Pour le décalage de la bannière ou de la section, en petit écran burger fixe, calcul de la hauteur du bandeau du menu
$css .= '@media (max-width: 799px) {';
if( $this->getData(['theme', 'menu', 'position']) !== 'hide' && $this->getData(['theme', 'menu', 'burgerFixed']) === true ){
$fontsize = (int) str_replace('px', '', $this->getData(['theme', 'text', 'fontSize']));
$height = $this->getData(['theme', 'menu', 'height']);
$pospx = strpos($height, 'px');
$height = (int) substr( $height, 0, $pospx);
$bannerHeight = 2 * $height + 2 * $fontsize + 10; // 2*height imposé par l'icône burger
}
// Décalage de la bannière en petit écran et burger fixe et bannière visible et non superposée
if( $this->getData(['theme', 'menu', 'position']) !== 'hide' && $this->getData(['theme', 'menu', 'burgerFixed']) === true
&& $this->getData(['theme', 'header', 'tinyHidden']) === false && $this->getData(['theme', 'menu', 'burgerOverlay']) === false){
$css .= '#site.container header, header.container { padding-top:'.$bannerHeight.'px;}';
} else {
$css .= '#site.container header, header.container { padding-top: 0;}';
}
$css .= '}';
// Menu écran large couleurs
$css .= '@media (min-width: 800px) {';
$colors = helper::colorVariants($this->getData(['theme', 'menu', 'backgroundColor']));
@ -2732,7 +2752,15 @@ class core extends common {
$css .= 'nav #burgerText{color:' . $this->getData(['theme','menu','burgerTextColor']) .';font-size:'.$this->getData(['theme','menu','burgerFontSize']) .';}';
// Sous menu
$colors = helper::colorVariants($this->getData(['theme', 'menu', 'burgerBackgroundColorSub']));
$css .= 'nav #menu .navSub a{background-color:' . $colors['normal'] . '}';
$css .= 'nav #menu .navSub a{background-color:' . $colors['normal'] . '}';
// Décalage de la section en menu burger fixe et non caché et bannière masquée ou cachée
if( $this->getData(['theme', 'menu', 'position']) !== 'hide' && $this->getData(['theme', 'menu', 'burgerFixed']) === true
&& ( $this->getData(['theme', 'header', 'tinyHidden']) === true || $this->getData(['theme', 'header', 'position']) === 'hide')){
$css .= 'section { padding-top:'.$bannerHeight.'px;}';
} else {
$css .= 'section { padding-top: 10px;}';
}
$css .= '}';
// Partie commune aux 2 types d'écran

View File

@ -136,7 +136,6 @@
font-size: 0.8rem !important ;
}
section {
padding-top: 10px;
padding-right: 10px !important ;
padding-left: 10px !important ;
padding-bottom: 10px !important ;

View File

@ -508,10 +508,6 @@ class theme extends common {
// Si pas d'image ou bannière personnalisée
$this->setData(['theme', 'header', 'height', $this->getData(['theme', 'header', 'heightSelect']) ]);
}
// Bannière animée avec swiper mettre le background de la bannière à la couleur du background body
if( $this->getData(['theme', 'header', 'feature']) ==='swiper'){
$this->setData(['theme', 'header', 'backgroundColor', $this->getData(['theme', 'body', 'backgroundColor']) ]);
}
// Valeurs en sortie
if (isset($_POST['themeHeaderSubmit'])){
$this->addOutput([

View File

@ -58,12 +58,14 @@ $("#themeBodyImage").on("change", function() {
* petit écran et menu burger fixe et non caché
*/
if($(window).width() < 800) {
// Annulation des décalages réalisés par theme.css ou core.js.php
$("section").css("padding-top","10px");
$("#site.container header, header.container").css("padding-top","0");
// 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";
// bannerMenuHeight et bannerMenuHeightSection transmis par core.php / showMenu()
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){

View File

@ -328,12 +328,14 @@ $("#themeFooterPosition").on("change", function() {
* petit écran et menu burger fixe et non caché
*/
if($(window).width() < 800) {
// Annulation des décalages réalisés par theme.css ou core.js.php
$("section").css("padding-top","10px");
$("#site.container header, header.container").css("padding-top","0");
// 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";
// bannerMenuHeight et bannerMenuHeightSection transmis par core.php / showMenu()
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){

View File

@ -248,7 +248,7 @@ $("#themeHeaderFeature").on("change", function() {
}
if($(this).val() === 'swiper') {
$(".swiperContainer").show();
$(".colorsContainer").hide();
$(".colorsContainer").show();
$(".featureContainer").hide();
$(".wallpaperContainer").hide();
$("#themeHeaderTextColorWrapper").hide();
@ -259,17 +259,26 @@ $("#themeHeaderFeature").on("change", function() {
* petit écran et menu burger fixe et non caché
*/
if($(window).width() < 800) {
// Annulation des décalages réalisés par theme.css ou core.js.php
$("section").css("padding-top","10px");
$("#site.container header, header.container").css("padding-top","0");
// 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";
// bannerMenuHeight et bannerMenuHeightSection transmis par core.php / showMenu()
var burgerFixed = <?php echo json_encode($this->getData(['theme', 'menu', 'burgerFixed'])); ?>;
var burgerOverlay = <?php echo json_encode($this->getData(['theme', 'menu', 'burgerOverlay'])); ?>;
// Spécialement pour une bannière papier peint
var headerFeature = <?php echo json_encode($this->getData(['theme', 'header', 'feature'])); ?>;
var headerBgColor = <?php echo json_encode($this->getData(['theme', 'header', 'backgroundColor'])); ?>;
if( positionNav !=='hide' && burgerFixed === true && burgerOverlay === false){
// Décalage de la bannière de la hauteur du menu
$("header").css("padding-top",bannerMenuHeight);
if ( headerFeature === "wallpaper" ){
$("section").css("padding-top",bannerMenuHeightSection);
$("nav.navfixedburgerconnected #toggle").css("background-color",headerBgColor);
}
}
if( positionNav !=='hide' && burgerFixed === true && positionHeader === 'hide' ){
// si bannière cachée décalage de la section

View File

@ -92,15 +92,17 @@ $("section")
<?php } ?>
/* Décalage de la bannière ou de la section particulier à cette page
* petit écran et menu burger fixe et non caché
* en petit écran
*/
if($(window).width() < 800) {
// Annulation des décalages réalisés par theme.css ou core.js.php
$("section").css("padding-top","10px");
$("#site.container header, header.container").css("padding-top","0");
// 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";
// bannerMenuHeight et bannerMenuHeightSection transmis par core.php / showMenu()
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){

View File

@ -283,13 +283,16 @@ $("#themeMenuBurgerContent").on("change", function() {
* petit écran et menu burger fixe et non caché
*/
if($(window).width() < 800) {
// Annulation des décalages réalisés par theme.css ou core.js.php
$("section").css("padding-top","10px");
$("#site.container header, header.container").css("padding-top","0");
$(".container").css("max-width","100%");
$("nav").css("padding","0");
// 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";
// bannerMenuHeight et bannerMenuHeightSection transmis par core.php / showMenu()
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){

View File

@ -108,13 +108,15 @@ $("input, select").on("change",function() {
* petit écran et menu burger fixe et non caché
*/
if($(window).width() < 800) {
// Annulation des décalages réalisés par theme.css ou core.js.php
$("section").css("padding-top","10px");
$("#site.container header, header.container").css("padding-top","0");
$(".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";
// bannerMenuHeight et bannerMenuHeightSection transmis par core.php / showMenu()
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){