From 1a01d3f9ec15a3897187df231010a39aaa82c609 Mon Sep 17 00:00:00 2001
From: divyabaid16 <divyabaid16@gmail.com>
Date: Mon, 27 May 2019 17:41:00 +0530
Subject: [PATCH] basic ui for image ordering

---
 app/views/images/_index.html.erb | 42 +++++++++++++++++++++++++++++++-
 1 file changed, 41 insertions(+), 1 deletion(-)

diff --git a/app/views/images/_index.html.erb b/app/views/images/_index.html.erb
index 6f9c58bc7..e71bbca9e 100644
--- a/app/views/images/_index.html.erb
+++ b/app/views/images/_index.html.erb
@@ -1,4 +1,15 @@
-<h4>Images</h4>
+<div>
+<h4 style="display: inline-block;">Images</h4>
+<div style="display: inline-block; float: right; margin-right: 32px; margin-bottom: 10px;" class="image-order">
+  <button type="button" class="btn btn-outline-secondary">Order Images</button>
+  <div class="image-order-content">
+    <a href="#">Name</a>
+    <a href="#">Size</a>
+    <a href="#">Recent</a>
+    <a href="#">Image Placement</a>
+  </div>
+</div>
+</div>
 <% if @map.warpables.empty? %>
   <p id="no-images">No images uploaded. </p>
   <%end%>
@@ -70,3 +81,32 @@
     <% end %>
   </tbody>
 </table>
+<style>
+.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;}
+</style>