YesWiki/yeswiki

UI calendar : on mobile, week's button/number are hidding part of the calendar

Gobtous opened this issue · 5 comments

Gobtous commented

Type de demande
Bug/Bogue ?

Description
En affichage mobile, les semaines numérotées/bouttons masquent une partie du calendrier. Cela n'impacte pas l'usage du calendrier (événement, changer de vue...ça marche très bien), le problème est seulement visuel.

On mobile version, week's number/button are hidding part of the calendar. It doesn't impact calendar's functionalities (event, change view, they work great), the problem is only visual.

Informations complémentaires

  • version of YesWiki : 4.4

UI_Calendrier

mrflos commented

C'est plus un contournement qu'une solution, mais ya un parametre minical="true" qui cqche les jours de la semaine (et rapetisse les chiffres).
Autrement, c'est gérable aussi avec du css custom qui s'applique pour des petites résolutions.

  • 👍1
Gobtous commented

Merci pour l'astuce. Après effectivement, les chiffres sont petits. Je vais voir si j'arrive à le modifier avec du CSS custom.
Quel serait les paramêtres/fichiers pour gérer la mise en forme du calendrier autre que le CSS ?

acheype commented

dans un de mes projets, j'ai mis ce css pour enlever le fond et écrire en une autre couleur la semaine :

.fc .fc-daygrid-week-number {
    background: none;
    color: var(--neutral-soft-color);
}

si ça peut t'aider... tu peux changer la taille avec un font-size ou carrément enlever l'affichage avec un display: none.

  • 👍1
mrflos commented

Et tu peux mettre le style custom dans la page PageCss ou directement dans un theme ou preset custom

  • 👍1
Gobtous commented

Merci, j'ai suivi vos conseils. Je changerai bien "Sem 42" en "42" sur version mobile, histoire d'agrandir la police.

J'ai rédigé ceci dans https://MonSite.fr/?PageCss :

/* Calendrier, adapte l'affichage des semaines pour la version mobile  */

@media only screen and (max-width: 600px) {
.fc .fc-daygrid-week-number {
font-size: 0.5em;
}
}

Sur mobile c'est très petit (3mm) mais lisible et utilisable. Ya le bouton semaine qui fera le relais si besoin.
Sur ordi c'est parfait.

le résultat 🙂

2306_YesWiki_CalendrierVersionMobile

NB : je vous laisse clore le sujet si besoin.