10303 et un défi lancé aux membres

[Fred 1 576]

Bonjour,

Je planche sur des modification de la 10.3 et notamment sur des propositions faites par @roger et @McGregor

Le lien connexion du menu et du pied de page sont remplacés par une icône :

 

Je vous rappelle la barre de membre connecté :

 

Le défi que je propose au forum : trouver une solution pour que la barre de membre et le lien de connexion soient alignés à droite. Ex :

 

 

[McGregor 663]

il y a une heure, Fred a dit :

Le défi que je propose au forum : trouver une solution pour que la barre de membre et le lien de connexion soient alignés à droite.

 

Comme ça ?  Non, ce n'est pas Photofiltre 7.2.1... 

 

 

Modifié 12 octobre 2020 par McGregor

[roger 303]

Héhé faut pas me lancer ce genre de défit...

Avec un poil de css bien placé on arrive à ceci....

 On peu même se permettre l'info bulle

 

Et selon la seconde version demandée..

 

 

Un sacré gain de place et dans mon cas une icône verte bien visible qui "Entre dans les lieux"  , je vous l'offre...pour vos tests les amis faut juste ajuster sa taille pour qu'elle colle à votre menu, là elle est en 32 px disons que 20px en largeur vous donnera le même résultat que sur les captures au dessus.

 

 

[McGregor 663]

C'est coup du "float" qui inverse les objets à afficher :

 

 

 

Modifié 12 octobre 2020 par McGregor

[roger 303]

il y a 5 minutes, McGregor a dit :

C'est coup du "float" qui inverse les objets à afficher :

Je confirme c'est bien du "float" à placer au bon endroit dans l'u des fichiers du zwii de même que l’icône (son adresse sur le serveur)

L'idée est là reste plus maintenant qu'un dev prévoit dans la config au niveau du lien de connexion à placer dans le menu deux chose:

- Soit afficher ce lien sous forme de texte

- Soit afficher ce lien sous forme d’icône  avec la boite de dialogue qu'il faut pour aller choisir notre icône.

 

Une petite piste utile: se baser sur le titre des pages dans le menu et le choix possible dans son affichage.

 

 

[McGregor 663]

@roger Mais la barre de membres ?

[Fred 1 576]

il y a une heure, McGregor a dit :

Comme ça ?  Non, ce n'est pas Photofiltre 7.2.1... 

The Gimp

@roger C'est propre... encore un effort pour la barre de membre et tu pourras partager ta solution.

[roger 303]

il y a 3 minutes, McGregor a dit :

@roger Mais la barre de membres ?

Bin la barre des membres tu la déplaces idem dans on fichier à éditer...je n'ai pas fais la capture d'écran tellement çà coulait de source avec le défit demander:

Mettre les icônes sur la droite du menu.....avec pour ma part le choix du profil membre sur la droite

[roger 303]

il y a 2 minutes, Fred a dit :

@roger C'est propre... encore un effort pour la barre de membre et tu pourras partager ta solution.

Héhé, tu as posté trop vite....mais vu que l'on me le demandais bin j'ai ajouté ma capture pour la barre de membre...

 

Partager la solution attendons de voir qui veut aussi "s'amuser comme nous 3" à triturer le code du zwii;

Peut être @sylvainlelievre @Seb @Gilux @augras ou pleins d'autres amis auront envie de chercher de leur coté la solution

 

@McGregor semble utiliser la même solution que moi sauf que sa version PF et plus ancienne que la mienne pour manipuler des images, pour ma part the Gimp j'ai essayé mais pas adhéré du tout.

[Fred 1 576]

il y a 21 minutes, roger a dit :

@McGregor semble utiliser la même solution que moi sauf que sa version PF et plus ancienne que la mienne pour manipuler des images, pour ma part the Gimp j'ai essayé mais pas adhéré du tout.

Pourtant c'est très puissant mais il faut suivre quelques tutos. Sinon Photoflare est le clone libre de PF, en cours de dév...

[McGregor 663]

il y a une heure, roger a dit :

