From 6b3754c6ac6155e103cb1dd79e6b4f94120773b0 Mon Sep 17 00:00:00 2001 From: Reid 'arrdem' McKenzie Date: Sat, 27 May 2023 18:55:18 -0600 Subject: [PATCH] Style flailings --- .../src/python/tentacles/__main__.py | 6 - .../tentacles/static/css/_tirefire.scss | 171 ++++++++++++++++++ .../python/tentacles/static/css/style.scss | 129 ++++++------- .../tentacles/templates/add_printer.html.j2 | 22 ++- .../python/tentacles/templates/base.html.j2 | 37 +++- .../tentacles/templates/printers.html.j2 | 15 +- .../python/tentacles/templates/user.html.j2 | 35 ++-- 7 files changed, 310 insertions(+), 105 deletions(-) diff --git a/projects/tentacles/src/python/tentacles/__main__.py b/projects/tentacles/src/python/tentacles/__main__.py index 8db9dff..7999a88 100644 --- a/projects/tentacles/src/python/tentacles/__main__.py +++ b/projects/tentacles/src/python/tentacles/__main__.py @@ -50,12 +50,6 @@ def user_session(): ctx.gid = gid ctx.username = name ctx.is_admin = gid == 0 - else: - ctx.sid = None - ctx.uid = None - ctx.gid = None - ctx.username = None - ctx.is_admin = False @cli.command() diff --git a/projects/tentacles/src/python/tentacles/static/css/_tirefire.scss b/projects/tentacles/src/python/tentacles/static/css/_tirefire.scss index 89a12b9..6b69451 100644 --- a/projects/tentacles/src/python/tentacles/static/css/_tirefire.scss +++ b/projects/tentacles/src/python/tentacles/static/css/_tirefire.scss @@ -3,7 +3,178 @@ $beige: #F4F8EE; $red: #BB2D2E; $orange: #CA4F1F; $yellow: #EDB822; +$clear: rgba(255, 255, 255, 255); + +$secondary_red: red; $secondary_blue: #288BC2; $secondary_green: #A5C426; $secondary_light_grey: #CACBCA; $secondary_dark_grey: #9A9A9A; + +@font-face { + font-family: 'Aaux Next'; + font-style: normal; + font-weight: 400; + src: local('Aaux Next'), url('/static/font/AauxNextBlk.otf') format('otf'); +} + +@font-face { + font-family: 'Aaux Next'; + font-style: normal; + font-weight: 400; + src: local('Aaux Next'), url('/static/font/aauxnextbdwebfont.otf') format('otf'); +} + +@font-face { + font-family: 'Aaux Next'; + font-style: normal; + font-weight: 400; + src: local('Aaux Next'), url('/static/font/aauxnextltwebfont.otf') format('otf'); +} + +@font-face { + font-family: 'Aaux Next'; + font-style: normal; + font-weight: 400; + src: local('Aaux Next'), url('/static/font/aauxnextmdwebfont.otf') format('otf'); +} + +@import url(https://fonts.googleapis.com/css?family=Raleway); + +//////////////////////////////////////////////////////////////////////////////////////////////////// +// Hidable alerts +.alert .inner { + display: block; + padding: 6px; + margin: 6px; + border-radius: 3px; + border: 1px solid rgb(180,180,180); + background-color: rgb(212,212,212); +} + +.alert .close { + float: right; + margin: 3px 12px 0px 0px; + cursor: pointer; +} + +.alert .inner,.alert .close { + color: rgb(88,88,88); +} + +.alert input { + display: none; +} + +.alert input:checked ~ * { + animation-name: dismiss,hide; + animation-duration: 300ms; + animation-iteration-count: 1; + animation-timing-function: ease; + animation-fill-mode: forwards; + animation-delay: 0s,100ms; +} + +.alert.error .inner { + border: 1px solid rgb(238,211,215); + background-color: rgb(242,222,222); +} + +.alert.error .inner,.alert.error .close { + color: rgb(185,74,72); +} + +.alert.success .inner { + border: 1px solid rgb(214,233,198); + background-color: rgb(223,240,216); +} + +.alert.success .inner,.alert.success .close { + color: rgb(70,136,71); +} + +.alert.info .inner { + border: 1px solid rgb(188,232,241); + background-color: rgb(217,237,247); +} + +.alert.info .inner,.alert.info .close { + color: rgb(58,135,173); +} + +.alert.warning .inner { + border: 1px solid rgb(251,238,213); + background-color: rgb(252,248,227); +} + +.alert.warning .inner,.alert.warning .close { + color: rgb(192,152,83); +} + +@keyframes dismiss { + 0% { + opacity: 1; + } + 90%, 100% { + opacity: 0; + font-size: 0.1px; + transform: scale(0); + } +} + +@keyframes hide { + 100% { + height: 0px; + width: 0px; + overflow: hidden; + margin: 0px; + padding: 0px; + border: 0px; + } +} + +//////////////////////////////////////////////////////////////////////////////////////////////////// +// A timer animation +.timer { + background: -webkit-linear-gradient(left, skyBlue 50%, #eee 50%); + border-radius: 100%; + height: calc(var(--size) * 1px); + width: calc(var(--size) * 1px); + position: relative; + -webkit-animation: time calc(var(--duration) * 1s) steps(1000, start) infinite; + -webkit-mask: radial-gradient(transparent 50%,#000 50%); + mask: radial-gradient(transparent 50%,#000 50%); +} +.mask { + border-radius: 100% 0 0 100% / 50% 0 0 50%; + height: 100%; + left: 0; + position: absolute; + top: 0; + width: 50%; + -webkit-animation: mask calc(var(--duration) * 1s) steps(500, start) infinite; + -webkit-transform-origin: 100% 50%; +} +@-webkit-keyframes time { + 100% { + -webkit-transform: rotate(360deg); + } +} +@-webkit-keyframes mask { + 0% { + background: #eee; + -webkit-transform: rotate(0deg); + } + 50% { + background: #eee; + -webkit-transform: rotate(-180deg); + } + 50.01% { + background: skyBlue; + -webkit-transform: rotate(0deg); + } + 100% { + background: skyBlue; + -webkit-transform: rotate(-180deg); + } +} diff --git a/projects/tentacles/src/python/tentacles/static/css/style.scss b/projects/tentacles/src/python/tentacles/static/css/style.scss index 23db6f5..7d128da 100644 --- a/projects/tentacles/src/python/tentacles/static/css/style.scss +++ b/projects/tentacles/src/python/tentacles/static/css/style.scss @@ -1,47 +1,4 @@ -// @use 'tirefire' as tfi; - -// FIXME: Why isn't this happy in the other file? -$black: #171426; -$beige: #F4F8EE; -$red: #BB2D2E; -$orange: #CA4F1F; -$yellow: #EDB822; -$secondary_blue: #288BC2; -$secondary_green: #A5C426; -$secondary_light_grey: #CACBCA; -$secondary_dark_grey: #9A9A9A; -$secondary_red: red; -$clear: rgba(255, 255, 255, 255); - -@font-face { - font-family: 'Aaux Next'; - font-style: normal; - font-weight: 400; - src: local('Aaux Next'), url('/static/font/AauxNextBlk.otf') format('otf'); -} - -@font-face { - font-family: 'Aaux Next'; - font-style: normal; - font-weight: 400; - src: local('Aaux Next'), url('/static/font/aauxnextbdwebfont.otf') format('otf'); -} - -@font-face { - font-family: 'Aaux Next'; - font-style: normal; - font-weight: 400; - src: local('Aaux Next'), url('/static/font/aauxnextltwebfont.otf') format('otf'); -} - -@font-face { - font-family: 'Aaux Next'; - font-style: normal; - font-weight: 400; - src: local('Aaux Next'), url('/static/font/aauxnextmdwebfont.otf') format('otf'); -} - -@import url(https://fonts.googleapis.com/css?family=Raleway); +@import "tirefire"; .color-yellow { color: $yellow; @@ -51,7 +8,6 @@ html { font-family: 'Aaux Next', sans-serif; background-color: $beige; color: $black; - display: flex; } html, body { @@ -59,9 +15,11 @@ html, body { height: 100%; width: 100%; min-width: 400px; + display: flex; flex-grow: 1; flex-direction: column; + justify-content: center; } .content, .footer { @@ -83,6 +41,16 @@ a { *, *::before, *::after { margin: 0; padding: 0; + align-content: center; +} + +h1, h2, h3, h4, h5, h6 { + width: 100%; +} + +span { + display: flex; + align-self: center; } ul { @@ -92,6 +60,10 @@ ul { list-style: auto; padding: 1em; } + + li { + padding-top: 0.1em; + } } nav { @@ -154,7 +126,7 @@ $navbar_padding: 10px; .menu > li { margin: 0 1rem; - overflow: hidden; + // overflow: hidden; } .menu-button-container { @@ -261,25 +233,36 @@ $navbar_padding: 10px; width: 100%; } +.row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + width: 100%; +} + +.container { + display: flex; + flex-direction: column; + flex-wrap: wrap; + width: 100%; +} + +.mr-auto { + margin-right: auto; +} + +.ml-auto { + margin-left: auto; +} + .flashes { - .flash { - border: 10px solid $secondary_blue; - border-radius: 20px; - min-height: 40px; + .alert { p { font-size: 20px; margin-top: 10px; margin-left: 10px; } } - - .success { - border-color: $secondary_green; - } - - .error { - border-color: $secondary_red; - } } form { @@ -295,17 +278,25 @@ form { margin-right: 10px; } - input { + input[type=text] { margin-right: auto; width: 400px; } } } -.button { - border: 1px solid; - border-radius: 1em; +.button, +input[type=submit], +input[type=button], +button[type=submit] { + border: 1px solid $secondary_blue; + border-radius: 0.25em; padding: 0.5em; + background-color: $secondary_blue; + color: $beige; + cursor: pointer; + text-transform: uppercase; + font-weight: bold; } .keys ul li { @@ -321,3 +312,17 @@ form { overflow: clip; } } + +.printer-name, +.printer-status, +.printer-url, +.printer-date, +.printer-controls { + margin-top: 0.1em; + margin-right: 1em; + min-width: 10em; +} + +.printer-controls * { + margin-right: 0.1em; +} diff --git a/projects/tentacles/src/python/tentacles/templates/add_printer.html.j2 b/projects/tentacles/src/python/tentacles/templates/add_printer.html.j2 index 56b094a..49545b4 100644 --- a/projects/tentacles/src/python/tentacles/templates/add_printer.html.j2 +++ b/projects/tentacles/src/python/tentacles/templates/add_printer.html.j2 @@ -1,14 +1,18 @@ {% extends "base.html.j2" %} {% block content %} -

