1
0
mirror of https://github.com/spl0k/supysonic.git synced 2024-12-22 08:56:17 +00:00

Improves support for small screens a bit more

This commit is contained in:
Óscar García Amor 2024-12-04 12:04:27 +01:00
parent 86af0f3ffa
commit ecf78781b5
No known key found for this signature in database
GPG Key ID: E18B2370D3D566EE
7 changed files with 145 additions and 131 deletions

View File

@ -13,27 +13,29 @@
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<h2 class="mt-4 pb-2 border-bottom">Music folders</h2> <h2 class="mt-4 pb-2 border-bottom">Music folders</h2>
<table class="table table-striped table-hover align-middle"> <div class="table-responsive">
<thead> <table class="table table-striped table-hover align-middle">
<tr><th>Name</th><th>Path</th><th></th>{% if allow_scan %}<th></th>{% endif %}</tr> <thead>
</thead> <tr><th>Name</th><th>Path</th><th></th>{% if allow_scan %}<th></th>{% endif %}</tr>
<tbody> </thead>
{% for folder in folders %} <tbody>
<tr> {% for folder in folders %}
<td>{{ folder.name }}</td><td>{{ folder.path }}</td> <tr>
<td><button class="btn btn-outline-danger btn-sm" data-href="{{ url_for('frontend.del_folder', id = folder.id) }}" data-bs-toggle="modal" data-bs-target="#confirm-delete" aria-label="Delete folder"> <td>{{ folder.name }}</td><td>{{ folder.path }}</td>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-square bi-va-fix" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete folder" viewBox="0 0 16 16"> <td><button class="btn btn-outline-danger btn-sm" data-href="{{ url_for('frontend.del_folder', id = folder.id) }}" data-bs-toggle="modal" data-bs-target="#confirm-delete" aria-label="Delete folder">
<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-square bi-va-fix" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete folder" viewBox="0 0 16 16">
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/> <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
</svg></button></td> <path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
{%if allow_scan %}<td><a class="btn btn-outline-secondary btn-sm" href="{{ url_for('frontend.scan_folder', id = folder.id) }}" aria-label="Scan folder"> </svg></button></td>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search bi-va-fix" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Scan folder" viewBox="0 0 16 16"> {%if allow_scan %}<td><a class="btn btn-outline-secondary btn-sm" href="{{ url_for('frontend.scan_folder', id = folder.id) }}" aria-label="Scan folder">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search bi-va-fix" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Scan folder" viewBox="0 0 16 16">
</svg></a></td>{% endif %} <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0"/>
</tr> </svg></a></td>{% endif %}
{% endfor %} </tr>
</tbody> {% endfor %}
</table> </tbody>
</table>
</div>
<a href="{{ url_for('frontend.add_folder_form') }}" class="btn btn-light">Add new folder</a> <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 %} {% 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"> <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">

View File

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

View File

@ -65,7 +65,7 @@
<ul class="dropdown-menu dropdown-menu-end"> <ul class="dropdown-menu dropdown-menu-end">
<li class="text-center"> <li class="text-center">
<div class="btn-group w-100 px-3" role="group" aria-label="Toggle theme"> <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"> <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"/> <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> </svg></label>

View File

@ -16,29 +16,33 @@
{% if playlist.user.id == request.user.id %} {% if playlist.user.id == request.user.id %}
<h3>Edit</h3> <h3>Edit</h3>
<form method="post"> <form method="post">
<table id="playlist" class="table align-middle"> <div class="table-responsive">
<thead> <table id="playlist" class="table align-middle">
<tr><th>Name</th><th>Public</th><th></th></tr> <thead>
</thead> <tr><th>Name</th><th>Public</th><th></th></tr>
<tbody> </thead>
<tr> <tbody>
<td><input type="text" class="form-control" name="name" value="{{ playlist.name }}" /></td> <tr>
<td><div class="form-switch"><input type="checkbox" class="form-check-input" role="switch" name="public" {% if playlist.public %}checked="true"{% endif %} /></div></td> <td><input type="text" class="form-control" name="name" value="{{ playlist.name }}" /></td>
<td><button class="btn btn-light" type="submit">Update</button></td> <td><div class="form-switch"><input type="checkbox" class="form-check-input" role="switch" name="public" {% if playlist.public %}checked="true"{% endif %} /></div></td>
</tr> <td><button class="btn btn-light" type="submit">Update</button></td>
</tbody> </tr>
</table> </tbody>
</table>
</div>
</form> </form>
{% endif %} {% endif %}
<h3>Tracks</h3> <h3>Tracks</h3>
<table class="table table-striped"> <div class="table-responsive">
<thead> <table class="table table-striped">
<tr><th>Artist</th><th>Title</th><th>Album</th><th>Length</th></tr> <thead>
</thead> <tr><th>Artist</th><th>Title</th><th>Album</th><th>Length</th></tr>
<tbody> </thead>
{% for t in playlist.get_tracks() %} <tbody>
<tr><td>{{ t.album.artist.name }}</td><td>{{ t.title }}</td><td>{{ t.album.name }}</td><td>{{ t.duration_str() }}</td></tr> {% for t in playlist.get_tracks() %}
{% endfor %} <tr><td>{{ t.album.artist.name }}</td><td>{{ t.title }}</td><td>{{ t.album.name }}</td><td>{{ t.duration_str() }}</td></tr>
</tbody> {% endfor %}
</table> </tbody>
</table>
</div>
{% endblock %} {% endblock %}

View File

@ -16,51 +16,55 @@
{% if not mine.count() %} {% if not mine.count() %}
<p>You don't have any playlists.</p> <p>You don't have any playlists.</p>
{% else %} {% else %}
<table class="table table-striped table-hover align-middle"> <div class="table-responsive">
<thead> <table class="table table-striped table-hover align-middle">
<tr><th>Playlist</th><th>Tracks</th><th>Public</th><th>Export</th><th>Delete</th></tr> <thead>
</thead> <tr><th>Playlist</th><th>Tracks</th><th>Public</th><th>Export</th><th>Delete</th></tr>
<tbody> </thead>
{% for p in mine %} <tbody>
<tr> {% for p in mine %}
<td><a href="{{ url_for('frontend.playlist_details', uid = p.id) }}">{{ p.name }}</a></td> <tr>
<td>{{ p.get_tracks()|length }}</td> <td><a href="{{ url_for('frontend.playlist_details', uid = p.id) }}">{{ p.name }}</a></td>
<td>{% if p.public %}<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-square bi-va-fix" aria-label="Public playlist" viewBox="0 0 16 16"> <td>{{ p.get_tracks()|length }}</td>
<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/> <td>{% if p.public %}<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-square bi-va-fix" aria-label="Public playlist" viewBox="0 0 16 16">
<path d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
</svg>{% else %}<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-square bi-va-fix" aria-label="Private playlist" viewBox="0 0 16 16">
<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
</svg>{% endif %}</td>
<td><button class="btn btn-outline-secondary btn-sm" data-href="{{ url_for('frontend.playlist_export', uid = p.id) }}" data-bs-toggle="modal" data-bs-target="#confirm-export" aria-label="Export playlist">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-square-fill bi-va-fix" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Export M3U playlist" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm8.5 2.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293z"/>
</svg></button></td>
<td><button class="btn btn-outline-danger btn-sm" data-href="{{ url_for('frontend.playlist_delete', uid = p.id) }}" data-bs-toggle="modal" data-bs-target="#confirm-delete" aria-label="Delete playlist">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-square bi-va-fix" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete playlist" viewBox="0 0 16 16">
<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/> <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/> <path d="M10.97 4.97a.75.75 0 0 1 1.071 1.05l-3.992 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z"/>
</svg></button></td> </svg>{% else %}<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-square bi-va-fix" aria-label="Private playlist" viewBox="0 0 16 16">
</tr> <path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
{% endfor %} </svg>{% endif %}</td>
</tbody> <td><button class="btn btn-outline-secondary btn-sm" data-href="{{ url_for('frontend.playlist_export', uid = p.id) }}" data-bs-toggle="modal" data-bs-target="#confirm-export" aria-label="Export playlist">
</table> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-down-square-fill bi-va-fix" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Export M3U playlist" viewBox="0 0 16 16">
<path fill-rule="evenodd" d="M15 2a1 1 0 0 0-1-1H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1zM0 2a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm8.5 2.5a.5.5 0 0 0-1 0v5.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293z"/>
</svg></button></td>
<td><button class="btn btn-outline-danger btn-sm" data-href="{{ url_for('frontend.playlist_delete', uid = p.id) }}" data-bs-toggle="modal" data-bs-target="#confirm-delete" aria-label="Delete playlist">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-square bi-va-fix" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete playlist" viewBox="0 0 16 16">
<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z"/>
<path d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708"/>
</svg></button></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %} {% endif %}
{% if others.count() %} {% if others.count() %}
<h2 class="mt-4 pb-2 border-bottom">Others' playlists</h2> <h2 class="mt-4 pb-2 border-bottom">Others' playlists</h2>
<table class="table table-striped table-hover align-middle"> <div class="table-responsive">
<thead> <table class="table table-striped table-hover align-middle">
<tr><th>Playlist</th><th>Owner</th><th>Tracks</th></tr> <thead>
</thead> <tr><th>Playlist</th><th>Owner</th><th>Tracks</th></tr>
<tbody> </thead>
{% for p in others %} <tbody>
<tr> {% for p in others %}
<td><a href="{{ url_for('frontend.playlist_details', uid = p.id) }}">{{ p.name }}</a></td> <tr>
<td>{{ p.user.name }}</td> <td><a href="{{ url_for('frontend.playlist_details', uid = p.id) }}">{{ p.name }}</a></td>
<td>{{ p.get_tracks()|length }}</td> <td>{{ p.user.name }}</td>
</tr> <td>{{ p.get_tracks()|length }}</td>
{% endfor %} </tr>
</tbody> {% endfor %}
</table> </tbody>
</table>
</div>
{% endif %} {% 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 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"> <div class="modal-dialog">

View File

@ -93,31 +93,33 @@ 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 their original format, only transcoded if their bitrate exceed the selected
one.</p> one.</p>
<form method="post"> <form method="post">
<table id="clients" class="table table-striped align-middle"> <div class="table-responsive">
<thead> <table id="clients" class="table table-striped align-middle">
<tr><th>Client</th><th>Format</th><th>Max bitrate</th><th>Forget</th></tr> <thead>
</thead> <tr><th>Client</th><th>Format</th><th>Max bitrate</th><th>Forget</th></tr>
<tbody> </thead>
{% for client in clients %} <tbody>
<tr> {% for client in clients %}
<td><label>{{ client.client_name }}</label></td> <tr>
<td><input type="text" class="form-control" name="{{ client.client_name }}_format" <td><label>{{ client.client_name }}</label></td>
value="{{ client.format if client.format else '' }}" <td><input type="text" class="form-control" name="{{ client.client_name }}_format"
pattern="[a-z0-9]{0,8}" title="Up to 8 letters and numbers" /></td> value="{{ client.format if client.format else '' }}"
<td><select class="form-control" name="{{ client.client_name }}_bitrate"> pattern="[a-z0-9]{0,8}" title="Up to 8 letters and numbers" /></td>
<option /> <td><select class="form-control" name="{{ client.client_name }}_bitrate">
<option {{ 'selected="selected"' if client.bitrate == 64 else '' }}>64</option> <option />
<option {{ 'selected="selected"' if client.bitrate == 96 else '' }}>96</option> <option {{ 'selected="selected"' if client.bitrate == 64 else '' }}>64</option>
<option {{ 'selected="selected"' if client.bitrate == 128 else '' }}>128</option> <option {{ 'selected="selected"' if client.bitrate == 96 else '' }}>96</option>
<option {{ 'selected="selected"' if client.bitrate == 192 else '' }}>192</option> <option {{ 'selected="selected"' if client.bitrate == 128 else '' }}>128</option>
<option {{ 'selected="selected"' if client.bitrate == 256 else '' }}>256</option> <option {{ 'selected="selected"' if client.bitrate == 192 else '' }}>192</option>
<option {{ 'selected="selected"' if client.bitrate == 320 else '' }}>320</option> <option {{ 'selected="selected"' if client.bitrate == 256 else '' }}>256</option>
</select></td> <option {{ 'selected="selected"' if client.bitrate == 320 else '' }}>320</option>
<td><input type="checkbox" name="{{ client.client_name }}_delete" /></td> </select></td>
</tr> <td><input type="checkbox" name="{{ client.client_name }}_delete" /></td>
{% endfor %} </tr>
<tbody> {% endfor %}
</table> <tbody>
</table>
</div>
<input class="btn btn-light" type="submit" value="Save" /> <input class="btn btn-light" type="submit" value="Save" />
</form> </form>
{% endif %} {% endif %}

View File

@ -13,24 +13,26 @@
{% endblock %} {% endblock %}
{% block body %} {% block body %}
<h2 class="mt-4 pb-2 border-bottom">Users</h2> <h2 class="mt-4 pb-2 border-bottom">Users</h2>
<table class="table table-striped table-hover align-middle"> <div class="table-responsive">
<thead> <table class="table table-striped table-hover align-middle">
<tr><th>Name</th><th>EMail</th><th>Admin</th><th>Last play date</th><th></th></tr> <thead>
</thead> <tr><th>Name</th><th>EMail</th><th>Admin</th><th>Last play date</th><th></th></tr>
<tbody> </thead>
{% for user in users %} <tbody>
<tr> {% for user in users %}
<td>{% if request.user.id == user.id %}{{ user.name }}{% else %} <tr>
<a href="{{ url_for('frontend.user_profile', uid = user.id) }}">{{ user.name }}</a>{% endif %}</td> <td>{% if request.user.id == user.id %}{{ user.name }}{% else %}
<td>{{ user.mail }}</td><td>{{ user.admin }}</td><td>{{ user.last_play_date }}</td><td> <a href="{{ url_for('frontend.user_profile', uid = user.id) }}">{{ user.name }}</a>{% endif %}</td>
{% if request.user.id != user.id %}<button class="btn btn-outline-danger btn-sm" data-href="{{ url_for('frontend.del_user', uid = user.id) }}" data-bs-toggle="modal" data-bs-target="#confirm-delete" aria-label="Delete user"> <td>{{ user.mail }}</td><td>{{ user.admin }}</td><td>{{ user.last_play_date }}</td><td>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-square bi-va-fix" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete user" viewBox="0 0 16 16"> {% if request.user.id != user.id %}<button class="btn btn-outline-danger btn-sm" data-href="{{ url_for('frontend.del_user', uid = user.id) }}" data-bs-toggle="modal" data-bs-target="#confirm-delete" aria-label="Delete user">
<path d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m.256 7a4.5 4.5 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10q.39 0 .74.025c.226-.341.496-.65.804-.918Q8.844 9.002 8 9c-5 0-6 3-6 4s1 1 1 1z"/> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-square bi-va-fix" aria-hidden="true" data-bs-toggle="tooltip" data-bs-placement="top" data-bs-title="Delete user" viewBox="0 0 16 16">
<path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m-.646-4.854.646.647.646-.647a.5.5 0 0 1 .708.708l-.647.646.647.646a.5.5 0 0 1-.708.708l-.646-.647-.646.647a.5.5 0 0 1-.708-.708l.647-.646-.647-.646a.5.5 0 0 1 .708-.708"/> <path d="M11 5a3 3 0 1 1-6 0 3 3 0 0 1 6 0M8 7a2 2 0 1 0 0-4 2 2 0 0 0 0 4m.256 7a4.5 4.5 0 0 1-.229-1.004H3c.001-.246.154-.986.832-1.664C4.484 10.68 5.711 10 8 10q.39 0 .74.025c.226-.341.496-.65.804-.918Q8.844 9.002 8 9c-5 0-6 3-6 4s1 1 1 1z"/>
</svg></button>{% endif %}</td></tr> <path d="M12.5 16a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7m-.646-4.854.646.647.646-.647a.5.5 0 0 1 .708.708l-.647.646.647.646a.5.5 0 0 1-.708.708l-.646-.647-.646.647a.5.5 0 0 1-.708-.708l.647-.646-.647-.646a.5.5 0 0 1 .708-.708"/>
{% endfor %} </svg></button>{% endif %}</td></tr>
</tbody> {% endfor %}
</table> </tbody>
</table>
</div>
<a href="{{ url_for('frontend.add_user_form') }}" class="btn btn-light">Add new user</a> <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 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"> <div class="modal-dialog">