Bin la barre des membres tu la déplaces idem dans on fichier à éditer...je n'ai pas fais la capture d'écran tellement çà coulait de source avec le défit demander:

Mettre les icônes sur la droite du menu.....avec pour ma part le choix du profil membre sur la droite

 

Oui, sauf que je pense que le profil membre sur la droite s'est imposé à toi plus que tu ne l'as choisi...

 

 

 

il y a 59 minutes, roger a dit :

@McGregor semble utiliser la même solution que moi sauf que sa version PF et plus ancienne que la mienne pour manipuler des images

 

Le rapport ? Mes copies d'écran sont retaillées avec Photofiltre 7, mais c'est tout. De plus, il s'agit de la version 10.303, pas de la 10.400.

 

Modifié 12 octobre 2020 par McGregor

[roger 303]

Fred je dois t'avouer que je les ai tous utilisé (en plus de Pinta et Krita et d'autres sur mes Linux)

Gimp est super puissant oui mais pour ma part c'est l'ouverture de toutes ses petites fenêtres qui me gène quand tu veux te servir de l'un de ses outils accessible le depuis son menu ou l'une de ses icônes dans sa barre principale;

Photoflare n'étant qu'un clone de Photophiltre mais beaucoup moins pratique et achalandé que son original je n'ai pas opté pour le garder.

[roger 303]

il y a 26 minutes, McGregor a dit :

De plus, il s'agit de la version 10.303, pas de la 10.400

Aucune de mes captures d'écran ne montre le n° de version du Zwii estampillée 10.400 et l'astuce marche aussi avec les anciennes version depuis la 10.3.01 (comme celle donnée en exemple par Fred). Ci dessous en place sur un site où je bosse pour un système de vente...c'est une 10.3.01 qui attend sa mise à jour vers la 10.3;02..

 

[roger 303]

histoire de faire plaisir:

Tout peux être changé dans le Zwii, y compris la place des icônes en plus d'y adjoindre les "css" dedans à minima

		// Commandes pour les membres simples
		if($this->getUser('group') == self::GROUP_MEMBER
			&& ( $this->getData(['theme','menu','memberBar']) === true
				|| $this->getData(['theme','footer','displayMemberBar']) === false
				)
		) {
			$items .= '<li style="float: right;"><a id="barLogout" href="' . helper::baseUrl() . 'user/logout" data-tippy-content="Me déconnecter">' . template::ico('logout', 'right') . '</a></li>';
			$items .= '<li style="float: right;"><a href="' . helper::baseUrl() . 'user/edit/' . $this->getUser('id'). '/' . $_SESSION['csrf'] . '" data-tippy-content="Gérer mon compte">' . template::ico('user', 'left') . '</a></li>';
		}

[Fred 1 576]

On y est presque. L’idée est d’insérer une propriété dans common.css sans toucher au noyau  

 

Édition :

Pour être très propre, il faut modifier la structure html, donc modifier légèrement la fonction  showMenu()

La barre de menu fournira la structure.

Pour ce qui est du CSS, i18n avait le même type de problématique.

 

[roger 303]

Il y a 5 heures, Fred a dit :

insérer une propriété dans common.css

facile pour l’icône de déconnexion, le terrain étant à moitié réalisé grâce aux ligne commentées ainsi que les zwiico déjà toutes prêtes

un peu plus délicat pour la barre de membre...faudrait lui "inventer" un class qui pourrait ensuite être mise dans le common.css

 

La plus simple des solutions étant celle du html

Il y a 5 heures, Fred a dit :

Pour être très propre, il faut modifier la structure html, donc modifier légèrement la fonction  showMenu()

et là pas besoin de modifier quoi que ce soit si ce n'est deux petits bouts de textes écrits entre deux balises html <li> en lui attribuant alors le style voulu par 

<li style="float: right;">

vu que la class n'est pas existante dans le commo.css. Cela donne le résultat obtenu que l'on voit sur les deux capture du dessus à moindre frais.

Enfin c'est mon avis si quelqu'un trouve mieux pour cette histoire de "barre de membre" uniquement déclarée dans le common.css ou modifié comme tu le suggère Fred ce serait chouette qu'il nous livre ici sa solution pour ce défit là;

 

