From 3c1b5616ac39560b5d6c289d1b1a6929459e00ef Mon Sep 17 00:00:00 2001 From: Muhammad Labeeb Date: Wed, 19 Feb 2025 16:01:11 +0500 Subject: [PATCH] fix ui bugs --- tutordash/server/app.py | 7 +- tutordash/server/static/js/dash.js | 2 +- tutordash/server/static/scss/dash.scss | 150 +++++++++++++++++------- tutordash/server/templates/_config.html | 1 + tutordash/server/templates/plugin.html | 11 +- 5 files changed, 123 insertions(+), 48 deletions(-) diff --git a/tutordash/server/app.py b/tutordash/server/app.py index 2b65d62..f3d2a78 100644 --- a/tutordash/server/app.py +++ b/tutordash/server/app.py @@ -161,7 +161,7 @@ async def plugin_toggle(name: str) -> WerkzeugResponse: if enable_plugin: response.set_cookie(f"{WARNING_COOKIE_PREFIX}-{name}", "requires launch", max_age=ONE_MONTH) else: - response.delete_cookie(name) + response.delete_cookie(f"{WARNING_COOKIE_PREFIX}-{name}") return response @@ -185,9 +185,12 @@ async def plugins_update() -> WerkzeugResponse: async def config_set(name: str) -> WerkzeugResponse: form = await request.form value = form.get("value", "") + plugin_name = form.get("plugin_name") tutorclient.CliPool.run_sequential(["config", "save", "--set", f"{name}={value}"]) # TODO error management - return redirect(request.args.get("next", "/")) + response = await make_response(redirect(request.args.get("next", "/"))) + response.set_cookie(f"{WARNING_COOKIE_PREFIX}-{plugin_name}", "requires launch", max_age=ONE_MONTH) + return response @app.post("/config//unset") diff --git a/tutordash/server/static/js/dash.js b/tutordash/server/static/js/dash.js index add48c0..4f1dc8c 100644 --- a/tutordash/server/static/js/dash.js +++ b/tutordash/server/static/js/dash.js @@ -3,7 +3,7 @@ function SetWarning(){ const warningMain = document.getElementById('warning-main'); warningElements.forEach(function(warningElement) { if (document.cookie.includes(warningElement.id)) { - warningElement.style.display = 'block'; + warningElement.style.display = 'flex'; warningMain.style.display = 'flex'; } }); diff --git a/tutordash/server/static/scss/dash.scss b/tutordash/server/static/scss/dash.scss index f0c1061..0428de0 100644 --- a/tutordash/server/static/scss/dash.scss +++ b/tutordash/server/static/scss/dash.scss @@ -1,10 +1,11 @@ +$blue-1: #f5faff; +$gray-1: #e9eaeb; +$gray-2: #c4c4c4; $edly-logo-red: #dc1f26; $dark-gray: #4a4a4a; $gray: #535862; $light-gray: #888; -$extra-light-gray: #c4c4c4; $black: #181d27; -$white: #e6f3ff; $blue: #1570ef; $light-blue: #2e90fa; $green: #009951; @@ -31,8 +32,8 @@ body { display: flex; .sidebar { flex: 0 0 19em; - border-right: 1px solid $extra-light-gray; - box-shadow: 2px 0px $white; + border-right: 1px solid $gray-2; + box-shadow: 2px 0px $gray-1; display: flex; flex-direction: column; height: 90vh; @@ -43,7 +44,7 @@ body { height: 100%; .header { flex: 0 0 6em; - border-bottom: 1px solid $extra-light-gray; + border-bottom: 1px solid $gray-2; display: flex; align-items: center; .image { @@ -77,11 +78,13 @@ body { font-size: 16px; font-weight: 600; margin: 0em 1em; - border-radius: 1em; + border-radius: 0.5em; &:hover { - background-color: $white; + background-color: $blue-1; } li { + display: flex; + align-items: center; padding: 0.5em 1em; span { margin-left: 0.5em; @@ -95,7 +98,7 @@ body { .sidebar-tab-selected { color: $blue; - background-color: $white; + background-color: $blue-1; border-radius: inherit; } } @@ -125,6 +128,7 @@ body { .page-title { font-size: 30px; font-weight: 600; + text-transform: capitalize; } .page-description { font-size: 1.25em; @@ -150,7 +154,7 @@ body { background-color: $light-blue; border: none; border-radius: 0.5em; - color: $white; + color: $gray-1; font-size: 1em; cursor: pointer; } @@ -168,7 +172,7 @@ body { width: 20em; border-radius: 10px; padding-left: 2.5em; - border: 1px solid $extra-light-gray; + border: 1px solid $gray-2; } img { @@ -179,23 +183,26 @@ body { } .content { flex-grow: 1; - margin: 0em 2em 2em 2em; - border-bottom: 1px solid $extra-light-gray; + margin: 0em 2em; #warning-main { display: none; - border: 1px solid $extra-light-gray; - border-radius: 1em; + border: 1px solid $gray-2; + border-radius: 0.5em; align-items: center; font-size: 1.25em; color: $gray; - margin-bottom: 2em; - padding: 1em; + margin-bottom: 1em; + padding: 0.5em 1em; span { margin-left: 1em; } + + img { + width: 2em; + } } .installed-plugins-list { - border: 1px solid $extra-light-gray; + border: 1px solid $gray-2; border-radius: 1em; display: flex; flex-direction: column; @@ -203,7 +210,7 @@ body { display: flex; justify-content: space-between; padding: 1em 2em; - border-bottom: 1px solid $extra-light-gray; + border-bottom: 1px solid $gray-2; &:last-child { border-bottom: none; } @@ -250,7 +257,7 @@ body { justify-content: space-between; .plugin { - border: 1px solid $extra-light-gray; + border: 1px solid $gray-2; border-radius: 1em; display: flex; flex-direction: column; @@ -308,34 +315,88 @@ body { white-space: normal; } } + .footer { + padding: 0em; + button { + width: 5em; + height: 2em; + background-color: $light-blue; + border: none; + border-radius: 0.5em; + color: white; + font-size: 1em; + cursor: pointer; + margin: 0em 0.5em; + } + } } } .status { display: flex; + align-items: center; + padding: 1.5em 0em; + border-top: 1px solid $gray-1; + border-bottom: 1px solid $gray-1; .status-text { width: 25em; + font-weight: 600; + font-size: 1.25em; } .switch-text { margin-left: 1em; } } - .tutor-logs-container { - height: 100%; + .config { + display: flex; + flex-direction: column; + .item { + display: flex; + margin-bottom: 2em; + align-items: center; + + span { + font-weight: bold; + } + + input { + border: 1px solid $light-gray; + border: 1px solid #888; + padding: 0.75em; + border-radius: 0.5em; + font-size: 1em; + margin-left: 1em; + width: 25em; + } + + button { + width: 4em; + height: 2em; + background-color: $light-blue; + border: none; + border-radius: 0.5em; + color: white; + font-size: 1em; + cursor: pointer; + margin: 0em 0.5em; + } + } } - #tutor-logs { - width: 100%; - background-color: black; - color: white; - padding: 2em; - border-radius: 1em; - font-family: inherit; - line-height: 1.5em; - white-space: pre-wrap; - word-wrap: break-word; - overflow-y: auto; - height: 100%; + .tutor-logs-container { + #tutor-logs { + width: 100%; + background-color: black; + color: white; + padding: 2em; + border-radius: 1em; + font-family: inherit; + line-height: 1.5em; + white-space: pre-wrap; + word-wrap: break-word; + overflow-y: auto; + height: 100%; + } } } .footer { @@ -346,13 +407,13 @@ body { .pagination { display: flex; justify-content: space-between; - border: 1px solid $extra-light-gray; + border: 1px solid $gray-2; border-radius: 0.5em; align-items: center; a { @include a-tag(); - border-right: 1px solid $extra-light-gray; + border-right: 1px solid $gray-2; &:last-child { border: none; @@ -369,6 +430,8 @@ body { } } .void { + border-top: 1px solid $gray-2; + margin-top: 3em; height: 3em; } } @@ -458,7 +521,7 @@ body { background: none; border: none; background-color: $light-blue; - color: $white; + color: $gray-1; font-size: 1em; } } @@ -466,11 +529,14 @@ body { } .form-switch { + height: 100%; + display: flex; + align-items: center; .switch { position: relative; display: inline-block; - width: 60px; - height: 34px; + width: 3.5em; + height: 1.75em; .slider { position: absolute; @@ -485,10 +551,10 @@ body { &:before { position: absolute; content: ""; - height: 26px; - width: 26px; - left: 4px; - bottom: 4px; + height: 1.5em; + width: 1.5em; + left: 0.25em; + bottom: 0.125em; background-color: white; -webkit-transition: 0.4s; transition: 0.4s; diff --git a/tutordash/server/templates/_config.html b/tutordash/server/templates/_config.html index d982d3e..4d67920 100644 --- a/tutordash/server/templates/_config.html +++ b/tutordash/server/templates/_config.html @@ -6,6 +6,7 @@ action="{{ url_for('config_set', name=key, next=url_for('plugin', name=plugin_name)) }}" method="POST" oninput="this.querySelector('button[type=submit]').disabled = false"> + {% if value is boolean %} {% else %} diff --git a/tutordash/server/templates/plugin.html b/tutordash/server/templates/plugin.html index de6b5d5..ddd5ac5 100644 --- a/tutordash/server/templates/plugin.html +++ b/tutordash/server/templates/plugin.html @@ -4,10 +4,15 @@ {% from 'switch_macro.html' import switch %} +{% if is_installed %} +{% block plugin_description %} +{% endblock %} +{% endif %} + {% block workspace_content %} +{% if is_installed %}
- {% if is_installed %}
Status
@@ -20,10 +25,10 @@ {% if not is_enabled %} Enable the plugin to edit parameters. {% endif %}
- {% endif %} +{% endif %} -{% if is_enabled %} +{% if is_enabled and not show_logs %}

Plugin Parameters

This plugin has default parameters. If you make any changes, save them and run a local launch to make the changes effective.