index.html.erb in decidim-meetings-0.0.7

- old
+ new
@@ -1,53 +1,74 @@
-<h2><%= t(".title") %></h2>
+<div class="card">
+  <div class="card-divider">
+    <h2 class="card-title">
+      <%= t(".title") %>
+      <%= link_to t("actions.new", scope: "decidim.meetings", name: t("models.meeting.name", scope: "decidim.meetings.admin")), new_meeting_path, class: 'button tiny button--title' if can? :manage, current_feature %>
+    </h2>
+  </div>
 
-<div class="actions title">
-  <%= link_to t("actions.new", scope: "decidim.meetings", name: t("models.meeting.name", scope: "decidim.meetings.admin")), new_meeting_path, class: 'new' if can? :manage, current_feature %>
-</div>
+  <div class="card-section">
+    <div class="table-scroll">
+      <table class="table-list">
+        <thead>
+          <tr>
+            <th><%= t("models.meeting.fields.title", scope: "decidim.meetings") %></th>
+            <th><%= t("models.meeting.fields.start_time", scope: "decidim.meetings") %></th>
+            <th><%= t("models.meeting.fields.end_time", scope: "decidim.meetings") %></th>
+            <th><%= t("models.meeting.fields.closed", scope: "decidim.meetings") %></th>
+            <% if Decidim.geocoder.present? %>
+              <th><%= t("models.meeting.fields.map", scope: "decidim.meetings") %></th>
+            <% end %>
+            <th class="actions"><%= t("actions.title", scope: "decidim.meetings") %></th>
+          </tr>
+        </thead>
+        <tbody>
+          <% meetings.each do |meeting| %>
+            <tr data-id="<%= meeting.id %>">
+              <td>
+                <%= translated_attribute(meeting.title) %><br />
+              </td>
+              <td>
+                <% if meeting.start_time %>
+                  <%= l meeting.start_time, format: :long %>
+                <%  end%>
+              </td>
+              <td>
+                <% if meeting.end_time %>
+                  <%= l meeting.end_time, format: :long %>
+                <%  end%>
+              </td>
+              <td>
+                <%= humanize_boolean meeting.closed? %>
+              </td>
+              <% if Decidim.geocoder.present? %>
+                <td>
+                  <%= static_map_link(meeting) %>
+                </td>
+              <% end %>
+              <td class="table-list__actions">
+                <%= icon_link_to "eye", decidim_meetings.meeting_path(id: meeting, feature_id: current_feature, participatory_process_id: current_participatory_process), t("actions.preview", scope: "decidim.meetings"), class: "action-icon--preview", target: :blank %>
 
-<table class="stack">
-  <thead>
-    <tr>
-      <th><%= t("models.meeting.fields.title", scope: "decidim.meetings") %></th>
-      <th><%= t("models.meeting.fields.start_time", scope: "decidim.meetings") %></th>
-      <th><%= t("models.meeting.fields.end_time", scope: "decidim.meetings") %></th>
-      <th><%= t("models.meeting.fields.closed", scope: "decidim.meetings") %></th>
-      <% if Decidim.geocoder.present? %>
-        <th><%= t("models.meeting.fields.map", scope: "decidim.meetings") %></th>
-      <% end %>
-      <th class="actions"><%= t("actions.title", scope: "decidim.meetings") %></th>
-    </tr>
-  </thead>
-  <tbody>
-    <% meetings.each do |meeting| %>
-      <tr data-id="<%= meeting.id %>">
-        <td>
-          <%= link_to translated_attribute(meeting.title), decidim_meetings.meeting_path(id: meeting, feature_id: current_feature, participatory_process_id: current_participatory_process), target: :blank %><br />
-        </td>
-        <td>
-          <% if meeting.start_time %>
-            <%= l meeting.start_time, format: :long %>
-          <%  end%>
-        </td>
-        <td>
-          <% if meeting.end_time %>
-            <%= l meeting.end_time, format: :long %>
-          <%  end%>
-        </td>
-        <td>
-          <%= humanize_boolean meeting.closed? %>
-        </td>
-        <% if Decidim.geocoder.present? %>
-          <td>
-            <%= static_map_link(meeting) %>
-          </td>
-        <% end %>
-        <td class="actions">
-          <%= link_to t("actions.edit", scope: "decidim.meetings"), edit_meeting_path(meeting) if can? :update, current_feature %>
-          <%= link_to t("actions.close", scope: "decidim.meetings"), edit_meeting_meeting_close_path(meeting_id: meeting.id, id: meeting.id) if can? :update, current_feature %>
-          <%= link_to t("actions.attachments", scope: "decidim.meetings"), meeting_attachments_path(meeting) if can? :update, current_feature %>
-          <%= link_to t("actions.destroy", scope: "decidim.meetings"), meeting_path(meeting), method: :delete, class: "small alert button", data: { confirm: t("actions.confirm_destroy", scope: "decidim.meetings") } if can? :destroy, current_feature %>
-        </td>
-      </tr>
-    <% end %>
-  </tbody>
-</table>
+                <% if can? :update, current_feature %>
+                  <%= icon_link_to "pencil", edit_meeting_path(meeting), t("actions.edit", scope: "decidim.meetings"), class: "action-icon--edit" %>
+                <% end %>
+
+                <% if can? :update, current_feature %>
+                  <%= icon_link_to "lock-locked", edit_meeting_meeting_close_path(meeting_id: meeting.id, id: meeting.id), t("actions.close", scope: "decidim.meetings"), class: "action-icon--close" %>
+                <% end %>
+
+                <% if can? :update, current_feature %>
+                  <%= icon_link_to "paperclip", meeting_attachments_path(meeting), t("actions.attachments", scope: "decidim.meetings"), class: "action-icon--attachments" %>
+                <% end %>
+
+                <% if can? :destroy, current_feature %>
+                  <%= icon_link_to "circle-x", meeting_path(meeting), t("actions.destroy", scope: "decidim.meetings"), method: :delete, class: "action-icon--remove", data: { confirm: t("actions.confirm_destroy", scope: "decidim.meetings") } %>
+                <% end %>
+              </td>
+            </tr>
+          <% end %>
+        </tbody>
+      </table>
+      <%= paginate meetings, theme: "decidim" %>
+    </div>
+  </div>
+<div>