Beautify admin scaffold

Hello, I want to propose some changes on generating code from oil g admin command. BTW, forgive me for the long explanation here 🙇🏻‍♂️

Commit c5c57f1

Current style is using margin instead of margin-top. This creates unnecessary space when viewed on phones.

Process

Open the page with Responsive Design Mode
Select any phone display

Current result

a web page viewed on phone with margin on all sides

Proposed result

a web page viewed on phone with margin for top side

Commit 7684d58

There are some code which look like activating dropdown functionality on navbar. But, when I tried to remove it, I still can use dropdown functionality on navbar. So, I think it is best to remove it.

Commit 20be5dc

The dropdown menu is aligned to left while it is on the most right side of navbar. I think it is better to aligned to right.

Current result

dropdown on the right side with menu aligned in left

Proposed result

dropdown on the right side with menu aligned in right

Commit e4800cf

The form inputs and labels are overflowed from container width. I think it was caused by form element using form-horizontal class.

Current result

form with overflowed input width

Proposed result

form with appropriate input width

Commit 573f6fd

The form is always full width on any screen display. I think it will be better if we only use half of the page width for the form in large screen display.

Current result

form with appropriate input width

Proposed result

form for add new article with half width of the page on large screen display

form for edit article with half width of the page on large screen display

Commit 5423309

I think it would be better if the Back and View button are relocated on the right of Save button instead of on the below of Save button.

Current result

form for add new article with back button below of save button

form for edit article with back and view buttons below of the save button

Proposed result

form for add new article with back button on the right of save button

form for edit article with back and view buttons on the right of the save button

Commit 6e5de83

Action buttons (View, Edit and Delete) is too compact. I think adding a little space for larger clickable area would be better

Current result

compact action buttons

Proposed result

action buttons with larger clickable area

Commit 87ca140

Responsive table is common nowadays. So, I want to implement it here too.

Current result

unresponsive table

Proposed result

responsive table

Commit a241632

On phone screen, the dropdown menu width for log out is not displayed properly.

Current result

not full width dropdown menu for log out on phone screen

Proposed result

full width dropdown menu for log out on phone screen

Commit 9738920

Add recommended meta tags for responsiveness based on Bootstrap example

Commit 84fdb22

Move script tags on the bottom of body for better web page rendering speed

Commit 11e9616

Tidying template file for admin

Commit b6c5dfb

Tidying generate code for index page

Current result

code for index page which not so tidy

Proposed result

code for index page which is tidier

Commit bb53a75

Tidying output code for add and edit form

Current result

untidied add and edit form

tidied add and edit form

Commit f567db4

Beautify view details page using dl style

Current result

standard view details page

Proposed result

view details page with new style

fuel / oil