Add printer

-
- Printer name - Printer API URL - API key - - - -
+
+

Add printer

+
+ Printer name + Printer API URL + API key + + + + + +
+
+ diff --git a/projects/tentacles/src/python/tentacles/templates/printers.html.j2 b/projects/tentacles/src/python/tentacles/templates/printers.html.j2 index cb6f57d..e4443d3 100644 --- a/projects/tentacles/src/python/tentacles/templates/printers.html.j2 +++ b/projects/tentacles/src/python/tentacles/templates/printers.html.j2 @@ -1,25 +1,28 @@ {% extends "base.html.j2" %} {% block content %} -
+

Printers

{% with printers = ctx.db.list_printers() %} {% if printers %}
    {% for printer in printers %} {% with id, name, url, last_poll, status = printer %} -
  • +
  • {{name}} - {{url}} + {{url}} {{status}} {{last_poll}} {# FIXME: How should these action buttons work? #} - Test - Edit - Remove + + Test + Edit + Remove +
    • {% endwith %} {% endfor %}
+ {% if ctx.is_admin %}Add a printer{% endif %} {% else %} No printers available. {% if ctx.is_admin %}Configure one!{% else %}Ask the admin to configure one!{% endif %} {% endif %} diff --git a/projects/tentacles/src/python/tentacles/templates/user.html.j2 b/projects/tentacles/src/python/tentacles/templates/user.html.j2 index fdd9ca0..c209456 100644 --- a/projects/tentacles/src/python/tentacles/templates/user.html.j2 +++ b/projects/tentacles/src/python/tentacles/templates/user.html.j2 @@ -1,30 +1,37 @@ {% extends "base.html.j2" %} {% block content %}

User settings

-
+

API keys

{% with keys = ctx.db.list_keys(ctx.uid) %}
    {% for id, name, exp in keys if name != 'web session' %} -
  • - {{ name or 'anonymous' }} - {{ id[:10] }}... - {{ 'Expires in' if exp else ''}} {{ exp - datetime.now() if exp else 'Never' }} -
    - - - -
    +
  • +
    +
    + {{ name or 'anonymous' }} + {{ 'Expires in ' if exp else ''}}{{ exp - datetime.now() if exp else 'Never expires' }} +
    +
    + {{ id[:10] }}... +
    + + + +
    +
    +
    • {% endfor %}
{% endwith %} - +
+

Add a key

- API key name - Key lifetime + API key name + Key lifetime - +
{% endblock %}