Mines-Paristech-Students / Portail-des-eleves

The Mines Paristech's student life management application
23 stars 6 forks source link

Manage association namespaces #181

Closed abocquet closed 4 years ago

Piwakk commented 4 years ago

I'm sorry, the following feedback will not always be about your PR. Your PR is already crossing borders between different topics, so I guess never mind.

image

Consider either use a small button (btn-sm) or increase the margins. Maybe both.

image

I would be happier with something which looks like https://preview.tabler.io/store.html. Either two or three columns of products (like on the left of Tabler's demonstration page), or a table of products (like on the right). Anyway, I think that the button is too big / visible compared to the other elements, and that the price should be more emphasized.

image

It's not 100 % clear that we can click on someone's name. I think adding an explanatory text (like “Cliquer sur quelqu’un pour modifier son compte / ses commandes” AND adding a pointer cursor (cursor: pointer; in CSS) would help.

image

I first think this lacks margins and better-adjusted alignments. Then, maybe redesign the organization of the form.

For instance, I think the balance should be more emphasized, and the Credit account input should only show up when clicking on a previous button (like in a modal, which shows an input and “shortcuts” buttons, like 5 €, 10 €, 50 €…)

Then, leverage Bootstrap's grid by splitting the form in two columns (the first row would be occupied by the balance and take the whole space). First column, the items with a search input (just like what is currently done actually, but only in the left half). Second column, the order. Something like this (of course the margin and alignments still need to be adjusted, etc.) image Still, I think it feels less cluttered and is thus more practical. Also add pointers to the “remove item” button in the order.

And we can improve it further. Instead of the header “19...” + a Card with the balance, I could totally see something like this (on preview.tabler.io):

image

but on 10 columns of the first row, with the last 2 columns dedicated to the “Créditer” button.

image The style should be the same as the “Magasin” style.

image And this definitely needs to be in a card. « Nombre restant » could be « Stock » it's more idiomatic I think.

Piwakk commented 4 years ago

image

I think there is not enough content for each namespace to have its own card.

Maybe use a table here?

Also, adding a namespace does not automatically trigger the refetching of the namespaces.