search

CoderDojo / community-platform

Zen, the CoderDojo Community Platform!
https://zen.coderdojo.com
MIT License
121 stars 55 forks source link

UI Tweaks #152

Closed kamil-mech closed 9 years ago

kamil-mech commented 9 years ago

This is a partial of General section from CoderDojo/community-platform/issues/134 It will be used to agree on plenty of tiny tweaks.

@tangentfairy First question: what colour do we want the map padding(white area) to be after we change the main background to white?

tangentfairy-zz commented 9 years ago

I'm not sure I know what area you are talking about! Can you post a screenshot for me or alternatively we can Skype about it.

If it's easier for you guys you can make a list of UI questions to start with and we can share screen and go through them.

kamil-mech commented 9 years ago

Here, I marked it in blue for you.

mozilla firefox_007

If you prefer a skype call to see adjustments being applied live I see no problem.

tangentfairy-zz commented 9 years ago

It will just be white. We're using the main website as a style guide, and it just has white as the background. If you have any other questions let me know anytime!

ckiss commented 9 years ago

Hi @kamil-mech. Currently the background is a light gray, which I think should remain as it is, and the blue background your are talking about is white, which I think it's good. I believe the changes requested in the big Site Design issue are related to the header (please correct me if I'm wrong @tangentfairy).

So, my understanding is that the second header menu should be full width, 20px margins left&right, white background and the menu items should be colored as the menu items from here: https://coderdojo.com/get-involved/. Am I right @tangentfairy?

tangentfairy-zz commented 9 years ago

We do want the grey changed to white - I'm not sure if it was mentioned in the issue, but with the header I think it would look good if it was a little bigger (and the logo bigger) - and we may have mentioned making the map a little shorter in size to make up for that.

I think the header menu would look better white also - and then the coloured block menu items.

kamil-mech commented 9 years ago

Am I going in the right direction @tangentfairy ?

mozilla firefox_001

tangentfairy-zz commented 9 years ago

Yes that looks so much better already! Let's make sure we keep those five colours for all buttons across the site.

Ideally also the "Go" button will not have rounded corners and neither will any of the inputs, to remain consistent with the flat square styling.

kamil-mech commented 9 years ago

Hi @tangentfairy Do you want to keep the header lined up in width with the map(old site style) or do you want it extended to full screen width?

tangentfairy-zz commented 9 years ago

I think lined up with the map is good. It will need to be responsive - that's in the requirements. The main site has a burger menu appear when the page is resized, you could take whatever you'd like from that design wise.

kamil-mech commented 9 years ago

Earlier you have mentioned that we would like to follow a sqaure design.

Do you want me to change these circular social media icons in the footer into square ones?

tangentfairy-zz commented 9 years ago

No I think we can leave them the way they are, thanks :)

kamil-mech commented 9 years ago

Do we actually need "Find a Dojo" tab on the top navbar since we have buttons in the header for that functionality already?

tangentfairy-zz commented 9 years ago

I want to leave it there - that's the section of the site you are currently on. But can we change the links to look like this diagram for now:

linksexamples

Also on each page there needs to be an indication of which section you are on e.g. https://coderdojo.com/about/ for the "Find a Dojo" Landing page.

kamil-mech commented 9 years ago

In terms of the indication, currently it's implemented by stretching the button(see screenshot below), which was clicked to get there. Also an appropiate heading is present. Is there any additional forms of indication you would like?

(note: no language bar as I am currently on phase1-branch)

mozilla firefox_002

tangentfairy-zz commented 9 years ago

Can we make the text on all links capitalised like it is on the main site?

Also all links will just be bold all of the time.

Looks brilliant otherwise!

kamil-mech commented 9 years ago

Will do!

tangentfairy-zz commented 9 years ago

So here is a definitive screenshot of the links as we want them at the moment

newnavplatform

kamil-mech commented 9 years ago

Implemented, minor tweaks can be discussed locally with @tangentfairy on site.

tangentfairy-zz commented 9 years ago

Changes to nav:

Order of nav items when logged out to clarify: "Find a Dojo" (green), "Login" (dark blue), "Register" (yellow), "Create a Dojo" (light blue), "Resources" (orange)

tangentfairy-zz commented 9 years ago

When you're logged in as a CDF admin there are a couple of extra links - "Manage Dojos" and "Stats" so it doesn't look great when you resize the screen.

We're going to add another navigation bar, same as the dark grey one, underneath the dark grey one. We can make this a lighter grey and put the Manage Dojos and Stats links there. Can we also add a link to Badge Kit, seeing as we'll probably be visiting that often!

tangentfairy-zz commented 9 years ago

On feedback from today's demo, we're going to have the adult forum link publicly accessible.

So if you're logged out the forum link will be in the nav and link to the adults forum.

kamil-mech commented 9 years ago

Implemented up to date.

Wrote header from scratch to finally make it responsive the way we want it. Now it's way easier to move buttons around.

tangentfairy-zz commented 9 years ago

Everything from this issue was done so can be closed.