Barre de menu flottante dans les styles Arty/Vinny pour phpBB3.2

Pour les recherches et les demandes de modifications de styles concernant votre forum phpBB 3.2

Modérateur: Equipe

Règles du forum
A lire impérativement : Règlement de phpBB-fr.com - Conditions générales de support graphique

Attention : pour éviter les bogues, votre style doit être mis à jour en même temps que votre forum, et ce, dans la dernière version disponible de phpBB !
Partager sur FacebookPartager sur TwitterPartager sur Google+

Barre de menu flottante dans les styles Arty/Vinny pour phpBB3.2

Messagepar Gaby77 » 15 Aoû 2017 à 10:51

Salut

En reprenant le travail d'Arty et celui de Cabot pour son extension Fixed Navbar, voici quelques modifications à faire dans les fichiers des styles que Vinny propose sur phpbb.com.

Les modifications ci-dessous sont pour le style Black.

Dans black/template/forum_fn.js, à la fin du fichier, ajouter :
Code: Tout sélectionner
/**
* Static navigation
*/

var styleConfig = {
	staticNavigation: true,
	staticNavigationMinWidth: 500,
	staticNavigationMinHeight: 400
};

jQuery(function($) {
	'use strict';

	if (styleConfig.staticNavigation) {
		$('.navbar > .inner').first().each(function(i) {
			var nav = this,
				navigation = $(nav),
				isStatic = false,
				Parent = navigation.parent(),
				dummy,
				inner,
				$w = $(window),
				minTopPosition = 0,
				minWidth = styleConfig.staticNavigationMinWidth,
				minHeight = styleConfig.staticNavigationMinHeight,
				windowWidth, navHeight,
				mainwidth = $('#wrap').outerWidth(),
				queued = false,
				throttled = false;

			Parent.addClass('not-static');
			navigation.before('<div class="static-nav-dummy inner" style="display:none;" />');
			dummy = navigation.prev();

			navigation.wrapInner('<div class="navbar static-inner" />');
			inner = navigation.children().css('max-width', mainwidth);

			function enableStatic()
			{
				dummy.css('height', Math.floor(navigation.height()) + 'px').show();
				navigation.addClass('static');
				Parent.removeClass('not-static');
				isStatic = true;
			}

			function disableStatic()
			{
				dummy.hide();
				navigation.removeClass('static');
				Parent.addClass('not-static');
				isStatic = false;
			}

			function testHash()
			{
				var hash = (window.location.hash) ? window.location.hash : '';
				if (!hash)
				{
					return;
				}
				window.scrollTo($w.scrollLeft(), $w.scrollTop() - navigation.height());
			}

			function check(checkHash)
			{
				var windowTop = 0,
					windowWidth = Math.floor($w.width()),
					top;

				if (windowWidth < minWidth || $w.height() < minHeight) {
					if (isStatic) {
						disableStatic();
					}
					return;
				}
				if (!isStatic)
				{
					navHeight = navigation.height();
					top = nav.getBoundingClientRect().top;
					if (top > 0) {
						return;
					}
					minTopPosition = $w.scrollTop() + top;
					enableStatic();
					if (checkHash) {
						testHash();
					}
					return;
				}
				if ($w.scrollTop() < minTopPosition) {
					disableStatic();
				} else if (checkHash) {
					testHash();
				}
			}

			$w.on('scroll resize', function() { 
				if (!isStatic) {
					check(false);
				}
				else {
					if (!throttled) {
						check(false);
						throttled = true;
						queued = false;
						setTimeout(function() {
							throttled = false;
							if (queued) {
								check(false);
							}
						}, 250);
					}
					else {
						queued = true;
					}
				}
			});
			$w.on('load', function() { check(true); });
			$w.on('hashchange', function() { check(true); });
		});
	}	
});



Dans black/template/navbar_header.html :

Trouver (ligne 2):

Code: Tout sélectionner
	<div class="nav-tabs">


Remplacer avec :
Code: Tout sélectionner
	<div class="nav-tabs inner">



Dans black/theme/black.css, à la fin du fichier, ajouter :
Code: Tout sélectionner
.navbar .inner.static {
    position: fixed;
    top: 0;
    z-index: 50;
    left: 0;
    right: 0;
    padding-top: 0;
    padding-bottom: 0;
    width: auto;
    max-width: none;
    opacity: .9;
    transition: opacity .2s;
}

