From 8192c0bd17fe036561f6531524d16cbaca4bac33 Mon Sep 17 00:00:00 2001
From: Andy Allan <git@gravitystorm.co.uk>
Date: Wed, 8 Jul 2020 16:46:15 +0200
Subject: [PATCH] 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.
---
 app/assets/stylesheets/common.scss |  31 ++-------
 app/assets/stylesheets/small.scss  |  13 ----
 app/views/users/account.html.erb   |   2 +-
 app/views/users/show.html.erb      | 104 +++++++++++++++--------------
 4 files changed, 62 insertions(+), 88 deletions(-)

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 39cdaa47a..8be986db5 100644
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -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 {
diff --git a/app/assets/stylesheets/small.scss b/app/assets/stylesheets/small.scss
index 83b112ce7..0b62256a9 100644
--- a/app/assets/stylesheets/small.scss
+++ b/app/assets/stylesheets/small.scss
@@ -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 {
diff --git a/app/views/users/account.html.erb b/app/views/users/account.html.erb
index 0f2f3741f..ad6614c76 100644
--- a/app/views/users/account.html.erb
+++ b/app/views/users/account.html.erb
@@ -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") %>
diff --git a/app/views/users/show.html.erb b/app/views/users/show.html.erb
index 1332ab6e2..5b8dcfcc9 100644
--- a/app/views/users/show.html.erb
+++ b/app/views/users/show.html.erb
@@ -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 %>
-
-  <div class="activity-block column-1">
-    <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>
 
-  <div class="activity-block column-1">
-    <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 %>
+      <% friends = @user.friends %>
+      <% nearby = @user.nearby - friends %>
+    </div>
+
+    <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 %>
+
+      <hr>
+
+      <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>
-- 
2.39.5