tightening frontend
This commit is contained in:
parent
38c2e5e430
commit
03e9743abb
GPG Key ID:
A55BA3536A5E0ED7
@ -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')
|
||||
|
||||
@ -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):
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
|
||||
@ -18,8 +18,8 @@
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<h1 class="title">Mixonomer</h1>
|
||||
<div class="title">
|
||||
<h1>Mixonomer</h1>
|
||||
</div>
|
||||
<br><br>
|
||||
<ul class="navbar">
|
||||
|
||||
@ -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 %}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user