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,10 +1,9 @@
 {% import "macros.html.j2" as macros %}
-<div class="files">
+<h2>Files</h2>
-  <h2>Files</h2>
+{% with files = ctx.db.list_files(uid=ctx.uid) %}
-  {% with files = ctx.db.list_files(uid=ctx.uid) %}
+{% if files %}
-    {% if files %}
+{% for file in files %}
-      {% for file in files %}
+<div class="file row u-flex">
-        <div class="file row u-flex">
   <div class="details six columns">
     <span class="file-name">{{ file.filename }}</span>
   </div>
@@ -12,10 +11,9 @@
     {{ macros.start_job(file.id) }}
     {{ macros.delete_file(file.id) }}
   </div>
-        </div>
-      {% endfor %}
-    {% else %}
-      You don't have any files. Upload something!
-    {% endif %}
-  {% endwith %}
 </div>
+{% endfor %}
+{% else %}
+  You don't have any files. Upload something!
+{% endif %}
+{% endwith %}

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 %}
-{% include "jobs_list.html.j2" %}
+<div class="row twelve columns mb-2">
-{% include "jobs_history.html.j2" %}
+  {% 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,10 +1,9 @@
 {% import "macros.html.j2" as macros %}
-<div class="history">
+<h2>Job history</h2>
-  <h2>Job history</h2>
+{% with jobs = ctx.db.list_job_history(uid=ctx.uid) %}
-  {% with jobs = ctx.db.list_job_history(uid=ctx.uid) %}
+{% if jobs %}
-  {% if jobs %}
+{% for job in jobs %}
-  {% for job in jobs %}
+<div class="job row u-flex">
-    <div class="job row u-flex">
   <div class="details six columns u-flex">
     <div class="job-status u-flex">
       <label for="state">Job</label>
@@ -26,10 +25,9 @@
     {{ macros.duplicate_job(job.id) }}
     {{ macros.delete_job(job.id) }}
   </div>
-    </div>
-  {% endfor %}
-  {% else %}
-    <p>No job history to display.</p>
-  {% endif %}
-  {% endwith %}
 </div>
+{% endfor %}
+{% else %}
+  <p>No job history to display.</p>
+{% endif %}
+{% endwith %}

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

@@ -1,10 +1,9 @@
 {% import "macros.html.j2" as macros %}
-<div class="queue">
+<h2>Job queue</h2>
-  <h2>Job queue</h2>
+{% with jobs = ctx.db.list_job_queue(uid=ctx.uid) %}
-  {% with jobs = ctx.db.list_job_queue(uid=ctx.uid) %}
+{% if jobs %}
-  {% if jobs %}
+{% for job in jobs %}
-  {% for job in jobs %}
+<div class="job row u-flex">
-    <div class="job row u-flex">
   <div class="details six columns u-flex">
     <div class="job-status u-flex">
       <label for="state">Job</label>
@@ -26,10 +25,9 @@
     {{ macros.duplicate_job(job.id) }}
     {{ macros.cancel_job(job.id) }}
   </div>
-    </div>
-  {% endfor %}
-  {% else %}
-    No pending tasks. {% if ctx.uid %}Start something!{% endif %}
-  {% endif %}
-  {% endwith %}
 </div>
+{% endfor %}
+{% else %}
+  No pending tasks. {% if ctx.uid %}Start something!{% endif %}
+{% endif %}
+{% endwith %}

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 %}