html cards for people section

publiclab · Mar 19, 2019 · 4e5f061 · 4e5f061
1 parent 7a0660a
commit 4e5f061
Showing 1 changed file with 28 additions and 36 deletions.
diff --git a/app/views/users/list.html.erb b/app/views/users/list.html.erb
@@ -13,44 +13,36 @@
 <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="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-3" style="padding:10px 8px 10px 8px">
+        <div class="card" style="background-color: #fff;text-align: center; border: 1px solid;border-color: #D3D3D3; border-radius: 6px;">
+           <div class="card-body" style="margin-bottom:1em;">
+              <div class="visible-sm visible-xs" style="padding-top: 16px; display: block;margin-left: auto;margin-right: auto;">
+                <img class="img-circle" id="profile-photo" style="width:3em;bolder-color:#555;border: 1px solid lightgrey;" src="<%= user.profile_image %>" />
+              </div>
+              <div style="display: flex; padding-top: 16px; align-items: center;display: block;margin-left: auto;margin-right: auto;">
+              <div class="hidden-sm hidden-xs">
+                <img class="img-circle" id="profile-photo" style="width:4em;bolder-color:#555;border: 1px solid lightgrey;" src="<%= user.profile_image %>" />
+              </div>
+              </div>
+              <a style="font-size:1.3em; margin-bttom:1em;"href="/profile/<%= user.username %>"><%= user.username %></a>
+              <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>
+              <% 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>
-        <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>