Responsive site design.

cylc / cylc.github.io

Source files for the Cylc Workflow Engine web site.

https://cylc.github.io/

GNU General Public License v3.0

5 stars 9 forks source link

Responsive site design. #32

Closed hjoliver closed 4 years ago

hjoliver commented 5 years ago

GitHub Pages via Jekyll can do nice "responsive" designs (mobile friendly etc.) which our current site isn't (fixed width, fixed sidebar). I briefly looked at this but it will take a few hours at least to choose a good template and convert the site over. Not enough time right now.

prasannavijayan commented 5 years ago

@hjoliver Shall I take this one up?

kinow commented 5 years ago

Hi @prasannavijayan!

First of all, thanks for your interest.

This issue involves some research first. We need someone to take some time and suggest a few possible designs. Then some of @cylc/core contributors will vote for which layout they find the best.

This task can be started as soon as one wants, and done after the start of the Hacktoberfest. Would you like to have a try at this one?

Cheers Bruno

prasannavijayan commented 5 years ago

@kinow Sure, I will send you some designs for the pages and see which you want to go with and then I'll start coding.

kinow commented 5 years ago

Brilliant @prasannavijayan ! Feel free to attach the designs here so others can have a look (@hjoliver hoping you will have a few minutes in the next days to take a look and just point which one you prefer :grimacing: )

Alabs02 commented 5 years ago

Definitely, I will upload some world class responsive UI design for the pages and review if they are up to your standard.

prasannavijayan commented 5 years ago

@hjoliver Just check the base idea. I have decided to go with similar colours and font. Let me know what you think of this. MacBook Pro Tablet Index Page Idea Tablet

hjoliver commented 5 years ago

@prasannavijayan - sorry for the slow response, I have been away on leave.

Your suggested design above looks good to me. Note that the original site has been changed somewhat since you did this - it now has two download buttons (one for cylc-8 preview releases, and one for cylc-7 production releases) and a bunch of logos for sites that use Cylc. Could you consider how to incorporate those changes into your design?

hjoliver commented 5 years ago

@prasannavijayan - are you still planning to do this for us? If so, thanks!; and note:

if the new logos are difficult to incorporate, you can just put them at the bottom of the main page and we can re-arrange later as a follow-up.
if you could publish the result to github pages on your fork, we can take a look

prasannavijayan commented 5 years ago

@hjoliver Sure, I will upload the changes by end of this week in GitHub or Netlify and will update you by Sunday.

hjoliver commented 5 years ago

Sounds good; cheers.

prasannavijayan commented 5 years ago

@hjoliver Please check this website - https://cylc.netlify.com/ and please do let me know.

Couple of items are pending.

Need to work on the responsiveness of users (map view alone) - Done
Hamburger icon should change to X icon on click (SVG changes) - WIP

hjoliver commented 5 years ago

@prasannavijayan - nice work, thanks! If no one on the team disagrees (I'll check over the next day or so) then I will suggest you put up a pull request :tada:

I noticed you have tweaked the logo somewhat - a different font, all-caps, and the coloured circles are slightly different sizes - however, don't change back, I actually like yours better! (And we are still considering changing to, or adding, an entirely different logo anyway ... we can worry about that later on).

hjoliver commented 5 years ago

@prasannavijayan - please go ahead with a Pull Request.

kinow commented 4 years ago

This has been done :-)