[openstreetmap/openstreetmap-website] fix welcome message (#2537)
Andy Allan
notifications at github.com
Wed Feb 26 17:02:47 UTC 2020
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.

> + .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>
More information about the rails-dev
mailing list