[openstreetmap/openstreetmap-website] fix welcome message (#2537)

[Andy Allan]

gravitystorm requested changes on this pull request.



> @@ -403,8 +403,8 @@ body.compact {
     }
 
     h2 {
-      padding: $lineheight $lineheight $lineheight/2;
-      font-size: 1.5rem;
+      padding: $lineheight 0 $lineheight/2 $lineheight;
+      font-size: 1.35rem;

We should keep the current header size here.

> @@ -403,8 +403,8 @@ body.compact {
     }
 
     h2 {
-      padding: $lineheight $lineheight $lineheight/2;
-      font-size: 1.5rem;
+      padding: $lineheight 0 $lineheight/2 $lineheight;

Setting padding-right to 0  breaks the positioning of the close icons in all the other sidebars, since they depend on the h2 padding to keep the icon away from the edge of the panel.

![Screenshot from 2020-02-26 17-13-18](https://user-images.githubusercontent.com/360803/75364445-0a697200-58bc-11ea-9307-332339f86e0f.png)




> +  .welcome-header {
+    display: flex;
+    h2 {
+      flex: 1 1 0;
+    }
+    .button {
+      width: auto;
+      border: none;
+      background-color: transparent;
+      padding: 1em;
+    }
+  }

Can the same effect be achieved using bootstrap utility classes? e.g. https://getbootstrap.com/docs/4.3/utilities/flex/ . I'd like to avoid writing CSS if a utility class can do the same thing.

> @@ -40,8 +40,12 @@
 
     <% unless current_user %>
       <div class="welcome">
-        <h2><%= t "layouts.intro_header" %></h2>
-        <div class="close-wrap"><span class="icon close"></span></div>
+        <div class="welcome-header">
+          <h2><%= t "layouts.intro_header" %></h2>
+          <button type="button" class="button close" aria-label="Close">
+            <span class="icon close"></span>
+          </button>
+        </div>

It might be easier to just put the close icon within the h2, and adjust the javascript handler to match. For example, the search sidebar close button is done like this:

```
<h2>
    <a class="geolink" href="<%= root_path %>"><span class="icon close"></span></a>
    <%= t("site.sidebar.search_results") %>
</h2>
```
It doesn't have any problems with the text overlapping the icon, since it's floated to the right, rather than absolutely positioned.

-- 
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/2537#pullrequestreview-365040201
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.openstreetmap.org/pipermail/rails-dev/attachments/20200226/d154f82f/attachment.htm>