copy API keys; CSS refinements

projects/tentacles/src/python/tentacles/static/css/style.scss

@@ -29,6 +29,10 @@
   div {
     margin-right: 10px;
   }
+  .controls {
+    margin-left: auto;
+    display: flex;
+  }
 }
 
 // Hide the header name if we're on a mobile device
@@ -41,3 +45,23 @@
 label {
   margin-right: 10px;
 }
+
+.mb-1 {
+  margin-bottom: 10px;
+}
+
+.mb-2 {
+  margin-bottom: 20px;
+}
+
+@media (max-width: 760px) {
+  .file, .printer, .key, .job {
+    flex-direction: column;
+    margin-bottom: 10px;
+
+    .controls {
+      margin-right: auto;
+      margin-left: unset;
+    }
+  }
+}

projects/tentacles/src/python/tentacles/static/css/tirefire/_nav.scss

@@ -156,6 +156,7 @@ $stripe_padding: ($stripe_thickness / 4);
   }
   */
   #menu-toggle:checked ~ .menu > li:last-child {
+    padding-bottom: 1em;
     border-bottom: 1px solid #444;
   }
 //}

projects/tentacles/src/python/tentacles/templates/base.html.j2

@@ -29,6 +29,7 @@
       <li><a class="twelve columns button slide" href="/user/login">Log in</a></li>
       <li><a class="twelve columns button slide" href="/user/register">Register</a></li>
       {% else %}
+      <li><a class="twelve columns button slide" href="/">Overview</a></li>
       <li><a class="twelve columns button slide" href="/jobs">Jobs</a></li>
       <li><a class="twelve columns button slide" href="/files">Files</a></li>
       {% if ctx.is_admin %}

projects/tentacles/src/python/tentacles/templates/files.html.j2

@@ -1,10 +1,10 @@
 {% extends "base.html.j2" %}
 {% block content %}
-<div class="row twelve columns">
+<div class="row twelve columns mb-2">
   {% include "files_list.html.j2" %}
 </div>
 
-<div class="row twelve columns">
+<div class="row twelve columns mb-2">
   <h2>Upload a file</h2>
   <form method="post" action="/files" enctype="multipart/form-data">
     <input type="hidden" name="action" value="upload" />

projects/tentacles/src/python/tentacles/templates/files_list.html.j2

@@ -1,5 +1,4 @@
 {% import "macros.html.j2" as macros %}
-<div class="files">
 <h2>Files</h2>
 {% with files = ctx.db.list_files(uid=ctx.uid) %}
 {% if files %}
@@ -18,4 +17,3 @@
   You don't have any files. Upload something!
 {% endif %}
 {% endwith %}
-</div>

projects/tentacles/src/python/tentacles/templates/index.html.j2

@@ -1,11 +1,11 @@
 {% extends "base.html.j2" %}
 {% block content %}
-<div class="row twelve columns">
+<div class="row twelve columns mb-2">
   {% include "jobs_list.html.j2" %}
 </div>
 
 {% if ctx.uid %}
-<div class="row twelve columns">
+<div class="row twelve columns mb-2">
   {% include "files_list.html.j2" %}
 </div>
 {% endif %}

projects/tentacles/src/python/tentacles/templates/jobs.html.j2

@@ -1,5 +1,9 @@
 {% extends "base.html.j2" %}
 {% block content %}
+<div class="row twelve columns mb-2">
   {% include "jobs_list.html.j2" %}
+</div>
+<div class="row twelve columns mb-2">
   {% include "jobs_history.html.j2" %}
+</div>
 {% endblock %}

projects/tentacles/src/python/tentacles/templates/jobs_history.html.j2

@@ -1,5 +1,4 @@
 {% import "macros.html.j2" as macros %}
-<div class="history">
 <h2>Job history</h2>
 {% with jobs = ctx.db.list_job_history(uid=ctx.uid) %}
 {% if jobs %}
@@ -32,4 +31,3 @@
   <p>No job history to display.</p>
 {% endif %}
 {% endwith %}
-</div>

projects/tentacles/src/python/tentacles/templates/jobs_list.html.j2

@@ -1,5 +1,4 @@
 {% import "macros.html.j2" as macros %}
-<div class="queue">
 <h2>Job queue</h2>
 {% with jobs = ctx.db.list_job_queue(uid=ctx.uid) %}
 {% if jobs %}
@@ -32,4 +31,3 @@
   No pending tasks. {% if ctx.uid %}Start something!{% endif %}
 {% endif %}
 {% endwith %}
-</div>

projects/tentacles/src/python/tentacles/templates/printers.html.j2

@@ -1,6 +1,6 @@
 {% extends "base.html.j2" %}
 {% block content %}
-<div class="twelve columns">
+<div class="row twelve columns mb-1">
   {% include "printers_list.html.j2" %}
 </div>
 {% endblock %}

projects/tentacles/src/python/tentacles/templates/user.html.j2

@@ -13,6 +13,10 @@
         <span class="key-expiration u-ml-auto">{{ 'Expires in ' if exp else ''}}{{ exp - datetime.now() if exp else 'Never expires' }}</span>
       </div>
       <div class="controls u-flex u-ml-auto">
+        <form class="inline" method="none" class="ml-auto">
+          <input type="hidden" name="key" value="{{ id }}" id="key{{ loop.index }}">
+          <input type="button" value="Copy" onclick="copyKey('#key{{loop.index}}');" />
+        </form>
         <form class="inline" method="post" class="ml-auto">
           <input type="hidden" name="action" value="revoke">
           <input type="hidden" name="id" value="{{ id }}">
@@ -50,4 +54,13 @@
     </div>
   </form>
 </div>
+<script type="text/javascript">
+  function copyKey(keySelector) {
+    console.log("Hook fired");
+    let copyEl = document.querySelector(keySelector);
+    console.log(copyEl);
+    let copyValue = copyEl.value;
+    navigator.clipboard.writeText(copyValue)
+  };
+</script>
 {% endblock %}