Nous sommes deux avec MCGregor à y arriver de différentes façons (trois si on compte la tienne Fred) alors ce truc est possible, profitable à tous dans le ZwiiCMS pour y être incorporé.

 

 

[roger 303]

Pour ceux qui adorent "la pêche" 

#menuLoginLink {
float: right;
}

dans le common.css:

/* Barre de membre */

#bar {
	background: #212223;
	padding-left: 5px; /* Pour éviter que le select touche le bord lorsque la fenêtre est redimensionnée */
	margin: 0; /*-10px;*/
	text-align: right;
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	z-index: 19;
}
#menuLoginLink {
float: right;
} 
/* fin barre pour les membres */

dans le core.php:

		// Commandes pour les membres simples
		if($this->getUser('group') == self::GROUP_MEMBER
			&& ( $this->getData(['theme','menu','memberBar']) === true
				|| $this->getData(['theme','footer','displayMemberBar']) === false
				)
		) {
			$items .= '<li style="float: right;"><a id="barLogout" href="' . helper::baseUrl() . 'user/logout" data-tippy-content="Me déconnecter">' . template::ico('logout') . '</a></li>';
			$items .= '<li style="float: right;"><a href="' . helper::baseUrl() . 'user/edit/' . $this->getUser('id'). '/' . $_SESSION['csrf'] . '" data-tippy-content="Gérer mon compte">' . template::ico('user', 'right') . '</a></li>';
		}

C'est bien entendu la solution que j'utilise chez moi...au cas ou l'on en trouverait pas d'autre plus efficace à mettre en place

 

Heu j'attends maintenant le verdict d'un bon samaritain pour me dire si cela lui plais ou pas et si ça marche ou non chez lui.

[sylvainlelievre 263]

Bonjour @roger,

Bravo pour ce travail sur la barre de menu, je testerai prochainement et j'essaierai de comprendre pour progresser en css (je suis une bille !).

Merci pour le message dans l'agenda.

 

Sylvain

Modifié 13 octobre 2020 par sylvainlelievre

[roger 303]

Bonjour à toi aussi @sylvainlelievre

Merci pour le compliment sur le travail effectué afin de mieux arranger cette barre d'outil membres ainsi que les icônes das on placement visuel dans le cms. Il faut aussi remercier @McGregor qui travaillait aussi de son  coté sur le même sujet et peut proposer sa propre solution sans doute tout aussi efficace que la mienne.

Super si tu peux tester de ton coté afin d'avoir un autre avis que le notre  et surtout savoir si ce qui est proposé soit vraiment fonctionnel chez les autres utilisateurs.

 

Il y a 3 heures, sylvainlelievre a dit :

Merci pour le message dans l'agenda.

C'est bien normal de ma part que tu ai toi aussi un visuel sur le site de démo que tu proposes pour tester ton plugin, puis nous avons tout les deux déjà "collaboré" par le passé, donc cela me fais plaisir de reprendre avec toi une si bonne entente quand il s'agit de rendre compte sur un travail effectué avec autant de brio de ta part.

D'ailleurs j'aurais une seule petite amélioration à te suggéré, je m'en suis aperçus en utilisant ton agenda. Mais ce n'est pas la place ici d'en parler donc je te l'écrirais là où il le faut.

 

Il y a 3 heures, sylvainlelievre a dit :

j'essaierai de comprendre pour progresser en css (je suis une bille !).

Sylvain!!! ne te sous-estimes pas ainsi...Personne n'est une "bille" en quoi que ce soit, on a juste des "lacunes" parfois et rien que le fait de vouloir comprendre,& apprendre comme tu l'as écrit est un formidable pas en avant pour autrui qui plus tard transmettra lui aussi ses propres connaissances...

Moi aussi j'en apprend tout les jours, un exemple PHP n'est pas vraiment ma tasse de thé alors je suis heureux quand les amis sur le forum explique telle ou telle chose sur ce langage là pour ensuite l'exploiter à mon profit tout en le conservant préciusement das un coin de mon cerveau pour ne pas l'oublier ce que j'ai appris

 

