Only show item action buttons on hover

diff --git a/frontend/css/style.css b/frontend/css/style.css
index 05336ab5d2e75e15f65ec95f2b88752dc2763850..ff1dc84c02f9a2c09c3b52f84d4e04e3d270bee9 100644 (file)
--- a/frontend/css/style.css
+++ b/frontend/css/style.css
@@ -63,4 +63,17 @@ footer {
 
 footer:hover {
     opacity: 1;
-}
\ No newline at end of file
+}
+
+th {
+    overflow: hidden;
+}
+
+.entry-toolbar {
+    opacity: 0;
+    transition: opacity .25s;
+}
+
+tr:hover .entry-toolbar {
+    opacity: 1;
+}

diff --git a/frontend/index.html b/frontend/index.html
index 4c16ed5b503699d49b9f6042516338517e27ba6d..c0a6a4e6a623fc530dc7f491e19f8c64571039d6 100644 (file)
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -148,7 +148,7 @@
                             <th>Name</th>
                             <th>Size</th>
                             <th>Modified</th>
-                            <th style="text-align: right;">Action</th>
+                            <th>&nbsp;</th>
                         </tr>
                     </thead>
                     <tbody>
@@ -166,7 +166,12 @@
                             <th>{{ entry.filePath }}</th>
                             <th>{{ entry.size | prettyFileSize }}</th>
                             <th><span v-my-tooltip="foobar" data-toggle="tooltip" title="{{ entry.mtime }}">{{ entry.mtime | prettyDate }}</span></th>
-                            <th style="text-align: right;"><button class="btn btn-sm btn-danger" v-on:click.stop="delAsk(entry)"><i class="fa fa-trash"></i></button></th>
+                            <th style="text-align: right;">
+                                <span class="entry-toolbar">
+                                    <!-- <button class="btn btn-sm btn-default" v-on:click.stop="renameAsk(entry)" title="Rename"><i class="fa fa-pencil"></i></button> -->
+                                    <button class="btn btn-sm btn-danger" v-on:click.stop="delAsk(entry)" title="Delete"><i class="fa fa-trash"></i></button>
+                                </span>
+                            </th>
                         </tr>
                     </tbody>
                 </table>