css: align wcs form buttons on mobile (#71917) #53

Merged

tjund merged 2 commits from wip/71917-buttons-alignment-mobile into main 2022-12-12 14:54:24 +01:00

Conversation 2 Commits 2 Files Changed 4 +16 -36

tjund commented 2022-12-01 14:27:21 +01:00

Owner

Copy Link

Je propose de justifier les boutons en mobile pour @media (max-width: $very-small-limit)
Ils sont côte à côte en prenant toute la place dispo.
Si pas assez de place le bouton qui passe à la ligne prend toute la largeur, jusqu'à que les boutons soient les uns en dessous des autres.
L'ordre respect "$buttons-order".
Cet alignement est limité aux thèmes qui définissent un valeur pour "buttons-order" (pour éviter les conflits avec les thèmes antérieurs à $buttons-order qui ont pas mal de code custom).

Je propose de justifier les boutons en mobile pour `@media (max-width: $very-small-limit)` Ils sont côte à côte en prenant toute la place dispo. Si pas assez de place le bouton qui passe à la ligne prend toute la largeur, jusqu'à que les boutons soient les uns en dessous des autres. L'ordre respect "$buttons-order". Cet alignement est limité aux thèmes qui définissent un valeur pour "buttons-order" (pour éviter les conflits avec les thèmes antérieurs à `$buttons-order` qui ont pas mal de code custom).

Capture d’écran 2022-12-01 à 14.21.20.png

18 KiB

Capture d’écran 2022-12-01 à 14.20.42.png

40 KiB

Capture d’écran 2022-12-01 à 14.21.09.png

19 KiB

tjund added 1 commit 2022-12-01 14:27:22 +01:00

2f2f875639 css: align wcs form buttons on mobile (#71917)

csechet added 1 commit 2022-12-06 16:12:50 +01:00

6a472a844f use gap to avoid negative margin-right

csechet approved these changes 2022-12-06 16:18:35 +01:00

csechet left a comment

Owner

Copy Link

C'est une très bonne idée, je me suis retrouvé à faire ça pour des thèmes récemments je crois. J'ai pushé : utiliser gap pour éviter la marge négative sur div.buttons. Ca fonctionne si on redéfinit la marge droite sur les . Je n'ai pas trouvé d'endroit évident ou cette marge était redéfinie cependant, et je ne suis pas sur des implications d'utiliser gap, donc à ta guise.

C'est une très bonne idée, je me suis retrouvé à faire ça pour des thèmes récemments je crois. J'ai pushé : utiliser gap pour éviter la marge négative sur div.buttons. Ca fonctionne si on redéfinit la marge droite sur les <button>. Je n'ai pas trouvé d'endroit évident ou cette marge était redéfinie cependant, et je ne suis pas sur des implications d'utiliser gap, donc à ta guise.

tjund commented 2022-12-06 16:18:41 +01:00

Author

Owner

Copy Link

@csechet propriété gap sur flexbox trop mal supporté. Le core doit supporter Safari 12.1 https://caniuse.com/?search=gap

@csechet propriété gap sur flexbox trop mal supporté. Le core doit supporter Safari 12.1 https://caniuse.com/?search=gap

csechet commented 2022-12-06 16:57:21 +01:00

Owner

Copy Link

@csechet propriété gap sur flexbox trop mal supporté. Le core doit supporter Safari 12.1 https://caniuse.com/?search=gap

Noté

> @csechet propriété gap sur flexbox trop mal supporté. Le core doit supporter Safari 12.1 https://caniuse.com/?search=gap Noté

tjund merged commit df7f297bbf into main 2022-12-12 14:54:24 +01:00

tjund deleted branch wip/71917-buttons-alignment-mobile 2022-12-12 14:54:24 +01:00

Sign in to join this conversation.

Reviewers

No reviewers

csechet

Labels

Clear labels

No items

No Label

Milestone

Clear milestone

No items

No Milestone

Assignees

Clear assignees

No Assignees

2 Participants

Notifications

Subscribe

Due Date

The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: entrouvert/publik-base-theme#53

No description provided.