[openstreetmap/openstreetmap-website] Add support for rotating banners, add banners for SOTM, SOTMUS (#1240)

Bryan Housel notifications at github.com
Tue Jun 21 18:45:38 UTC 2016


> @@ -46,12 +46,17 @@
>  
>      <% unless @user %>
>        <div class="welcome">
> -        <h2><a><span class="icon close"></span></a><%= t 'layouts.intro_header' %></h2>
> +        <h2><%= t 'layouts.intro_header' %></h2>
> +        <div class="close-wrap"><span class="icon close"></span></div>

Good question - I added `close-wrap` to give the close button a larger touch target.
We use `class="icon close"` a lot of places to draw those close icons.. I didn't want to change all of them, just the ones on the Welcome and the Banner divs.

If we just absolutely position the close icon on top of the banner without the wrapping div, we get this:
<img width="516" alt="screenshot 2016-06-21 14 39 35" src="https://cloud.githubusercontent.com/assets/38784/16241979/513218f4-37be-11e6-8046-32c9c60641a9.png">

The problem with that is: if the user misses clicking on that little 'X', their click will go to the banner div and it will send them to the other website.


With the `close-wrap`, the user has a much larger target to click, and won't accidentally click the banner.:

<img width="459" alt="screenshot 2016-06-21 14 37 58" src="https://cloud.githubusercontent.com/assets/38784/16241987/56d1b210-37be-11e6-9071-40f4724442d3.png">


---
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub:
https://github.com/openstreetmap/openstreetmap-website/pull/1240/files/933335a0ea28f274bc7301c18611bcd90709fd99#r67928201
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20160621/9be43521/attachment.html>


More information about the rails-dev mailing list