WIP: Add some style to web frontend

supysonic/frontend/playlist.py

@@ -22,11 +22,13 @@ from flask import request, session, flash, render_template, redirect, url_for
 import uuid
 from supysonic.web import app, store
 from supysonic.db import Playlist
+from supysonic.managers.user import UserManager
 
 @app.route('/playlist')
 def playlist_index():
 	return render_template('playlists.html', mine = store.find(Playlist, Playlist.user_id == uuid.UUID(session.get('userid'))),
-		others = store.find(Playlist, Playlist.user_id != uuid.UUID(session.get('userid'))))
+		others = store.find(Playlist, Playlist.user_id != uuid.UUID(session.get('userid'))),
+		admin = UserManager.get(store, session.get('userid'))[1].admin)
 
 @app.route('/playlist/<uid>')
 def playlist_details(uid):
@@ -41,7 +43,7 @@ def playlist_details(uid):
 		flash('Unknown playlist')
 		return redirect(url_for('playlist_index'))
 
-	return render_template('playlist.html', playlist = playlist)
+	return render_template('playlist.html', playlist = playlist, admin = UserManager.get(store, session.get('userid'))[1].admin)
 
 @app.route('/playlist/<uid>', methods = [ 'POST' ])
 def playlist_update(uid):

supysonic/static/css/supysonic.css

@@ -30,7 +30,8 @@ body {
   margin-bottom: 0;
 }
 
-#clients td {
+#clients td,
+#playlist td {
   vertical-align: middle;
 }
 

supysonic/templates/addfolder.html

@@ -31,14 +31,14 @@
   <div class="form-group">
     <label class="sr-only" for="user">Name</label>
     <div class="input-group">
-      <span class="input-group-addon"><i class="glyphicon glyphicon-pencil"></i></span>
+      <div class="input-group-addon"><span class="glyphicon glyphicon-pencil"></span></div>
       <input type="text" class="form-control" id="name" name="name" value="{{ request.form.name }}" placeholder="Name" />
     </div>
   </div>
   <div class="form-group">
     <label class="sr-only" for="user">Path</label>
     <div class="input-group">
-      <span class="input-group-addon"><i class="glyphicon glyphicon-folder-open"></i></span>
+      <div class="input-group-addon"><span class="glyphicon glyphicon-folder-open"></span></div>
       <input type="text" class="form-control" id="path" name="path" value="{{ request.form.path }}" placeholder="Path" />
     </div>
   </div>

supysonic/templates/playlist.html

@@ -18,27 +18,42 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -#}
 {% extends "layout.html" %}
+{% block navbar_playlists %}
+<li class="active"><a href="{{ url_for('playlist_index') }}">Playlists <span
+                      class="sr-only">(current)</span></a></li>
+{% endblock %}
+
 {% block body %}
-<h2>Playlist "{{ playlist.name }}"</h2>
+<div class="page-header">
+  <h2>Playlist "{{ playlist.name }}"</h2>
+</div>
 {% if playlist.user_id|str == session.get('userid') %}
 <h3>Edit</h3>
 <form method="post">
-<table>
-	<tr><th>Name</th><th>Public</th><th></th></tr>
-	<tr>
-		<td><input type="text" name="name" value="{{ playlist.name }}" /></td>
-		<td><input type="checkbox" name="public" {% if playlist.public %}checked="true"{% endif %} /></td>
-		<td><input type="submit" /></td>
-	</tr>
+<table id="playlist" class="table">
+  <thead>
+    <tr><th>Name</th><th>Public</th><th></th></tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td><input type="text" class="form-control" name="name" value="{{ playlist.name }}" /></td>
+      <td><input type="checkbox" name="public" {% if playlist.public %}checked="true"{% endif %} /></td>
+      <td><input class="btn btn-default" type="submit" /></td>
+    </tr>
+  </tbody>
 </table>
 </form>
 {% endif %}
 <h3>Tracks</h3>
-<table>
-	<tr><th>Artist</th><th>Title</th><th>Album</th><th>Length</th></tr>
-	{% for t in playlist.tracks %}
-	<tr><td>{{ t.album.artist.name }}</td><td>{{ t.title }}</td><td>{{ t.album.name }}</td><td>{{ t.duration_str() }}</td></tr>
-	{% endfor %}
+<table class="table table-striped">
+  <thead>
+    <tr><th>Artist</th><th>Title</th><th>Album</th><th>Length</th></tr>
+  </thead>
+  <tbody>
+    {% for t in playlist.tracks %}
+    <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>
 {% endblock %}
 

