Improves support for small screens a bit more

supysonic/templates/folders.html

@@ -13,7 +13,8 @@
 {% endblock %}
 {% block body %}
 <h2 class="mt-4 pb-2 border-bottom">Music folders</h2>
-<table class="table table-striped table-hover align-middle">
+<div class="table-responsive">
+  <table class="table table-striped table-hover align-middle">
     <thead>
       <tr><th>Name</th><th>Path</th><th></th>{% if allow_scan %}<th></th>{% endif %}</tr>
     </thead>
@@ -33,7 +34,8 @@
       </tr>
       {% endfor %}
     </tbody>
-</table>
+  </table>
+</div>
 <a href="{{ url_for('frontend.add_folder_form') }}" class="btn btn-light">Add new folder</a>
 {% if allow_scan %}<a href="{{ url_for('frontend.scan_folder') }}" class="btn btn-light">Scan all folders</a>{% endif %}
 <div class="modal fade" id="confirm-delete" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="confirm-delete-label" aria-hidden="true">

supysonic/templates/home.html

@@ -17,7 +17,7 @@
 you'll have to use one of the available clients. Here's a small list of
 clients that have been tested.</p>
 <div class="row">
-  <div class="col mb-3">
+  <div class="col-md-6 mb-3">
     <div class="card">
       <div class="card-header">
         Web-based
@@ -30,7 +30,7 @@ clients that have been tested.</p>
       </div>
     </div>
   </div>
-  <div class="col mb-3">
+  <div class="col-md-6 mb-3">
     <div class="card">
       <div class="card-header">
         Android apps
@@ -53,7 +53,7 @@ clients that have been tested.</p>
         Stats
       </div>
       <div class="card-body">
-        <div class="row">
+        <div class="row grid gap-3">
           <div class="col">
             <div class="text-center">
               <div class="stats mb-3">

supysonic/templates/layout.html

@@ -65,7 +65,7 @@
             <ul class="dropdown-menu dropdown-menu-end">
               <li class="text-center">
                 <div class="btn-group w-100 px-3" role="group" aria-label="Toggle theme">
-                  <input type="radio" class="btn-check" name="theme" id="light" value="light" autocomplete="off" checked>
+                  <input type="radio" class="btn-check" name="theme" id="light" value="light" autocomplete="off">
                   <label class="btn btn-outline-secondary" for="light"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-brightness-high" aria-label="Light" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Light" viewBox="0 0 16 16">
                     <path d="M8 11a3 3 0 1 1 0-6 3 3 0 0 1 0 6m0 1a4 4 0 1 0 0-8 4 4 0 0 0 0 8M8 0a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 0m0 13a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-1 0v-2A.5.5 0 0 1 8 13m8-5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2a.5.5 0 0 1 .5.5M3 8a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1h2A.5.5 0 0 1 3 8m10.657-5.657a.5.5 0 0 1 0 .707l-1.414 1.415a.5.5 0 1 1-.707-.708l1.414-1.414a.5.5 0 0 1 .707 0m-9.193 9.193a.5.5 0 0 1 0 .707L3.05 13.657a.5.5 0 0 1-.707-.707l1.414-1.414a.5.5 0 0 1 .707 0m9.193 2.121a.5.5 0 0 1-.707 0l-1.414-1.414a.5.5 0 0 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .707M4.464 4.465a.5.5 0 0 1-.707 0L2.343 3.05a.5.5 0 1 1 .707-.707l1.414 1.414a.5.5 0 0 1 0 .708"/>
                   </svg></label>

supysonic/templates/playlist.html

@@ -16,7 +16,8 @@
 {% if playlist.user.id == request.user.id %}
 <h3>Edit</h3>
 <form method="post">
-<table id="playlist" class="table align-middle">
+  <div class="table-responsive">
+    <table id="playlist" class="table align-middle">
       <thead>
         <tr><th>Name</th><th>Public</th><th></th></tr>
       </thead>
@@ -27,11 +28,13 @@
           <td><button class="btn btn-light" type="submit">Update</button></td>
         </tr>
       </tbody>
-</table>
+    </table>
+  </div>
 </form>
 {% endif %}
 <h3>Tracks</h3>
-<table class="table table-striped">
+<div class="table-responsive">
+  <table class="table table-striped">
     <thead>
       <tr><th>Artist</th><th>Title</th><th>Album</th><th>Length</th></tr>
     </thead>
@@ -40,5 +43,6 @@
       <tr><td>{{ t.album.artist.name }}</td><td>{{ t.title }}</td><td>{{ t.album.name }}</td><td>{{ t.duration_str() }}</td></tr>
       {% endfor %}
     </tbody>
-</table>
+  </table>
+</div>
 {% endblock %}

supysonic/templates/playlists.html

@@ -16,7 +16,8 @@
 {% if not mine.count() %}
 <p>You don't have any playlists.</p>
 {% else %}
-<table class="table table-striped table-hover align-middle">
+<div class="table-responsive">
+  <table class="table table-striped table-hover align-middle">
     <thead>
       <tr><th>Playlist</th><th>Tracks</th><th>Public</th><th>Export</th><th>Delete</th></tr>
     </thead>
@@ -43,11 +44,13 @@
       </tr>
       {% endfor %}
     </tbody>
-</table>
+  </table>
+</div>
 {% endif %}
 {% if others.count() %}
 <h2 class="mt-4 pb-2 border-bottom">Others' playlists</h2>
-<table class="table table-striped table-hover align-middle">
+<div class="table-responsive">
+  <table class="table table-striped table-hover align-middle">
     <thead>
       <tr><th>Playlist</th><th>Owner</th><th>Tracks</th></tr>
     </thead>
@@ -60,7 +63,8 @@
       </tr>
       {% endfor %}
     </tbody>
-</table>
+  </table>
+</div>
 {% endif %}
 <div class="modal fade" id="confirm-export" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="confirm-export-label" aria-hidden="true">
   <div class="modal-dialog">

supysonic/templates/profile.html

@@ -93,6 +93,7 @@ out, for instance you can only enter a bitrate so files will be streamed using
 their original format, only transcoded if their bitrate exceed the selected
 one.</p>
 <form method="post">
+  <div class="table-responsive">
     <table id="clients" class="table table-striped align-middle">
       <thead>
         <tr><th>Client</th><th>Format</th><th>Max bitrate</th><th>Forget</th></tr>
@@ -118,6 +119,7 @@ one.</p>
         {% endfor %}
       <tbody>
     </table>
+  </div>
   <input class="btn btn-light" type="submit" value="Save" />
 </form>
 {% endif %}

supysonic/templates/users.html

@@ -13,7 +13,8 @@
 {% endblock %}
 {% block body %}
 <h2 class="mt-4 pb-2 border-bottom">Users</h2>
-<table class="table table-striped table-hover align-middle">
+<div class="table-responsive">
+  <table class="table table-striped table-hover align-middle">
     <thead>
       <tr><th>Name</th><th>EMail</th><th>Admin</th><th>Last play date</th><th></th></tr>
     </thead>
@@ -30,7 +31,8 @@
             </svg></button>{% endif %}</td></tr>
       {% endfor %}
     </tbody>
-</table>
+  </table>
+</div>
 <a href="{{ url_for('frontend.add_user_form') }}" class="btn btn-light">Add new user</a>
 <div class="modal fade" id="confirm-delete" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="confirm-delete-label" aria-hidden="true">
   <div class="modal-dialog">