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

Admin theme re-design. #1142

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Admin theme re-design. #1142

wants to merge 9 commits into from

Conversation

xSido
Copy link

@xSido xSido commented Dec 1, 2021

Admin theme re-design.

Login page:
-removed top help link as it already could be found in the bottom one.
-moved go to main site link to the right.
-edited css to simplify the mess with positioning.
-made a new login button , with a little animation when clicked.
-added the themed blue line.

Admin panel:
-left menu is now hidden for a cleaner look.
-added dashboard link to the menu.
-top settings link is now settings only, and does not include theme settings anymore.
-removed the top navigation buttons for a cleaner look.
-added order/invoice/support buttons to the top menu with notifications.
-moved profile avatar to the right of the top menu.
-clicking profile name will also redirect to profile page now.
-edited display name for client in certain tables to show entire first name up to 15 characters, and then last name initial only. When a client register, it is asked for his first name only, therefore most of the clients will not update in profile their last name too and this will result into having your statistic tables filled up only with first name initials.
-edited display stats look.
-added the themed blue line.

CSS:
-minified to beautify.

NOTE:
-i haven't touched/checked if is responsive to different resolutions.
-expecting reports if any problem was introduced.

Admin theme re-design.

Login page:
-removed top help link as it already could be found in the bottom one.
-moved go to main site link to the right.
-edited css to simplify the mess with positioning.
-made a new login button , with a little animation when clicked.
-added the themed blue line.

Admin panel:
-left menu is now hidden for a cleaner look.
-added dashboard link to the menu.
-top settings link is now settings only, and does not include theme settings anymore.
-removed the top navigation buttons for a cleaner look.
-added order/invoice/support buttons to the top menu with notifications.
-moved profile avatar to the right of the top menu.
-clicking profile name will also redirect to profile page now.
-edited display name for client in certain tables to show entire first name up to 15 characters, and then last name initial only. When a client register, it is asked for his first name only, therefore most of the clients will not update in profile their last name too and this will result into having your statistic tables filled up only with first name initials.
-edited display stats look.
-added the themed blue line.

CSS:
-minified to beautify.

NOTE:
-i haven't touched/checked if is responsive to different resolutions.
-expecting reports if any problem was introduced.
@BelleNottelling
Copy link
Collaborator

Hey, @xSido
Would you mind attaching some screenshots of the new look?

Thank you!

@xSido
Copy link
Author

xSido commented Dec 2, 2021

Hey, @xSido Would you mind attaching some screenshots of the new look?

Thank you!

Ofc not. Here they are.
4
awdwadawdawd
2
1

Copy link
Collaborator

@BelleNottelling BelleNottelling left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall, looks very good and I'd love to have it merged in!
A couple minor things I'd appreciate you look at:
I would like it if the entire thing here acted as the link, rather than just the numbers
image

i haven't touched/checked if is responsive to different resolutions.

I tested it and the theme definitely isn't responsive. Mostly fine on larger screens (ipad or bigger probably), but not phones. It becomes unusable on a phone because the menu can no longer be expanded.
I doubt the original was to begin with either, but it's something we should work on.
With that being said, I'm not going to make it a requirement to merge this.

Also, it's pretty minor but I think we should keep "min.css" minimized for production.
Would be perfectly fine with you creating a new one that isn't minimized, but keeping it minimized is best practice for production.

Thank you again for the theme update!

@BelleNottelling
Copy link
Collaborator

I just pushed a slight change to center these icons
image

Also, It's not work that you did, but I'm not sure if we should have the orders icon link to orders that have failed setup

@xSido
Copy link
Author

xSido commented Dec 2, 2021

: I would like it if the entire thing here acted as the link, rather than just the numbers image

yeah, thought the same, with next update :D

i haven't touched/checked if is responsive to different resolutions.
I tested it and the theme definitely isn't responsive. Mostly fine on larger screens (ipad or bigger probably), but not phones. It becomes unusable on a phone because the menu can no longer be expanded.

that will be the next step

Also, it's pretty minor but I think we should keep "min.css" minimized for production. Would be perfectly fine with you creating a new one that isn't minimized, but keeping it minimized is best practice for production.

i have no problem in doing that.

Copy link
Collaborator

@evrifaessa evrifaessa left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks nice except the togglable sidebar. I think it can be improved but I like the idea.

Admin theme re-design - fix responsive.

Login page:
-fixed go to main site link (it was disappearing on mobile).
-added space under login panel (bottom was not visible under scroll).
-footer is now fixed (it was scrolling with the page).

Admin panel:
-top menu is now hided into a right panel in mobile view.
-fixed left menu submenu (were not responsive).
-fixed stats (were not responsive).
-reduced size of side menues.


NOTE:
-i haven't touched/checked if is responsive to different resolutions.
-expecting reports if any problem was introduced.
@xSido
Copy link
Author

xSido commented Dec 4, 2021

Looks nice except the togglable sidebar. I think it can be improved but I like the idea.

in future will be improved (design speaking) but atm is the base and need to be functional :D

Uploaded by mistake.
Admin theme re-design - fix stats.

Stats:
-fixed size.
-fixed responsive size.
-entire list is now a link (instead just the number).

NOTE:
-expecting reports if any problem was introduced.
@xSido
Copy link
Author

xSido commented Dec 4, 2021

Admin theme re-design - fix responsive.

