color: $blue;
}
+/* Rules for borders */
+/* These add additional colours to those provided by bootstrap */
+.border-grey {
+ border-color: $grey !important;
+}
+
+.border-lightgrey {
+ border-color: $lightgrey !important;
+}
+
/* Rules for the header */
#menu-icon {
}
}
- img.user_thumbnail_tiny {
- border: 0;
- border-radius: 3px;
- }
-
#inboxanchor {
display: inline-block;
height: 25px;
top: 20px;
}
}
-
- .icon.close {
- float: right;
- cursor: pointer;
- }
-
- .flash {
- padding: 15px;
-
- picture {
- margin-right: -25px;
- }
-
- div.message {
- margin-left: 30px;
- }
- }
}
.overlay-sidebar #sidebar {
border-bottom: none;
}
- .paginate {
- float: right;
- padding: 1px 6px;
- border: 1px solid $lightgrey;
- border-radius: 3px;
- }
-
- .browse-field {
- margin-bottom: 10px;
-
- h4 {
- padding: 5px 0 5px 10px;
- font-size: 12px;
- border: 1px solid $grey;
- border-radius: 4px 4px 0 0;
- background-color: $offwhite;
- }
-
- p {
- padding: 7px 10px;
- font-size: 12px;
- background-color: #FFF;
- border: 1px solid $grey;
- border-top: 0;
- border-radius: 0 0 4px 4px;
- }
- }
-
.browse-tag-list {
background-color: $offwhite;
- border: 1px solid $grey;
- border-radius: 3px;
table-layout: fixed;
border-collapse: separate;
border-spacing: 0;
}
}
- .comments-header {
- float: left;
- }
-
- .subscribe-buttons {
- float: left;
- margin: 0 10px;
- min-width: 80px;
- }
-
.subscribe-buttons input {
font-size: 90%;
line-height: 15px;
.export_boxy {
background: $lightgrey;
- border: 1px solid $grey;
- border-radius: 3px;
#maxlat { margin-top: -1px; }
#minlon {
.content_map {
height: 200px;
- border: 1px solid $grey;
margin-bottom: $lineheight;
}
padding-bottom: $lineheight/2;
border-top: 1px solid $grey;
- &:first-of-type {
- margin-top: $lineheight/2;
- }
-
&.deleted {
background-color: #fee;
}
-
- .post_heading {
- margin-bottom: $lineheight;
-
- h2 {
- margin-top: 0;
- margin-bottom: $lineheight/2;
- }
- }
-
- img.user_thumbnail {
- float: left;
- }
}
/* Rules for the diary entry page */
.diary_entries {
#map {
height: 400px;
- border: 1px solid $grey;
display: none;
margin-bottom: $lineheight;
}
}
}
-.diary_entries-show img.user_thumbnail {
- float: left;
-}
-
/* Rules for the log in page */
#login_auth_buttons {
.users-terms {
.legale {
- border: 1px solid $grey;
padding: $lineheight;
margin-bottom: $lineheight;
overflow: auto;
img.user_image {
max-width: 100px;
max-height: 100px;
- border: 1px solid $grey;
}
img.user_thumbnail {
max-width: 50px;
max-height: 50px;
- border: 1px solid $grey;
}
img.user_thumbnail_tiny {
height: auto;
max-width: 25px;
max-height: 25px;
- border: 1px solid $grey;
}
/* Rules for geo microformats */
$headerHeight: 55px;
$sidebarWidth: 350px;
$keyline: 1px solid $lightgrey;
-$border-radius: 3px;
$list-highlight: #FFFFC0;
$border: 1px solid $grey;
# User images
def user_image(user, options = {})
- options[:class] ||= "user_image"
+ options[:class] ||= "user_image border border-grey"
options[:alt] ||= ""
if user.image_use_gravatar
end
def user_thumbnail(user, options = {})
- options[:class] ||= "user_thumbnail"
+ options[:class] ||= "user_thumbnail border border-grey"
options[:alt] ||= ""
if user.image_use_gravatar
end
def user_thumbnail_tiny(user, options = {})
- options[:class] ||= "user_thumbnail_tiny"
+ options[:class] ||= "user_thumbnail_tiny border border-grey"
options[:alt] ||= ""
if user.image_use_gravatar
-<% if pages.page_count > 1 %>
- <span class="paginate">
- <%= raw pagination_links_each(pages, {}) { |n| link_to(n, page_param => n) } %>
- </span>
-<% end %>
+<div class="row">
+ <div class="col">
+ <h4><%= heading %></h4>
+ </div>
+ <% if pages.page_count > 1 %>
+ <div class="col-auto">
+ <h4>
+ <span class="border border-lightgrey rounded p-1">
+ <%= raw pagination_links_each(pages, {}) { |n| link_to(n, page_param => n) } %>
+ </span>
+ </h4>
+ </div>
+ <% end %>
+</div>
<% unless tag_details.empty? %>
<h4><%= t ".tags" %></h4>
- <table class='browse-tag-list'>
+ <table class='browse-tag-list border border-grey rounded'>
<%= render :partial => "tag", :collection => tag_details.sort %>
</table>
<% end %>
<%= render :partial => "tag_details", :object => @changeset.tags.except("comment") %>
- <h4 class="comments-header"><%= t(".discussion") %></h4>
-
- <% if current_user %>
- <div class="buttons clearfix subscribe-buttons">
- <form action="#">
- <% if @changeset.subscribers.exists?(current_user.id) %>
- <input class="action-button btn btn-sm btn-primary" type="submit" name="unsubscribe" value="<%= t("javascripts.changesets.show.unsubscribe") %>" data-method="POST" data-url="<%= changeset_unsubscribe_url(@changeset) %>" />
- <% else %>
- <input class="action-button btn btn-sm btn-primary" type="submit" name="subscribe" value="<%= t("javascripts.changesets.show.subscribe") %>" data-method="POST" data-url="<%= changeset_subscribe_url(@changeset) %>" />
- <% end %>
- </form>
+ <div class="row">
+ <div class="col">
+ <h4><%= t(".discussion") %></h4>
</div>
- <% end %>
- <div class="clearfix"></div>
+ <% if current_user %>
+ <div class="col-auto">
+ <div class="subscribe-buttons">
+ <form action="#">
+ <% if @changeset.subscribers.exists?(current_user.id) %>
+ <input class="action-button btn btn-sm btn-primary" type="submit" name="unsubscribe" value="<%= t("javascripts.changesets.show.unsubscribe") %>" data-method="POST" data-url="<%= changeset_unsubscribe_url(@changeset) %>" />
+ <% else %>
+ <input class="action-button btn btn-sm btn-primary" type="submit" name="subscribe" value="<%= t("javascripts.changesets.show.subscribe") %>" data-method="POST" data-url="<%= changeset_subscribe_url(@changeset) %>" />
+ <% end %>
+ </form>
+ </div>
+ </div>
+ <% end %>
+ </div>
<% if @comments.length > 0 %>
<div class='changeset-comments'>
<div class="form-group">
<textarea class="form-control" name="text" cols="40" rows="5"></textarea>
</div>
- <div class="buttons clearfix">
+ <div>
<input type="submit" name="comment" value="<%= t("javascripts.changesets.show.comment") %>" data-changeset-id="<%= @changeset.id %>" data-method="POST" data-url="<%= changeset_comment_url(@changeset) %>" disabled="1" class="btn btn-sm btn-primary" />
</div>
</form>
<% end %>
<% unless @ways.empty? %>
- <h4>
- <%= type_and_paginated_count("way", @way_pages) %>
- <%= render :partial => "paging_nav", :locals => { :pages => @way_pages, :page_param => "way_page" } %>
- </h4>
+ <%= render :partial => "paging_nav", :locals => { :heading => type_and_paginated_count("way", @way_pages), :pages => @way_pages, :page_param => "way_page" } %>
<ul class="list-unstyled">
<% @ways.each do |way| %>
<li><%= link_to printable_name(way, :version => true), { :action => "way", :id => way.way_id.to_s }, { :class => link_class("way", way), :title => link_title(way) } %></li>
<% end %>
<% unless @relations.empty? %>
- <h4>
- <%= type_and_paginated_count("relation", @relation_pages) %>
- <%= render :partial => "paging_nav", :locals => { :pages => @relation_pages, :page_param => "relation_page" } %>
- </h4>
+ <%= render :partial => "paging_nav", :locals => { :heading => type_and_paginated_count("relation", @relation_pages), :pages => @relation_pages, :page_param => "relation_page" } %>
<ul class="list-unstyled">
<% @relations.each do |relation| %>
<li><%= link_to printable_name(relation, :version => true), { :action => "relation", :id => relation.relation_id.to_s }, { :class => link_class("relation", relation), :title => link_title(relation) } %></li>
<% end %>
<% unless @nodes.empty? %>
- <h4>
- <%= type_and_paginated_count("node", @node_pages) %>
- <%= render :partial => "paging_nav", :locals => { :pages => @node_pages, :page_param => "node_page" } %>
- </h4>
+ <%= render :partial => "paging_nav", :locals => { :heading => type_and_paginated_count("node", @node_pages), :pages => @node_pages, :page_param => "node_page" } %>
<ul class="list-unstyled">
<% @nodes.each do |node| %>
<li><%= link_to printable_name(node, :version => true), { :action => "node", :id => node.node_id.to_s }, { :class => link_class("node", node), :title => link_title(node), :rel => link_follow(node) } %></li>
<% if current_user and @user.id == current_user.id %>
<div class="col-md order-md-last">
<% if @user.home_lat.nil? or @user.home_lon.nil? %>
- <div id="map" class="content_map">
+ <div id="map" class="content_map border border-grey">
<p class="m-3"><%= t(".no_home_location_html", :edit_profile_link => link_to(t(".edit_your_profile"), edit_profile_path)) %></p>
</div>
<% else %>
:icon => image_path("marker-red.png"),
:description => render(:partial => "popup", :object => current_user, :locals => { :type => "your location" })
} %>
- <%= tag.div "", :id => "map", :class => "content_map", :data => { :user => user_data } %>
+ <%= tag.div "", :id => "map", :class => "content_map border border-grey rounded", :data => { :user => user_data } %>
<% end %>
<% friends = @user.friends %>
<div class='diary_post<%= " text-muted px-3 deleted" unless diary_entry.visible %> user_<%= diary_entry.user.id %>'>
- <div class='post_heading'>
+ <div class='mb-3'>
<% if @user %>
<h2><%= link_to diary_entry.title, diary_entry_path(diary_entry.user, diary_entry) %></h2>
<% else %>
<fieldset>
<legend><%= t ".location" -%></legend>
- <%= tag.div "", :id => "map", :data => { :lat => @lat, :lon => @lon, :zoom => @zoom } %>
+ <%= tag.div "", :id => "map", :class => "border border-grey rounded", :data => { :lat => @lat, :lon => @lon, :zoom => @zoom } %>
<div class="form-row">
<%= f.text_field :latitude, :wrapper_class => "col-sm-4", :id => "latitude" %>
<% if current_user && current_user.id %>
<div class='d-inline-flex dropdown user-menu logged-in clearfix'>
<a class='dropdown-toggle btn btn-outline-secondary pl-2 py-1 flex-grow-1' data-toggle='dropdown' href="#">
- <%= user_thumbnail_tiny(current_user, :width => 25, :height => 25) %>
+ <%= user_thumbnail_tiny(current_user, :width => 25, :height => 25, :class => "user_thumbnail_tiny rounded-sm") %>
<%= render :partial => "layouts/inbox" %>
<span class="user-button">
<span class='username'>
<input class="form-check-input" type="checkbox" name="updatehome" value="1" <% unless current_user.home_lat and current_user.home_lon %> checked="checked" <% end %> id="updatehome" />
<label class="form-check-label" for="updatehome"><%= t ".update home location on click" %></label>
</div>
- <%= tag.div "", :id => "map", :class => "content_map set_location" %>
+ <%= tag.div "", :id => "map", :class => "content_map set_location border border-grey rounded" %>
</fieldset>
<%= f.primary t(".save") %>
<%= hidden_field_tag "format", "osm", :autocomplete => "off" %>
<div class='export_area_inputs'>
- <div class='export_boxy'>
+ <div class='export_boxy border border-grey rounded'>
<%= text_field_tag("maxlat", nil, :size => 10, :autocomplete => "off", :class => "export_bound form-control mx-auto") %>
<div class="clearfix">
<%= text_field_tag("minlon", nil, :size => 10, :autocomplete => "off", :class => "export_bound form-control") %>
<% end %>
</div>
- <div id="contributorTerms" class="legale">
+ <div id="contributorTerms" class="legale border border-grey rounded">
<%= render :partial => "terms" %>
</div>
assert_select "h1", :text => /#{entry.user.display_name}'s Diary/, :count => 1
end
assert_select "div#content", :count => 1 do
- assert_select "div.post_heading", :text => /#{new_title}/, :count => 1
+ assert_select "h2", :text => /#{new_title}/, :count => 1
# This next line won't work if the text has been run through the htmlize function
# due to formatting that could be introduced
assert_select "p", :text => /#{new_body}/, :count => 1
assert_select "h1", :text => /#{entry.user.display_name}'s Diary/, :count => 1
end
assert_select "div#content", :count => 1 do
- assert_select "div.post_heading", :text => /#{new_title}/, :count => 1
+ assert_select "h2", :text => /#{new_title}/, :count => 1
# This next line won't work if the text has been run through the htmlize function
# due to formatting that could be introduced
assert_select "p", :text => /#{new_body}/, :count => 1
gravatar_user = create(:user, :image_use_gravatar => true)
image = user_image(user)
- assert_match %r{^<img class="user_image" .* src="/images/avatar_large.png" />$}, image
+ assert_match %r{^<img class="user_image border border-grey" .* src="/images/avatar_large.png" />$}, image
image = user_image(user, :class => "foo")
assert_match %r{^<img class="foo" .* src="/images/avatar_large.png" />$}, image
image = user_image(gravatar_user)
- assert_match %r{^<img class="user_image" .* src="http://www.gravatar.com/avatar/.*" />$}, image
+ assert_match %r{^<img class="user_image border border-grey" .* src="http://www.gravatar.com/avatar/.*" />$}, image
image = user_image(gravatar_user, :class => "foo")
assert_match %r{^<img class="foo" .* src="http://www.gravatar.com/avatar/.*" />$}, image
gravatar_user = create(:user, :image_use_gravatar => true)
image = user_thumbnail(user)
- assert_match %r{^<img class="user_thumbnail" .* src="/images/avatar_small.png" />$}, image
+ assert_match %r{^<img class="user_thumbnail border border-grey" .* src="/images/avatar_small.png" />$}, image
image = user_thumbnail(user, :class => "foo")
assert_match %r{^<img class="foo" .* src="/images/avatar_small.png" />$}, image
image = user_thumbnail(gravatar_user)
- assert_match %r{^<img class="user_thumbnail" .* src="http://www.gravatar.com/avatar/.*" />$}, image
+ assert_match %r{^<img class="user_thumbnail border border-grey" .* src="http://www.gravatar.com/avatar/.*" />$}, image
image = user_thumbnail(gravatar_user, :class => "foo")
assert_match %r{^<img class="foo" .* src="http://www.gravatar.com/avatar/.*" />$}, image
gravatar_user = create(:user, :image_use_gravatar => true)
image = user_thumbnail_tiny(user)
- assert_match %r{^<img class="user_thumbnail_tiny" .* src="/images/avatar_small.png" />$}, image
+ assert_match %r{^<img class="user_thumbnail_tiny border border-grey" .* src="/images/avatar_small.png" />$}, image
image = user_thumbnail_tiny(user, :class => "foo")
assert_match %r{^<img class="foo" .* src="/images/avatar_small.png" />$}, image
image = user_thumbnail_tiny(gravatar_user)
- assert_match %r{^<img class="user_thumbnail_tiny" .* src="http://www.gravatar.com/avatar/.*" />$}, image
+ assert_match %r{^<img class="user_thumbnail_tiny border border-grey" .* src="http://www.gravatar.com/avatar/.*" />$}, image
image = user_thumbnail_tiny(gravatar_user, :class => "foo")
assert_match %r{^<img class="foo" .* src="http://www.gravatar.com/avatar/.*" />$}, image