Grid-view-follow-up (#964)

publiclab · Sep 4, 2019 · d5d0943 · d5d0943
1 parent c902028
commit d5d0943
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/app/assets/stylesheets/sidebar.css b/app/assets/stylesheets/sidebar.css
@@ -2,8 +2,14 @@
   margin-left: 25px;
   margin-bottom: 10px;
   display: inline-block;
-  padding-right: 30px;
-  color: orange;
+  margin-right: 30px;
+  color: #5cb85c;
+  cursor: pointer;
+  font-size: 18px;
+}
+.grid-list a{
+  border: 1px solid #e1e4e8;
+  padding: 5px;
 }
 .image-order{
 	display: inline-block;

diff --git a/app/views/images/_index.html.erb b/app/views/images/_index.html.erb
@@ -1,8 +1,8 @@
 <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>
+  <a class="list-view" onClick="list()"><i class="fa fa-bars"></i></a>
+  <a class="grid-view" onClick="grid()"><i class="fa fa-th"></i></a>
 </div>
 <div class="image-order">
   <p style="display: inline;">Sort by: </p>
@@ -144,10 +144,17 @@
   function grid(){
     $('td').hide();
     $('.warpable').show();
-    $('tr').css('display','inline-block');
-    $('.warpable').css('padding','0.75rem 0.5rem')
+    $('tr').css({
+    'display':'inline-block',
+    'height' : '100px',
+    'overflow' : 'hidden'
+    });
   }
   function list(){
-    $('td').show()
+    $('td').show();
+    $('tr').css({
+      'display':'',
+      'height' : '',
+    });
   }
 </script>