develops the css to add song and motif boxes

app.py

@@ -47,13 +47,17 @@ def songindex():
 
     song_info = db.execute('''
     select
-        song_id, album_id, track, song.name, song.name_jp
+        song_album.song_id, album_id, track, song.name, song.name_jp, count(clip.song_id)
     from
         song_album
     join
         song
     on
         song_album.song_id=song.id
+    left join
+        clip on clip.song_id=song.id
+    group by
+        song_album.song_id, album_id, track, song.name, song.name_jp
     order by
         album_id,
         track
@@ -73,18 +77,30 @@ def motifindex():
 
     category_info = db.execute('''
     select
-        id, name
+        category.id, category.name
     from
         category
+    join
+        motif
+    on
+        category.id=motif.category
+    group by
+        category.id, category.name
     order by
-        id
+        count(category.id) desc
     ''').fetchall()
 
     motif_info = db.execute('''
     select
-        id, name, category
+        id, name, category, count(clip.motif_id)
     from
         motif
+    left join
+        clip
+    on
+        clip.motif_id=motif.id
+    group by
+        id, name, category
     order by
         id
     ''').fetchall()

static/style.css

@@ -1,2 +1,171 @@
-body{max-width:50rem;margin-left:auto;margin-right:auto;}
-nav{}
+/* body{
+    max-width:50rem;margin-left:auto;margin-right:auto;
+} */
+
+body{
+    margin: 0;
+}
+
+header{
+    background-color: lch(80% 25 79);
+    margin: 0;
+    border-style: outset;
+}
+
+.top-buttons{
+    display: flex;
+    padding-left: 0;
+    margin: 0;
+    padding: 2rem;
+    column-gap: 1rem;
+
+}
+.top-buttons li{
+    flex: auto;
+    border-style: outset;
+    list-style: none;
+    text-align: center;
+}
+
+.top-buttons li:nth-child(2){
+    flex: none;
+}
+
+main{
+    background-color: lch(80% 25 79);
+    max-width: 50rem;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+main ul{
+    margin: 0;
+}
+
+h1{
+    margin: 0;
+}
+
+h2{
+    margin: 0;
+}
+
+a{
+    text-decoration: none;
+}
+
+.album-list{
+    display: flex;
+    flex-direction: column;
+    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%;
+    gap: 1rem;
+}
+
+.category-box{
+    gap: 1rem;
+    margin-left: auto;
+    margin-right: auto;
+    width: 24rem;
+}
+
+.category-box h2{
+    color: white;
+    border-style: solid;
+    border-color: lch(25% 40 45);
+    margin: 1rem;
+    margin-bottom: 0px;
+    background: lch(25% 40 45);
+}
+
+.category-box ul{
+    display: flex;
+    flex: initial;
+    flex-direction: column;
+    padding-left: 0;
+}
+
+.motif-box{
+    list-style: none;
+    min-height: 1.5rem;
+    margin: 1rem;
+    margin-bottom: 0;
+    background: lch(25% 40 45);
+    display: flex;
+    flex: auto;
+    justify-content: right;
+}
+
+.motif-box span{
+    color: white;
+    vertical-align: middle;
+
+}
+
+.motif-name{
+    margin: auto;
+}
+
+.motif-count{
+
+}

templates/album.html

@@ -1,4 +1,4 @@
-{% extends "nav.html" %}
+{% extends "base.html" %}
 {% block title %}{{ album_info[0] }}{% endblock %}
 
 {% block content %}

templates/base.html

@@ -2,7 +2,7 @@
 <html lang="en">
     <head>
         <meta charset="utf-8" />
-        <title>{% block title %}{% endblock %} - Eorzea Songbook</title>
+        <title>{% block title required %}{% endblock %} - Eorzea Songbook</title>
         <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1" />
         <meta name="description" content="Listen to the motifs of Final Fantasy XIV's soundtrack." />
         <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
@@ -10,7 +10,9 @@
     </head>
   
     <body>
-    {% block basecontent %}{% endblock %}
+        {% block nav %}{% include 'nav.html' %}{% endblock %}
+        <main>{% block content required %}{% endblock %}</main>
+        {% block footer %}{% include 'footer.html' %}{% endblock %}
     
 
     </body>

templates/footer.html

@@ -0,0 +1,9 @@
+{% block footer %}
+
+<footer>
+
+    <p> The footer will be in here, when it's ready. </p>
+    
+</footer>
+
+{% endblock footer %}

templates/home.html

@@ -1,7 +1,7 @@
-{% extends "base.html" %}
+{% extends 'base.html' %}
 {% block title %}Home{% endblock %}
-
-{% block basecontent %}
+{% block nav %}{% endblock %}
+{% block content %}
 
 <h1>The Eorzea Songbook</h1>
 
@@ -9,4 +9,5 @@
 
 <a href="{{ url_for('motifindex') }}">View Motifs</a>
 
+{% block footer %}{% endblock %}
 {% endblock %}

templates/motif.html

@@ -1,4 +1,4 @@
-{% extends "nav.html" %}
+{% extends "base.html" %}
 
 {% block title %}{{ name }}{% endblock %}
 

templates/motifindex.html

@@ -1,22 +1,35 @@
-{% extends "nav.html" %}
+{% extends 'base.html' %}
 {% block title %}Motif Index{% endblock %}
 
 {% block content %}
-
-{% for category_id, name in category_info %}
-<h2>{{ name }}</h2>
-<ul>
-    {% for motif_id, motif, category in motif_info if category == category_id %}
-        <li><a href="{{ url_for('motifpage', id=motif_id) }}">{{ motif }}</a></li>
-    {% endfor %}
-</ul>
+<section class="category-list">
+    {% for category_id, name in category_info %}
+    <div class="category-box">
+        <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">
+                    <span class="motif-name">{{ motif }}</span>
+                    {% if count %}
+                    <span class="motif-count">x{{ count }}</span>
+                    {% endif %}
+                </li></a>
+            {% endfor %}
+        </ul>
+    </div>
 {% endfor %}
 
-<h2>Misc.</h2>
-<ul>
-{% for motif_id, motif, category in motif_info if category == '' %}
-    <li><a href="{{ url_for('motifpage', id=motif_id) }}">{{ motif }}</a></li>
-{% endfor %}
-</ul>
+    <div class="category-box">
+        <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">
+                    <span class="motif-name">{{ motif }}</span>
+                    <span class="motif-count">{% if count %} x{{ count }} {% endif %}</span>
+                </li></a>
+            {% endfor %}
+        </ul>
+    </div>
 
+</section>
 {% endblock %}

templates/nav.html

@@ -1,10 +1,8 @@
-{% extends "base.html" %}
-
-{% block basecontent %}
+{% block navheader %}
 
 <header>
     <nav>
-        <ul>
+        <ul class="top-buttons">
             <li><a href="{{ url_for('songindex') }}">Songs</a></li>
             <li><a href="{{ url_for('homepage') }}">Home</a></li>
             <li><a href="{{ url_for('motifindex') }}">Motifs</a></li>
@@ -12,12 +10,4 @@
     </nav>
 </header>
 
-{% block content %}{% endblock %}
-
-<footer>
-
-<p> The footer will be in here, when it's ready. </p>
-
-</footer>
-
-{% endblock basecontent %}
+{% endblock %}

templates/song.html

@@ -1,4 +1,4 @@
-{% extends "nav.html" %}
+{% extends "base.html" %}
 {% block title %}{{ name }}{% endblock %}
 
 {% block content %}
@@ -7,7 +7,7 @@
 
 <!-- Artist info -->
 
-<p>Artist:  </p>
+<h2>Artist:  </h2>
 <ul>
 {% for name, name_rm, credit in artist_info %}
     <li>{{ name_rm }} ({{ name }}): {{ credit }}</li>
@@ -16,7 +16,7 @@
 
 <!-- Album info -->
 
-<p>Album: </p>
+<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>
@@ -25,7 +25,7 @@
 
 <!-- Clips -->
 
-<p>Clips: </p>
+<h2>Clips: </h2>
 <ul>
 {% for song_id, motif_id, motif in clip_info %}
     <li>

templates/songindex.html

@@ -1,15 +1,28 @@
-{% extends "nav.html" %}
+{% extends 'base.html' %}
+
+
+
 {% block title %}Song Index{% endblock %}
 
 {% block content %}
-
-{% for album_id, name, date in album_info %}
-<h2>{{ name }}</h2>
-<ul>
-    {% for song_id, album, track, name, name_jp in song_info if album_id == album %}
-        <li><a href="{{ url_for('songpage', id=song_id) }}">#{{ track }}: {{name}} / {{name_jp}}</li></a>
+<section class="album-list">
+    {% for album_id, name, date in album_info %}
+    <div class="album-box">
+        <h2>{{ name }}</h2>
+        <ul>
+            {% 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">
+                    <span class="track-number">#{{ track }}: </span>
+                    <span class="track-name">{{ name }}</span>
+                    {% if name_jp %}
+                    <span class="track-name-jp">{{ name_jp }}</span>
+                    {% endif %}
+                    <span class="clip-count">{% if count > 0 %} x{{ count }} {% endif %}</span>
+                </li></a>
+            {% endfor %}
+        </ul>
+    </div>
     {% endfor %}
-</ul>
-{% endfor %}
+</section>
 
 {% endblock %}