From 91fd7c37c519c79247a317886477e0da7fa797b7 Mon Sep 17 00:00:00 2001
From: Reid 'arrdem' McKenzie <me@arrdem.com>
Date: Sat, 8 Jul 2023 22:10:40 -0600
Subject: [PATCH] Feat: improve responsive behavior w/ icons

---
 .../python/tentacles/static/css/style.scss    | 45 ++++++++++++++--
 .../src/python/tentacles/static/delete.svg    | 47 +++++++++++++++++
 .../src/python/tentacles/static/download.svg  | 52 +++++++++++++++++++
 .../src/python/tentacles/static/print.svg     | 43 +++++++++++++++
 .../tentacles/templates/files_list.html.j2    | 21 +++++---
 .../tentacles/templates/jobs_history.html.j2  |  6 +--
 .../tentacles/templates/jobs_list.html.j2     |  6 +--
 .../python/tentacles/templates/macros.html.j2 | 10 ++--
 8 files changed, 209 insertions(+), 21 deletions(-)
 create mode 100644 projects/tentacles/src/python/tentacles/static/delete.svg
 create mode 100644 projects/tentacles/src/python/tentacles/static/download.svg
 create mode 100644 projects/tentacles/src/python/tentacles/static/print.svg

diff --git a/projects/tentacles/src/python/tentacles/static/css/style.scss b/projects/tentacles/src/python/tentacles/static/css/style.scss
index 1055d33..16ae715 100644
--- a/projects/tentacles/src/python/tentacles/static/css/style.scss
+++ b/projects/tentacles/src/python/tentacles/static/css/style.scss
@@ -66,7 +66,17 @@ label {
   flex-wrap: wrap;
 }
 
