Card layout for people section.

Fixes: #4922
publiclab · Apr 3, 2019 · 27ff1b9 · 27ff1b9
1 parent 7a0660a
commit 27ff1b9
Show file tree

Hide file tree

Showing 3 changed files with 97 additions and 62 deletions.
diff --git a/app/views/map/_peopleLeaflet.html.erb b/app/views/map/_peopleLeaflet.html.erb
@@ -2,7 +2,7 @@
 <% unique_id = rand(1000) %>
 
   <style>
-  	#map<%= unique_id %> { width:100%; height:300px; margin: 0; position: relative;}
+  	#map<%= unique_id %> { width:100%; height:500px; margin: 0; position: relative;}
   </style>
 
 <div onmouseover="document.body.style.overflow='hidden';"  onmouseout="document.body.style.overflow='auto';">

diff --git a/app/views/users/list.html.erb b/app/views/users/list.html.erb
@@ -1,56 +1,101 @@
-
-<div class="col-md-3">
-	<div class='row'>
-		<div class='col-md-12'>
-			<p> This page shows a list of all Public Lab contributors and is sorted by those who have posted most recently. Click the profile link to view their posting activity. </p>
-		</div>
-	</div>
-  <% if current_user && (current_user.role == "admin" || current_user.role == "moderator")%>
-    <h2><%= t('users.list.user_moderation') %></h2>
-    <p><%= t('users.list.admins_ban_spam') %> </p>
-  <% end %>
-</div>
-<div class="col-md-9">
-  <h2><%= raw t('users.list.members_last_activity') %></h2>
-  <%= render :partial => "map/peopleLeaflet" , locals: {people: true , lat:23 , lon: 4} %>
-  <table class="table">
-    <tr>
-      <th class="visible-sm visible-xs"></th>
-
-      <th style="text-align: center;"><a href = "<%= people_path %>?sort=username"> <%= t('users.list.username') %></a> <i class="fa fa-arrows-v"></i></th>
-      <th><a href = "<%= people_path %>?sort=last_activity"> <%= t('users.list.last_activity') %></a> <i class="fa fa-arrows-v"></i></th>
-      <th><%= t('users.list.history') %></th>
-      <th><a href = "<%= people_path %>?sort=joined"> <%= t('users.list.joined') %></a> <i class="fa fa-arrows-v"></i></th>
-
-      <% if current_user && (current_user.role == "admin" || current_user.role == "moderator") %>
-        <th><%= t('users.list.moderation') %></th>
-      <% end %>
-    </tr>
+<div class="container">
+<div class="row">
+<div class="col-md-6" style="font-family:Junction Regular;">
+<% if current_user && (current_user.role == "admin" || current_user.role == "moderator")%>
+<h2><%= t('users.list.user_moderation') %></h2>
+<p><%= t('users.list.admins_ban_spam') %> </p>
+<% end %>
+  <h2><%= raw t('People') %></h2>
+  <h5><%= t('Recently active on Publiclab') =%></h5>
+  <div class="row">
     <% @users.each do |user| %>
-    <tr>
-      <td class="visible-sm visible-xs" style="padding-top: 16px;">
-        <img class="img-circle" id="profile-photo" style="width:40px;margin-right:8px;border: 1px solid lightgrey;" src="<%= user.profile_image %>" />
-      </td>
-      <td style="display: flex; align-items: center;">
-        <div class="hidden-sm hidden-xs">
-          <img class="img-circle" id="profile-photo" style="width:40px;margin-right:8px;border: 1px solid lightgrey;" src="<%= user.profile_image %>" />
+      <div class ="col-md-6" id="user">
+        <div class="card">
+           <div class="card-body">
+            <div class="profile-image">
+                <img class="img-circle img-responsive center-block" id="profile-photo" src="<%= user.profile_image %>" />
+            </div>
+            <br>
+            <div class="card-info">
+            <a"href="/profile/<%= user.username %>"><%= user.username %></a>
+              <div class="sub-info">
+                <div>Last Activity : <%= t = user.revisions.order(timestamp: :desc).first.try(:created_at);time_ago_in_words(t) if (t) %></div>
+                <div>History : <%= user.nodes.count %> <%= t('users.list.notes_and_edits') %></div>
+                <div> Joined : <%= distance_of_time_in_words(user.created_at, Time.current, { include_seconds: false, scope: 'datetime.time_ago_in_words' }) %></div>
+              </div>
+              <% if current_user && (current_user.role == "admin" || current_user.role == "moderator") %>
+                <div style="padding-top:16px;">
+                  <% if user.status == 0 %>
+                    <i class='fa fa-ban' style="color:#a00;"></i> <%= t('users.list.banned') %>
+                  <% elsif user.status == 1 %>
+                    <a class="btn btn-default btn-sm" data-confirm="<%= t('users.list.are_you_sure') %>" href="/ban/<%= user.uid %>" ><i class='fa fa-ban'></i> <%= t('users.list.ban') %></a>
+                  <% end %>
+                </div>
+               <% end %>
+            </div>
+            </div>
+          </div>
         </div>
