Image-ordering (#640)

publiclab · Jul 2, 2019 · 30e4722 · 30e4722
1 parent 8d2bb86
commit 30e4722
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 4 deletions.
diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -4,6 +4,7 @@ $icon-font-path: "bootstrap-sass/assets/fonts/bootstrap/";
 @import "header";
 @import "uploads";
 @import "annotations";
+@import "sidebar.css";
 @import "bootstrap/dist/css/bootstrap.min.css";
 @import "leaflet-draw/dist/leaflet.draw.css";
 @import "leaflet-illustrate/dist/Leaflet.Illustrate.css";

diff --git a/app/assets/stylesheets/sidebar.css b/app/assets/stylesheets/sidebar.css
@@ -0,0 +1,36 @@
+.image-order{
+	display: inline-block;
+	float: right;
+	margin-right: 32px;
+	margin-bottom: 10px;
+}
+.sidebar-heading{
+	display: inline-block;
+}
+.image-order-button {
+  background-color: #4CAF50;
+  color: white;
+  padding: 16px;
+  font-size: 16px;
+  border: none;
+}
+.image-order {
+  position: relative;
+  display: inline-block;
+}
+.image-order-content {
+  display: none;
+  position: absolute;
+  background-color: #f1f1f1;
+  min-width: 160px;
+  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+  z-index: 1;
+}
+.image-order-content a {
+  color: black;
+  padding: 7px 10px;
+  text-decoration: none;
+  display: block;
+}
+.image-order-content a:hover {background-color: white;}
+.image-order:hover .image-order-content {display: block;}
diff --git a/app/views/images/_index.html.erb b/app/views/images/_index.html.erb
@@ -1,10 +1,28 @@
-<h4>Images</h4>
+<div>
+<h4 class="sidebar-heading">Images</h4>
+<div class="image-order">
+  <button type="button" class="btn btn-outline-secondary">Order Images</button>
+  <div class="image-order-content">
+    <a href="?sort=name">Name</a>
+    <a href="?sort=size">Size</a>
+    <a href="?sort=recent">Recent</a>
+  </div>
+</div>
+</div>
 <% if @map.warpables.empty? %>
   <p id="no-images">No images uploaded. </p>
   <%end%>
 <table class="warpables-all table table-striped">
   <tbody>
-    <% @map.warpables.each do |warpable| %>
+    <% sort_param = params[:sort] %>
+    <% if sort_param == 'name' %>
+      <% ary = @map.warpables.sort { |a, b| a.image_file_name <=> b.image_file_name } %>
+    <% elsif sort_param == 'size' %>
+      <% ary = @map.warpables.sort { |a, b| a.image_file_size <=> b.image_file_size } %>
+    <% else %>
+      <% ary = @map.warpables.sort { |a, b| b.created_at <=> a.created_at } %>
+    <% end %>
+    <% ary.each do |warpable| %>
       <tr id="warpable-<%= warpable.id %>">
         <td class="warpable">
           <%= image_tag warpable.image.url(:thumb), 
@@ -55,7 +73,6 @@
                     }
                   })
                 }
-
                 /* wait for map to load if we're on a small screen and it's been hidden */
                 if ($('body').width() < 400) {
                   window.toggle_sidebar();
@@ -70,4 +87,4 @@
       </tr>
     <% end %>
   </tbody>
-</table>
+</table>