openstreetmap-website/app/views/site/welcome.html.erb
Andy Allan f0ee117cff Refactor the welcome page to use the bootstrap grid and alert box
The two columns work well side-by-side even at small screen widths.
2020-01-08 16:41:17 +01:00

71 lines
1.9 KiB
Text

<% content_for :head do %>
<%= javascript_include_tag "welcome" %>
<% end %>
<% content_for :heading do %>
<h1><%= t ".title" %></h1>
<% end %>
<p><%= t ".introduction_html" %></p>
<h3><%= t ".whats_on_the_map.title" %></h3>
<div class='row'>
<div class='col'>
<div class='center'>
<span class='sprite small check'></span>
</div>
<p><%= t ".whats_on_the_map.on_html" %></p>
</div>
<div class='col'>
<div class='center'>
<span class='sprite small x'></span>
</div>
<p><%= t ".whats_on_the_map.off_html" %></p>
</div>
</div>
<h3><%= t ".basic_terms.title" %></h3>
<p><%= t ".basic_terms.paragraph_1_html" %></p>
<div class='clearfix icon-list'>
<div class='clearfix'>
<span class='sprite small term editor'></span>
<p><%= t ".basic_terms.editor_html" %></p>
</div>
<div class='clearfix'>
<span class='sprite small term node'></span>
<p><%= t ".basic_terms.node_html" %></p>
</div>
<div class='clearfix'>
<span class='sprite small term way'></span>
<p><%= t ".basic_terms.way_html" %></p>
</div>
<div class='clearfix'>
<span class='sprite small term tag'></span>
<p><%= t ".basic_terms.tag_html" %></p>
</div>
</div>
<div class='clearfix icon-list'>
<h3><%= t ".rules.title" %></h3>
<span class='sprite small term rules'></span>
<p><%= t ".rules.paragraph_1_html" %></p>
</div>
<div class='clearfix icon-list'>
<h3><%= t ".questions.title" %></h3>
<span class='sprite small term question'></span>
<p><%= t ".questions.paragraph_1_html", :help_url => help_path %></p>
</div>
<div class='clearfix center'>
<p><a href="<%= edit_path %>" class="button start-mapping"><%= t ".start_mapping" %></a></p>
</div>
<div class='alert alert-primary'>
<h3><%= t ".add_a_note.title" %></h3>
<p><%= t ".add_a_note.paragraph_1_html" %></p>
<p><%= t ".add_a_note.paragraph_2_html", :map_url => root_path %></p>
</div>