Use Bulma CSS to improve the styling of this application in any way you see fit!

[simonprickett]

The application uses Bulma, and has very basic styling. Improve it to suit your taste!

https://bulma.io/

This is part of our participation in Hacktoberfest 2021. Learn how to complete this issue here: https://developer.redis.com/hacktoberfest/

Need help or want to talk to us? Join us on Discord where we have a dedicated Hacktoberfest channel: https://discord.gg/ueQwKUh5Z3

[petercr]

Hello 👋 I would love to add some extra styling to this project 🧑‍🎨

Did you have any ideas on what parts you wanted to change the styling on?

Thanks,

Pete

[simonprickett]

@petercr I've assigned this issue to you - please check our guidelines here https://developer.redis.com/hacktoberfest/ and we look forward to your contribution.

In terms of guidance for this specific issue, please stick to Bulma and don't introduce other depenencies or any sort of front end build process. I imagine any custom CSS would go in static/app.css.

Regarding what needs changing... the application's current state can be seen in this video:

https://www.youtube.com/watch?v=ZmzuIsWwAzM

Some suggestions (I'm not a designer so feel free to ignore / do what makes sense to you!):

• Add a Redis logo at the top? https://redis.com/brand-guidelines/
• Style the header area to look nicer?
• Form styling so that it's in its own panel or similar?
• Maybe below the map add some tabbed interface or similar entitled "Resources" that includes links to university.redis.com, this repo here on GitHub to get the source code, the Redis GEOSEARCH command page (redis.io/commands/geosearch)

[simonprickett]

@petercr Hi there - just checking in to see if everything is OK with this, or should we open up this issue for others to try?

[petercr]

Hi @simonprickett sorry for the delay. I had just been really busy this week 😅 I actually thought that I had left a comment already... 🤷‍♂️ whoops

I did get to watch the video, and think about some of the ideas you suggested. Which were all pretty good 👍

Then I went to get the project up and running with Docker on my machine, and let's just say that Docker had a few problems getting going 😂

Now that the whole Docker thing is sorted, I should be able to get to this issue this weekend.

Hope that works for you 👌

Thanks

[simonprickett]

@petercr sounds great, glad you got it up and running!

[petercr]

Hello @simonprickett I just wanted to touch base after the weekend and let you know how it's going 👌

After fooling around for a bit, I was able to get a sort of nice border for the form with a slight drop shadow effect. Picture shown below ⬇️

I also changed out one of the divs to a <form>, the <section> to a <main>, and added a role= attrib to the Button for accessibility reasons.

I have also downloaded and added the Redis brand logo's and such to the project.

I will finish off the <Header> and <Footer> sections some time this week when I have some more free time.

Hope you had a great weekend 🌮

Thanks,

Pete

[simonprickett]

@petercr thanks for the update - we'll leave this one assigned to you and look forward to seeing your results!

[SuzeShardlow]

Hi @petercr, how are you getting on with this? Will you be able to open a PR this weekend? Please let us know. Thanks!

[petercr]

@SuzeShardlow Great thanks for asking 👍🏻

I'm pretty much done except for the Footer part.

I'm hoping to wrap it up this afternoon, and then send out the PR.

Quick question: should I add in the Redis logo for the favicon?

Thanks 😄