From 717ad174e22fde8ba106e83642fd8627fb5f3a07 Mon Sep 17 00:00:00 2001 From: Benjamyn Love Date: Mon, 20 Mar 2023 09:26:16 +1100 Subject: [PATCH] Updated quotes page and started profile page --- priceybot2/main.py | 5 +-- priceybot2/sass/branding.scss | 5 ++- priceybot2/sass/dark-mode.scss | 7 ++++ priceybot2/sass/flex.scss | 49 +++++++++++++++++++++++++ priceybot2/sass/main.scss | 1 + priceybot2/static/css/main.css | 47 +++++++++++++++++++++++- priceybot2/static/scripts/dark-mode.js | 29 +++++++++------ priceybot2/templates/base.html | 4 +-- priceybot2/templates/profile.html | 24 ++++++++++--- priceybot2/templates/quotes.html | 42 +++++++++------------- priceybot2/templates/quotes_old.html | 50 ++++++++++++++++++++++++++ 11 files changed, 214 insertions(+), 49 deletions(-) create mode 100644 priceybot2/sass/flex.scss create mode 100644 priceybot2/templates/quotes_old.html diff --git a/priceybot2/main.py b/priceybot2/main.py index d04d7d6..e741b73 100644 --- a/priceybot2/main.py +++ b/priceybot2/main.py @@ -15,10 +15,7 @@ def index(): @login_required def profile(): return render_template( - 'profile.html', - name=current_user.name, - google_id=current_user.google_id, - is_admin=current_user.administrator + 'profile.html' ) diff --git a/priceybot2/sass/branding.scss b/priceybot2/sass/branding.scss index 72d5dda..dfe13b4 100644 --- a/priceybot2/sass/branding.scss +++ b/priceybot2/sass/branding.scss @@ -77,4 +77,7 @@ $input-color: $nexi-black; // $table-background-color: $primary; // $table-striped-row-even-background-color: $nexi-lighter-black; -// $table-color: $nexi-white; \ No newline at end of file +// $table-color: $nexi-white; + +$button-border-color: $nexi-darker-red; +$button-border-width: 1px; \ No newline at end of file diff --git a/priceybot2/sass/dark-mode.scss b/priceybot2/sass/dark-mode.scss index 577c59f..b8bc6e0 100644 --- a/priceybot2/sass/dark-mode.scss +++ b/priceybot2/sass/dark-mode.scss @@ -36,4 +36,11 @@ .dark-toggle-animation { transition: background 500ms; +} + +.dark-position { + position: fixed; + bottom: 2em; + right: 2em; + } \ No newline at end of file diff --git a/priceybot2/sass/flex.scss b/priceybot2/sass/flex.scss new file mode 100644 index 0000000..deafa67 --- /dev/null +++ b/priceybot2/sass/flex.scss @@ -0,0 +1,49 @@ +.fcontainer { + display: flex; + flex-direction: column; + } + + .innercontainer { + display: flex; + flex-direction: row; + background-color: #E4E4E4; + border-radius: 1em; + } + + .innercontainer-dark { + display: flex; + flex-direction: row; + background-color: #353535; + border-radius: 1em; + } + + .fquote { + display: flex; + flex-grow: 8; + } + + .fbuttons { + display: flex; + align-self: flex-end; + + } + + .del-button { + border-color: #F44336 !important; + color: #F44336 !important; + } + + .sel-button { + border-color: #353535 !important; + color: #353535 !important; + } + + .del-button-dark { + border-color: #F44336 !important; + color: #F44336 !important; + } + + .sel-button-dark { + border-color: #f8fafb !important; + color: #f8fafb !important; + } \ No newline at end of file diff --git a/priceybot2/sass/main.scss b/priceybot2/sass/main.scss index 1ada90b..5e8f100 100644 --- a/priceybot2/sass/main.scss +++ b/priceybot2/sass/main.scss @@ -3,6 +3,7 @@ // Our scss files @import "branding"; @import "dark-mode"; +@import "flex"; // Import after our branding so colors work. @import "../node_modules/bulma/bulma.sass"; \ No newline at end of file diff --git a/priceybot2/static/css/main.css b/priceybot2/static/css/main.css index 2ce1bcf..1c5c407 100644 --- a/priceybot2/static/css/main.css +++ b/priceybot2/static/css/main.css @@ -20,6 +20,51 @@ .dark-toggle-animation { transition: background 500ms; } +.dark-position { + position: fixed; + bottom: 2em; + right: 2em; } + +.fcontainer { + display: flex; + flex-direction: column; } + +.innercontainer { + display: flex; + flex-direction: row; + background-color: #E4E4E4; + border-radius: 1em; } + +.innercontainer-dark { + display: flex; + flex-direction: row; + background-color: #353535; + border-radius: 1em; } + +.fquote { + display: flex; + flex-grow: 8; } + +.fbuttons { + display: flex; + align-self: flex-end; } + +.del-button { + border-color: #F44336 !important; + color: #F44336 !important; } + +.sel-button { + border-color: #353535 !important; + color: #353535 !important; } + +.del-button-dark { + border-color: #F44336 !important; + color: #F44336 !important; } + +.sel-button-dark { + border-color: #f8fafb !important; + color: #f8fafb !important; } + /*! bulma.io v0.9.4 | MIT License | github.com/jgthms/bulma */ /* Bulma Utilities */ .button, .input, .textarea, .select select, .file-cta, @@ -428,7 +473,7 @@ a.box:active { .button { background-color: white; - border-color: #D2D2D2; + border-color: #EB302D; border-width: 1px; color: #363636; cursor: pointer; diff --git a/priceybot2/static/scripts/dark-mode.js b/priceybot2/static/scripts/dark-mode.js index 65a235a..9bdb01b 100644 --- a/priceybot2/static/scripts/dark-mode.js +++ b/priceybot2/static/scripts/dark-mode.js @@ -55,18 +55,27 @@ function applyTheme(theme) { // Find elements and update class. switch (theme) { case 'dark': - primaryElements = Array.from(document.querySelectorAll('.is-primary-invert')); - primaryElements.forEach((element) => { - element.classList.remove('is-primary-invert'); - element.classList.add('is-primary'); - }); + test = Array('.is-primary-invert|is-primary', '.sel-button|sel-button-dark' , '.innercontainer|innercontainer-dark') + test.forEach((t) => { + let c = t.split('|') + primaryElements = Array.from(document.querySelectorAll(c[0])); + primaryElements.forEach((element) => { + element.classList.remove(c[0].split('.')[1]); + element.classList.add(c[1]); + }); + }) break; case 'light': - primaryElements = Array.from(document.querySelectorAll('.is-primary')); - primaryElements.forEach((element) => { - element.classList.remove('is-primary'); - element.classList.add('is-primary-invert'); - }); + test = Array('.is-primary|is-primary-invert', '.sel-button-dark|sel-button' , '.innercontainer-dark|innercontainer') + test.forEach((t) => { + let c = t.split('|') + primaryElements = Array.from(document.querySelectorAll(c[0])); + primaryElements.forEach((element) => { + element.classList.remove(c[0].split('.')[1]); + element.classList.add(c[1]); + + }); + }) break; } } \ No newline at end of file diff --git a/priceybot2/templates/base.html b/priceybot2/templates/base.html index af03946..6263cc3 100644 --- a/priceybot2/templates/base.html +++ b/priceybot2/templates/base.html @@ -28,7 +28,7 @@
{% if space_list is defined %} -
+
+
diff --git a/priceybot2/templates/profile.html b/priceybot2/templates/profile.html index b5ff5f4..070423d 100644 --- a/priceybot2/templates/profile.html +++ b/priceybot2/templates/profile.html @@ -1,9 +1,23 @@ {% extends "base.html" %} {% block content %} -