supysonic/templates/playlists.html

@@ -18,34 +18,55 @@
  along with this program.  If not, see <http://www.gnu.org/licenses/>.
 -#}
 {% extends "layout.html" %}
+{% block navbar_playlists %}
+<li class="active"><a href="{{ url_for('playlist_index') }}">Playlists <span
+                      class="sr-only">(current)</span></a></li>
+{% endblock %}
+
 {% block body %}
-<h2>My playlists</h2>
+<div class="page-header">
+  <h2>My playlists</h2>
+</div>
 {% if not mine.count() %}
 <p>You don't have any playlists.</p>
 {% else %}
-<table>
-	<tr><th>Playlist</th><th>Tracks</th><th>Public</th><th></th></tr>
-	{% for p in mine %}
-	<tr>
-		<td><a href="{{ url_for('playlist_details', uid = p.id) }}">{{ p.name }}</a></td>
-		<td>{{ p.tracks.count() }}</td>
-		<td><input type="checkbox" disabled="true" {% if p.public %}checked="true"{% endif %} /></td>
-		<td><a href="{{ url_for('playlist_delete', uid = p.id) }}">X</a></td>
-	</tr>
-	{% endfor %}
+<table class="table table-striped table-hover">
+  <thead>
+    <tr><th>Playlist</th><th>Tracks</th><th>Public</th><th></th></tr>
+  </thead>
+  <tbody>
+    {% for p in mine %}
+    <tr>
+      <td><a href="{{ url_for('playlist_details', uid = p.id) }}">{{ p.name }}</a></td>
+      <td>{{ p.tracks.count() }}</td>
+      <td>{% if p.public %}<span class="glyphicon glyphicon-check"
+                                 aria-label="Public playlist"></span>{% else %}<span 
+                                 class="glyphicon glyphicon-unchecked" 
+                                 aria-label="Private playlist"></span>{% endif %}</td>
+      <td><a href="{{ url_for('playlist_delete', uid = p.id) }}" aria-label="Delete playlist">
+        <span class="glyphicon glyphicon-remove-circle" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Delete playlist"></span></a></td>
+    </tr>
+    {% endfor %}
+  </tbody>
 </table>
 {% endif %}
 {% if others.count() %}
-<h2>Others' playslits</h2>
-<table>
-	<tr><th>Playlist</th><th>Owner</th><th>Tracks</th></tr>
-	{% for p in others %}
-	<tr>
-		<td><a href="{{ url_for('playlist_details', uid = p.id) }}">{{ p.name }}</a></td>
-		<td>{{ p.user.name }}</td>
-		<td>{{ p.tracks.count() }}</td>
-	</tr>
-	{% endfor %}
+<div class="page-header">
+  <h2>Others' playlists</h2>
+</div>
+<table class="table table-striped table-hover">
+  <thead>
+    <tr><th>Playlist</th><th>Owner</th><th>Tracks</th></tr>
+  </thead>
+  <tbody>
+    {% for p in others %}
+    <tr>
+      <td><a href="{{ url_for('playlist_details', uid = p.id) }}">{{ p.name }}</a></td>
+      <td>{{ p.user.name }}</td>
+      <td>{{ p.tracks.count() }}</td>
+    </tr>
+    {% endfor %}
+  </tbody>
 </table>
 {% endif %}
 {% endblock %}

supysonic/templates/users.html

@@ -35,7 +35,7 @@
     {% for user in users %}
     <tr><td>{{ user.name }}</td><td>{{ user.mail }}</td><td>{{ user.admin }}</td><td>{{ user.last_play_date }}</td><td>
         <a href="{{ url_for('del_user', uid = user.id) }}" aria-label="Delete user">
-          <span class="glyphicon glyphicon-remove-circle" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Delete user"></a></td></tr>
+          <span class="glyphicon glyphicon-remove-circle" aria-hidden="true" data-toggle="tooltip" data-placement="top" title="Delete user"></span></a></td></tr>
     {% endfor %}
   </tbody>
 </table>