Improve Mobile Usability by adding a bottom app bar

[agarcia-caicedo]

What would you like to be added:

Proposed design for a bottom app bar, on the left an user that has not logged in, and on the right an user that has:

Why would you like this to be added:
While on mobile, design should keep in mind the range of the thumb. Currently, we have a top bar that is not easy to reach for people that visit the site on mobile.

By adding a bottom app bar, it would benefit the user experience of the mobile users. As an added benefit, it could allow for the title of the post to remain sticky, since there would be enough space for the post sandwiched between the title and the bottom app bar.

[cindyorangis]

drools 🤤

[PedroFonsecaDEV]

I really like it.
The way you keep the post title on top and show the top nav on the bottom.
Really nice.

[humphd]

Yes!

Also, somewhat related on the implementation side is #801

[jiyoungsin]

Hey everyone, would it be cool if I gave this a shot?

In addition, can someone clarify the url for the persons Icon and what the hamburger menu icon should do?

[humphd]

We use Material-UI for all UI, and it has icons, see https://material-ui.com/components/material-icons/.

[humphd]

I've assigned this to you, @jiyoungsin, but be warned you're likely in for a lot of back and forth on reviews and styling to get this right. If you're up for that and expecting it, you'll have no trouble. You've been warned!

[jiyoungsin]

Yes, that sounds like a lovely way to spend my Saturday! I am still confused on what the persons Icon and what the hamburger menu icon should do... I will send up a PR in a few minutes with my current status.

[jiyoungsin]

I am also going to need some help with the login functionality. I have never hooked up the Microsoft 365 log in before. If anyone has any experience with this please help me out 😢 .

[humphd]

https://github.com/Seneca-CDOT/telescope/blob/master/docs/login.md discusses how to mock login stuff locally via docker.

[jiyoungsin]

Thank you for this link. I will finish up my lab 8 and get right on this! :)

[jiyoungsin]

This is where I am currently sitting at. I log into the SAML page and it directs me to localhost:3000. Nothing appears on localhost:3000, however, If I look at localhost:8000/user/info I can see the user I have logged into. Could you point me into the right direction to confirm that it is working locally?

[humphd]

Are you running the login container via docker-compose?

[jiyoungsin]

This is how my docker is running. for some reason my telescope_telescope_1 never works. It seems like the npm start is equivalent, however, this is an assumption. I am not sure what exactly is contributing to telescope_telescope_1 not being able to communicate with elasctic-search.

[humphd]

What error is the telescope_telescope_1 container giving when this happens (see the logs).

[jiyoungsin]

It seems like I have figured it out! Here is a video of me signing in on this gif!

[chrispinkney]

@tonyvugithub and I will re-evaluate this when we begin the PWA (#801)

[humphd]

Is this not done now? @chrispinkney @tonyvugithub

[tonyvugithub]

@humphd it is done!