tightening frontend
Some checks failed
test and deploy / Build & Unit Test (push) Failing after 1m21s
test and deploy / Package & Push Container (push) Has been skipped

This commit is contained in:
Andy Pack 2024-10-10 23:45:22 +01:00
parent 38c2e5e430
commit 03e9743abb
Signed by: sarsoo
GPG Key ID: A55BA3536A5E0ED7
8 changed files with 173 additions and 225 deletions

View File

@ -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')

View File

@ -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/<path:path>')
def app_route(path):

View File

@ -15,9 +15,6 @@
</head>
<body>
<div>
<h1 class="title">Mixonomer</h1>
</div>
{% with messages = get_flashed_messages() %}
{% if messages %}
@ -29,9 +26,8 @@
{% endif %}
{% endwith %}
<br><br>
<div id="react"></div>
<script src="{{ url_for('static', filename='js/app.bundle.js') }}"></script>
<div id="snackbar">toast</div>

View File

@ -18,8 +18,8 @@
</head>
<body>
<div>
<h1 class="title">Mixonomer</h1>
<div class="title">
<h1>Mixonomer</h1>
</div>
<br><br>
<ul class="navbar">

View File

@ -6,81 +6,72 @@
{% with messages = get_flashed_messages() %}
{% if messages %}
{% for message in messages %}
<div class="row card pad-12">
<p class="center-text" style="color: red">{{ message }}</p>
</div>
{% endfor %}
<div>
{% for message in messages %}
<div class="card flash-message">
<p class="center-text" style="color: red">{{ message }}</p>
</div>
{% endfor %}
</div>
{% endif %}
{% endwith %}
<div class="row">
<div class="{% if logged_in %}pad-12{% else %}pad-9{% endif %} card">
<!-- <h1 class="center-text">Mixonomer</h1> -->
<div class="index-article">
<div class="index-hero-grid">
<div class="card index-into-card">
<div>
<p class="center-text">A set of tools using Spotify and Last.fm to create smart playlists and calculate listening statistics</p>
<p class="center-text">Playlists are updated multiple times a day to keep tracks up to date</p>
<p class="center-text">A set of tools using Spotify and Last.fm to create smart playlists and calculate listening statistics</p>
<p class="center-text">Playlists are updated multiple times a day to keep tracks up to date</p>
<p class="center-text">Written in Python and Javascript, based on the <a href="https://github.com/Sarsoo/spotframework">spotframework</a> and <a href="https://github.com/Sarsoo/pyfmframework">fmframework</a> libraries</p>
</div>
<p class="center-text">Written in Python and Javascript, based on the <a href="https://github.com/Sarsoo/spotframework">spotframework</a> and <a href="https://github.com/Sarsoo/pyfmframework">fmframework</a> libraries</p>
<div style="padding:10px">
<a class="button" style="padding:15px;width:49%" href="https://github.com/Sarsoo/Mixonomer">View Source</a>
<a class="button" style="padding:15px;width:49%" href="https://github.com/Sarsoo/Mixonomer-iOS">iOS Client Source</a>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px">
<a class="button" style="width: 100%" href="https://github.com/Sarsoo/Mixonomer">View Source</a>
<a class="button" style="width: 100%" href="https://github.com/Sarsoo/Mixonomer-iOS">iOS Client Source</a>
</div>
</div>
{% if logged_in %}
<a class="button full-width" href="/app">Launch</a>
{% if not logged_in %}
{% block form %}{% endblock %}
{% endif %}
</div>
{% if not logged_in %}
<div class="index-feature-grid">
<div class="card">
<h1 class="center-text">Sources</h1>
<p>Create smart Spotify playlists pulling tracks from</p>
<ul style="text-align:left" >
<li style="padding:10px">Spotify Playlists</li>
<li style="padding:10px">Spotify Library Tracks</li>
<li style="padding:10px">Mixonomer Playlists</li>
</ul>
</div>
<div class="card">
<h1 class="center-text">Currents</h1>
<p>Currents are mix playlists acting as a snapshot of what's being listened to at the moment</p>
<p>Includes date filtering on playlist sources for recently added tracks</p>
<p>Optionally search for and include "monthly" playlists for the last two months when named e.g february 20</p>
</div>
<div class="card">
<h1 class="center-text">Last.fm Charts</h1>
<p>Create playlists including Last.fm track charts of varying length and time range</p>
</div>
<div class="card">
<h1 class="center-text">Recommendations</h1>
<p>Include Spotify recommendations based on the other tracks of the playlist</p>
</div>
<div class="card">
<h1 class="center-text">Last.fm Integration</h1>
<p>Create groups of entries for scrobble summing and listening stats</p>
</div>
<div class="card">
<h1 class="center-text">Visualise Data</h1>
<p>Present listening trends with pie charts</p>
</div>
</div>
</div>
{% block form %}{% endblock %}
{% endif %}
</div>
<div class="row">
<h1>Smart Playlists</h1>
</div>
<div class="row center-text">
<div class="pad-6 card">
<h1 class="center-text">Sources</h1>
<p>Create smart Spotify playlists pulling tracks from</p>
<ul style="text-align:left" >
<li style="padding:10px">Spotify Playlists</li>
<li style="padding:10px">Spotify Library Tracks</li>
<li style="padding:10px">Mixonomer Playlists</li>
</ul>
</div>
<div class="pad-6 card">
<h1 class="center-text">Currents</h1>
<p>Currents are mix playlists acting as a snapshot of what's being listened to at the moment</p>
<p>Includes date filtering on playlist sources for recently added tracks</p>
<p>Optionally search for and include "monthly" playlists for the last two months when named e.g february 20</p>
</div>
</div>
<div class="row center-text">
<div class="pad-6 card">
<h1 class="center-text">Last.fm Charts</h1>
<p>Create playlists including Last.fm track charts of varying length and time range</p>
</div>
<div class="pad-6 card">
<h1 class="center-text">Recommendations</h1>
<p>Include Spotify recommendations based on the other tracks of the playlist</p>
</div>
</div>
<div class="row">
<h1>Tags</h1>
</div>
<div class="row center-text">
<div class="pad-6 card">
<h1 class="center-text">Last.fm Integration</h1>
<p>Create groups of entries for scrobble summing and listening stats</p>
</div>
<div class="pad-6 card">
<h1 class="center-text">Visualise Data</h1>
<p>Present listening trends with pie charts</p>
</div>
</div>
{% endblock %}

