From c0d2b9eb7e2b65b582039aafdca765fe32acf81e Mon Sep 17 00:00:00 2001 From: Linnnus Date: Sat, 27 Apr 2024 21:21:51 +0200 Subject: Flesh out 'join' user flow This commit splits the user flow when sending in an application to join the guild into three staged: 1. Intro text 2. HTML form 3. Form submission feedback (aka. "yay it went through") --- app.py | 12 ++++++--- static/styles/base.css | 11 ++++++++ static/styles/join.css | 54 ---------------------------------------- static/styles/join_common.css | 44 ++++++++++++++++++++++++++++++++ static/styles/join_form.css | 33 ++++++++++++++++++++++++ views/base.html | 2 +- views/join.html | 57 ------------------------------------------ views/join_form.html | 58 +++++++++++++++++++++++++++++++++++++++++++ views/join_intro.html | 23 +++++++++++++++++ views/join_success.html | 18 ++++++++++++++ 10 files changed, 197 insertions(+), 115 deletions(-) delete mode 100644 static/styles/join.css create mode 100644 static/styles/join_common.css create mode 100644 static/styles/join_form.css delete mode 100644 views/join.html create mode 100644 views/join_form.html create mode 100644 views/join_intro.html create mode 100644 views/join_success.html diff --git a/app.py b/app.py index c64c280..de7a1d3 100644 --- a/app.py +++ b/app.py @@ -43,11 +43,15 @@ def callback(): return f'Access token: {token_response.get("access_token")}' -@app.route("/join.html") +@app.route("/join_intro.html") +def join_intro(): + return template("join_intro") + +@app.route("/join_form.html") def join_form(): - return template("join") + return template("join_form") -@app.route("/join.html", method="POST") +@app.route("/join_form.html", method="POST") def join_submission(db): name = request.forms.get("name") preferred_role = request.forms.get("preferredRole") @@ -64,6 +68,8 @@ def join_submission(db): db.execute(f"INSERT INTO applications(name, role, motivation) VALUES ({name}, {preferred_role}, {motivation})") + return template("join_success") + @app.route("//") def server_static(type, filename): return static_file(filename, root=f"./static/{type}/") diff --git a/static/styles/base.css b/static/styles/base.css index f9b1ae6..2ae562e 100644 --- a/static/styles/base.css +++ b/static/styles/base.css @@ -60,3 +60,14 @@ footer { font-size: small; margin: 1rem; } + +/* Chill link styling */ +a { + /* dark and twisted color, lighter for contrast */ + color: #a27d7d; + text-decoration: underline; +} + +a:visited { + color: inherit; +} diff --git a/static/styles/join.css b/static/styles/join.css deleted file mode 100644 index f958aad..0000000 --- a/static/styles/join.css +++ /dev/null @@ -1,54 +0,0 @@ -/* - * This file contains styles specific to the "join" view. The corresponding - * HTML/template file is `views/join.html`. - */ - -main { - width: 100%; - max-width: 500px; - margin: 2rem auto; -} - -.signup { - -} - -.signup__box { - margin-bottom: 1reM; -} - -.signup__label { - font-weight: bold; -} - -.signup__input { - width: 100%; - padding: .5rem; - border-radius: 5px; -} - -textarea.signup__input { - /* Remove UA's default monospace font */ - font-family: inherit; - - /* Horizontal resizing totally breaks our layout :( */ - resize: vertical; -} - -.signup__submit { - /* Horizontally center the element */ - display: block; - margin-inline: auto; - - /* Make it look dark and twisted */ - background-color: #6e1818; - color: white; - border: none; - border-radius: 500px; - padding: 1rem; - font-size: large; -} - -/* The usual dimming effect makes interaction feel more tactile */ -.signup__submit:hover { filter: brightness(90%); } -.signup__submit:active { filter: brightness(60%); } \ No newline at end of file diff --git a/static/styles/join_common.css b/static/styles/join_common.css new file mode 100644 index 0000000..93bdb1d --- /dev/null +++ b/static/styles/join_common.css @@ -0,0 +1,44 @@ +/* + * This file contains styles specific to the "join" views. There are a couple + * of views which are all part of the same user flow and reuse some styles. The + * corresponding HTML/template files are `views/join_*.html`. + */ + +main { + /* Center align and keep width readable. */ + width: 100%; + max-width: 500px; + margin: 2rem auto; + +} + +/* Some pages are text heavy. Keep a nice line distance. */ +p { line-height: 1.5; } + +.button { + /* Horizontally center the element */ + display: block; + margin-inline: auto; + + /* Make it look dark and twisted */ + background-color: #6e1818; + color: white; + border: none; + border-radius: 500px; + padding: 1rem; + font-size: large; +} + +/* The usual dimming effect makes interaction feel more tactile */ +.button:hover { filter: brightness(90%); } +.button:active { filter: brightness(60%); } + +/* We use button-styles anchor-tags to preserve HTML semantics. */ +a.button { + /* Remove link styling */ + color: inherit; + text-decoration: none; + + /* Inline elements expand by default. */ + width: fit-content; +} diff --git a/static/styles/join_form.css b/static/styles/join_form.css new file mode 100644 index 0000000..f4ba0f1 --- /dev/null +++ b/static/styles/join_form.css @@ -0,0 +1,33 @@ +/* + * This file contains styles specific to the "join_form" view. The corresponding + * HTML/template file is `views/join_form.html`. + * + * See also the file `static/styles/join_common.css` which contains some styles + * which are reused among the "join_" group of views. + */ + +.signup { + +} + +.signup__box { + margin-bottom: 1reM; +} + +.signup__label { + font-weight: bold; +} + +.signup__input { + width: 100%; + padding: .5rem; + border-radius: 5px; +} + +textarea.signup__input { + /* Remove UA's default monospace font */ + font-family: inherit; + + /* Horizontal resizing totally breaks our layout :( */ + resize: vertical; +} diff --git a/views/base.html b/views/base.html index 9133090..cba0c5d 100644 --- a/views/base.html +++ b/views/base.html @@ -14,7 +14,7 @@ diff --git a/views/join.html b/views/join.html deleted file mode 100644 index 784019c..0000000 --- a/views/join.html +++ /dev/null @@ -1,57 +0,0 @@ -{% extends "base.html" %} - -{% block head %} - - -{% endblock %} - -{% block content %} - -{% endblock %} \ No newline at end of file diff --git a/views/join_form.html b/views/join_form.html new file mode 100644 index 0000000..0e06399 --- /dev/null +++ b/views/join_form.html @@ -0,0 +1,58 @@ +{% extends "base.html" %} + +{% block head %} + + + +{% endblock %} + +{% block content %} + +{% endblock %} diff --git a/views/join_intro.html b/views/join_intro.html new file mode 100644 index 0000000..9ed93d5 --- /dev/null +++ b/views/join_intro.html @@ -0,0 +1,23 @@ +{% extends "base.html" %} + +{% block head %} + +{% endblock %} + +{% block content %} +

Joining the Blind Guild

+

+ So you want to join the Blind Guild. + Be warned, + we are a very exclusive club + and we aren't actively seeking new members. + However, if you're a skilled player + and feel like you could help elevate the Blind Guild, + feel free to send us an application! +

+

+ Click the button below to go to the form + where you can submit your application. +

+ Apply +{% endblock %} diff --git a/views/join_success.html b/views/join_success.html new file mode 100644 index 0000000..7e9dace --- /dev/null +++ b/views/join_success.html @@ -0,0 +1,18 @@ +{% extends "base.html" %} + +{% block head %} + +{% endblock %} + +{% block content %} +

Application recieved

+

+ Your application was submitted successfully! + We'll review it and decide if you're cool enough to join our exclusive club. + Please note that it may take a few days for us to get to your application. +

+

+ If you're accepted into our elite gang of high-tier gamers, + you'll receive an in-game invite to the Blind Guild. +

+{% endblock %} -- cgit v1.2.3