Style the TopNav and SidebarNav

rubyforgood / inkind-admin

A project serving Community Education Partnerships - https://www.cep.ngo/ . This Rails application presents an admin interface for CEP to manage their volunteers and students. And provides a GraphQL backend for https://github.com/rubyforgood/inkind-volunteer .

MIT License

9 stars 27 forks source link

Style the TopNav and SidebarNav #118

Closed ghost closed 2 years ago

ghost commented 3 years ago

Resolves #89

Description

Changes are purely UI based (addition of bell button, modification to user icon)
Added Fluent Icons NPM packages
Not tested / no test cases added

Type of change

Non-breaking changes - modifications were made over the placement of element, plus addition of new styles to application.scss
TopNav was removed from the inside of page-content-wrapper, the logo was removed from Sidebar Nav, and unified into a single TopNav on top of both these elements
Added some icons from the Fluent Icons (alert, Sidebar Nav)

Screenshots

Home

Admins

Students

Tickets

Volunteers

ghost commented 3 years ago

Added navbar, new colours for Sidebar Nav + small modifications

garettarrowood commented 3 years ago

The last screenshot looks great!

Have you added a placeholder for the search bar, or implementing it? (That's well outside the scope of what's needed either way. But I'll take it :) ).

Be sure to delete the package-lock.json and use yarn to install your packages with this project. Alternatively (or additionally), feel free to add the package-lock.json to .gitignore.

garettarrowood commented 3 years ago

Looks like you are taking care of #90 as well. Feel free to comment on that issue and I'll assign it to you as well.

ghost commented 3 years ago

@garettarrowood Ah, my bad. I think I went overboard. I'll finish with the current issue first, and then head over to #90.

ghost commented 3 years ago

Have you added a placeholder for the search bar, or implementing it? (That's well outside the scope of what's needed either way. But I'll take it :) ).

It's a poor implementation, but might as well serve as a placeholder for now.

Be sure to delete the package-lock.json and use yarn to install your packages with this project. Alternatively (or additionally), feel free to add the package-lock.json to .gitignore.

Yes, I'll make sure to remove the package-lock.json file, and better, maybe add it in .gitignore to avoid adding them again.

ghost commented 3 years ago

Modified user profile, added proper element class for navbar, sidebar, and removed comments.

The user profile wasn't the best solution, but I believe that this can be mended in the coming issue.

garettarrowood commented 3 years ago

Thank you for this contribution!!

ghost commented 2 years ago

I know we still want to get the size of "INKIND" a little bigger. This PR looks like a great enhancement as is though. I'm happy to merge this whenever you feel it's ready (removing WIP from your PR title will be my queue).

I've incremented the size from 175% to 200%. I think we can finalize these changes.

garettarrowood commented 2 years ago

Thanks again!