.not-static .static-inner {
	padding: 0;
	border-radius: 5px;
}

.static-inner {
	border-radius: 0;
}

#wrap .navbar .inner.static > .static-inner {
	padding: 10px;
}

.navbar .inner.static > .static-inner {
	box-sizing: border-box;
	margin: 0 auto;
	min-width: 625px;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}
	  
@media (max-width: 1176px) {
	.navbar .inner.static > .static-inner {
		margin: 0 12px;
	}
}
		  
.navbar .inner.static:hover {
	opacity: 1;
}
	  
@media (max-width: 700px) {
	.page-width, .navbar .inner.static > .static-inner {
		min-width: 290px;
		margin: 0;
	}

	.navbar .inner.static > .static-inner,
		#wrap .navbar .inner.static > .static-inner {
		padding: 0;
	}	
}	


Videz les caches du forum et du navigateur.

A améliorer je pense, en l'état, la barre de menu, une fois fixée, elle prend toute la largeur de la page. Je n'ai pas cherché plus loin pour améliorer ça.


Ces modifications ont été proposées à Vinny.

EDIT : Réponse "fraîche" de Vinny (à moins que ce ne soit mon interprétation aléatoire de l'anglais, ce qui est possible aussi :lol: )

We work differently. You updated from 3.1 to 3.2. I made a full re-write from ground, I started with a copy of prosilver 3.2 editing the files based on Black 3.1.

I first wanted Black's look in a totally usable way. I got it.

Now that the style has been released, I will work on the features they had in version 3.1, and also work on versions 3.3.


Si je comprends bien, ce n'est pas pour tout de suite.
@+
Gaby, ké un gars
Gaby77
Apprenti-posteur
Apprenti-posteur
 
Messages: 114
Enregistré le: 10 Fév 2010 à 16:47

Re: Barre de menu flottante dans les styles Arty/Vinny pour phpBB3.2

Messagepar galixte » 15 Aoû 2017 à 13:07

Au moins ça dépanne bien, merci. ;)

Bon du coup, cela veut dire que tu peux publier tes adaptations de Black, Basic et Latte. :P
Communau EzCom
Image
« Traductions d’extensions & styles pour phpBB 3.1.x & 3.2.x ».
ImageListes de toutes les extensions recensées pour phpBB 3.1.x & 3.2.x.
ImageListes de tous les styles recensés pour phpBB 3.1.x & 3.2.x.
Avatar de l’utilisateur
galixte
Floodeur universel
Floodeur universel
 
Messages: 10068
Enregistré le: 08 Mar 2004 à 01:40
Localisation: Sud de la France.

Re: Barre de menu flottante dans les styles Arty/Vinny pour phpBB3.2

Messagepar Mazeltof » 15 Aoû 2017 à 13:24

ou faire une extension (S-spéciale) qui apporte ces fonctionnalités :wink:
Image Image Image
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 2233
Enregistré le: 09 Mar 2009 à 22:02
Localisation: Arras

Re: Barre de menu flottante dans les styles Arty/Vinny pour phpBB3.2

Messagepar Gaby77 » 15 Aoû 2017 à 13:52

Mazeltof a écrit:ou faire une extension (S-spéciale) qui apporte ces fonctionnalités :wink:

Qu'est ce que signifie "S-spéciale" ?

Et l'extension en question serait quand même hyper proche de celle de cabot, hormis la modif dans le navbar_header.html, non ?
@+
Gaby, ké un gars
Gaby77
Apprenti-posteur
Apprenti-posteur
 
Messages: 114
Enregistré le: 10 Fév 2010 à 16:47

Re: Barre de menu flottante dans les styles Arty/Vinny pour phpBB3.2

Messagepar Mazeltof » 15 Aoû 2017 à 14:04

S-speciale = uniquement pour style black et consort

oui ça ressemblerait beaucoup a l'extension fixenavbar de cabot et il y a aussi la possibilité d'ajouter la modif pour ces styles dans cette extension :P
Image Image Image
Avatar de l’utilisateur
Mazeltof
Resp. des graphistes
Resp. des graphistes
 
Messages: 2233
Enregistré le: 09 Mar 2009 à 22:02
Localisation: Arras


Retourner vers [3.2.x] Modifications et recherche de styles

 


  • Articles en relation
    Réponses
    Vues
    Dernier message

Qui est en ligne

Utilisateurs parcourant ce forum : micwilly et 1 invité