basic ui for image ordering

publiclab · May 27, 2019 · 1a01d3f · 1a01d3f
1 parent dc96ada
commit 1a01d3f
Showing 1 changed file with 41 additions and 1 deletion.
diff --git 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>