Rendre le menu supérieur de TiddlyOueb responsive


#1

Salut!

Je lance ce sujet qui me semble majeur pour tiddlyoueb!

@svink, saurais-tu implémenter cela facilement?

Si ce n’est pas si simple, peux-tu nous indiquer des pistes pour bidouiller là où il faut? Et essayer nous-même.

Bonne continuation à tous!


#2

Salut !

@Yan, je ne comprends pas ce que c’est que ce sujet.
En période festive il faut être précis sur le “menu”.

A tout’


#3

Salut,

Je ne crois que cela soit possible. Le problème est que le menu actuel est en pur CSS et que à mon avis il n’est pas simple voir impossible d’ajouter cette fonction.

Mais c’est vrai que j’aimerai bien aussi ajouter cette fonctionnalité. Je vais regarder ça de plus près.

A+


#4

Ça y est je sais ce que c’est qu’un menu responsive. C’est comme celui qui est là haut à droite avec les trois barres.


#5

Là la demande demande c’est pour le menu, mais le côté responsive c’est pour que cela s’adapte à la taille du terminal du lecteur. Un écran de PC, une tablette, un téléphone.
En fonction de la résolution, il y a des règles CSS pour changer la taille ou le positionnement de ce que l’on souhaite rendre responsive.

Par exemple regarde ce TW http://j.d.simplemobile.tiddlyspot.com/ (source de la discussion : Presenting my simple mobile layout).


#6

Arf!

J’apporte une piste de réflexion qui me semble compatible, mais je suis loin d’avoir les connaissances suffisantes pour faire figure…

Le lien ci-dessous est le prototype par Ooktech d’un menu adapté aux mobiles (en fait, une TableofContents expendable qui s’ouvre en haut du menu par un click sur une icône).

Je crois qu’avec un Media Query écrit dans le code source du TW pour détecter la taille du viewport, plus ce plugin, on aurait peut-être déjà une base fonctionnelle, malgré la simplicité!

http://ooktech.com/jed/ExampleWikis/Text%20Menus/


#7

@svink, peux-tu m’indiquer les class CSS concernant le menu? Je souhaiterais tester les media query pour faire disparaitre le menu fixe actuel de TiddlyOueb pour ensuite activer le plugin cité plus haut, afin d’avoir un début de solution :wink:

J’ai regardé ça, il rend le menu d’administration visible même en mode web, il est incompatible en l’état avec TiddlyOueb, ce qui est dommage parce qu’on peut vraiment le paramétrer comme bon nous semble!!


#8

Salut,

La barre de menu est définie dans le tiddler $:/to/ui/navbar (CSS) et les entrées sont définies dans le tiddler $:/to/ui/navbar/config.

Il faudrai pouvoir faire en sorte que le menu normal soit affiché si une certaine résolution est détectée et qu’un autre menu avec juste une icône (peut être à ajouter et à définir dans le tiddler $:/to/ui/navbar/config) soit affiché si une petite résolution est détectée.

Si tu arrives à quelque chose ça serai super!


#9

Bon, c’est en train de me coûter mon dimanche…J’essaie quelque chose mais j’aurais besoin de votre aide:

Dois-je aller toucher le Core si je veux ajouter un simple button fixe? du type de celui permettant d’ouvrir et de fermer la sidebar?

Pour l’instant, j’arrive à faire disparaitre le menu selon la taille de l’écran, et faire apparaitre un bouton ouvrant le tiddler contenant le menu, sous forme de liste simple.

Cependant, je voudrais dissocier ce bouton de la barre de menu, pour faire quelque chose de plus propre…J’ai besoin de savoir si une autre manipulation que celle du core est possible.

EDIT de 14h34: Je crois que j’arrive à quelque chose sans toucher au core…! j’y crois!
EDIT de 14h50: OK, j’ai réussi à faire quelque chose semblant fonctionnel, et très simple qui plus est:

Les deux tiddlers suivant suffisent:
http://natura-lien.fr/#Responsive%20Menu%20Icon
http://natura-lien.fr/#CSS%20Menu%20Responsive

Le premier tiddler crée une icône qui ouvre le tiddler $:/to/ui/navbar/config (c’est la barre de menu de TiddlyOueb). En l’occurence, elle est taguée $:/tags/TopRightBar afin d’apparaitre fixe en haut à droite de la page.

Le deuxième tiddler ajoute une requête vérifiant la taille de la page (un peu comme une mise en forme conditionnelle, selon qu’on soit sur un mobile ou un ordinateur), ce sont les media-query.
Si l’affichage fait moins de 960 pixels, le menu disparait, et l’icône permettant d’ouvrir le tiddler du menu apparait en haut à droite, et vice-versa.

le résultat: http://natura-lien.fr et vous redimensionnez votre navigateur!

PS: quelqu’un saurait-il m’indiquer comment changer la couleur d’une icône? J’y arrive pas…


#10

Oui,

1- Tu définis une règle CSS, par exemple

.fa-colored{color:#ffffff;} que tu mets dans une feuille de style (tiddler tagué $:/tags/Stylesheet), par exemple dans $:/to/ui/navbar

2- Tu appliques la règle de style.

Par exemple dans le tiddler Menu-Home, tu remplace le champ

<i class="fa fa-home" aria-hidden="true"></i>

par

<i class="fa fa-home fa-colored" aria-hidden="true"></i>

L’icone prendra alors la couleur blanche

c’est tout :grinning: