From 03e9743abb27c8f2a3f2921c7657bd20c7f019a1 Mon Sep 17 00:00:00 2001 From: Andy Pack Date: Thu, 10 Oct 2024 23:45:22 +0100 Subject: [PATCH] tightening frontend --- music/auth/auth.py | 2 +- music/music.py | 12 ++- music/templates/app.html | 6 +- music/templates/base.html | 4 +- music/templates/index.html | 123 ++++++++++----------- music/templates/login.html | 24 +++-- src/js/MusicTools.js | 14 ++- src/scss/style.scss | 213 ++++++++++++++----------------------- 8 files changed, 173 insertions(+), 225 deletions(-) diff --git a/music/auth/auth.py b/music/auth/auth.py index c7ddb6e..9193308 100644 --- a/music/auth/auth.py +++ b/music/auth/auth.py @@ -60,7 +60,7 @@ def login(): logger.info(f'success {username}') session['username'] = username - return redirect(url_for('app_route')) + return redirect(url_for('app_route_redirect')) else: logger.warning(f'failed attempt {username}') flash('incorrect password') diff --git a/music/music.py b/music/music.py index f44fafe..f9a417e 100644 --- a/music/music.py +++ b/music/music.py @@ -38,7 +38,7 @@ def create_app(): if 'username' in session: logged_in = True - return redirect(url_for('app_route')) + return redirect('/app/playlists') else: logged_in = False @@ -48,7 +48,15 @@ def create_app(): def privacy(): return render_template('privacy.html', bucket=STATIC_BUCKET) - @app.route('/app', defaults={'path': ''}) + @app.route('/app') + def app_route_redirect(): + + if 'username' not in session: + flash('please log in') + return redirect(url_for('index')) + + return redirect('/app/playlists') + @app.route('/app/') def app_route(path): diff --git a/music/templates/app.html b/music/templates/app.html index aa90691..29293d2 100644 --- a/music/templates/app.html +++ b/music/templates/app.html @@ -15,9 +15,6 @@ -
-

Mixonomer

-
{% with messages = get_flashed_messages() %} {% if messages %} @@ -29,9 +26,8 @@ {% endif %} {% endwith %} -

-
+
toast
diff --git a/music/templates/base.html b/music/templates/base.html index 09807d3..c0894e6 100644 --- a/music/templates/base.html +++ b/music/templates/base.html @@ -18,8 +18,8 @@ -
-

Mixonomer

+
+

Mixonomer



    diff --git a/music/templates/index.html b/music/templates/index.html index 955d16c..9fd7d29 100644 --- a/music/templates/index.html +++ b/music/templates/index.html @@ -6,81 +6,72 @@ {% with messages = get_flashed_messages() %} {% if messages %} - {% for message in messages %} -
    -

    {{ message }}

    -
    - {% endfor %} +
    + {% for message in messages %} +
    +

    {{ message }}

    +
    + {% endfor %} +
    {% endif %} {% endwith %} -
    -
    - +
    +
    +
    +
    +

    A set of tools using Spotify and Last.fm to create smart playlists and calculate listening statistics

    +

    Playlists are updated multiple times a day to keep tracks up to date

    -

    A set of tools using Spotify and Last.fm to create smart playlists and calculate listening statistics

    -

    Playlists are updated multiple times a day to keep tracks up to date

    +

    Written in Python and Javascript, based on the spotframework and fmframework libraries

    +
    -

    Written in Python and Javascript, based on the spotframework and fmframework libraries

    - - - {% if logged_in %} - Launch + {% if not logged_in %} + + {% block form %}{% endblock %} + {% endif %}
    - {% if not logged_in %} +
    +
    +

    Sources

    +

    Create smart Spotify playlists pulling tracks from

    +
      +
    • Spotify Playlists
      • +
    • Spotify Library Tracks
      • +
    • Mixonomer Playlists
      • +
    +
    +
    +

    Currents

    +

    Currents are mix playlists acting as a snapshot of what's being listened to at the moment

    +

    Includes date filtering on playlist sources for recently added tracks

    +

    Optionally search for and include "monthly" playlists for the last two months when named e.g february 20

    +
    +
    +

    Last.fm Charts

    +

    Create playlists including Last.fm track charts of varying length and time range

    +
    +
    +

    Recommendations

    +

    Include Spotify recommendations based on the other tracks of the playlist

    +
    +
    +

    Last.fm Integration

    +

    Create groups of entries for scrobble summing and listening stats

    +
    +
    +

    Visualise Data

    +

    Present listening trends with pie charts

    +
    +
    +
    - {% block form %}{% endblock %} - - {% endif %} -
    -
    -

    Smart Playlists

    -
    -
    -
    -

    Sources

    -

    Create smart Spotify playlists pulling tracks from

    -
      -
    • Spotify Playlists
      • -
    • Spotify Library Tracks
      • -
    • Mixonomer Playlists
      • -
    -
    -
    -

    Currents

    -

    Currents are mix playlists acting as a snapshot of what's being listened to at the moment

    -

    Includes date filtering on playlist sources for recently added tracks

    -

    Optionally search for and include "monthly" playlists for the last two months when named e.g february 20

    -
    -
    -
    -
    -

    Last.fm Charts

    -

    Create playlists including Last.fm track charts of varying length and time range

    -
    -
    -

    Recommendations

    -

    Include Spotify recommendations based on the other tracks of the playlist

    -
    - -
    -
    -

    Tags

    -
    -
    -
    -

    Last.fm Integration

    -

    Create groups of entries for scrobble summing and listening stats

    -
    -
    -

    Visualise Data

    -

    Present listening trends with pie charts

    -
    -
    {% endblock %} diff --git a/music/templates/login.html b/music/templates/login.html index 528d8bd..fa6733a 100644 --- a/music/templates/login.html +++ b/music/templates/login.html @@ -2,15 +2,25 @@ {% block form %} -
    -
    -

    Username

    -

    Password

    +
    + + +
    +

    Username

    + +
    + +
    +

    Password

    + +
    + - -

    - Register +
    + + Register +
    diff --git a/src/js/MusicTools.js b/src/js/MusicTools.js index 12bc860..9fb7ff6 100644 --- a/src/js/MusicTools.js +++ b/src/js/MusicTools.js @@ -94,13 +94,17 @@ class MusicTools extends Component { {/* TOP APP BAR */} - + this.setOpen(true)}> - Mixes + +
    +

    Mixonomer

    +
    +     @@ -125,12 +129,6 @@ class MusicTools extends Component { onKeyDown={(e) => this.setOpen(false)} > - {/* HOME */} - - - - - {/* PLAYLISTS */} diff --git a/src/scss/style.scss b/src/scss/style.scss index 38aef12..6c57aa1 100644 --- a/src/scss/style.scss +++ b/src/scss/style.scss @@ -19,6 +19,7 @@ html { body { background-color: $background-colour; + margin: 0px; } a { @@ -31,7 +32,7 @@ a { p { color: $text-colour; font-size: 20px; - padding: 10px; + //padding: 10px; } .ui-text { @@ -46,10 +47,6 @@ p { width: 100%; } -.half-width { - width: 50%; -} - .button { background-color: $ui-element; color: $text-colour; @@ -87,23 +84,50 @@ input[type=text], input[type=password], input[type=number], select { color: white; } -.row { - margin: 30px; +.flash-message { + max-width: 400px; + margin-inline: auto; + margin-block: 40px; } -.gallerystrip{ +.index-hero-grid { + display: grid; + gap: 20px; + margin-block: 30px; +} - width: 100%; - margin: auto; - margin-top: 15px; +.index-into-card { + display: flex; + flex-direction: column; + justify-content: space-between; +} +.index-feature-grid { + display: grid; + gap: 20px; +} - img { - height: auto; - border: 10px solid #313439; - margin: calc($pad-px / 2); - box-shadow: 4px 4px 7px #070707; +.index-article { + max-width: 1300px; + margin: 10px; +} + +@media screen and (min-width: 50rem) { + .index-hero-grid { + grid-template-columns: 3fr 1fr; } + + .index-feature-grid { + grid-template-columns: repeat(3, 1fr); + } + + .index-article { + margin-inline: auto; + } +} + +.row { + margin: 30px; } .profile { @@ -127,38 +151,53 @@ input[type=text], input[type=password], input[type=number], select { } } -h1.title { - color: black; - font-size: 4em; - font-family: 'Pirata One', arial; - text-shadow: 3px 3px 3px #aaa; - - cursor: default; - user-select: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; +.title { + h1 { + color: black; + font-size: 4em; + font-family: 'Pirata One', arial; + text-shadow: 3px 3px 3px #aaa; - font-weight: bold; - display: block; - text-decoration: none; - background-color: white; - padding: 0px; - /*font-size: 16em;*/ - width: 5em; - height: 1.3em; - text-align: center; - margin: auto; - box-shadow: 5px 5px 8px #000000; + cursor: default; + user-select: none; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + font-weight: bold; + display: block; + text-decoration: none; + background-color: white; + padding: 0px; + /*font-size: 16em;*/ + width: 5em; + height: 1.3em; + text-align: center; + margin: auto; + box-shadow: 5px 5px 8px #000000; + } +} + +.title-small { + h1 { + color: white; + font-size: 2em; + font-family: 'Pirata One', arial; + text-shadow: 3px 3px 3px black; + + font-weight: bold; + padding: 0; + margin-block: 0; + margin-inline: 10px; + } } .card { /*background-color: grey;*/ background-color: $ui-colour; box-shadow: 4px 4px 8px black; - padding: 10px; - margin: calc($pad-px / 2); + padding: 20px; + //margin: calc($pad-px / 2); /*border-radius: 3px;*/ h1 { @@ -181,12 +220,6 @@ h1.title { } } -h1.sectiontitle { - text-align:center; - color: $text-colour; - font-family: 'Megrim', sans-serif; -} - ul.navbar { list-style-type: none; background-color: $light-ui; @@ -238,78 +271,6 @@ ul.navbar { li.right {float: right;} } -.sidebar { - - list-style-type: none; - background-color: $light-ui; - margin-left: 10px; - margin-right: 10px; - border-radius: 5px; - // padding-top: 10px; - // padding-bottom: 10px; - - user-select: none; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -webkit-user-drag: none; - -khtml-user-drag: none; - -moz-user-drag: none; - -o-user-drag: none; - - box-shadow: 0 9px 12px 0 black, 0 9px 12px 0 black; - - tr { - top: 0; - cursor: pointer; - - td { - - // height: 50px; - text-align: center; - vertical-align: center; - - border-radius: 5px; - - a { - color: $text-colour; - - height: 100%; - width: 100%; - display: inline-block; - vertical-align: center; - padding: 10px; - - text-decoration: none; - text-shadow: 1px 1px 1px rgba(0,0,0, 0.5); - -webkit-transition: background-color 0.4s; - transition: background-color 0.4s; - } - - &:hover { - background-color: $ui-shadow; - } - } - } - -} - -.sidebar-selected { - background-color: black; -} - -.app-table { - width: 100%; - margin: auto; - td { - padding: 5px; - } -} - -.max-width { - max-width: 800px; -} - .text-no-select { cursor: default; user-select: none; @@ -318,22 +279,6 @@ ul.navbar { -ms-user-select: none; } -footer { - p { - text-align: right; - font-size: 12px; - } - - a { - margin-top: 10px; - margin-bottom: 10px; - text-align: right; - display: block; - color: grey; - font-size: 12px; - } -} - #snackbar { visibility: hidden; min-width: 250px;