diff --git a/projects/tentacles/src/python/tentacles/static/css/style.scss b/projects/tentacles/src/python/tentacles/static/css/style.scss index a48c0ab..526b184 100644 --- a/projects/tentacles/src/python/tentacles/static/css/style.scss +++ b/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; + } + } +} diff --git a/projects/tentacles/src/python/tentacles/static/css/tirefire/_nav.scss b/projects/tentacles/src/python/tentacles/static/css/tirefire/_nav.scss index 8a573bc..f372fad 100644 --- a/projects/tentacles/src/python/tentacles/static/css/tirefire/_nav.scss +++ b/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; } //} diff --git a/projects/tentacles/src/python/tentacles/templates/base.html.j2 b/projects/tentacles/src/python/tentacles/templates/base.html.j2 index ba6f328..f5ddd14 100644 --- a/projects/tentacles/src/python/tentacles/templates/base.html.j2 +++ b/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 %} diff --git a/projects/tentacles/src/python/tentacles/templates/files.html.j2 b/projects/tentacles/src/python/tentacles/templates/files.html.j2 index 4d3a2ac..20d88dc 100644 --- a/projects/tentacles/src/python/tentacles/templates/files.html.j2 +++ b/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" /> diff --git a/projects/tentacles/src/python/tentacles/templates/files_list.html.j2 b/projects/tentacles/src/python/tentacles/templates/files_list.html.j2 index 9d66cff..daed823 100644 --- a/projects/tentacles/src/python/tentacles/templates/files_list.html.j2 +++ b/projects/tentacles/src/python/tentacles/templates/files_list.html.j2 @@ -1,21 +1,19 @@ {% import "macros.html.j2" as macros %} -<div class="files"> - <h2>Files</h2> - {% with files = ctx.db.list_files(uid=ctx.uid) %} - {% if files %} - {% for file in files %} - <div class="file row u-flex"> - <div class="details six columns"> - <span class="file-name">{{ file.filename }}</span> - </div> - <div class="controls u-flex u-ml-auto"> - {{ macros.start_job(file.id) }} - {{ macros.delete_file(file.id) }} - </div> - </div> - {% endfor %} - {% else %} - You don't have any files. Upload something! - {% endif %} - {% endwith %} +<h2>Files</h2> +{% with files = ctx.db.list_files(uid=ctx.uid) %} +{% if files %} +{% for file in files %} +<div class="file row u-flex"> + <div class="details six columns"> + <span class="file-name">{{ file.filename }}</span> + </div> + <div class="controls u-flex u-ml-auto"> + {{ macros.start_job(file.id) }} + {{ macros.delete_file(file.id) }} + </div> </div> +{% endfor %} +{% else %} + You don't have any files. Upload something! +{% endif %} +{% endwith %} diff --git a/projects/tentacles/src/python/tentacles/templates/index.html.j2 b/projects/tentacles/src/python/tentacles/templates/index.html.j2 index 5f3263d..4331eb5 100644 --- a/projects/tentacles/src/python/tentacles/templates/index.html.j2 +++ b/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 %} diff --git a/projects/tentacles/src/python/tentacles/templates/jobs.html.j2 b/projects/tentacles/src/python/tentacles/templates/jobs.html.j2 index ad0330e..63ce65d 100644 --- a/projects/tentacles/src/python/tentacles/templates/jobs.html.j2 +++ b/projects/tentacles/src/python/tentacles/templates/jobs.html.j2 @@ -1,5 +1,9 @@ {% extends "base.html.j2" %} {% block content %} -{% include "jobs_list.html.j2" %} -{% include "jobs_history.html.j2" %} +<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 %} diff --git a/projects/tentacles/src/python/tentacles/templates/jobs_history.html.j2 b/projects/tentacles/src/python/tentacles/templates/jobs_history.html.j2 index 37c2dac..da94862 100644 --- a/projects/tentacles/src/python/tentacles/templates/jobs_history.html.j2 +++ b/projects/tentacles/src/python/tentacles/templates/jobs_history.html.j2 @@ -1,35 +1,33 @@ {% 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 %} - {% for job in jobs %} - <div class="job row u-flex"> - <div class="details six columns u-flex"> - <div class="job-status u-flex"> - <label for="state">Job</label> - <div class="dot {{ macros.job_state(job) }}" style="--dot-size: 1em;"> </div> - <span name="state">{{ macros.job_state(job) }}</span> - </div> - {% if job.printer_id %} - <div class="job-printer u-flex"> - <label for="printer">Printer</label> - <span name="printer">{{ ctx.db.fetch_printer(job.printer_id).name }}</span> - </div> - {% endif %} - <div class="job-filename u-flex"> - <label for="filename">File</label> - <span name="filename">{{ctx.db.fetch_file(ctx.uid, job.file_id).filename}}</span> - </div> - </div> - <div class="controls u-flex u-ml-auto"> - {{ macros.duplicate_job(job.id) }} - {{ macros.delete_job(job.id) }} - </div> +<h2>Job history</h2> +{% with jobs = ctx.db.list_job_history(uid=ctx.uid) %} +{% if jobs %} +{% for job in jobs %} +<div class="job row u-flex"> + <div class="details six columns u-flex"> + <div class="job-status u-flex"> + <label for="state">Job</label> + <div class="dot {{ macros.job_state(job) }}" style="--dot-size: 1em;"> </div> + <span name="state">{{ macros.job_state(job) }}</span> </div> - {% endfor %} - {% else %} - <p>No job history to display.</p> - {% endif %} - {% endwith %} + {% if job.printer_id %} + <div class="job-printer u-flex"> + <label for="printer">Printer</label> + <span name="printer">{{ ctx.db.fetch_printer(job.printer_id).name }}</span> + </div> + {% endif %} + <div class="job-filename u-flex"> + <label for="filename">File</label> + <span name="filename">{{ctx.db.fetch_file(ctx.uid, job.file_id).filename}}</span> + </div> + </div> + <div class="controls u-flex u-ml-auto"> + {{ macros.duplicate_job(job.id) }} + {{ macros.delete_job(job.id) }} + </div> </div> +{% endfor %} +{% else %} + <p>No job history to display.</p> +{% endif %} +{% endwith %} diff --git a/projects/tentacles/src/python/tentacles/templates/jobs_list.html.j2 b/projects/tentacles/src/python/tentacles/templates/jobs_list.html.j2 index f2c110c..65be7d0 100644 --- a/projects/tentacles/src/python/tentacles/templates/jobs_list.html.j2 +++ b/projects/tentacles/src/python/tentacles/templates/jobs_list.html.j2 @@ -1,35 +1,33 @@ {% 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 %} - {% for job in jobs %} - <div class="job row u-flex"> - <div class="details six columns u-flex"> - <div class="job-status u-flex"> - <label for="state">Job</label> - <div class="dot {{ macros.job_state(job) }} {{ 'dot--basic' if not job.state else '' }}" style="--dot-size: 1em;"> </div> - <span name="state">{{ macros.job_state(job) }}</span> - </div> - {% if job.printer_id %} - <div class="job-printer u-flex"> - <label for="printer">Printer</label> - <span name="printer">{{ ctx.db.fetch_printer(job.printer_id).name }}</span> - </div> - {% endif %} - <div class="job-filename u-flex"> - <label for="filename">File</label> - <span name="filename">{{ctx.db.fetch_file(ctx.uid, job.file_id).filename}}</span> - </div> - </div> - <div class="controls u-flex u-ml-auto"> - {{ macros.duplicate_job(job.id) }} - {{ macros.cancel_job(job.id) }} - </div> +<h2>Job queue</h2> +{% with jobs = ctx.db.list_job_queue(uid=ctx.uid) %} +{% if jobs %} +{% for job in jobs %} +<div class="job row u-flex"> + <div class="details six columns u-flex"> + <div class="job-status u-flex"> + <label for="state">Job</label> + <div class="dot {{ macros.job_state(job) }} {{ 'dot--basic' if not job.state else '' }}" style="--dot-size: 1em;"> </div> + <span name="state">{{ macros.job_state(job) }}</span> </div> - {% endfor %} - {% else %} - No pending tasks. {% if ctx.uid %}Start something!{% endif %} - {% endif %} - {% endwith %} + {% if job.printer_id %} + <div class="job-printer u-flex"> + <label for="printer">Printer</label> + <span name="printer">{{ ctx.db.fetch_printer(job.printer_id).name }}</span> + </div> + {% endif %} + <div class="job-filename u-flex"> + <label for="filename">File</label> + <span name="filename">{{ctx.db.fetch_file(ctx.uid, job.file_id).filename}}</span> + </div> + </div> + <div class="controls u-flex u-ml-auto"> + {{ 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 %} diff --git a/projects/tentacles/src/python/tentacles/templates/printers.html.j2 b/projects/tentacles/src/python/tentacles/templates/printers.html.j2 index 048332d..80bbd12 100644 --- a/projects/tentacles/src/python/tentacles/templates/printers.html.j2 +++ b/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 %} diff --git a/projects/tentacles/src/python/tentacles/templates/user.html.j2 b/projects/tentacles/src/python/tentacles/templates/user.html.j2 index 28c8998..709dbce 100644 --- a/projects/tentacles/src/python/tentacles/templates/user.html.j2 +++ b/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 %}