search

galaxyproject / training-material

A collection of Galaxy-related training material
https://training.galaxyproject.org
MIT License
294 stars 846 forks source link

Refactor CSS to more look like the "Hub" #463

Closed willdurand closed 6 years ago

willdurand commented 6 years ago

Hi there!

I did a complete CSS redesign (and a bit of HTML too) to match the Galaxy Hub look and feel. It is deployed here: http://williamdurand.fr/training-material/, so you can test it. Emoji (like :stuff:) are not rendered as I used gh-pages to build the website (neither Travis) but it is working.

I tried to come up with the smallest CSS possible (well, SASS actually but it is built-in in Jekyll). Therefore, all the credits go to Bootstrap. It is now fully responsive and should be slightly more readable. I changed the color scheme for the tutorial boxes with @bebatut and the help of http://paletton.com.

The PR gets pretty big, next chunk will be about replacing the Emoji icons in the "tutorial boxes" to FontAwesome icons, and then maybe redesign other parts. Let me know what you would like to do next!

🔥 Test it at: http://williamdurand.fr/training-material/

The logo (top left corner) was updated in https://github.com/galaxyproject/training-material/pull/463/commits/2481e59f46b81d91f320dc3b3ad7136209e58be5.

bgruening commented 6 years ago

Thanks @willdurand!

@galaxyproject/training can you please vote here if you think this is good to go and an improvement to the old style.

martenson commented 6 years ago

💯

jxtx commented 6 years ago

For maintainibility, could we share a single set of base stylesheets between hub and here (and may end even Galaxy itself)?

willdurand commented 6 years ago

For maintainibility, could we share a single set of base stylesheets between hub and here (and may end even Galaxy itself)?

The base stylesheet is Bootstrap I guess. See the main.scss file, it is very specific to the tutorials.

martenson commented 6 years ago

@jxtx That would probably mean bringing LESS to the build process to hub and here?

jxtx commented 6 years ago

@marten hub already has less, see https://github.com/galaxyproject/galaxy-hub/blob/master/src/css/styles.less which builds off bootstrap coming in via bower (we should move to using yarn though), and this PR is using scss.

jxtx commented 6 years ago

There is definitely stuff that is custom, but if we based it off the existing Galaxy styles then the bar sizes would match, fonts, base colors, etc.

jxtx commented 6 years ago

(Also, I don't t care about less vs sass, we should just use one thing everywhere).

willdurand commented 6 years ago

Yup, this can be done later anyway, especially if it involves Galaxy and Hub. The idea was to get rid of the old CSS and to make the website a bit more appealing/responsive.

jxtx commented 6 years ago

Fine with merging this now, but let's keep going!

nsoranzo commented 6 years ago

Looks sleek! I noticed a couple of issues:

willdurand commented 6 years ago

@nsoranzo GitHub is having troubles again (for the 500)

willdurand commented 6 years ago

the "hat" logo is now used for "Hands-on", while previously a similar "hat" logo was used for "Slides", maybe that can be confusing?

Yes. New logo for slides is the one from Slideshare, which seems to make more sense that the hat. Do you think we should switch back to the previous logos?

nsoranzo commented 6 years ago

Yes. New logo for slides is the one from Slideshare, which seems to make more sense that the hat. Do you think we should switch back to the previous logos?

Don't know, mainly raising the point for discussion. Maybe a mouse logo for the tutorial?

willdurand commented 6 years ago

This is a good point! Here are all the available icons we can use: http://fontawesome.io/icons/ 😸

bgruening commented 6 years ago

What about http://emojipedia.org/female-teacher/

willdurand commented 6 years ago

I had that in mind too but read in #304 that FontAwesome should be preferred.

martenson commented 6 years ago

For training site we can afford to expand to other icon libraries I believe.

bebatut commented 6 years ago

In the navbar, the emoji will look weird. I thought it would be better not having 2 different icons for same things and having icons in the navbar adds a visual hint

nsoranzo commented 6 years ago

@willdurand What about http://fontawesome.io/icon/laptop/ for tutorials?

jxtx commented 6 years ago

For getting the styles more uniform, all sites could start with this as a base: https://github.com/jxtx/galaxy-bootstrap

That's where the styles in Galaxy proper came from. It needs to be updated and packaged with all the modern stuff, but there it can produce a bootstrap.min.css with Galaxy styles ready to use.

willdurand commented 6 years ago

Just replaced the navbar logo with a better one :)

bebatut commented 6 years ago

ping @galaxyproject/training: we would like to have more feedbacks 😄

shiltemann commented 6 years ago

I like it! thanks a lot @willdurand :)

willdurand commented 6 years ago

(rebased)

bgruening commented 6 years ago

I think this was open long enough and I haven't heard any negative things - also counting the :+1: here is a clear merge this - and here we go!

Thanks @willdurand and all others for feedback. Keep the PRs coming!