From c7d700d520154d7ad5fc35b9970e63972bb04ea5 Mon Sep 17 00:00:00 2001
From: Divya Baid <32747809+divyabaid16@users.noreply.github.com>
Date: Fri, 16 Aug 2019 17:43:03 +0530
Subject: [PATCH] Toggle view option for image added in the sidebar (#738)

* Toggle option for image view added

* list view correction

* Toggle-view
---
 app/assets/stylesheets/sidebar.css |  9 ++++++++-
 app/views/images/_index.html.erb   | 20 ++++++++++++++++++--
 2 files changed, 26 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/sidebar.css b/app/assets/stylesheets/sidebar.css
index a297d859a..f03c1333f 100644
--- 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
index 3bafcc1a7..6d7766a36 100644
--- 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>
\ No newline at end of file
+</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>
\ No newline at end of file