Responsive search and general fixes

[Abbe98]

• syntax clean up(HTML)
• always point links and resources to specified protocols
• fix broken font link(cookieinfo)
• remove hack4dk CSS
• responsive search page(Make search mobile friendly #18 partly Move css to search.css #17)

All common browsers(IE9+) except Opera Mini should be supported.

[lokal-profil]

Thanks. Mostly this looks good.

I noticed however that (on a desktop screen) the top of the red box around a selected search result gets cropped. If I recall correctly this is what I tried to fix using the offset in onMarkerClick(). I'm guessing the search box has simply gotten slightly higher so the offset is not enough.
(to reproduce: stick "Lars" into the Konstnär field then click on the entry close to Örebro)

I also noticed that the to-from year boxes get miss-aligned when you pull the window into half-screen (again on desktop). I have a sneaky feeling this was always the case but that the extra padding makes it happen slightly earlier.

Which bits of #18 is it supposed to fix and which doesn't it (so that I can check and update the issue)?

[Abbe98]

I fixed the first issue noted above, it was only appearing in Firefox.

Could you provide a screenshot of the miss-aligned inputs, I'm not able to reproduce it on my screen.

#18 still there is no zoom out on unfocus otherwise everything should be done, the meta tag might need to be updated to get the media queries to work on actual devices. In the past the map has not even appeared for me on small screens.

[lokal-profil]

The #searchresults padding needs to be increased to 18.3 for the red line not to be cut (in Firefox). Unfortunately that makes the line above visible in Chrome. =/ On the other hand I checked the version which is live today and that is suffering from the same issue so setting it to 18.3 is good enough for now. I made a comment about the source of the Chrome/Firefox difference over in issue #13.

The issue with the misaligned to-from year boxes I can no longer reproduce so that must have been something caching on my laptop. Now when I make the window half-screen the Search box goes on top of the map as expected.

I'll check on my mobile once I've got a usb cable (I can view localhost on the laptop on chrome in my mobile via a usb).

[lokal-profil]

I've attached screenshots of what the patch looks like on my mobile (navigating through localhost in Chrome). The gap in the top is the address bar (which you can't hide since you can't scroll, but it looks more weird here than on the mobile). For me the rearrangement of the searchbox does not seem to trigger.

I also managed to reproduce the miss-alignment issue. It occurs when I'm on a slightly larger screen where half-screen is just slightly larger than the trigger for screen rearrangement.

[Abbe98]

The rearrangement should now, mobile browsers sets the window width to 960px by default not by the actual screen width.

[Abbe98]

I'm not able to reproduce the miss-alignment issue, instead it's the old issue where fields ends up outside of the viewport(both in Firefox and Opera):

[lokal-profil]

Tried it and it now correctly puts the search bar on top of the map. There are few issues though.

1. There is a white space between the search results and the map. (minor issue)
   
2. In portrait mode the map covers the search button.
   
3. If you scroll down to the map you can no longer get back to the search box (since you scroll in the map). Futhermore you cannot even get the url field back.

Are we approaching this the wrong way? Would it be easier to try and detect small-screen devices and give them a completely different layout (or changing the current one for all screens).

[Abbe98]

1. this one I has to look into it's likely that's it's browser specific too. :-/
2. Okey I just has to make sure the height is never 100% or that there is a back to the top button...