Merge pull request #93 from pbondoer/staging

Add hover on elements in drive and make grid slightly prettier

www/drive/file.css

@@ -101,18 +101,21 @@ span.fa-folder-open {
   color: #000;
 }
 #tree li {
-  /*cursor: pointer;*/
   cursor: auto;
 }
-#tree li:hover > span.element {
-  text-decoration: underline;
-}
 #tree li.collapsed ul {
   display: none;
 }
 #tree li input {
   width: calc(70%);
 }
+#tree li > span.element-row {
+  width: 100%;
+  display: inline-block;
+}
+#tree li > span.element-row:not(.selected):hover {
+  background-color: #eee;
+}
 #tree span.element {
   cursor: pointer;
 }
@@ -220,6 +223,9 @@ span.fa-folder-open {
 #content li:not(.header) *:not(input) {
   /*pointer-events: none;*/
 }
+#content li:not(.header):hover:not(.selected) {
+  background-color: #eee;
+}
 #content li:not(.header):hover .name {
   /*text-decoration: underline;*/
 }
@@ -233,6 +239,8 @@ span.fa-folder-open {
   text-align: center;
   vertical-align: top;
   overflow: hidden;
+  padding-top: 10px;
+  padding-bottom: 5px;
 }
 #content div.grid li .name {
   width: 100%;

www/drive/file.less

@@ -2,6 +2,8 @@
 @tree-fg: #000;
 @tree-lines-col: #888;
 
+@drive-hover: #eee;
+
 @content-bg: @tree-bg;
 @content-bg-ro: darken(@content-bg, 10%);
 @content-fg: @tree-fg;
@@ -134,17 +136,20 @@ span {
     padding: 10px 0px;
     color: @tree-fg;
     li {
-        /*cursor: pointer;*/
         cursor: auto;
-        &:hover > span.element {
-            text-decoration: underline;
-        }
         &.collapsed ul {
             display: none;
         }
         input {
             width: calc(100% - 30px);
         }
+        & > span.element-row {
+            width: 100%;
+            display: inline-block;
+        }
+        & > span.element-row:not(.selected):hover {
+            background-color: @drive-hover;
+        }
     }
     span.element {
         cursor: pointer;
@@ -261,6 +266,9 @@ span {
                 /*pointer-events: none;*/
             }
             &:hover {
+                &:not(.selected) {
+                    background-color: @drive-hover;
+                }
                 .name {
                     /*text-decoration: underline;*/
                 }
@@ -276,6 +284,8 @@ span {
             text-align: center;
             vertical-align: top;
             overflow: hidden;
+            padding-top: 10px;
+            padding-bottom: 5px;
 
             .name {
                 width: 100%;