Toggle view option for image added in the sidebar (#738)

* Toggle option for image view added * list view correction * Toggle-view
publiclab · Aug 16, 2019 · c7d700d · c7d700d
1 parent 0ae8eb5
commit c7d700d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 3 deletions.
diff --git a/app/assets/stylesheets/sidebar.css b/app/assets/stylesheets/sidebar.css
@@ -1,7 +1,14 @@
+.grid-list {
+  margin-left: 25px;
+  margin-bottom: 10px;
+  display: inline-block;
+  padding-right: 30px;
+  color: orange;
+}
 .image-order{
 	display: inline-block;
 	float: right;
-	margin-right: 35px;
+	margin-right: 15px;
 	margin-bottom: 10px;
 }
 .sidebar-heading{

diff --git a/app/views/images/_index.html.erb b/app/views/images/_index.html.erb
@@ -1,5 +1,9 @@
 <div>
 <h4 class="sidebar-heading">Images</h4>
+<div class="grid-list">
+  <button class="list-view" onClick="list()"><i class="fa fa-bars"></i></button>
+  <button class="grid-view" onClick="grid()"><i class="fa fa-th"></i></button>
+</div>
 <div class="image-order">
   <button type="button" class="btn btn-outline-secondary">Sort Images</button>
   <div class="image-order-content">
@@ -9,9 +13,10 @@
   </div>
 </div>
 </div>
+
 <% if @map.warpables.empty? %>
   <p id="no-images">No images uploaded. </p>
-  <%end%>
+<% end %>
 <table class="warpables-all table table-striped">
   <tbody>
     <% sort_param = params[:sort] %>
@@ -123,4 +128,15 @@
       </td>
     <% end %>
   </tbody>
-</table>
+</table>
+<script>
+  function grid(){
+    $('td').hide();
+    $('.warpable').show();
+    $('tr').css('display','inline-block');
+    $('.warpable').css('padding','0.75rem 0.5rem')
+  }
+  function list(){
+    $('td').show()
+  }
+</script>