search

fossasia / gci14.fossasia.org

FOSSASIA Google Code-In Website 2014/15 http://gci14.fossasia.org
1.57k stars 109 forks source link

Mobile update #74

Closed hgarrereyn closed 9 years ago

hgarrereyn commented 9 years ago

This update adds a nicer looking mobile UI.

The navigation bar forms a 3-column display on devices with a width of 60em or lower and a 2-column display on devices with a width of 45em or lower. It also becomes relatively positioned on devices 60em or lower.

Demo: photo1

Animations are disabled on devices with a width of 60em or lower because the window.onScroll method is only triggered on mobile devices when the user releases their finger. Because of this, animations look buggy on mobile devices.

People with pictures and links on the website form a tableview display on devices with a width of 30em and lower. This makes it easy for people on mobile devices to scroll through more content quicker and view the links easier.

Demo: photo2

It might be useful if someone could figure out how to change the height of the title banner on mobile devices.

roonyh commented 9 years ago

@hgarrereyn Thanks!! Much needed work! @fossasia/fossasia-gci-students What do you think? See here for this change: http://roonyh.github.io/fossasia.github.io

samarsault commented 9 years ago

A really essential update !! thanks @hgarrereyn Scrolling over the site to get a view of everything on my phone was really a tiresome task but no worry now!!

amramadan commented 9 years ago

Great Job man! Keep it up :D