Roger

[Fred 1 576]

Il y a 5 heures, roger a dit :

<li style="float: right;">

N'est pas glop du tout !

[Fred 1 576]

Une autre solution.

Dans core.php rechercher la fonction showMenu

La variable items et scindée en deux $itemsLeft et $itemsRight, on oublie pas de définir $itemsRight en 2449 :

$itemsRight = '';

echo en 2473 devient donc :

echo '<ul class="navLevel1" id="menuLeft">' . $itemsLeft . '</ul><ul class="navLevel1" id="menuRight">' . $itemsRight . '</ul>';

Pour faire marcher tout ça dans common.css en 524 on ajoute :

nav #menuLeft {
	display: inline-flex;
}
nav #menuRight {
	float: right;
	display: inline-flex ;
}
/* fin barre de menu */
nav::after {
	content: " ";
	clear: both;
	display: flex;
}
nav::before {
	content: " ";
	clear: left;
	display: flex;
}

Et c'est fini.

 

Bravo aux deux compères qui ont pondu une solution viable.

 

[Gilux 177]

Bonsoir @Fred et les deux compères,

 

Il y a 1 heure, Fred a dit :

La variable items et scindée en deux $itemsLeft et $itemsRight,

 

Il n'y a ni $itemsLeft, ni $itemsRight dans la 10.3.03 47869426 hours ago

Pas plus qu'il n'y a de #menuLeft ni de #menuRight

 

Il y a 1 heure, Fred a dit :

Une autre solution

 

Je suppose que celle-ci sera effective dans la prochaine version dev ?

 

Par ailleurs, le CSS que tu préconise est inspiré de la solution mise au point pour la version multilingue :

/* Paramètres du menu et de la barre de langue */

#menuBar {
	display: inline-flex;
}

#i18nBar {
	display: inline-flex ;
	/*float: right; Dans le thème*/
}
/* fin barre de menu */
nav::after {
	content: " ";
	clear: both;
	display: flex;
}

Celle-ci fonctionnant correctement, elle peut en effet être utilisée pour placer le menu membre à droite

[roger 303]

Je propose un petit "bonus" avec le code que j'ai donné... L'admin d'un Zwii a lui le droit à ses identités en plus de l’icône pour gérer son compte, alors pourquoi ses membre inscrits ne pourraient pas eux non plus de bénéficier de cet honneur de voir leur noms en plus de leur prérogatives....

 

En image pour un membre tout simple cela donnerait ceci

 

 

L'est pas belle la vie quand on  laisse son imaginaire aller à toutes les folies possible et imaginables dans un zwii

[Fred 1 576]

il y a une heure, Gilux a dit :

Il n'y a ni $itemsLeft, ni $itemsRight dans la 10.3.03 47869426 hours ago

Pas plus qu'il n'y a de #menuLeft ni de #menuRight

 

Personne n’a indiqué que le commit était en ligne. 

 

Il ne t’a pas échappé que ce commit était un revert, non ? C’est quoi l’intérêt de cette remarque ?

 

il y a une heure, Gilux a dit :

Je suppose que celle-ci sera effective dans la prochaine version dev ?

 

Par ailleurs, le CSS que tu préconise est inspiré de la solution mise au point pour la version multilingue :

 

Vraisemblablement. 

 

En effet, même problème, même solution. 

 

[Fred 1 576]

Il y a 1 heure, roger a dit :

Je propose un petit "bonus" avec le code que j'ai donné... L'admin d'un Zwii a lui le droit à ses identités en plus de l’icône pour gérer son compte, alors pourquoi ses membre inscrits ne pourraient pas eux non plus de bénéficier de cet honneur de voir leur noms en plus de leur prérogatives....

 

En image pour un membre tout simple cela donnerait ceci

 

 

L'est pas belle la vie quand on  laisse son imaginaire aller à toutes les folies possible et imaginables dans un zwii

En effet ! Post constructif mais je préfère les icônes ainsi .

Tu ne t’es pas débarrassé de ton style CSS interne au core ?