- Welcome, {{ name }}!

- Your google ID is {{ google_id }}

- Admin?: {{ "yes" if is_admin else "no" }}

-

+
+
+ +
+
+

1

+

2

+

3

+

4

+

5

+

6

+
+ + + +
+ {% endblock %} diff --git a/priceybot2/templates/quotes.html b/priceybot2/templates/quotes.html index dee9c03..2fd0018 100644 --- a/priceybot2/templates/quotes.html +++ b/priceybot2/templates/quotes.html @@ -2,7 +2,7 @@ {% block content %} -
-

Quotes

-
- {% with messages = get_flashed_messages() %} - {% if messages %} -
- {{ messages[0] }} -
- {% endif %} - {% endwith %} - - {% for quote in quotes %} - - - {% if current_user.administrator %} - - {% endif %} - - {% endfor %} - -
- {{ quote[0] }} -
-
-
+
+{% for i in quotes %} +
+
+ {{ i[0] }} +
+ +
+ + +
+
+{% endfor %} +
{% endblock %} + diff --git a/priceybot2/templates/quotes_old.html b/priceybot2/templates/quotes_old.html new file mode 100644 index 0000000..dee9c03 --- /dev/null +++ b/priceybot2/templates/quotes_old.html @@ -0,0 +1,50 @@ +{% extends "base.html" %} + +{% block content %} + +
+

Quotes

+
+ {% with messages = get_flashed_messages() %} + {% if messages %} +
+ {{ messages[0] }} +
+ {% endif %} + {% endwith %} + + {% for quote in quotes %} + + + {% if current_user.administrator %} + + {% endif %} + + {% endfor %} + +
+ {{ quote[0] }} +
+
+
+ +{% endblock %}