...
 
Commits (4)
FLASK_APP=assurancetourix
FLASK_ENV=development
body { padding-top: 70px; } /* Bootstrap's fixed navbar */
.navbar a.top {
font-size: 120%;
font-size: 1.2rem;
}
.spinner {
......@@ -14,57 +14,18 @@ ul.nav-pills {
margin-bottom: 1em;
}
#songlist .song-cover {
display: block;
position: absolute;
}
#songlist .song-text,
#songlist .artist-text {
padding-left: 10px;
}
#songlist .song-text h4,
#songlist .artist-text h4 {
margin-top: 0;
margin-bottom: 5px;
}
#songlist .song-text p.song-title {
margin-bottom: 0;
font-size: 1.2rem;
margin-bottom: 0.3rem;
}
#songlist .song-tags {
font-size: 80%;
}
#songlist .artist-text .song-tags {
margin-left: 1em;
float: right;
}
@media (min-width: 768px) {
#songlist .song-tags {
font-size: 90%;
}
}
/*
#songlist .song-tags {
display: inline-block;
width: 20%;
float: right;
}
#songlist .song-tags p {
margin: 0;
padding: 0;
font-size: 0.7rem;
}
*/
#signature {
margin-top: 3em;
padding: 1em;
font-size: 80%;
text-align: center;
border-top: 1px solid #ccc;
color: #555;
font-size: 0.8rem;
}
#signature a {
font-weight: normal;
color: #555;
}
}
\ No newline at end of file
{% for artist in artists %}
<li class="list-group-item">
<div class="artist-info">
<li class="list-group-item d-flex">
<div class="song-cover">
{% for song in artist.songs %}
{% if song.image %}
......@@ -11,24 +11,22 @@
{% endif %}
{% endfor %}
</div>
<div class="artist-text">
<div class="artist-text ml-2 w-100">
<h4>{{ artist.name }}</h4>
<ul class="list-unstyled">
{% for song in artist.songs %}
<li>
<li class="d-flex justify-content-between">
<span class="song-title">{{ song.title }}</span>
<div class="song-tags">
<ul class="list-inline text-muted">
{% if song.genre %}<li class="hidden-xs"><span class="fa fa-tag"></span> {{ song.genre.name }}</li>{% endif %}
{% if song.language %}<li class="hidden-xs"><span class="fa fa-flag"></span> {{ song.language }}</li>{% endif %}
{% if song.duo %}<li><span class="fa fa-users"></span> {{ _("Duet") }}</li>{% endif %}
{% if song.has_karaoke %}<li><span class="fa fa-music"></span> {{ _("Karaoke") }}</li>{% endif %}
{% if song.duo %}<li class="list-inline-item"><span class="fa fa-users"></span> {{ _("Duet") }}</li>{% endif %}
{% if song.has_karaoke %}<li class="list-inline-item"><span class="fa fa-music"></span> {{ _("Karaoke") }}</li>{% endif %}
</ul>
</div>
</li>
{% endfor %}
</ul>
</div>
</div>
</li>
{% endfor %}
......@@ -2,11 +2,10 @@
<html lang="{{ g.locale.language }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>{{ _("Assurancetourix, karaoke party manager") }}</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" />
<!-- Optional theme -->
......@@ -19,10 +18,6 @@
#songlist .song-info {
min-height: {{ covers_size }}px;
}
#songlist .song-text,
#songlist .artist-text {
margin-left: {{ covers_size }}px;
}
#songlist .song-cover {
width: {{ covers_size }}px;
}
......@@ -32,34 +27,41 @@
</head>
<body id="top">
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="{{ url_for("index") }}" title="{{ _("Home") }}">{{ _("Karaoke") }}</a>
<p class="navbar-text pull-right">
<a href="#top" class="navbar-link top" title="{{ _("Top") }}">
<span class="fa fa-arrow-circle-o-up"></span>
</a>
</p>
</div>
<nav class="navbar navbar-light bg-light fixed-top">
<div class="container">
<div class="col-md-8 offset-md-2 col-lg-6 offset-lg-3 d-flex justify-content-between">
<a class="navbar-brand" href="{{ url_for("index") }}" title="{{ _("Home") }}">{{ _("Karaoke") }}</a>
<a href="#top" class="navbar-text navbar-link top" title="{{ _("Top") }}">
<span class="fa fa-arrow-circle-o-up"></span>
</a>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2 col-lg-6 offset-lg-3">
{% include 'top.html' ignore missing %}
{% block content %}{% endblock %}
<div id="signature">
<div id="signature" class="mt-5 p-2 text-center border-top border-secondary text-secondary">
<a href="https://gitlab.com/abompard/assurancetourix" data-rel="external">
{{ _("Assurancetourix project") }}</a>.
{{ _('Written by Aurélien. For any suggestion, idea, improvement, fix, insult: <a href="mailto:aurelien@bompard.org" data-rel="external">write me</a>.') }}
</div>
</div> <!-- /col -->
</div> <!-- /row -->
</div> <!-- /container -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="{{ url_for('static', filename='vendor/lazyload/jquery.lazyload.min.js') }}"></script>
<script src="{{ url_for('static', filename='actions.js') }}"></script>
......
{% for song in songs %}
<li class="list-group-item">
<div class="row">
<div class="song-info col-xs-9 col-sm-10 col-lg-11">
<div class="song-cover">
{% if song.image %}
<img class="lazy" width="{{ covers_size }}"
data-original="{{ url_for('static', filename=covers_dir+'/'+song.image) }}"
/>
{% endif %}
</div>
<div class="song-text">
<h4>{{ song.artist.name }}</h4>
<p class="song-title">{{ song.title }}</p>
</div>
<li class="list-group-item d-flex">
<div class="song-cover">
{% if song.image %}
<img class="lazy" width="{{ covers_size }}"
data-original="{{ url_for('static', filename=covers_dir+'/'+song.image) }}"
/>
{% endif %}
</div>
<ul class="song-tags list-unstyled text-muted col-xs-3 col-sm-2 col-lg-1">
{% if song.genre %}<li><span class="fa fa-tag"></span> {{ song.genre.name }}</li>{% endif %}
{% if song.language %}<li><span class="fa fa-flag"></span> {{ song.language }}</li>{% endif %}
<div class="song-text ml-2">
<h4>{{ song.artist.name }}</h4>
<p class="song-title">{{ song.title }}</p>
</div>
<ul class="song-tags list-unstyled text-muted ml-auto pl-2">
{% if song.duo %}<li><span class="fa fa-users"></span> {{ _("Duet") }}</li>{% endif %}
{% if song.has_karaoke %}<li><span class="fa fa-music"></span> {{ _("Karaoke") }}</li>{% endif %}
</ul>
</div>
</div>
</li>
{% else %}
<li style="display: block; margin-top: 20px;"><em>{{ _("No songs.") }}</em></li>
<li class="d-block"><em>{{ _("No songs.") }}</em></li>
{% endfor %}
......@@ -3,48 +3,44 @@
{% block content %}
<ul class="nav nav-pills">
<li role="presentation"
{% if page_id == "index" %}class="active"{% endif %}
><a href="{{ url_for("index") }}">{{ _("By name") }}</a>
<li role="presentation" class="nav-item">
<a href="{{ url_for("index") }}"
class="nav-link {% if page_id == "index" %}active{% endif %}"
>{{ _("By name") }}</a>
</li>
<li role="presentation"
{% if page_id == "latest" %}class="active"{% endif %}
><a href="{{ url_for("latest") }}">{{ _("By date") }}</a>
<li role="presentation" class="nav-item">
<a href="{{ url_for("latest") }}"
class="nav-link {% if page_id == "latest" %}active{% endif %}"
>{{ _("By date") }}</a>
</li>
<li role="presentation"
{% if page_id == "search" %}class="active"{% endif %}
><a href="{{ url_for("search") }}">{{ _("Search") }}</a>
<li role="presentation" class="nav-item">
<a href="{{ url_for("search") }}"
class="nav-link {% if page_id == "search" %}active{% endif %}"
>{{ _("Search") }}</a>
</li>
</ul>
{% if page_id == "search" %}
<p>
<form action="{{ url_for("search") }}" method="get" class="form-inline" id="search-form">
<div class="input-group">
<input type="search" class="form-control" placeholder="{{ _("Search...") }}"
name="q" value="{% if search_query %}{{ search_query }}{% endif %}" />
<span class="input-group-btn">
<button type="submit" class="btn btn-default">
<span class="fa fa-search" aria-hidden="true"></span>
</button>
</span>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="duo"
{% if duo %}checked{% endif %}>
{{ _("Duets") }}
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" name="karaoke"
{% if karaoke %}checked{% endif %}>
{{ _("No voice") }}
</label>
</div>
</form>
</p>
<form action="{{ url_for("search") }}" method="get" id="search-form" class="mb-4">
<div class="form-group">
<input type="search" class="form-control" placeholder="{{ _("Artist, title, genre, language, ...") }}"
name="q" value="{% if search_query %}{{ search_query }}{% endif %}" autofocus>
</div>
<div class="form-group form-check">
<input type="checkbox" name="duo" id="duo" class="form-check-input"
{% if duo %}checked{% endif %}>
<label for="duo" class="form-check-label">{{ _("Duets") }}</label>
</div>
<div class="form-group form-check">
<input type="checkbox" name="karaoke" id="karaoke" class="form-check-input"
{% if karaoke %}checked{% endif %}>
<label for="karaoke" class="form-check-label">{{ _("No voice") }}</label>
</div>
<button type="submit" class="btn btn-primary">
<span class="fa fa-search mr-1" aria-hidden="true"></span>
{{ _("Search...") }}
</button>
</form>
{% endif %}
<ul id="songlist" class="list-group"
......@@ -54,4 +50,5 @@
</div>
</ul>
{% endblock %}
......@@ -2,9 +2,8 @@
{% block songlist %}
{% for song in songs %}
<li class="list-group-item">
<div class="row">
<div class="song-info col-xs-9 col-sm-10 col-lg-11">
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="song-info">
<div class="song-cover">
{% if song.image %}
<img src="{{ url_for('static', filename=covers_dir+'/'+song.image) }}" />
......@@ -15,13 +14,12 @@
<p class="song-title">{{ song.title }}</p>
</div>
</div>
<ul class="song-tags list-unstyled text-muted col-xs-3 col-sm-2 col-lg-1">
<ul class="song-tags list-unstyled text-muted ml-auto">
{% if song.genre %}<li><span class="fa fa-tag"></span> {{ song.genre.name }}</li>{% endif %}
{% if song.language %}<li><span class="fa fa-flag"></span> {{ song.language }}</li>{% endif %}
{% if song.duo %}<li><span class="fa fa-users"></span> {{ _("Duet") }}</li>{% endif %}
{% if song.has_karaoke %}<li><span class="fa fa-music"></span> {{ _("Karaoke") }}</li>{% endif %}
</ul>
</div>
</li>
{% endfor %}
{% endblock %}
This diff is collapsed.
......@@ -21,4 +21,6 @@ commands =
[flake8]
show-source = True
max-line-length = 88
ignore = E203
exclude = .git,.tox,dist,*egg,doc,assurancetourix/migrations