search

MCT-master / mct-master.github.io

The blog of MCT
https://mct-master.github.io
14 stars 9 forks source link

More UI enhancement suggestions (navbar and general layout) #29

Closed aleksati closed 3 years ago

aleksati commented 3 years ago

I have some suggestions that might improve the visual style of the blog. Feel free to comment on these, they are just louse suggestions.

Navbar

  1. The dropdown menus in the navbar should show "on hover", instead of having to click the titles.

  2. I also suggest that the "people" title (in the navbar) should have a dropdown menu with the years of the students. So the dropdown menu would show "2018, 2019, 2020". When clicking on these, you are directed to a much simpler page with the names of students of that year and their introduction posts. I think the current people's page is a bit messy.

  3. Re-introduce some hover animation on the navbar titles. Maybe also add "position: fixed;" in the navbar CSS so that the navbar sticks to the top of the page when scrolling down.

Layout

  1. Re-introduce the black font and white background layout we initially had. Experiment with different shades of white and black to find a nice layout.

  2. Add a "dark/light-mode" toggle (just for fun).

  3. Add more info/media in the About section.

  4. also add support for the case in issue #28

stefanofasciani commented 3 years ago

Navbar: agree with 1 and 3. Disagree with 2 due (on the long term that dropdown menu will be too long, too many entries in a few year's time).

Layout: Agree with 6 (we have lot of material that can go to that page). Agree with 7, and we should check out to what extent Firefox is still a problem. Agree with 4 and 5, but you need to check what is feasible/possible in the theme we are currently using (minima), or experiment with another theme supported by github pages (theme is specified in https://github.com/MCT-master/mct-master.github.io/blob/master/_config.yml) https://pages.github.com/themes/ . Keep in mind that github pages usually does not support the latest version of plugins/themes. To understand the correct version of a theme/plugin refer to this page https://pages.github.com/versions/

jacksongoode commented 3 years ago
  1. I originally changed the "onhover" CSS effect for the dropdowns to click as it was totally incompatible with mobile/touch devices. However, it should be possible to toggle this function between desktop and touch browsers in JS.

Most of the other suggestions sound good! I would be interested in seeing if there might be a way to programmatically check if a user can't watch a drive video and suggest a fix as a popup. For FF disabling tracking protection is fairly easy.

aleksati commented 3 years ago

Ah, yeah. It should be possible to have different CSS configurations for different devices. In the current CSS, we do have the :

@media screen and (max-width: 600px) {
     something 
     something
}

Or is there something else that might be better for this?