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

Cleanup some small UI bugaboos (padding, etc) #12524

Merged
merged 4 commits into from
Feb 16, 2023
Merged

Conversation

snipe
Copy link
Owner

@snipe snipe commented Feb 16, 2023

Just some small tweaks to padding, and some regressions (that the cancel button is too close to the submit, which can end in tears from a UX perspective) and also the top save button on really small forms. I also added some padding to the top of the forms so that it doesn't feel quite so cramped, and we now (once again) respect the $topSubmit variable.

For example, in the categories edit form, we start with this:

@extends('layouts/edit-form', [
    'createText' => trans('admin/categories/general.create') ,
    'updateText' => trans('admin/categories/general.update'),
    'helpPosition'  => 'right',
    'helpText' => trans('help.categories'),
    'formAction' => (isset($item->id)) ? route('categories.update', ['category' => $item->id]) : route('categories.store'),
])

If we wanted a top submit button there (which we would only do if the form is longer, and it looks weird if we have a very small form - manufacturers, for example - we can just add in this line into the edit blade:

    'topSubmit'  => 'true',

So it would look like:

@extends('layouts/edit-form', [
    'createText' => trans('admin/categories/general.create') ,
    'updateText' => trans('admin/categories/general.update'),
    'helpPosition'  => 'right',
    'helpText' => trans('help.categories'),
    'topSubmit'  => 'true',
    'formAction' => (isset($item->id)) ? route('categories.update', ['category' => $item->id]) : route('categories.store'),
])

Before

Screenshot 2023-02-15 at 5 21 44 PM

After

Screenshot 2023-02-15 at 5 22 03 PM

Signed-off-by: snipe <snipe@snipe.net>
@what-the-diff
Copy link

what-the-diff bot commented Feb 16, 2023

  • The submit button is now on the left side of the screen.
  • There are no longer two buttons for saving and cancelling, there's only one save button at the bottom right corner of each page (except in cases where a topSubmit variable is set to true).
  • In those cases where a topSubmit variable is set to true, we have an additional save button at the top right corner as well as some text that says ";". This was done because it looks like this code was originally intended to be used with another form element but then someone decided not to use it so they just commented out all references except for this line which still has its semicolon showing up next to what I assume should be something else if you uncommented everything else again...

Signed-off-by: snipe <snipe@snipe.net>
Signed-off-by: snipe <snipe@snipe.net>
Signed-off-by: snipe <snipe@snipe.net>
@snipe snipe merged commit 9f8ea9a into develop Feb 16, 2023
@snipe snipe deleted the fixes/small_UI_tweaks branch February 16, 2023 02:20
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

1 participant