Use flexbox to position user thumbnails on the dashboard

This fixes a poor interaction involving lots of margins and the secondary-actions list

diff --git a/app/assets/stylesheets/common.scss b/app/assets/stylesheets/common.scss
index 924be765164f7cba37f5779d77277d1b9d66aedc..e0eec7bda7e03e0e8942dd60013a435f2f948723 100644 (file)
--- a/app/assets/stylesheets/common.scss
+++ b/app/assets/stylesheets/common.scss
@@ -1101,18 +1101,6 @@ tr.turn:hover {
   width: 100%;
 }
 
   width: 100%;
 }
 

-.activity-details p {
-  margin-left: 70px;
-  margin-bottom: 0;
-}
-
-.dashboards-show {
-  .user_thumbnail {
-    margin-top: $lineheight/4;
-    float: left;
-  }
-}
-

 /* Rules for the user map */
 
 .content_map .leaflet-popup-content {
 /* Rules for the user map */
 
 .content_map .leaflet-popup-content {


@@ -1455,6 +1443,12 @@ img.user_thumbnail {
   margin-right: $lineheight;
 }
 
   margin-right: $lineheight;
 }
 

+img.user_thumbnail_no_margins {
+  max-width: 50px;
+  max-height: 50px;
+  border: 1px solid $grey;
+}
+

 img.user_thumbnail_tiny {
   width: auto;
   height: auto;
 img.user_thumbnail_tiny {
   width: auto;
   height: auto;

diff --git a/app/views/dashboards/_contact.html.erb b/app/views/dashboards/_contact.html.erb
index 545557e642431b217ea578c0610c6cffac326ab6..7614c0c4d5c66ed41079422b3281d524dd1fd231 100644 (file)
--- a/app/views/dashboards/_contact.html.erb
+++ b/app/views/dashboards/_contact.html.erb
@@ -4,10 +4,12 @@
      :icon => image_path(type == "friend" ? "marker-blue.png" : "marker-green.png"),
      :description => render(:partial => "popup", :object => contact, :locals => { :type => type })
    } %>
      :icon => image_path(type == "friend" ? "marker-blue.png" : "marker-green.png"),
      :description => render(:partial => "popup", :object => contact, :locals => { :type => type })
    } %>

-<%= tag.div :class => "contact-activity clearfix", :data => { :user => user_data } do %>
-  <%= user_thumbnail contact %>
-  <div class='activity-details'>
-    <p class='text-muted'>
+<%= tag.div :class => "contact-activity clearfix row", :data => { :user => user_data } do %>
+  <div class="col-auto">
+    <%= user_thumbnail contact, :class => "user_thumbnail_no_margins" %>
+  </div>
+  <div class="col">
+    <p class='text-muted mb-0'>

       <%= link_to contact.display_name, user_path(contact) %>
       <% if @user.home_lon and @user.home_lat and contact.home_lon and contact.home_lat %>
         <% distance = @user.distance(contact) %>
       <%= link_to contact.display_name, user_path(contact) %>
       <% if @user.home_lon and @user.home_lat and contact.home_lon and contact.home_lat %>
         <% distance = @user.distance(contact) %>


@@ -18,7 +20,7 @@
         <% end %>
       <% end %>
     </p>
         <% end %>
       <% end %>
     </p>

-    <p>
+    <p class="mb-0">

       <% changeset = contact.changesets.first %>
       <% if changeset %>
         <%= t("users.show.latest edit", :ago => time_ago_in_words(changeset.created_at, :scope => :"datetime.distance_in_words_ago")) %>
       <% changeset = contact.changesets.first %>
       <% if changeset %>
         <%= t("users.show.latest edit", :ago => time_ago_in_words(changeset.created_at, :scope => :"datetime.distance_in_words_ago")) %>