Login page:
-fixed go to main site link (it was disappearing on mobile).
-added space under login panel (bottom was not visible under scroll).
-footer is now fixed (it was scrolling with the page).

Admin panel:
-top menu is now hided into a right panel in mobile view.
-fixed left menu submenu (were not responsive).
-fixed stats (were not responsive).
-reduced size of side menues.

Admin theme re-design - fix stats.

Stats:
-fixed size.
-fixed responsive size.
-entire list is now a link (istead just the number).

NOTE:
-expecting reports if any problem was introduced
2
1
.

Copy link
Collaborator

@BelleNottelling BelleNottelling left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please address the couple of comments and resolve the issue with the sidebar scrolling with the page, it happens on both mobile and desktop, but it is worse on mobile.
Thank you :)

Animation

src/bb-themes/admin_default/html/layout_default.phtml Outdated Show resolved Hide resolved
src/bb-themes/admin_default/html/layout_default.phtml Outdated Show resolved Hide resolved
src/bb-themes/admin_default/html/layout_default.phtml Outdated Show resolved Hide resolved
src/bb-themes/admin_default/html/layout_default.phtml Outdated Show resolved Hide resolved
Admin theme re-design - cleanup.

-removed some code that was not used.

NOTE:
-expecting reports if any problem was introduced.
Copy link
Collaborator

@BelleNottelling BelleNottelling left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Per conversation with xSido, the sidebar needs to be scrollable (either separately or with the entire page) so that all items can be accessed if there are many of them.
I am OK with the current state of it.

@evrifaessa I know you mentioned not liking the sidebar, what are you looking to have improved?

@evrifaessa
Copy link
Collaborator

  • Why do we use the same menu icon for two different sidebars?
  • Based on screenshots, I actually like the old sidebar better. The new one just looks like a list of links with no styling.
  • CodeFactor found 400+ issues. Haven't checked them individually yet though.

@xSido
Copy link
Author

xSido commented Dec 6, 2021

  • Why do we use the same menu icon for two different sidebars?

Because this is the first step in redesigning the admin panel. I doubt there will be anyone doing the entire work and then publish it in 1 commit. Especially when it need to be approved and it might not pass.

  • CodeFactor found 400+ issues. Haven't checked them individually yet though.

yes, there are some mistakes introduced by me.
6x Unexpected unit (length-zero-no-unit) while it worked the way i made, will correct this little problem.
3x Unexpected empty block - because i wanted to implement in future something there, but will remove them for now then.

but rest of them are from existing code.
most of them duplicated selector, maybe for cleaner look.

Copy link
Collaborator

@timothygwebb timothygwebb left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

A lot of the code factor issues are due to the min.css file. This has been discussed prior and their is an auto fix available for it. Please apply the auto fix. I would also like to discuss in more detail the request to create this to be mobile compliant. I would like to be involved in this process and I understand responsive quite well and the requirements for device identification. I am looking forward to this redesign it does seem to be more user friendly. Outside of that if any one has any further questions or comments relating to merging this request please keep me in the loop. If you need assistance with the minimization of the min.css file please let me know as well.

@andpavlenko
Copy link
Collaborator

Seems like stoped work on this PR. I'd like to help finish redesign admin theme with migrate to SCSS, remove browser prefixes prefer Autoprefixer and build frontend with Npm. All like most modern projects. ;)
What do you think about it?

@evrifaessa
Copy link
Collaborator

Seems like stoped work on this PR. I'd like to help finish redesign admin theme with migrate to SCSS, remove browser prefixes prefer Autoprefixer and build frontend with Npm. All like most modern projects. ;) What do you think about it?

Contributor activity is pretty much dead at this point but sure, why not? I think a complete frontend rewrite might boost the interest in the project and give it a completely new look. I'm looking forward to it.

@NiemandNatural
Copy link

Just give me a few PHP (or HTML) and (S)CSS files so I can change theming as I require it. I might throw out a few simple themes. For now, I have not yet read through the theming part of the docs - but judging the files by a first glance, it doesn't look as straight forward as I'd like it to be.

Also: Admin BackEnd needs a DarkMode. Really important! (I am using DarkReader but that's just looking urghs.)

It would also really help if not everything was on github - as, for example, the linked extensions.boxbilling.org seems down. Oh and if there was a few better explanations/previews (for mods and stuff). ;)

@evrifaessa
Copy link
Collaborator

I know the backend sucks, and I don't think we can do anything with it in the short term. Everything is under bb-themes.

@BelleNottelling
Copy link
Collaborator

@xSido do you have any intentions of continuing work on this PR?

@timothygwebb
Copy link
Collaborator

@andpavlenko @xSido This branch has conflicts that must be resolved
Use the web editor or the command line to resolve conflicts.
Conflicting files
src/bb-themes/admin_default/html/layout_default.phtml
src/bb-themes/admin_default/html/layout_login.phtml
src/bb-themes/admin_default/html/mod_client_index.phtml
src/bb-themes/admin_default/html/mod_invoice_index.phtml
src/bb-themes/admin_default/html/mod_invoice_transactions.phtml
src/bb-themes/admin_default/html/mod_order_index.phtml
src/bb-themes/admin_default/html/mod_support_public_tickets.phtml
src/bb-themes/admin_default/html/mod_support_tickets.phtml

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

6 participants