Initial work on mobile navbar

diff --git a/src/littlesongplace/db.py b/src/littlesongplace/db.py
index 4a2d48983a4338c4ce790b89253bb20902549f68..16b4107f5a272325556e0ea9973c286f376984d6 100644 (file)
--- a/src/littlesongplace/db.py
+++ b/src/littlesongplace/db.py
@@ -21,8 +21,10 @@ def get():
         # Run update script if DB is out of date
         schema_update_script = Path(current_app.root_path) / 'sql' / 'schema_update.sql'
         if user_version < DB_VERSION and schema_update_script.exists():
+            current_app.logger.info(f"Expected schema {DB_VERSION}, have {user_version}.  Updating DB...")
             with current_app.open_resource(schema_update_script, mode='r') as f:
                 db.cursor().executescript(f.read())
+            current_app.logger.info(f"DB updated successfully")
             db.commit()
     return db
 

diff --git a/src/littlesongplace/static/mingcute--guitar-fill.svg b/src/littlesongplace/static/mingcute--guitar-fill.svg
new file mode 100644 (file)
index 0000000..d96627b
--- /dev/null
+++ b/src/littlesongplace/static/mingcute--guitar-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M16.848 2.395a1 1 0 0 1 1.108-.227l.111.056l.866.5a1 1 0 0 1 .488 1.02l-.026.12l-.567 1.983a1 1 0 0 1-1.344.649l-.118-.058l-1.534 2.656c.92.721 1.369 1.493 1.674 2.213c.223.523.414 1.205.306 1.939c-.105.712-.477 1.362-1.14 1.888l-.189.14c-.432.304-.46.56-.358.983l.174.65c.173.69.339 1.7.033 2.857c-.276 1.043-.943 1.865-1.7 2.411c-.745.538-1.666.871-2.538.826c-1.36-.07-2.749-.41-4.594-1.475s-2.834-2.098-3.574-3.24c-.475-.733-.647-1.698-.554-2.612c.094-.928.473-1.917 1.238-2.677c.784-.779 1.66-1.147 2.328-1.352l.315-.091l.272-.07c.524-.134.799-.233.88-.73l.017-.134c.085-.951.478-1.677 1.093-2.165c.58-.46 1.268-.635 1.832-.704c.712-.087 1.521-.092 2.486.243l.267.1l1.534-2.656a1 1 0 0 1-.303-1.462l.084-.1zm-6.78 13.685a1 1 0 0 0-1.099 1.668l.098.064l.866.5a1 1 0 0 0 1.098-1.668l-.098-.064l-.866-.5Zm.633-3.098a1.5 1.5 0 0 0 2.515 1.63l.083-.13a1.5 1.5 0 0 0-2.598-1.5"/></g></svg>
\ No newline at end of file

diff --git a/src/littlesongplace/static/mingcute--happy-fill.svg b/src/littlesongplace/static/mingcute--happy-fill.svg
new file mode 100644 (file)
index 0000000..079f953
--- /dev/null
+++ b/src/littlesongplace/static/mingcute--happy-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10S2 17.523 2 12S6.477 2 12 2m1.984 12.25c-.53.468-1.223.75-1.984.75a3 3 0 0 1-1.984-.75a1 1 0 1 0-1.324 1.5A5 5 0 0 0 12 17a4.98 4.98 0 0 0 3.308-1.25a1 1 0 0 0-1.324-1.5M8.5 8c-1.087 0-1.958.68-2.394 1.552a1 1 0 0 0 1.73.997l.058-.101c.162-.324.41-.448.606-.448c.17 0 .382.095.541.336l.065.112a1 1 0 0 0 1.788-.896C10.457 8.68 9.587 8 8.5 8m7 0c-1.087 0-1.957.68-2.394 1.552a1 1 0 0 0 1.73.997l.058-.101c.162-.324.41-.448.606-.448c.17 0 .382.095.541.336l.065.112a1 1 0 1 0 1.788-.896C17.458 8.68 16.587 8 15.5 8"/></g></svg>
\ No newline at end of file

diff --git a/src/littlesongplace/static/mingcute--music-fill.svg b/src/littlesongplace/static/mingcute--music-fill.svg
new file mode 100644 (file)
index 0000000..14c66cc
--- /dev/null
+++ b/src/littlesongplace/static/mingcute--music-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none" fill-rule="evenodd"><path d="m12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035q-.016-.005-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093q.019.005.029-.008l.004-.014l-.034-.614q-.005-.018-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M18.671 3.208A2 2 0 0 1 21 5.18V17a4 4 0 1 1-2-3.465V9.18L9 10.847V18q0 .09-.015.174A3.5 3.5 0 1 1 7 15.337v-8.49a2 2 0 0 1 1.671-1.973zM9 8.82l10-1.667V5.18L9 6.847z"/></g></svg>
\ No newline at end of file