-@media (max-width: 760px) {
+.u-flex-break {
+  flex-basis: 100%;
+}
+
+.u-overflow-elipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@media (max-width: 550px) {
   .file, .printer, .key, .job {
     flex-direction: column;
     margin-bottom: 10px;
@@ -79,8 +89,8 @@ label {
 }
 
 .row.webcams {
-	display: flex;
-	justify-content: space-between;
+  display: flex;
+  justify-content: space-between;
 
   img {
     border-radius: 10px;
@@ -100,3 +110,32 @@ label {
 input[type='text'], input[type='password'], select {
   width: 100%;
 }
+
+input[type="image"] {
+  height: 38px;
+  padding: 0 30px;
+  color: #555;
+  text-align: center;
+  font-size: 11px;
+  font-weight: 600;
+  line-height: 38px;
+  letter-spacing: .1rem;
+  text-transform: uppercase;
+  text-decoration: none;
+  white-space: nowrap;
+  background-color: transparent;
+  border-radius: 4px;
+  // border: 1px solid #bbb;
+  cursor: pointer;
+  // box-sizing: border-box;
+}
+
+.row.bubble {
+    border-radius: 4px;
+    border: 1px solid $black;
+}
+
+.u-mv-auto {
+  margin-top: auto;
+  margin-bottom: auto;
+}
diff --git a/projects/tentacles/src/python/tentacles/static/delete.svg b/projects/tentacles/src/python/tentacles/static/delete.svg
new file mode 100644
index 0000000..49a2421
--- /dev/null
+++ b/projects/tentacles/src/python/tentacles/static/delete.svg
@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 24 28"
+   x="0px"
+   y="0px"
+   version="1.1"
+   id="svg190"
+   sodipodi:docname="delete.svg"
+   width="24"
+   height="28"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs194" />
+  <sodipodi:namedview
+     id="namedview192"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="42.03125"
+     inkscape:cx="8.005948"
+     inkscape:cy="16"
+     inkscape:window-width="1918"
+     inkscape:window-height="2128"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg190" />
+  <title
+     id="title180">Basic_UI1_32px_2px_Solid</title>
+  <g
+     data-name="Layer 11"
+     id="g184"
+     transform="translate(-4,-2)">
+    <path
+       d="m 18,2 h -4 a 1,1 0 0 0 -1,1 v 1 h 6 V 3 A 1,1 0 0 0 18,2 Z M 6,10 v 16 a 4,4 0 0 0 4,4 h 12 a 4,4 0 0 0 4,-4 V 10 Z m 6,16 a 1,1 0 0 1 -2,0 V 14 a 1,1 0 0 1 2,0 z m 5,0 a 1,1 0 0 1 -2,0 V 14 a 1,1 0 0 1 2,0 z m 5,0 a 1,1 0 0 1 -2,0 V 14 a 1,1 0 0 1 2,0 z M 26,9 H 6 A 2,2 0 0 1 4,7 V 7 A 2,2 0 0 1 6,5 h 20 a 2,2 0 0 1 2,2 v 0 a 2,2 0 0 1 -2,2 z"
+       id="path182" />
+  </g>
+</svg>
diff --git a/projects/tentacles/src/python/tentacles/static/download.svg b/projects/tentacles/src/python/tentacles/static/download.svg
new file mode 100644
index 0000000..0025c1c
--- /dev/null
+++ b/projects/tentacles/src/python/tentacles/static/download.svg
@@ -0,0 +1,52 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   data-name="Layer 1"
+   viewBox="0 0 22 27"
+   x="0px"
+   y="0px"
+   version="1.1"
+   id="svg978"
+   sodipodi:docname="download.svg"
+   width="22"
+   height="27"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs982" />
+  <sodipodi:namedview
+     id="namedview980"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="5.9"
+     inkscape:cx="10.932203"
+     inkscape:cy="18.050847"
+     inkscape:window-width="1918"
+     inkscape:window-height="2128"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg978" />
+  <g
+     id="g972"
+     transform="translate(-5,-2)">
+    <rect
+       x="5"
+       y="24"
+       width="22"
+       height="5"
+       rx="1"
+       id="rect968" />
+    <path
+       d="m 15.23,20.88086 a 1.00028,1.00028 0 0 0 1.54,0 l 6,-7.24268 A 1.00027,1.00027 0 0 0 22,12 H 19 V 3 A 1,1 0 0 0 18,2 h -4 a 1,1 0 0 0 -1,1 v 9 h -3 a 1.00027,1.00027 0 0 0 -0.77,1.63818 z"
+       id="path970" />
+  </g>
+</svg>
diff --git a/projects/tentacles/src/python/tentacles/static/print.svg b/projects/tentacles/src/python/tentacles/static/print.svg
new file mode 100644
index 0000000..72bc456
--- /dev/null
+++ b/projects/tentacles/src/python/tentacles/static/print.svg
@@ -0,0 +1,43 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   viewBox="0 0 28 27"
+   version="1.1"
+   xml:space="preserve"
+   x="0px"
+   y="0px"
+   fill-rule="evenodd"
+   clip-rule="evenodd"
+   stroke-linejoin="round"
+   stroke-miterlimit="2"
+   id="svg1170"
+   sodipodi:docname="print.svg"
+   width="28"
+   height="27"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs1174" /><sodipodi:namedview
+     id="namedview1172"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="5.9"
+     inkscape:cx="13.983051"
+     inkscape:cy="18.050847"
+     inkscape:window-width="1918"
+     inkscape:window-height="2128"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg1170" /><g
+     transform="translate(-290,-386)"
+     id="g1164"><path
+       d="m 296,403 c 0,0 16,0 16,0 0,0 0,9 0,9 0,0.552 -0.448,1 -1,1 h -14 c -0.552,0 -1,-0.448 -1,-1 z m 19,-11 h -22 c -1.657,0 -3,1.343 -3,3 v 8 c 0,1.657 1.343,3 3,3 h 1 v -3 c 0,-0.53 0.211,-1.039 0.586,-1.414 0.375,-0.375 0.884,-0.586 1.414,-0.586 3.151,0 12.849,0 16,0 0.53,0 1.039,0.211 1.414,0.586 0.375,0.375 0.586,0.884 0.586,1.414 v 8 c 0,0 0,-5 0,-5 h 1 c 1.657,0 3,-1.343 3,-3 v -8 c 0,-1.657 -1.343,-3 -3,-3 z m -16,18 h 10 c 0.552,0 1,-0.448 1,-1 0,-0.552 -0.448,-1 -1,-1 h -10 c -0.552,0 -1,0.448 -1,1 0,0.552 0.448,1 1,1 z m 0,-4 h 8 c 0.552,0 1,-0.448 1,-1 0,-0.552 -0.448,-1 -1,-1 h -8 c -0.552,0 -1,0.448 -1,1 0,0.552 0.448,1 1,1 z m 14,-10 c 0.552,0 1,0.448 1,1 0,0.552 -0.448,1 -1,1 -0.552,0 -1,-0.448 -1,-1 0,-0.552 0.448,-1 1,-1 z m -19,-6 h 20 v -1 c 0,-1.657 -1.343,-3 -3,-3 -3.463,0 -10.537,0 -14,0 -1.657,0 -3,1.343 -3,3 z"
+       id="path1162" /></g></svg>
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 88f0085..772728c 100644
--- a/projects/tentacles/src/python/tentacles/templates/files_list.html.j2
+++ b/projects/tentacles/src/python/tentacles/templates/files_list.html.j2
@@ -4,14 +4,21 @@
 {% if files %}
 {% for file in files %}
 <div class="file row u-flex">
-  <div class="details six columns u-flex u-flex-wrap">
-    <span class="file-name">{{ file.filename }}</span>
+  <div class="details eight columns u-flex u-flex-wrap u-overflow-elipsis">
+    <div class="file-name u-flex u-flex-break">
+      <label for="filename">File</label>
+      <span name="filename">{{ file.filename }}</span>
+    </div>
+    <div class="file-sucesses u-flex">
+      <label>Successes</label>
+      <span>{{ file.print_successes }}</span>
+    </div>
+    <div class="file-failures u-flex">
+      <label>Failures</label>
+      <span>{{ file.print_failures }}</span>
+    </div>
   </div>
-  <div class="six columns u-flex u-flex-wrap">
-    <span class="file-sucesses"><label>Successes</label>{{ file.print_successes }}</span>
-    <span class="file-failures"><label>Failures</label>{{ file.print_failures }}</span>
-  </div>
-  <div class="controls u-flex u-ml-auto">
+  <div class="controls u-flex u-ml-auto u-mv-auto">
     {{ macros.start_job(file.id) }}
     {{ macros.download_file(file.id) }}
     {{ macros.delete_file(file.id) }}
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 b12a713..d270691 100644
--- a/projects/tentacles/src/python/tentacles/templates/jobs_history.html.j2
+++ b/projects/tentacles/src/python/tentacles/templates/jobs_history.html.j2
@@ -4,8 +4,8 @@
 {% if jobs %}
 {% for job in jobs %}
 <div class="job row u-flex">
-  <div class="details six columns u-flex u-flex-wrap">
-    <div class="job-filename u-flex mr-auto">
+  <div class="details eight columns u-flex u-flex-wrap u-overflow-elipsis">
+    <div class="job-filename u-flex u-flex-break">
       <label for="filename">File</label>
       <span name="filename">{{ctx.db.fetch_file(ctx.uid, job.file_id).filename or "it's a secret"}}</span>
     </div>
@@ -28,7 +28,7 @@
       <div class="dot {{ macros.job_state(job) }} {{ macros.job_active(job) }} tooltip bottom" data-text="{{ macros.job_state(job) }}" style="--dot-size: 1em;"> </div>
     </div>
   </div>
-  <div class="controls four columns u-flex u-ml-auto">
+  <div class="controls u-flex u-ml-auto u-mv-auto">
     {% if ctx.uid %}
     {{ macros.duplicate_job(job.id) }}
     {{ macros.delete_job(job.id) }}
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 058f1bd..b9e543a 100644
--- a/projects/tentacles/src/python/tentacles/templates/jobs_list.html.j2
+++ b/projects/tentacles/src/python/tentacles/templates/jobs_list.html.j2
@@ -4,8 +4,8 @@
 {% if jobs %}
 {% for job in jobs %}
 <div class="job row u-flex">
-  <div class="details six columns u-flex u-flex-wrap">
-    <div class="job-filename u-flex">
+  <div class="details eight columns u-flex u-flex-wrap u-overflow-elipsis">
+    <div class="job-filename u-flex u-flex-break">
       <label for="filename">File</label>
       <span name="filename">{{ctx.db.fetch_file(ctx.uid, job.file_id).filename or "it's a secret"}}</span>
     </div>
@@ -37,7 +37,7 @@
       <div class="dot {{ macros.job_state(job) }} {{ macros.job_active(job) }} tooltip bottom" data-text="{{ macros.job_state(job) }}" style="--dot-size: 1em;"> </div>
     </div>
   </div>
-  <div class="controls u-flex u-ml-auto">
+  <div class="controls u-flex u-ml-auto u-mv-auto">
     {% if ctx.uid %}
     {{ macros.duplicate_job(job.id) }}
     {{ macros.cancel_job(job.id) }}
diff --git a/projects/tentacles/src/python/tentacles/templates/macros.html.j2 b/projects/tentacles/src/python/tentacles/templates/macros.html.j2
index f6eafc1..c7b4c3e 100644
--- a/projects/tentacles/src/python/tentacles/templates/macros.html.j2
+++ b/projects/tentacles/src/python/tentacles/templates/macros.html.j2
@@ -4,7 +4,7 @@
 <form class="inline" method="post" action="/jobs">
   <input type="hidden" name="action" value="enqueue" />
   <input type="hidden" name="file_id" value="{{ id }}" />
-  <input id="submit" type="submit" value="Enqueue"/>
+  <input id="submit" type="image" src="/static/print.svg" height="24" width="24" />
 </form>
 {% endmacro %}
 
@@ -12,7 +12,7 @@
 <form class="inline" method="post" action="/jobs">
   <input type="hidden" name="action" value="duplicate" />
   <input type="hidden" name="job_id" value="{{ id }}" />
-  <input id="submit" type="submit" value="Duplicate"/>
+  <input id="submit" type="image" src="/static/print.svg" height="24" width="24" />
 </form>
 {% endmacro %}
 
@@ -28,7 +28,7 @@
 <form class="inline" method="post" action="/jobs">
   <input type="hidden" name="action" value="delete" />
   <input type="hidden" name="job_id" value="{{ id }}" />
-  <input id="submit" type="submit" value="Delete"/>
+  <input id="submit" type="image" src="/static/delete.svg" height="24" width="24" />
 </form>
 {% endmacro %}
 
@@ -54,7 +54,7 @@
 <form class="inline" method="post" action="{{ endpoint }}">
   <input type="hidden" name="action" value="delete" />
   <input type="hidden" name="file_id" value="{{ id }}" />
-  <input id="submit" type="submit" value="Delete"/>
+  <input id="submit" type="image" src="/static/delete.svg" height="24" width="24" />
 </form>
 {% endmacro %}
 
@@ -62,7 +62,7 @@
 <form class="inline" method="post" action="{{ endpoint }}">
   <input type="hidden" name="action" value="download" />
   <input type="hidden" name="file_id" value="{{ id }}" />
-  <input id="submit" type="submit" value="Download"/>
+  <input id="submit" type="image" src="/static/download.svg" height="24" width="24" />
 </form>
 {% endmacro %}