Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
Gobtous opened this issue Jun 8, 2023 · 5 comments

Comments

@Gobtous
Copy link

Gobtous commented Jun 8, 2023

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
Copy link
Contributor

mrflos commented Jun 8, 2023

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.

@Gobtous
Copy link
Author

Gobtous commented Jun 8, 2023

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
Copy link
Contributor

acheype commented Jun 8, 2023

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.

@mrflos
Copy link
Contributor

mrflos commented Jun 8, 2023

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

@Gobtous
Copy link
Author

Gobtous commented Jun 8, 2023

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.

@seballot seballot added bug zone: UI & UX size: small moins de 4h de travail and removed size: small moins de 4h de travail labels Dec 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants