Changes the appearance of the index pages dramatically

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('',
+    else:
-        album_info=album_info,
+        searchresult = []
-        song_info=song_info
+
+    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

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{
+.search-bar{
-    background-color: lch(80% 25 79);
     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{
+.sort-box.category h2{
-    color: white;
-    border-style: solid;
-    border-color: lch(25% 40 45);
     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{
+.entry-box{
-    display: flex;
-    flex: initial;
-    flex-direction: column;
-    padding-left: 0;
-}
-
-.motif-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);
+    background: var(--light-box);
-    display: flex;
-    flex: auto;
     justify-content: center;
 }
 
-.motif-box span{
+.entry-box.song li{
-    color: white;
+    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{
+.entry-box.motif::before{
-    content: "T";
+    content: "b";
-    margin-right: 2rem;
+    min-width: 2rem;
     visibility: hidden;
+    margin-right: auto;
 }
 
 .motif-name{
     text-align: center;
-    margin: auto;
 }
 
-.motif-count{
+.clip-count{
-    position: absolute, right;
+    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;
 }

templates/base.html

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

templates/motifindex.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 %}
+                    </li>
-                    <span class="motif-count">x{{ count }}</span>
+                    {% if count %}<span class="clip-count">x{{ count }}</span>{% endif %}
-                    {% endif %}
+                </a>
-                </li></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>
-                </li></a>
+                    {% if count %}<span class="clip-count"> x{{ count }} {% endif %}</span>
+                </a>
             {% endfor %}
         </ul>
     </div>

templates/nav.html

@@ -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>
-
+    </div>
-</header>
+</div>
-

templates/searchresults.html

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

templates/song.html

@@ -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 %})
+<div class="title-box">
-</h1>
+    <h1>{{ name }}</h1>
+    {% for track, _, _, album_code in album_info %}
+        {{ album_code }}{% if not loop.last %}, {% endif %}
+    {% endfor %}
+</div>
 
 <!-- Artist info -->
 
-<h2>Artist:  </h2>
+<div class="track-info">
-<ul>
+    <div class="songpage-artist">
-{% for name, name_rm, credit in artist_info %}
+        <h2 >Artist:  </h2>
+        <ul>
+        {% for name, name_rm, credit in artist_info %}
             <li>{{ name_rm }} ({{ name }}): {{ credit }}</li>
-{% endfor %}
+        {% endfor %}
-</ul>
+        </ul>
+    </div>
 
 <!-- Album info -->
 
-<h2>Album: </h2>
+    <div class="songpage-album">
-<ul>
+        <h2>Album: </h2>
-{% for album_id, track, album_name, album_code in album_info %}
+        <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 %}
+        {% endfor %}
-</ul>
+        </ul>
-
+    </div>
-<!-- Clips -->
+<!-- Motifs -->
-
+    <div class="songpage-motifs">
-<h2>Clips: </h2>
+        <h2>Motifs Used: </h2>
-<ul>
+        <ul>
-{% for song_id, motif_id, motif in clip_info %}
+        {% 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 %}
+        {% endfor %}
-</ul>
+        </ul>
+    </div>
+</div>
 {% endblock %}

templates/songindex.html

@@ -6,19 +6,35 @@
 
 {% block content %}
 <section class="album-list">
-    {% for album_id, name, date in album_info %}
+    {% for album_id, name, date, code in album_info %}
-    <div class="album-box">
+    <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 %}
+                            {% if name_jp %}<span class="track-name-jp">{{ name_jp }}</span>{% endif %}
-                    <span class="track-name-jp">{{ name_jp }}</span>
+                        </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>