Feat: improve responsive behavior w/ icons
This commit is contained in:
parent
bbf0346f6a
commit
91fd7c37c5
8 changed files with 209 additions and 21 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
47
projects/tentacles/src/python/tentacles/static/delete.svg
Normal file
47
projects/tentacles/src/python/tentacles/static/delete.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.6 KiB |
52
projects/tentacles/src/python/tentacles/static/download.svg
Normal file
52
projects/tentacles/src/python/tentacles/static/download.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 1.5 KiB |
43
projects/tentacles/src/python/tentacles/static/print.svg
Normal file
43
projects/tentacles/src/python/tentacles/static/print.svg
Normal file
|
|
@ -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>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
|
|
@ -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) }}
|
||||
|
|
|
|||
|
|
@ -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) }}
|
||||
|
|
|
|||
|
|
@ -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) }}
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue