Rework the users#show page to avoid custom column css
This uses bootstrap instead, ensuring the map shows before the text on small screens, but to the right of it on md+ widths. The height of the map also changes at this breakpoint instead of being based on the menu width (body.small). The account edit page was also changed to match the content_map changes, and a full width map is now used. This can be changed, if required, using bootstrap breakpoints but I like it as it is.
This commit is contained in:
Andy Allan
parent
9f993fe8c8
commit
8192c0bd17
4 changed files with 58 additions and 84 deletions
|
|
@ -30,11 +30,6 @@ small, aside {
|
|||
|
||||
#container { position: relative; }
|
||||
|
||||
.column-1 {
|
||||
width: 50%;
|
||||
margin: 0 0 $lineheight/2 0;
|
||||
}
|
||||
|
||||
.small_icon {
|
||||
vertical-align: middle;
|
||||
margin-right: $lineheight/4;
|
||||
|
|
@ -1271,12 +1266,15 @@ tr.turn:hover {
|
|||
/* Rules for small maps in content areas */
|
||||
|
||||
.content_map {
|
||||
position: relative;
|
||||
width: 45%;
|
||||
height: 400px;
|
||||
height: 200px;
|
||||
border: 1px solid $grey;
|
||||
margin-bottom: $lineheight;
|
||||
float: right;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
.content_map {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Rules for the new trace form */
|
||||
|
|
@ -1329,16 +1327,6 @@ tr.turn:hover {
|
|||
margin-right: $lineheight;
|
||||
}
|
||||
|
||||
.activity-block {
|
||||
clear: left;
|
||||
border-bottom: 1px solid $grey;
|
||||
padding-bottom: $lineheight;
|
||||
float: left;
|
||||
h3 {
|
||||
margin-bottom: $lineheight/2;
|
||||
}
|
||||
}
|
||||
|
||||
.contact-activity {
|
||||
margin-top: $lineheight;
|
||||
width: 100%;
|
||||
|
|
@ -1567,11 +1555,6 @@ tr.turn:hover {
|
|||
display: inline !important;
|
||||
}
|
||||
|
||||
.content_map.settings_map {
|
||||
width: 50%;
|
||||
float: none;
|
||||
}
|
||||
|
||||
/* Rules for the oauth settings page */
|
||||
|
||||
.oauth_clients .buttons .oauth-edit {
|
||||
|
|
|
|||
|
|
@ -9,10 +9,6 @@ body.small {
|
|||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.column-1 {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#menu-icon {
|
||||
display: inline-block !important;
|
||||
}
|
||||
|
|
@ -105,15 +101,6 @@ body.small {
|
|||
top: 10px !important;
|
||||
}
|
||||
|
||||
.content_map {
|
||||
width: 100%;
|
||||
border: none;
|
||||
float: none;
|
||||
height: 200px;
|
||||
max-height: none;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
/* Rules for the login form */
|
||||
|
||||
#login_login input#user_email {
|
||||
|
|
|
|||
|
|
@ -166,7 +166,7 @@
|
|||
<input type="checkbox" name="updatehome" value="1" <% unless current_user.home_lat and current_user.home_lon %> checked="checked" <% end %> id="updatehome" />
|
||||
<label class="standard-label" for="updatehome"><%= t ".update home location on click" %></label>
|
||||
</div>
|
||||
<%= tag.div "", :id => "map", :class => "content_map settings_map set_location" %>
|
||||
<%= tag.div "", :id => "map", :class => "content_map set_location" %>
|
||||
</fieldset>
|
||||
|
||||
<%= submit_tag t(".save changes button") %>
|
||||
|
|
|
|||
|
|
@ -180,56 +180,60 @@
|
|||
|
||||
<% end %>
|
||||
|
||||
<div class="row">
|
||||
<% if current_user and @user.id == current_user.id %>
|
||||
<% if @user.home_lat.nil? or @user.home_lon.nil? %>
|
||||
<div id="map" class="content_map">
|
||||
<p id="no_home_location"><%= t(".if_set_location_html", :settings_link => (link_to t(".settings_link_text"), :controller => "users", :action => "account", :display_name => current_user.display_name)) %></p>
|
||||
</div>
|
||||
<% else %>
|
||||
<% content_for :head do %>
|
||||
<%= javascript_include_tag "user" %>
|
||||
<div class="col-md order-md-last">
|
||||
<% if @user.home_lat.nil? or @user.home_lon.nil? %>
|
||||
<div id="map" class="content_map">
|
||||
<p id="no_home_location"><%= t(".if_set_location_html", :settings_link => (link_to t(".settings_link_text"), :controller => "users", :action => "account", :display_name => current_user.display_name)) %></p>
|
||||
</div>
|
||||
<% else %>
|
||||
<% content_for :head do %>
|
||||
<%= javascript_include_tag "user" %>
|
||||
<% end %>
|
||||
<% user_data = {
|
||||
:lon => current_user.home_lon,
|
||||
:lat => current_user.home_lat,
|
||||
: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 } %>
|
||||
<% end %>
|
||||
<% user_data = {
|
||||
:lon => current_user.home_lon,
|
||||
:lat => current_user.home_lat,
|
||||
: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 } %>
|
||||
<% end %>
|
||||
|
||||
<% friends = @user.friends %>
|
||||
<% nearby = @user.nearby - friends %>
|
||||
<% friends = @user.friends %>
|
||||
<% nearby = @user.nearby - friends %>
|
||||
</div>
|
||||
|
||||
<div class="activity-block column-1">
|
||||
<h3><%= t ".my friends" %></h3>
|
||||
<div class="col-md">
|
||||
<h3><%= t ".my friends" %></h3>
|
||||
|
||||
<% if friends.empty? %>
|
||||
<%= t ".no friends" %>
|
||||
<% else %>
|
||||
<ul class='secondary-actions clearfix'>
|
||||
<li><%= link_to t(".friends_changesets"), friend_changesets_path %></li>
|
||||
<li><%= link_to t(".friends_diaries"), friends_diary_entries_path %></li>
|
||||
</ul>
|
||||
<div id="friends-container">
|
||||
<%= render :partial => "contact", :collection => friends, :locals => { :type => "friend" } %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% if friends.empty? %>
|
||||
<%= t ".no friends" %>
|
||||
<% else %>
|
||||
<ul class='secondary-actions clearfix'>
|
||||
<li><%= link_to t(".friends_changesets"), friend_changesets_path %></li>
|
||||
<li><%= link_to t(".friends_diaries"), friends_diary_entries_path %></li>
|
||||
</ul>
|
||||
<div id="friends-container">
|
||||
<%= render :partial => "contact", :collection => friends, :locals => { :type => "friend" } %>
|
||||
</div>
|
||||
<% end %>
|
||||
|
||||
<div class="activity-block column-1">
|
||||
<h3><%= t ".nearby users" %></h3>
|
||||
<hr>
|
||||
|
||||
<% if nearby.empty? %>
|
||||
<%= t ".no nearby users" %>
|
||||
<% else %>
|
||||
<ul class='secondary-actions clearfix'>
|
||||
<li><%= link_to t(".nearby_changesets"), nearby_changesets_path %></li>
|
||||
<li><%= link_to t(".nearby_diaries"), nearby_diary_entries_path %></li>
|
||||
</ul>
|
||||
<div id="nearbyusers">
|
||||
<%= render :partial => "contact", :collection => nearby, :locals => { :type => "nearby mapper" } %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
<h3><%= t ".nearby users" %></h3>
|
||||
|
||||
<% if nearby.empty? %>
|
||||
<%= t ".no nearby users" %>
|
||||
<% else %>
|
||||
<ul class='secondary-actions clearfix'>
|
||||
<li><%= link_to t(".nearby_changesets"), nearby_changesets_path %></li>
|
||||
<li><%= link_to t(".nearby_diaries"), nearby_diary_entries_path %></li>
|
||||
</ul>
|
||||
<div id="nearbyusers">
|
||||
<%= render :partial => "contact", :collection => nearby, :locals => { :type => "nearby mapper" } %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue