cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor flash messages to use a flex row for positioning

Browse source 
This works better for narrow widths and needs less custom CSS.
This commit is contained in:
Andy Allan 2021-06-23 17:38:54 +01:00
parent 7809bfa027
commit 3dd639c8d0
2 changed files with 24 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

19
app/assets/stylesheets/common.scss
View file

@ -1404,25 +1404,6 @@ tr.turn:hover {
&.notice {
background-color: #CBEEA7;
}
div.message {
display: inline-block;
margin-left: $lineheight / 2;
vertical-align: middle;
p {
margin-top: $lineheight * 0.5;
margin-bottom: $lineheight * 0.5;
&:first-child {
margin-top: 0px;
}
&:last-child {
margin-bottom: 0px;
}
}
}
}
/* Rules for highlighting fields with rails validation errors */

42
app/views/layouts/_flash.html.erb
View file

@ -1,29 +1,35 @@
<% if flash[:error] %>
<div class="flash error">
<picture>
<source srcset="<%= image_path "notice.svg" %>" type="image/svg+xml" />
<%= image_tag("notice.png", :srcset => image_path("notice.svg"), :class => "small_icon", :border => 0) %>
</picture>
<div class="message"><%= render_flash(flash[:error]) %></div>
<div class="flash error row align-items-center">
<div class="col-auto">
<picture>
<source srcset="<%= image_path "notice.svg" %>" type="image/svg+xml" />
<%= image_tag("notice.png", :srcset => image_path("notice.svg")) %>
</picture>
</div>
<div class="col"><%= render_flash(flash[:error]) %></div>
</div>
<% end %>
<% if flash[:warning] %>
<div class="flash warning">
<picture>
<source srcset="<%= image_path "notice.svg" %>" type="image/svg+xml"></source>
<%= image_tag("notice.png", :srcset => image_path("notice.svg"), :class => "small_icon", :border => 0) %>
</picture>
<div class="message"><%= render_flash(flash[:warning]) %></div>
<div class="flash warning row align-items-center">
<div class="col-auto">
<picture>
<source srcset="<%= image_path "notice.svg" %>" type="image/svg+xml"></source>
<%= image_tag("notice.png", :srcset => image_path("notice.svg")) %>
</picture>
</div>
<div class="col"><%= render_flash(flash[:warning]) %></div>
</div>
<% end %>
<% if flash[:notice] %>
<div class="flash notice">
<picture>
<source srcset="<%= image_path "notice.svg" %>" type="image/svg+xml"></source>
<%= image_tag("notice.png", :srcset => image_path("notice.svg"), :class => "small_icon", :border => 0) %>
</picture>
<div class="message"><%= render_flash(flash[:notice]) %></div>
<div class="flash notice row align-items-center">
<div class="col-auto">
<picture>
<source srcset="<%= image_path "notice.svg" %>" type="image/svg+xml"></source>
<%= image_tag("notice.png", :srcset => image_path("notice.svg")) %>
</picture>
</div>
<div class="col"><%= render_flash(flash[:notice]) %></div>
</div>
<% end %>