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

Added Navbar + visual Overhaul #175

Merged
merged 3 commits into from
Nov 16, 2023
Merged

Conversation

BlessedLongsword
Copy link
Contributor

I had to reestructurate the whole app in order to use a functional navbar:

  • Created root component and moved almost all index logic to root
  • Root has all routes and specifies the content in each rout
  • Navbar has the navigation bar with the main buttons (login, logout, post recipe)
  • This buttons can be accessed from any navbar link
  • Postrecipe is now a modal
  • Updated visual properties of post recipe and user feed
  • Changed some css

image

I changed a little bit how Images display, tell me what you think, we can improve this in the future, but I mainly did this to have all cards with the same size. We should also look into cropping image instead of resizing it when it has a fixed value.

image

I am not sure if we want Recipe Detail to look exactly like this with the new setup. @xvxnoah

image

image

image

Navbar is a component, if a main page component, such as login, does not need a navbar, it can be specified by not adding the component in the route. Here's a quick example:

<Route
    path="/"
    element={
      <Container className="my-0 pt-0 pb-4 px-0 min-vh-100">
        <KasulaNavbar></KasulaNavbar>
        <Container className="bg-lightest min-vh-100">
          <UserFeed></UserFeed>
        </Container>
      </Container>
    }
></Route>
<Route path="/login" element={<Login />} />

@ivanmansilla Remember to put a return arrow in Recipe Detail. It should navigate back to the previous screen, NOT FEED. This also applies to Log in, we should change it in the future.

I had to reestructurate the whole app in order to use a functional navbar:

- Created root component and moved almost all index logic to root
- Root has all routes and specifies the content in each rout
- Navbar has the navigation bar with the main buttons (login, logout, post recipe)
- This buttons can be accessed from any navbar link
- Postrecipe is now a modal
- Updated visual properties of post recipe and user feed
- Changed some css
@xvxnoah
Copy link
Contributor

xvxnoah commented Nov 15, 2023

Design wise looks perfect to me, I will leave the task to accept your PR to your frontend colleagues. @guzmanalejandro @andreu-vall @ivanmansilla

@ivanmansilla
Copy link
Contributor

I have accepted the PR because I think it's great especially the issue of the navbar. as a comment I would say that in my opinion I like the header to occupy the entire width of the screen and the issue of transparency in the rest of the screen is fine, if the PO agrees, me too.

@BlessedLongsword
Copy link
Contributor Author

image

@ivanmansilla @xvxnoah

This is how it looks when filling the whole screen. If you want to see any change tell me!

@BlessedLongsword BlessedLongsword merged commit 2b49784 into develop Nov 16, 2023
1 check passed
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.

US11-FE#1 Develop Navbar
3 participants