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.
Consider either use a small button (btn-sm) or increase the margins. Maybe both.
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.
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.
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.)
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):
but on 10 columns of the first row, with the last 2 columns dedicated to the “Créditer” button.
The style should be the same as the “Magasin” style.
And this definitely needs to be in a card.
« Nombre restant » could be « Stock » it's more idiomatic I think.
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.
Consider either use a small button (
btn-sm
) or increase the margins. Maybe both.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.
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.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.) 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):
but on 10 columns of the first row, with the last 2 columns dedicated to the “Créditer” button.
The style should be the same as the “Magasin” style.
And this definitely needs to be in a card. « Nombre restant » could be « Stock » it's more idiomatic I think.