Changes the appearance of the index pages dramatically
This commit is contained in:
Effie
parent
90a4e3c8f3
commit
03df74d985
30
app.py
30
app.py
@ -34,9 +34,10 @@ def searchpage():
|
||||
|
||||
searchargs = flask.request.args['q']
|
||||
|
||||
if searchargs:
|
||||
searchresult = db.execute('''
|
||||
select
|
||||
'song', id, name
|
||||
'song', id, name, instr(lower(name),lower(?))
|
||||
from
|
||||
song
|
||||
where
|
||||
@ -45,20 +46,35 @@ def searchpage():
|
||||
'%' || ? || '%'
|
||||
union all
|
||||
select
|
||||
'album', id, name
|
||||
'album', id, name, instr(lower(name),lower(?))
|
||||
from
|
||||
album
|
||||
where
|
||||
name
|
||||
like
|
||||
'%' || ? || '%'
|
||||
union all
|
||||
select
|
||||
'motif', id, name, instr(lower(name),lower(?))
|
||||
from
|
||||
motif
|
||||
where
|
||||
name
|
||||
like
|
||||
'%' || ? || '%'
|
||||
order by
|
||||
4
|
||||
limit
|
||||
10
|
||||
''',
|
||||
(searchargs,searchargs)
|
||||
(searchargs,)*6
|
||||
).fetchall()
|
||||
|
||||
return flask.render_template('',
|
||||
album_info=album_info,
|
||||
song_info=song_info
|
||||
else:
|
||||
searchresult = []
|
||||
|
||||
return flask.render_template('searchresults.html',
|
||||
searchresult=searchresult
|
||||
)
|
||||
|
||||
|
||||
@ -79,7 +95,7 @@ def songindex():
|
||||
|
||||
album_info = db.execute('''
|
||||
select
|
||||
id, name, date
|
||||
id, name, date, code
|
||||
from
|
||||
album
|
||||
order by
|
||||
|
||||
342
static/style.css
342
static/style.css
@ -2,14 +2,38 @@
|
||||
max-width:50rem;margin-left:auto;margin-right:auto;
|
||||
} */
|
||||
|
||||
:root{
|
||||
--light-block: lch(90% 25 85);
|
||||
--light-box: lch(100% 0 90);
|
||||
--light-back: linear-gradient(90deg, lch(95% 20 260), white 25%, white 75%, lch(95% 20 260));
|
||||
--light-border: lch(80% 45 85);
|
||||
}
|
||||
|
||||
body{
|
||||
margin: 0;
|
||||
background: var(--light-back);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
header{
|
||||
background-color: lch(80% 25 79);
|
||||
background-color: var(--light-block);
|
||||
margin: 0;
|
||||
border-style: outset;
|
||||
border-top: 0; border-left: 0; border-right: 0;
|
||||
border-color: var(--light-border);
|
||||
}
|
||||
|
||||
footer{
|
||||
background-color: var(--light-block);
|
||||
border-style: outset;
|
||||
border-bottom: 0; border-left: 0; border-right: 0;
|
||||
border-color: var(--light-border);
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
.top-buttons{
|
||||
@ -23,6 +47,7 @@ header{
|
||||
.top-buttons li{
|
||||
flex: auto;
|
||||
border-style: outset;
|
||||
border-color: var(--light-border);
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
@ -31,15 +56,69 @@ header{
|
||||
flex: none;
|
||||
}
|
||||
|
||||
main{
|
||||
background-color: lch(80% 25 79);
|
||||
.search-bar{
|
||||
max-width: 50rem;
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background-color: var(--light-block);
|
||||
border-style: outset;
|
||||
border-top: 0;
|
||||
border-color: var(--light-border);
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-items{
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.search-items input{
|
||||
all: unset;
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
#search-results{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: auto;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#search-results h2{
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
#search-results ul{
|
||||
background-color: white;
|
||||
padding-left: 0;
|
||||
margin-top: 0;
|
||||
list-style: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
main{
|
||||
background-color: var(--light-block);
|
||||
max-width: 50rem;
|
||||
width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
main ul{
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
h1{
|
||||
@ -60,121 +139,214 @@ a{
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.album-box{
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.album-box h2{
|
||||
color: white;
|
||||
border-style: solid;
|
||||
border-color: lch(25% 40 45);
|
||||
margin: 1rem;
|
||||
margin-bottom: 0px;
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
background: lch(25% 40 45);
|
||||
}
|
||||
|
||||
.album-box ul{
|
||||
display: flex;
|
||||
flex: auto;
|
||||
flex-direction: column;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.song-box{
|
||||
list-style: none;
|
||||
min-height: 1.5rem;
|
||||
margin: 1rem;
|
||||
margin-bottom: 0;
|
||||
margin-left: 4rem;
|
||||
background: lch(25% 40 45);
|
||||
display: flex;
|
||||
flex: auto;
|
||||
flex-wrap: wrap;
|
||||
justify-content: left;
|
||||
column-gap: 1rem;
|
||||
align-content: bottom;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.song-box span{
|
||||
color: white;
|
||||
text-align: bottom;
|
||||
}
|
||||
|
||||
.track-name-jp{
|
||||
|
||||
}
|
||||
|
||||
.clip-count{
|
||||
margin-left: auto;
|
||||
min-width: 2rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.category-list{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: flex-start;
|
||||
flex-basis: 51%;
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.album-info{
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
border-style: solid;
|
||||
border-color: var(--light-box);
|
||||
margin: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
background: var(--light-box);
|
||||
position: sticky;
|
||||
top: 0px;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.category-box{
|
||||
.sort-box h2{
|
||||
color: black;
|
||||
}
|
||||
|
||||
.sort-box.album{
|
||||
gap: 1rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.sort-box.category{
|
||||
gap: 1rem;
|
||||
margin-left: auto; margin-right: auto;
|
||||
width: 24rem;
|
||||
}
|
||||
|
||||
.category-box h2{
|
||||
color: white;
|
||||
border-style: solid;
|
||||
border-color: lch(25% 40 45);
|
||||
.sort-box.category h2{
|
||||
margin: 1rem;
|
||||
margin-bottom: 0px;
|
||||
background: lch(25% 40 45);
|
||||
border-style: solid;
|
||||
border-color: var(--light-box);
|
||||
background: var(--light-box);
|
||||
}
|
||||
|
||||
.category-box ul{
|
||||
display: flex;
|
||||
flex: initial;
|
||||
flex-direction: column;
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.motif-box{
|
||||
.entry-box{
|
||||
list-style: none;
|
||||
min-height: 1.5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.entry-box.song{
|
||||
margin-top: 0.5rem; margin-bottom: 0.5rem; margin-left: 4rem; margin-right: 1rem;
|
||||
}
|
||||
|
||||
.entry-box.motif{
|
||||
margin: 1rem;
|
||||
margin-bottom: 0;
|
||||
background: lch(25% 40 45);
|
||||
display: flex;
|
||||
flex: auto;
|
||||
background: var(--light-box);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.motif-box span{
|
||||
color: white;
|
||||
.entry-box.song li{
|
||||
display: flex;
|
||||
flex: auto;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: left;
|
||||
column-gap: 1rem;
|
||||
align-content: bottom;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
.entry-box.song span{
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.entry-box.song.full{
|
||||
background: var(--light-box);
|
||||
}
|
||||
|
||||
.entry-box.song.empty{
|
||||
margin-top: 0; margin-bottom: 0;
|
||||
}
|
||||
|
||||
.entry-box.song.full li span{
|
||||
color: black;
|
||||
}
|
||||
|
||||
.entry-box.song.empty li span{
|
||||
color: gray;
|
||||
}
|
||||
|
||||
.entry-box.motif span{
|
||||
color: black;
|
||||
vertical-align: middle;
|
||||
|
||||
}
|
||||
|
||||
.motif-name::before{
|
||||
content: "T";
|
||||
margin-right: 2rem;
|
||||
.entry-box.motif::before{
|
||||
content: "b";
|
||||
min-width: 2rem;
|
||||
visibility: hidden;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.motif-name{
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.motif-count{
|
||||
position: absolute, right;
|
||||
.clip-count{
|
||||
color: black;
|
||||
flex-wrap: nowrap;
|
||||
display: inline;
|
||||
border-left-style: solid;
|
||||
align-self: center;
|
||||
margin-left: auto;
|
||||
min-width: 2rem;
|
||||
text-align: right;
|
||||
width: 2rem;
|
||||
}
|
||||
|
||||
.sort-box.album label{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.collapse{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sort-list{
|
||||
visibility: collapse;
|
||||
}
|
||||
|
||||
.collapse:checked ~ .sort-list{
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.title-box{
|
||||
margin: 1rem;
|
||||
margin-bottom: 0px;
|
||||
border-style: solid;
|
||||
border-color: var(--light-box);
|
||||
background: var(--light-box);
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.title-box h1{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.track-info{
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.track-info li{
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.songpage-artist{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 23rem;
|
||||
margin-left: 2rem; margin-right: auto;
|
||||
}
|
||||
|
||||
.songpage-album{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 23rem;
|
||||
margin-left: 2rem; margin-right: auto;
|
||||
}
|
||||
|
||||
.songpage-motifs{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
.songpage-motifs h2{
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.songpage-clip{
|
||||
margin-top: 1rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap-reverse;
|
||||
column-gap: 2rem;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.songpage-clip audio{
|
||||
|
||||
}
|
||||
|
||||
.songpage-clip::before{
|
||||
/* content: "";
|
||||
visibility: hidden;
|
||||
width: 15%; */
|
||||
}
|
||||
|
||||
.motif-pointer{
|
||||
width: 12rem;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
@ -11,10 +11,10 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
{% block nav %}{% include 'nav.html' %}{% endblock %}
|
||||
<main>{% block content required %}{% endblock %}</main>
|
||||
{% block footer %}{% include 'footer.html' %}{% endblock %}
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -4,29 +4,31 @@
|
||||
{% block content %}
|
||||
<section class="category-list">
|
||||
{% for category_id, name in category_info %}
|
||||
<div class="category-box">
|
||||
<div class="sort-box category">
|
||||
<h2>{{ name }}</h2>
|
||||
<ul>
|
||||
{% for motif_id, motif, category, count in motif_info if category == category_id %}
|
||||
<a href="{{ url_for('motifpage', id=motif_id) }}"><li class="motif-box">
|
||||
<a href="{{ url_for('motifpage', id=motif_id) }}" class="entry-box motif">
|
||||
<li>
|
||||
<span class="motif-name">{{ motif }}</span>
|
||||
{% if count %}
|
||||
<span class="motif-count">x{{ count }}</span>
|
||||
{% endif %}
|
||||
</li></a>
|
||||
</li>
|
||||
{% if count %}<span class="clip-count">x{{ count }}</span>{% endif %}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
<div class="category-box">
|
||||
<div class="sort-box category">
|
||||
<h2>Misc.</h2>
|
||||
<ul>
|
||||
{% for motif_id, motif, category, count in motif_info if category == '' %}
|
||||
<a href="{{ url_for('motifpage', id=motif_id) }}"><li class="motif-box">
|
||||
<a href="{{ url_for('motifpage', id=motif_id) }}" class="entry-box motif">
|
||||
<li>
|
||||
<span class="motif-name">{{ motif }}</span>
|
||||
<span class="motif-count">{% if count %} x{{ count }} {% endif %}</span>
|
||||
</li></a>
|
||||
</li>
|
||||
{% if count %}<span class="clip-count"> x{{ count }} {% endif %}</span>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -6,15 +6,19 @@
|
||||
<li><a href="{{ url_for('motifindex') }}">Motifs</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
<div class="search-bar">
|
||||
<div class="search-items">
|
||||
<input
|
||||
type="search"
|
||||
name="q"
|
||||
autocomplete="off"
|
||||
placeholder="Search..."
|
||||
hx-get="/search"
|
||||
hx-trigger="search"
|
||||
hx-trigger="keyup changed delay:500ms, search"
|
||||
hx-target="#search-results"
|
||||
/>
|
||||
<div id="search-results"></div>
|
||||
|
||||
</header>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -0,0 +1,12 @@
|
||||
<h2>Search Results:</h2>
|
||||
<ul>
|
||||
{% for desc, id, name, _ in searchresult %}
|
||||
{% if desc == 'song' %}
|
||||
<li><a href="{{ url_for('songpage', id=id) }}">Song: {{ name }} </a></li>
|
||||
{% elif desc == 'album' %}
|
||||
<li><a href="{{ url_for('albumpage', id=id) }}">Album: {{ name }} </a></li>
|
||||
{% elif desc == 'motif' %}
|
||||
<li><a href="{{ url_for('motifpage', id=id) }}">Motif: {{ name }} </a></li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
@ -2,39 +2,49 @@
|
||||
{% block title %}{{ name }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<h1>Now Playing: {{ id }}. {{ name }} ({% for _, _, _, album_code in album_info %}{{ album_code }}{% if not loop.last %}, {% endif %}{% endfor %})
|
||||
</h1>
|
||||
<div class="title-box">
|
||||
<h1>{{ name }}</h1>
|
||||
{% for track, _, _, album_code in album_info %}
|
||||
{{ album_code }}{% if not loop.last %}, {% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<!-- Artist info -->
|
||||
|
||||
<div class="track-info">
|
||||
<div class="songpage-artist">
|
||||
<h2 >Artist: </h2>
|
||||
<ul>
|
||||
{% for name, name_rm, credit in artist_info %}
|
||||
<li>{{ name_rm }} ({{ name }}): {{ credit }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Album info -->
|
||||
|
||||
<div class="songpage-album">
|
||||
<h2>Album: </h2>
|
||||
<ul>
|
||||
{% for album_id, track, album_name, album_code in album_info %}
|
||||
<li><a href="{{ url_for('albumpage', id=album_id) }}">{{ album_name }}</a> #{{ track }}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
<!-- Clips -->
|
||||
|
||||
<h2>Clips: </h2>
|
||||
</div>
|
||||
<!-- Motifs -->
|
||||
<div class="songpage-motifs">
|
||||
<h2>Motifs Used: </h2>
|
||||
<ul>
|
||||
{% for song_id, motif_id, motif in clip_info %}
|
||||
<li>
|
||||
<li class="songpage-clip">
|
||||
<audio
|
||||
controls
|
||||
src = "{{ url_for('static', filename='clip/') }}{{ '%04d' % song_id }}-{{ '%03d' % motif_id }}.flac" type="audio/flac">
|
||||
</audio>
|
||||
<a href = "{{ url_for('motifpage', id=motif_id) }}"> {{ motif }} </a>
|
||||
<span class="motif-pointer"><a href = "{{ url_for('motifpage', id=motif_id) }}"> {{ motif }} </a></span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@ -6,19 +6,35 @@
|
||||
|
||||
{% block content %}
|
||||
<section class="album-list">
|
||||
{% for album_id, name, date in album_info %}
|
||||
<div class="album-box">
|
||||
{% for album_id, name, date, code in album_info %}
|
||||
<div class="sort-box album">
|
||||
<input type="radio" name="album" id="{{ code }}" class="collapse">
|
||||
<label for="{{ code }}" class="album-info">
|
||||
<h2>{{ name }}</h2>
|
||||
<ul>
|
||||
<span class="code">{{ code }}</span>
|
||||
<span class="date">Released: {{ date }}</span>
|
||||
|
||||
</label>
|
||||
<ul class="sort-list">
|
||||
{% for song_id, album, track, name, name_jp, count in song_info if album_id == album %}
|
||||
<a href="{{ url_for('songpage', id=song_id) }}"><li class="song-box">
|
||||
{% if count > 0 %}
|
||||
<a href="{{ url_for('songpage', id=song_id) }}" class="entry-box song full">
|
||||
<li>
|
||||
<span class="track-number">#{{ track }}: </span>
|
||||
<span class="track-name">{{ name }}</span>
|
||||
{% if name_jp %}
|
||||
<span class="track-name-jp">{{ name_jp }}</span>
|
||||
{% if name_jp %}<span class="track-name-jp">{{ name_jp }}</span>{% endif %}
|
||||
</li>
|
||||
<span class="clip-count"> x{{ count }} </span>
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="{{ url_for('songpage', id=song_id) }}" class="entry-box song empty">
|
||||
<li>
|
||||
<span class="track-number">#{{ track }}: </span>
|
||||
<span class="track-name">{{ name }}</span>
|
||||
{% if name_jp %}<span class="track-name-jp">{{ name_jp }}</span>{% endif %}
|
||||
</li>
|
||||
</a>
|
||||
{% endif %}
|
||||
<span class="clip-count">{% if count > 0 %} x{{ count }} {% endif %}</span>
|
||||
</li></a>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user