View File

@ -2,15 +2,25 @@
{% block form %}
<div class="pad-3 card">
<form name="login" action="/auth/login" method="POST" onsubmit="return handleLogin()">
<p class="center-text">Username<br><input type="text" name="username" class="full-width"></p>
<p class="center-text">Password<br><input type="password" name="password" class="full-width"></p>
<div class="card">
<form name="login" action="/auth/login" method="POST" onsubmit="return handleLogin()" style="display: grid; gap: 30px;">
<div>
<p>Username</p>
<input type="text" name="username" class="full-width" />
</div>
<div>
<p>Password</p>
<input type="password" name="password" class="full-width" />
</div>
<p id="status" style="display: none; color: red" class="center-text"></p>
<button class="button full-width" onclick="handleLogin()" type="submit">Login</button>
<br><br>
<a href="/auth/register" class="button full-width">Register</a>
<div style="display: grid; gap: 15px;">
<button class="button full-width" onclick="handleLogin()" type="submit">Login</button>
<a href="/auth/register" class="button full-width">Register</a>
</div>
</form>
<script src="{{ url_for('static', filename='js/login.bundle.js') }}"></script>

View File

@ -94,13 +94,17 @@ class MusicTools extends Component {
{/* TOP APP BAR */}
<AppBar position="static">
<AppBar position="sticky">
<Toolbar>
<IconButton edge="start" color="inherit" aria-label="menu" onClick={(e) => this.setOpen(true)}>
<MenuIcon />
</IconButton>
<Typography variant="h6">
<Link to='/app/playlists' style={{textDecoration: 'none'}}>Mixes</Link>
<Link to='/app/playlists' style={{textDecoration: 'none'}}>
<div className="title-small">
<h1 >Mixonomer</h1>
</div>
</Link>
</Typography>
</Toolbar>
</AppBar>
@ -125,12 +129,6 @@ class MusicTools extends Component {
onKeyDown={(e) => this.setOpen(false)}
>
<List>
{/* HOME */}
<ListItem button key="home" component={Link} to='/app'>
<ListItemIcon><HomeIcon /></ListItemIcon>
<ListItemText primary="Home" />
</ListItem>
{/* PLAYLISTS */}
<ListItem button key="playlists" component={Link} to='/app/playlists'>
<ListItemIcon><QueueMusic /></ListItemIcon>

View File

@ -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;
.title {
h1 {
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;
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;
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;