diff --git a/src/littlesongplace/static/mingcute--notification-fill.svg b/src/littlesongplace/static/mingcute--notification-fill.svg
new file mode 100644 (file)
index 0000000..43addc9
--- /dev/null
+++ b/src/littlesongplace/static/mingcute--notification-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M12 2a7 7 0 0 0-7 7v3.528a1 1 0 0 1-.105.447l-1.717 3.433A1.1 1.1 0 0 0 4.162 18h15.676a1.1 1.1 0 0 0 .984-1.592l-1.716-3.433a1 1 0 0 1-.106-.447V9a7 7 0 0 0-7-7m0 19a3 3 0 0 1-2.83-2h5.66A3 3 0 0 1 12 21"/></g></svg>
\ No newline at end of file

diff --git a/src/littlesongplace/static/mingcute--notification-newdot-fill.svg b/src/littlesongplace/static/mingcute--notification-newdot-fill.svg
new file mode 100644 (file)
index 0000000..308e1cc
--- /dev/null
+++ b/src/littlesongplace/static/mingcute--notification-newdot-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><g fill="none"><path d="m12.594 23.258l-.012.002l-.071.035l-.02.004l-.014-.004l-.071-.036q-.016-.004-.024.006l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427q-.004-.016-.016-.018m.264-.113l-.014.002l-.184.093l-.01.01l-.003.011l.018.43l.005.012l.008.008l.201.092q.019.005.029-.008l.004-.014l-.034-.614q-.005-.019-.02-.022m-.715.002a.02.02 0 0 0-.027.006l-.006.014l-.034.614q.001.018.017.024l.015-.002l.201-.093l.01-.008l.003-.011l.018-.43l-.003-.012l-.01-.01z"/><path fill="currentColor" d="M12 2a7 7 0 0 1 2.263.374a4.5 4.5 0 0 0 4.5 7.447L19 9.743v2.784a1 1 0 0 0 .06.34l.046.107l1.716 3.433a1.1 1.1 0 0 1-.869 1.586l-.115.006H4.162a1.1 1.1 0 0 1-1.03-1.487l.046-.105l1.717-3.433a1 1 0 0 0 .098-.331L5 12.528V9a7 7 0 0 1 7-7m5.5 1a2.5 2.5 0 1 1 0 5a2.5 2.5 0 0 1 0-5M12 21a3 3 0 0 1-2.83-2h5.66A3 3 0 0 1 12 21"/></g></svg>
\ No newline at end of file

diff --git a/src/littlesongplace/static/styles.css b/src/littlesongplace/static/styles.css
index b44642695fde24ae22fdda70c7b20bcbb093ee5b..f6791d951d1654a3c0e46dcf4301584115d93081 100644 (file)
--- a/src/littlesongplace/static/styles.css
+++ b/src/littlesongplace/static/styles.css
@@ -257,7 +257,7 @@ input[type=range]::-moz-range-thumb {
     cursor: pointer;
 }
 
-/* Navbar */
+/* Desktop Navbar */
 div.navbar {
     display: flex;
     flex-wrap: wrap;
@@ -276,6 +276,29 @@ div.navbar {
     display: inline-block;
 }
 
+/* Mobile Navbar */
+#mobile-navbar {
+    position: fixed;
+    width: calc(100% - 20px);
+    left: 10px;
+    bottom: 5px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 5px 0px;
+    display: flex;
+    justify-content: space-evenly;
+    background-color: var(--yellow);
+    border: 2px solid var(--black);
+    border-radius: var(--radius);
+    box-shadow: 3px 3px 0px 0px;
+}
+
+#mobile-navbar button {
+    color: var(--black);
+    border: none;
+    background: none;
+}
+
 /* Upload/Edit Form */
 
 div.upload-form {

diff --git a/src/littlesongplace/templates/base.html b/src/littlesongplace/templates/base.html
index 01cfcac5552a102b935d8c68fc907ee24f185ec7..75a82eed32d46d8079942ebbf9e0dfcea1310fdf 100644 (file)
--- a/src/littlesongplace/templates/base.html
+++ b/src/littlesongplace/templates/base.html
@@ -66,6 +66,30 @@
         <!-- Padding to prevent player from obscuring content -->
         <div id="scroll-padding"></div>
 
+        <!-- Mobile navigation bar -->
+        <div id="mobile-navbar">
+            <button>
+                <object type="image/svg+xml" data="/static/mingcute--music-fill.svg" width="24"></object>
+                <div>songs</div>
+            </button>
+            <button>
+                <object type="image/svg+xml" data="/static/mingcute--happy-fill.svg" width="24"></object>
+                <div>folks</div>
+            </button>
+            <button>
+                <object type="image/svg+xml" data="/static/mingcute--guitar-fill.svg" width="24"></object>
+                <div>jams</div>
+            </button>
+            <button>
+                <object type="image/svg+xml" data="/static/mingcute--notification-fill.svg" width="24"></object>
+                <div>activity</div>
+            </button>
+            <button>
+                <img src="/static/lsp_notes.png" width="24"/>
+                <div>profile</div>
+            </button>
+        </div>
+
         <div class="player-container" id="player-container">
             <!-- Message Box -->
             <div id="message-box" hidden></div>