-        <a style="margin-left: 12px;" href="/profile/<%= user.username %>"><%= user.username %></a>
-      </td>
-      <td style="padding-top:16px;"><%= t = user.revisions.order(timestamp: :desc).first.try(:created_at);time_ago_in_words(t) if (t) %></td>
-      <td style="padding-top:16px;"><%= user.nodes.count %> <%= t('users.list.notes_and_edits') %></td>
-      <td style="padding-top:16px;"><%= distance_of_time_in_words(user.created_at, Time.current, { include_seconds: false, scope: 'datetime.time_ago_in_words' }) %></td>
-      <% if current_user && (current_user.role == "admin" || current_user.role == "moderator") %>
-      <td style="padding-top:16px;">
-        <% if user.status == 0 %>
-          <i class='fa fa-ban' style="color:#a00;"></i> <%= t('users.list.banned') %>
-        <% elsif user.status == 1 %>
-          <a class="btn btn-default btn-sm" data-confirm="<%= t('users.list.are_you_sure') %>" href="/ban/<%= user.uid %>" ><i class='fa fa-ban'></i> <%= t('users.list.ban') %></a>
-        <% end %>
-      </td>
       <% end %>
-     </tr>
-    <% end %>
-  </table>
+  </div>
   <%= will_paginate @users, :renderer => BootstrapPagination::Rails unless @unpaginated %>
 </div>
+<div class="col-md-6 visible-md visible-lg" data-spy="affix" style="margin-top:2em;">
+<%= render :partial => "map/peopleLeaflet" , locals: {people: true , lat:23 , lon: 4} %>
+</div>
+<div class="col-md-6 visible-sm visible-xs" style="margin-top:2em;">
+<%= render :partial => "map/peopleLeaflet" , locals: {people: true , lat:23 , lon: 4} %>
+</div>
+</div>
+</div>
+<style>
+#user {
+  padding:10px 8px 10px 8px
+}
+
+h5 {
+  color: #666;
+}
+.card {
+  background-color: #fff;
+  border: 1px solid;
+  border-color: #D3D3D3;
+  border-radius: 6px;
+}
+
+.card-body {
+  margin-bottom:1em;
+}
+
+.profile-image {
+  margin-top: 1.5em;
+}
+
+#profile-photo {
+  width: 6.5em;
+  border-color:#555;
+  border: 1px solid lightgrey;
+}
+
+.card-info {
+  padding-left: 1.5em;
+  padding-right:1.5em;
+}
+
+.card-info a{
+  font-size:1.5em;
+  margin-bttom:1em;
+  color:#222;
+}
+
+.sub-info {
+  color:#666;
+  font-size:0.9em;
+}
+
+.affix {
+    top:50px;
+    right:0;
+    position:fixed;
+}
+</style>
diff --git a/test/integration/I18n_test.rb b/test/integration/I18n_test.rb
@@ -242,16 +242,6 @@ class I18nTest < ActionDispatch::IntegrationTest
     end
   end
 
-  test 'should choose i18n for user/list' do
-    available_testing_locales.each do |lang|
-      get '/change_locale/' + lang.to_s
-      follow_redirect!
-
-      get '/people'
-      assert_select 'th', I18n.t('users.list.username')
-    end
-  end
-
   test 'should choose i18n for user/map' do
     available_testing_locales.each do |lang|
       get '/change_locale/' + lang.to_s