diff options
| author | Wojtek Kosior <koszko@koszko.org> | 2022-09-05 13:58:34 +0200 |
|---|---|---|
| committer | Wojtek Kosior <koszko@koszko.org> | 2022-09-09 13:55:05 +0200 |
| commit | 2ef6e8c3177aeedb25258171133ef1cf8720f8f0 (patch) | |
| tree | 854b65b0bd3a34d980b82fc120a466d54d9fba81 /src/hydrilla/proxy/web_ui/templates/base.html.jinja | |
| parent | 6f6b40823b1e517149e238576fc8c210341f376f (diff) | |
| download | haketilo-hydrilla-2ef6e8c3177aeedb25258171133ef1cf8720f8f0.tar.gz haketilo-hydrilla-2ef6e8c3177aeedb25258171133ef1cf8720f8f0.zip | |
[proxy] complete the text content and styling of web UI pages written so far
Diffstat (limited to 'src/hydrilla/proxy/web_ui/templates/base.html.jinja')
| -rw-r--r-- | src/hydrilla/proxy/web_ui/templates/base.html.jinja | 81 |
1 files changed, 53 insertions, 28 deletions
diff --git a/src/hydrilla/proxy/web_ui/templates/base.html.jinja b/src/hydrilla/proxy/web_ui/templates/base.html.jinja index 2febf2f..fe3113b 100644 --- a/src/hydrilla/proxy/web_ui/templates/base.html.jinja +++ b/src/hydrilla/proxy/web_ui/templates/base.html.jinja @@ -21,14 +21,24 @@ in a proprietary work, I am not going to enforce this in court. <!DOCTYPE html> {% macro button_row(buttons_data) %} - <div class="button-row"> + <div class="flex-row"> {% for classes, text, action in buttons_data %} + {% if not loop.first %} + <div class="button-row-separator"></div> + {% do classes.append('button-bordering-left') %} + {% endif %} + + {% if not loop.last %} + {% do classes.append('button-bordering-right') %} + {% endif %} + {% if 'disabled-button' in classes %} {% set disabled_attr = ' disabled=""' %} {% else %} {% set disabled_attr = '' %} {% endif %} - <form method="POST" class="inline-form"> + + <form method="POST" class="flex-row"> <input name="action" value="{{ action }}" type="hidden"> <button class="{{ classes|join(' ') }}"{{ disabled_attr }}> {{ text }} @@ -38,6 +48,12 @@ in a proprietary work, I am not going to enforce this in court. </div> {% endmacro %} +{% macro error_note(note_text) %} + <aside class="error-note"> + {{ note_text }} + </aside> +{% endmacro %} + <html> <head> {% block head %} @@ -56,6 +72,7 @@ in a proprietary work, I am not going to enforce this in court. #main { max-width: 750px; margin: auto; + padding: 0 5px; } a { @@ -63,16 +80,6 @@ in a proprietary work, I am not going to enforce this in court. color: inherit; } - .inline-form { - display: inline-flex; - padding: 0; - margin: 0; - } - - .inline-form > * { - flex: 1 1 0; - } - .small-print { font-size: 80%; color: #555; @@ -81,22 +88,52 @@ in a proprietary work, I am not going to enforce this in court. .error-note { display: block; border-left: 5px solid #a33; + padding: 10px; background-color: #fcc; } + .block-with-bottom-margin, .flex-row, aside, p { + display: block; + margin: 0 0 10px 0; + } + + .flex-row { + display: flex; + padding: 0; + } + + .flex-row > * { + flex: 1 1 0; + } + + .flex-row > .flex-row { + margin: 0; + } + + .button-row-separator { + background-color: #65A065; + flex: 0 0 2px; + } + + div.horizontal-separator { + display: block; + background-color: #ccc; + height: 1px; + margin: 0 0 10px 0; + } + .green-button, .red-button, .blue-button { border: none; border-radius: 2px; color: white; text-align: center; text-decoration: none; - display: inline-block; + display: block; padding: 5px 10px; -moz-user-select: none; user-select: none; cursor: pointer; font: 400 0.9em sans-serif; - margin: 2px; } .green-button { @@ -112,34 +149,22 @@ in a proprietary work, I am not going to enforce this in court. } .disabled-button { - background-color: #aaa; - cursor: default; + background-color: #aaa; + cursor: default; } .button-bordering-right { - margin-right: 0; border-radius: 2px 0 0 2px; - border-right: 1px solid #65A065; } .button-bordering-left { - margin-left: 0; border-radius: 0 2px 2px 0; - border-left: 1px solid #65A065; } .button-bordering-left.button-bordering-right { border-radius: 0; } - .button-row { - display: flex; - } - - .button-row > * { - flex: 1 1 0; - } - .hide { display: none !important; } |