Add some style to web frontend

supysonic/static/css/supysonic.css

@@ -14,16 +14,7 @@ body {
 }
 
 #loginform > div {
-    margin-bottom: 25px;
+  margin-bottom: 20px;
-}
-
-#loginform > div:first-child {
-  margin-top: 10px;
-}
-
-#loginform > div:last-child {
-    margin-top: 10px;
-    margin-bottom: 0px;
 }
 
 #adduserform label {
@@ -35,7 +26,7 @@ body {
   vertical-align: middle;
 }
 
-.page-header {
+.first-header {
   margin-top: 20px;
 }
 

supysonic/templates/addfolder.html

@@ -22,9 +22,8 @@
 <li class="active"><a href="{{ url_for('folder_index') }}">Folders <span
                       class="sr-only">(current)</span></a></li>
 {% endblock %}
-
 {% block body %}
-<div class="page-header">
+<div class="page-header first-header">
   <h2>Add Folder</h2>
 </div>
 <form method="post">

supysonic/templates/adduser.html

@@ -22,9 +22,8 @@
 <li class="active"><a href="{{ url_for('user_index') }}">Users <span
                       class="sr-only">(current)</span></a></li>
 {% endblock %}
-
 {% block body %}
-<div class="page-header">
+<div class="page-header first-header">
   <h2>Add User</h2>
 </div>
 <form id="adduserform" method="post">

supysonic/templates/change_mail.html

@@ -21,12 +21,10 @@
 {% block navbar_profile %}
 <li class="active"><a href="{{ url_for('user_profile') }}">{{ session.username }} <span class="sr-only">(current)</span></a></li>
 {% endblock %}
-
 {% block body %}
-<div class="page-header">
+<div class="page-header first-header">
   <h2>{{ user.name }}</h2>
 </div>
-
 <form method="post">
   <div class="form-group">
     <label class="sr-only" for="mail">eMail</label>

supysonic/templates/change_pass.html

@@ -21,12 +21,10 @@
 {% block navbar_profile %}
 <li class="active"><a href="{{ url_for('user_profile') }}">{{ session.username }} <span class="sr-only">(current)</span></a></li>
 {% endblock %}
-
 {% block body %}
-<div class="page-header">
+<div class="page-header first-header">
   <h2>{{ user }}</h2>
 </div>
-
 <form method="post">
   <div class="form-group">
     <label class="sr-only" for="current">Current password</label>
@@ -52,4 +50,3 @@
   <input type="submit" class="btn btn-default" />
 </form>
 {% endblock %}
-

supysonic/templates/folders.html

@@ -22,9 +22,8 @@
 <li class="active"><a href="{{ url_for('folder_index') }}">Folders <span
                       class="sr-only">(current)</span></a></li>
 {% endblock %}
-
 {% block body %}
-<div class="page-header">
+<div class="page-header first-header">
   <h2>Music folders</h2>
 </div>
 <table class="table table-striped table-hover">

supysonic/templates/home.html

@@ -22,15 +22,13 @@
 <li class="active"><a href="{{ url_for('index') }}">Home <span
                       class="sr-only">(current)</span></a></li>
 {% endblock %}
-
 {% block body %}
-<div class="page-header">
+<div class="page-header first-header">
   <h2>Welcome to Supysonic!</h2>
 </div>
 <p>There's nothing much to see here. If you want to listen to some music,
 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-md-6">
     <div class="panel panel-default">
@@ -64,11 +62,8 @@ clients that have been tested.</p>
     </div>
   </div>
 </div>
-
 <p>For a more complete list, check the <a href="http://www.subsonic.org/pages/apps.jsp">Subsonic website</a>.</p>
-
 <hr />
-
 <div class="panel panel-default">
   <div class="panel-heading">
     <h2 class="panel-title text-center">Stats</h2>

supysonic/templates/importusers.html

@@ -23,7 +23,7 @@
                       class="sr-only">(current)</span></a></li>
 {% endblock %}
 {% block body %}
-<div class="page-header">
+<div class="page-header first-header">
   <h2>Import users</h2>
 </div>
 <div class="alert alert-warning" role="alert">

supysonic/templates/login.html

@@ -25,18 +25,24 @@
       <div class="panel-title text-center">Log in</div>
     </div>
     <div class="panel-body" >
-      <form id="loginform" class="form-horizontal" method="post">
+      <form id="loginform" method="post">
-        <div class="input-group">
+        <div class="form-group">
-          <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
+          <label class="sr-only" for="user">User</label>
-          <input type="text" class="form-control" id="user" name="user" value="{{ request.form.user }}" placeholder="User" />
+          <div class="input-group">
+            <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
+            <input type="text" class="form-control" id="user" name="user" value="{{ request.form.user }}" placeholder="User" />
+          </div>
         </div>
-        <div class="input-group">
+        <div class="form-group">
-          <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
+          <label class="sr-only" for="password">Password</label>
-          <input type="password" class="form-control" id="password" name="password" placeholder="Password" />
+          <div class="input-group">
+            <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
+            <input type="password" class="form-control" id="password" name="password" placeholder="Password" />
+          </div>
         </div>
         <div class="form-group">
           <!-- Button -->
-          <div class="col-sm-12 controls">
+          <div class="push-left">
             <button type="submit" class="btn btn-primary pull-right"><i class="glyphicon glyphicon-log-in"></i> Log in</button>
           </div>
         </div>

supysonic/templates/playlist.html

@@ -22,9 +22,8 @@
 <li class="active"><a href="{{ url_for('playlist_index') }}">Playlists <span
                       class="sr-only">(current)</span></a></li>
 {% endblock %}
-
 {% block body %}
-<div class="page-header">
+<div class="page-header first-header">
   <h2>Playlist "{{ playlist.name }}"</h2>
 </div>
 {% if playlist.user_id|str == session.get('userid') %}
@@ -56,4 +55,3 @@
   </tbody>
 </table>
 {% endblock %}
-

supysonic/templates/playlists.html

@@ -22,9 +22,8 @@
 <li class="active"><a href="{{ url_for('playlist_index') }}">Playlists <span
                       class="sr-only">(current)</span></a></li>
 {% endblock %}
-
 {% block body %}
-<div class="page-header">
+<div class="page-header first-header">
   <h2>My playlists</h2>
 </div>
 {% if not mine.count() %}
@@ -70,4 +69,3 @@
 </table>
 {% endif %}
 {% endblock %}
-

supysonic/templates/profile.html

@@ -21,57 +21,53 @@
 {% block navbar_profile %}
 <li class="active"><a href="{{ url_for('user_profile') }}">{{ session.username }} <span class="sr-only">(current)</span></a></li>
 {% endblock %}
-
 {% block body %}
-<div class="page-header">
+<div class="page-header first-header">
   <h2>{{ user.name }}{% if user.admin %} <small><span class="glyphicon
   glyphicon-certificate" data-toggle="tooltip" data-placement="right" title="You're an admin!"></span></small>{% endif %}</h2>
 </div>
-
 <div class="row">
   <div class="col-md-6">
-<form>
+    <form>
-  <div class="form-group">
+      <div class="form-group">
-    <label class="sr-only" for="email">User eMail</label>
+        <label class="sr-only" for="email">User eMail</label>
-    <div class="input-group">
+        <div class="input-group">
-      <div class="input-group-addon">User eMail</div>
+          <div class="input-group-addon">User eMail</div>
-      <input type="text" class="form-control" id="email" placeholder="{{ user.mail }}" readonly>
+          <input type="text" class="form-control" id="email" placeholder="{{ user.mail }}" readonly>
-      <div class="input-group-btn">
+          <div class="input-group-btn">
-        <a href="{{ url_for('change_mail') }}" class="btn btn-default">Change eMail</a>
+            <a href="{{ url_for('change_mail') }}" class="btn btn-default">Change eMail</a>
+          </div>
+        </div>
       </div>
-    </div>
+    </form>
-  </div>
-</form>
   </div>
   <div class="col-md-6">
-<form>
+    <form>
-  <div class="form-group">
+      <div class="form-group">
-    <label class="sr-only" for="lastfm">LastFM status</label>
+        <label class="sr-only" for="lastfm">LastFM status</label>
-    <div class="input-group">
+        <div class="input-group">
-      <div class="input-group-addon">LastFM status</div>
+          <div class="input-group-addon">LastFM status</div>
-      {% if api_key %}
+          {% if api_key %}
-        {% if user.lastfm_session %}
+            {% if user.lastfm_session %}
-        <input type="text" class="form-control" id="lastfm" placeholder="{% if user.lastfm_status %}Linked{% else %}Invalid session{% endif %}" readonly>
+            <input type="text" class="form-control" id="lastfm" placeholder="{% if user.lastfm_status %}Linked{% else %}Invalid session{% endif %}" readonly>
-        <div class="input-group-btn">
+            <div class="input-group-btn">
-          <a href="{{ url_for('lastfm_unreg') }}" class="btn btn-default">Unlink</a>
+              <a href="{{ url_for('lastfm_unreg') }}" class="btn btn-default">Unlink</a>
+            </div>
+            {% else %}
+            <input type="text" class="form-control" id="lastfm" placeholder="Unlinked" readonly>
+            <div class="input-group-btn">
+              <a href="http://www.last.fm/api/auth/?api_key={{ api_key }}&cb={{ request.url_root[:-(request.script_root|length+1)] + url_for('lastfm_reg') }}" class="btn btn-default">Link</a>
+            </div>
+            {% endif %}
+          {% else %}
+          <input type="text" class="form-control" id="lastfm" placeholder="Unavailable" readonly>
+          {% endif %}
         </div>
-        {% else %}
+      </div>
-        <input type="text" class="form-control" id="lastfm" placeholder="Unlinked" readonly>
+    </form>
-        <div class="input-group-btn">
-          <a href="http://www.last.fm/api/auth/?api_key={{ api_key }}&cb={{ request.url_root[:-(request.script_root|length+1)] + url_for('lastfm_reg') }}" class="btn btn-default">Link</a>
-        </div>
-        {% endif %}
-      {% else %}
-      <input type="text" class="form-control" id="lastfm" placeholder="Unavailable" readonly>
-      {% endif %}
-    </div>
-  </div>
-</form>
   </div>
 </div>
-
 <a href="{{ url_for('change_password') }}" class="btn btn-default">Change password</a></li>
-
 {% if clients.count() %}
 <div class="page-header">
   <h2>Clients</h2>
@@ -81,9 +77,8 @@ transcoding or downsampling with one of them (for instance using a low
 bitrate on mobile connections to reduce used bandwidth), but the client
 doesn't provide options to do so, you can set default values here. They'll
 only be used if no transcoding/downsampling is requested by the client.</p>
-
 <form method="post">
-  <table id="clients" class="table table-striped table-hover">
+  <table id="clients" class="table table-striped">
     <thead>
       <tr><th>Client</th><th>Format</th><th>Max bitrate</th><th>Forget</th></tr>
     </thead>
@@ -110,4 +105,3 @@ only be used if no transcoding/downsampling is requested by the client.</p>
 </form>
 {% endif %}
 {% endblock %}
-

supysonic/templates/users.html

@@ -22,9 +22,8 @@
 <li class="active"><a href="{{ url_for('user_index') }}">Users <span
                       class="sr-only">(current)</span></a></li>
 {% endblock %}
-
 {% block body %}
-<div class="page-header">
+<div class="page-header first-header">
   <h2>Users</h2>
 </div>
 <table class="table table-striped table-hover">
@@ -39,7 +38,6 @@
     {% endfor %}
   </tbody>
 </table>
-
 <div class="btn-toolbar" role="toolbar">
   <a href="{{ url_for('add_user') }}" class="btn btn-default">Add</a>
   <a href="{{ url_for('export_users') }}" class="btn btn-default">Export</a>