entrouvert/wcs
entrouvert
/
wcs
14
1
Fork 0
Code Issues Pull Requests 34 Releases Activity

static: add support for vertical display of items with images (#87241) #1171

Merged
smihai merged 1 commits from wip/87241-static-add-support-for-vertical-display-of-items-with-images into main 2024-03-07 18:08:02 +01:00
Conversation 10 Commits 1 Files Changed 1 +18
smihai commented 2024-02-20 17:56:45 +01:00
Owner
Copy Link
No description provided.
tjund requested changes 2024-02-21 11:20:43 +01:00
Dismissed
wcs/qommon/static/css/item-with-image.scss Outdated
@ -14,2 +14,4 @@
}
.RadiobuttonsWithImagesWidget.pk-vertical-radiobuttons .content,
.CheckboxesWithImagesWidget.pk-vertical-checkboxes .content {
tjund commented 2024-02-21 11:20:39 +01:00
Owner
Copy Link

Ça a été fait comme ça, mais je ne vois vraiment pas l'intérêt d'avoir 2 classes distincts pour le même résultat ou objectif.

Ça a été fait comme ça, mais je ne vois vraiment pas l'intérêt d'avoir 2 classes distincts pour le même résultat ou objectif.
smihai commented 2024-02-21 12:03:49 +01:00
Author
Owner
Copy Link

Ça a été fait comme ça, mais je ne vois vraiment pas l'intérêt d'avoir 2 classes distincts pour le même résultat ou objectif.

Aucun, j'ai rénommé en "pk-vertical-items".

> Ça a été fait comme ça, mais je ne vois vraiment pas l'intérêt d'avoir 2 classes distincts pour le même résultat ou objectif. Aucun, j'ai rénommé en "pk-vertical-items".
tjund commented 2024-02-21 11:43:26 +01:00
Owner
Copy Link

Sur mon test, les images ne sont pas alignées verticalement

Sur mon test, les images ne sont pas alignées verticalement
Capture d’écran du 2024-02-21 11-42-55.png
41 KiB
Capture d’écran du 2024-02-21 11-42-55.png
tjund commented 2024-02-21 11:46:06 +01:00
Owner
Copy Link

Plutôt que d'utilser un align-self: flex-start; tu devrais essayer un display: inline-flex sur content

Plutôt que d'utilser un `align-self: flex-start;` tu devrais essayer un `display: inline-flex` sur content
smihai force-pushed wip/87241-static-add-support-for-vertical-display-of-items-with-images from 417d6c2650 to 203ab1e722 2024-02-21 12:03:26 +01:00 Compare
smihai commented 2024-02-21 12:04:15 +01:00
Author
Owner
Copy Link

Plutôt que d'utilser un align-self: flex-start; tu devrais essayer un display: inline-flex sur content

Yes, c'est beaucoup mieux.

> Plutôt que d'utilser un `align-self: flex-start;` tu devrais essayer un `display: inline-flex` sur content Yes, c'est beaucoup mieux.
smihai requested review from tjund 2024-02-21 12:04:25 +01:00
tjund commented 2024-02-21 14:39:06 +01:00
Owner
Copy Link

Je me dit aussi s'il ne serait necessaire de positionner un max-width sur les labels comme max-width: 20em pour éviter les labels trop long.

Je me dit aussi s'il ne serait necessaire de positionner un max-width sur les labels comme `max-width: 20em` pour éviter les labels trop long.
smihai force-pushed wip/87241-static-add-support-for-vertical-display-of-items-with-images from 203ab1e722 to a3a06f9f04 2024-02-21 15:25:24 +01:00 Compare
smihai commented 2024-02-21 15:25:38 +01:00
Author
Owner
Copy Link

Je me dit aussi s'il ne serait necessaire de positionner un max-width sur les labels comme max-width: 20em pour éviter les labels trop long.

Yep, c'est un bon compromis.

> Je me dit aussi s'il ne serait necessaire de positionner un max-width sur les labels comme `max-width: 20em` pour éviter les labels trop long. Yep, c'est un bon compromis.
fpeters commented 2024-02-22 10:25:54 +01:00
Owner
Copy Link

Je n'ai pas regardé le rendu proposé mais par rapport à la dernière capture postée, et ma compréhension du ticket initial, ça n'était pas vraiment ça, la demande me semblait plutôt être une disposition ainsi (case image libellé) :

  • 🍏 pomme
  • 🍐 poire
  • 🍑 pêche
Je n'ai pas regardé le rendu proposé mais par rapport à la dernière capture postée, et ma compréhension du ticket initial, ça n'était pas vraiment ça, la demande me semblait plutôt être une disposition ainsi (case image libellé) : * [x] 🍏 pomme * [ ] 🍐 poire * [ ] 🍑 pêche
smihai commented 2024-02-22 11:56:57 +01:00
Author
Owner
Copy Link
  • 🍏 pomme
  • 🍐 poire
  • 🍑 pêche

Sur la page pointée côté client https://demarches.guichet-recette.grandlyon.com/preview/test-box-liste/ ce sont des images hétérogènes et je ne vois pas trop comment en faire le rendu que tu proposes.

> > * [x] 🍏 pomme > * [ ] 🍐 poire > * [ ] 🍑 pêche Sur la page pointée côté client https://demarches.guichet-recette.grandlyon.com/preview/test-box-liste/ ce sont des images hétérogènes et je ne vois pas trop comment en faire le rendu que tu proposes.
smihai force-pushed wip/87241-static-add-support-for-vertical-display-of-items-with-images from a3a06f9f04 to 094513dc89 2024-03-05 16:38:42 +01:00 Compare
smihai force-pushed wip/87241-static-add-support-for-vertical-display-of-items-with-images from 094513dc89 to 54cfa7bdbc 2024-03-05 16:49:53 +01:00 Compare
smihai commented 2024-03-05 17:02:24 +01:00
Author
Owner
Copy Link

Branche à jour pour aller dans le sens de la suggestion de Fred.

Exemple de rendu chez moi en local.

Branche à jour pour aller dans le sens de la suggestion de Fred. Exemple de rendu chez moi en local.
Screenshot 2024-03-06 at 11-24-44 Liste d'images - 1_2 - Édition Portail.png
76 KiB
Screenshot 2024-03-06 at 11-24-44 Liste d'images - 1_2 - Édition Portail.png
tjund commented 2024-03-06 11:37:46 +01:00
Owner
Copy Link

Je propose de menus modifications

  1. Pour s'aligner avec les listes existantes
  2. Pour compacter un peu
  3. Egaliser les espaces.
  4. Supprimer des styles maintenant inutiles dans cette configuration
	&.pk-vertical-items {
		.content {
			flex-direction: column;
		}
		.item-with-image {
			padding: 0;
			grid-template-areas: 'input picture label';
			justify-items: flex-start;
			align-items: center;
			grid-template-columns: auto var(--image-size) 1fr;
			grid-column-gap: 0.7em;
			grid-template-rows: auto;
			flex: 0 0 auto;
			&--input {
				margin-right: 0;
			}
		}
	}
Je propose de menus modifications 1. Pour s'aligner avec les listes existantes 2. Pour compacter un peu 3. Egaliser les espaces. 4. Supprimer des styles maintenant inutiles dans cette configuration ``` &.pk-vertical-items { .content { flex-direction: column; } .item-with-image { padding: 0; grid-template-areas: 'input picture label'; justify-items: flex-start; align-items: center; grid-template-columns: auto var(--image-size) 1fr; grid-column-gap: 0.7em; grid-template-rows: auto; flex: 0 0 auto; &--input { margin-right: 0; } } } ```
image.png
83 KiB
Capture d’écran du 2024-03-06 11-32-07.png
83 KiB
image.png Capture d’écran du 2024-03-06 11-32-07.png
smihai force-pushed wip/87241-static-add-support-for-vertical-display-of-items-with-images from 54cfa7bdbc to f6e96da6be 2024-03-07 10:45:55 +01:00 Compare
smihai commented 2024-03-07 10:46:20 +01:00
Author
Owner
Copy Link

Je propose de menus modifications

  1. Pour s'aligner avec les listes existantes
  2. Pour compacter un peu
  3. Egaliser les espaces.
  4. Supprimer des styles maintenant inutiles dans cette configuration

Yes, appliqué ta suggestion.

> Je propose de menus modifications > > 1. Pour s'aligner avec les listes existantes > 2. Pour compacter un peu > 3. Egaliser les espaces. > 4. Supprimer des styles maintenant inutiles dans cette configuration > Yes, appliqué ta suggestion.
tjund approved these changes 2024-03-07 17:09:51 +01:00
smihai merged commit 1476d21ce1 into main 2024-03-07 18:08:02 +01:00
smihai deleted branch wip/87241-static-add-support-for-vertical-display-of-items-with-images 2024-03-07 18:08:02 +01:00
Sign in to join this conversation.
Reviewers
No reviewers
tjund
Labels
Clear labels
No items
No Label
Milestone
Clear milestone
No items
No Milestone
Assignees
Clear assignees
No Assignees
3 Participants
Notifications
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/wcs#1171
No description provided.
Delete Branch "wip/87241-static-add-support-for-vertical-display-of-items-with-images"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?