From 51366edab95d0a1a6c5ae60d46c379b1048c55f5 Mon Sep 17 00:00:00 2001
From: Radek Czajka <rczajka@rczajka.pl>
Date: Sat, 2 Mar 2019 01:03:10 +0100
Subject: [PATCH 1/1] Reduce the ugly, just bootstrap things.

---
 src/archive/static/style.css                  |  67 +----
 src/archive/templates/archive/base.html       |  26 +-
 .../templates/archive/file_managed.html       | 243 ++++++++++--------
 src/archive/templates/archive/file_new.html   |  34 ++-
 .../templates/archive/file_unmanaged.html     |  28 +-
 src/archive/templates/archive/list.html       |  20 +-
 src/archive/templates/archive/list_new.html   |  14 +-
 .../templates/archive/list_published.html     |  12 +-
 .../templates/archive/list_publishing.html    |  27 +-
 .../templates/archive/list_unmanaged.html     |   6 +-
 .../templates/archive/list_unpublished.html   |  42 +--
 .../archive/tags/multiple_tags_table.html     |   2 +-
 .../templates/archive/tags/tags_table.html    |   2 +-
 src/archive/templates/base.html               |  15 +-
 src/archive/views.py                          |   2 +-
 src/audiobooks/settings.py                    |   1 +
 16 files changed, 270 insertions(+), 271 deletions(-)
 mode change 100755 => 100644 src/archive/templates/archive/file_managed.html
 mode change 100755 => 100644 src/archive/templates/archive/file_unmanaged.html
 mode change 100755 => 100644 src/archive/templates/archive/list_published.html
 mode change 100755 => 100644 src/archive/templates/archive/list_publishing.html
 mode change 100755 => 100644 src/archive/templates/archive/list_unmanaged.html
 mode change 100755 => 100644 src/archive/templates/archive/list_unpublished.html
 mode change 100755 => 100644 src/archive/templates/base.html

diff --git a/src/archive/static/style.css b/src/archive/static/style.css
index 434b87b..7aa28b3 100755
--- a/src/archive/static/style.css
+++ b/src/archive/static/style.css
@@ -1,67 +1,4 @@
 body {
-    margin: 0;
-    font-family: verdana, sans-serif;
-    font-size: 12px;
-}
-
-a {
-    color: #bf6000;
-    text-decoration: none;
-}
-
-.clr {
-    clear: both;
-}
-
-
-#repo-zones-nav {
-    padding: 5px 5px 0 10px;
-    background: #ffdfbf;
-    border-bottom: 1px solid #ff8000;
-}
-
-#repo-zones-nav a, #repo-zones-nav span {
-    display: block;
-    float: left;
-    padding: 5px 20px 5px 20px;
-    margin-bottom: -1px;
-    border-width: 1px;
-    border-style: solid;
-    border-color: rgba(0,0,0,0);
-}
-
-#repo-zones-nav .active {
-    background: white;
-    border-color: #ff8000 #ff8000 white #ff8000;
-}
-
-#content {
-    padding: 10px;
-}
-
-
-.errorlist {
-    margin: 0;
-}
-
-.errorlist li {
-    color: red;
-}
-
-
-.tags, .multiple_tags {
-    border-collapse: collapse;
-}
-
-.tags td, .tags th, .multiple_tags td, .multiple_tags th {
-    border: 1px solid #ddd;
-    padding: 3px;
-}
-
-
-.list-published-tag, .list-publishing-tag {
-    font-size: .8em;
-}
-.list-publishing-tag {
-    color: #aaa;
+    background: #bbb;
+    background-image: url('https://static.wolnelektury.pl/static/img/backdrop/book-drawer2.jpg');
 }
diff --git a/src/archive/templates/archive/base.html b/src/archive/templates/archive/base.html
index 281779b..1382912 100644
--- a/src/archive/templates/archive/base.html
+++ b/src/archive/templates/archive/base.html
@@ -2,24 +2,28 @@
 {% load i18n %}
 
 {% block repo-zones-nav %}
-    <a {% if division == "new" %}class="active" {% endif %}href="{% url 'list_new' %}">{% trans "New" %}</a>
-    <a {% if division == "unpublished" %}class="active" {% endif %}href="{% url 'list_unpublished' %}">{% trans "Unpublished" %}</a>
-    <a {% if division == "publishing" %}class="active" {% endif %}href="{% url 'list_publishing' %}">{% trans "Publishing" %}</a>
-    <a {% if division == "published" %}class="active" {% endif %}href="{% url 'list_published' %}">{% trans "Published" %}</a>
-    <a {% if division == "unmanaged" %}class="active" {% endif %}href="{% url 'list_unmanaged' %}">{% trans "Archive" %}</a>
+  <ul class="nav nav-pills">
+    <li class="nav-item"><a class="nav-link{% if division == "new" %} active{% endif %}" href="{% url 'list_new' %}">{% trans "New" %}</a></li>
+    <li class="nav-item"><a class="nav-link{% if division == "unpublished" %} active{% endif %}" href="{% url 'list_unpublished' %}">{% trans "Unpublished" %}</a></li>
+    <li class="nav-item"><a class="nav-link{% if division == "publishing" %} active{% endif %}" href="{% url 'list_publishing' %}">{% trans "Publishing" %}</a></li>
+    <li class="nav-item"><a class="nav-link{% if division == "published" %} active{% endif %}" href="{% url 'list_published' %}">{% trans "Published" %}</a></li>
+    <li class="nav-item"><a class="nav-link{% if division == "unmanaged" %} active{% endif %}" href="{% url 'list_unmanaged' %}">{% trans "Archive" %}</a></li>
+  </ul>
+
+  <ul class="nav">
     {% if user.is_staff %}
-        <a href='{% url "admin:archive_project_changelist" %}'>{% trans "Projects" %}</a>
+      <li class="nav-item"><a class="nav-link" href='{% url "admin:archive_project_changelist" %}'>{% trans "Projects" %}</a></li>
     {% endif %}
     {% if user.is_authenticated %}
-        <a href="{% url 'logout' %}" style='float: right;'>{% trans "Logout" %}</a>
+      <li class="nav-item"><a class="nav-link" href="{% url 'logout' %}">{% trans "Logout" %}</a></li>
     {% else %}
-        <a href="{% url 'login' %}" style='float: right;'>{% trans "Login" %}</a>
+      <li class="nav-item"><a class="nav-link" href="{% url 'login' %}">{% trans "Login" %}</a></li>
     {% endif %}
     {% if user.is_staff %}
-        <a href='{% url "admin:index" %}' style='float: right;'>{% trans "Administration" %}</a>
+      <li class="nav-item"><a class="nav-link" href='{% url "admin:index" %}'>{% trans "Administration" %}</a></li>
     {% endif %}
     {% if user.is_authenticated %}
-        <span style='float: right;'>{{ user }}</span>
+      <li class="nav-item navbar-text">{{ user }}</li>
     {% endif %}
-    <div class='clr' ></div>
+</ul>
 {% endblock %}
diff --git a/src/archive/templates/archive/file_managed.html b/src/archive/templates/archive/file_managed.html
old mode 100755
new mode 100644
index 498b27b..6859429
--- a/src/archive/templates/archive/file_managed.html
+++ b/src/archive/templates/archive/file_managed.html
@@ -1,139 +1,158 @@
 {% extends "archive/base.html" %}
 {% load i18n %}
 {% load tags %}
+{% load bootstrap4 %}
 
 {% block content %}
 
-<p>Plik źródłowy: <a href='{% url "download" audiobook.id %}'>{{ path }}</a>
-(sha1: <tt>{{ audiobook.source_sha1 }}</tt>).
-</p>
 
-<h2>{% trans "Publishing" %}</h2>
 
-{% if audiobook.mp3_status or audiobook.ogg_status %}
+<div class="card mt-4">
+  <div class="card-header">
+    <h2>{% trans "Publishing" %}</h2>
+  </div>
+  <div class="card-body">
+    {% if audiobook.mp3_status or audiobook.ogg_status %}
+      <h2>{% trans "Publishing pending" %}</h2>
+      <form method="post" action="{% url 'cancel_publishing' audiobook.id %}">
+        {% csrf_token %}
+        <input class='btn btn-danger' type="submit" value="{% trans "Cancel publishing" %}" />
+      </form>
 
-<h2>{% trans "Publishing pending" %}</h2>
+      {% if audiobook.mp3_status %}
+        <hr/>
+        <h2>MP3</h2>
 
-<form method="post" action="{% url 'cancel_publishing' audiobook.id %}">
-    {% csrf_token %}
-    <input type="submit" value="{% trans "Cancel publishing" %}" />
-</form>
+        {% tags_table audiobook.mp3_tags.tags %}
 
+        <p>Status: <b>{{ audiobook.get_mp3_status_display }}</b></p>
+      {% endif %}
 
-{% if audiobook.mp3_status %}
-    <hr/>
-    <h2>MP3</h2>
-
-    {% tags_table audiobook.mp3_tags.tags %}
-
-    <p>Status: <b>{{ audiobook.get_mp3_status_display }}</b></p>
-{% endif %}
-
-{% if audiobook.ogg_status %}
-    <hr/>
-    <h2>Ogg Vorbis</h2>
-
-    {% tags_table audiobook.ogg_tags.tags %}
-
-    <p>Status: <b>{{ audiobook.get_ogg_status_display }}</b></p>
-{% endif %}
+      {% if audiobook.ogg_status %}
+        <hr/>
+        <h2>Ogg Vorbis</h2>
 
+        {% tags_table audiobook.ogg_tags.tags %}
 
+        <p>Status: <b>{{ audiobook.get_ogg_status_display }}</b></p>
+      {% endif %}
 
+    {% else %}
 
-{% else %}
-    <table class='tags'>
+      <table class='table'>
         {% tags_table audiobook.new_publish_tags 0 %}
         <tr><th></th><td>
 
-            {% if user_can_publish %}
-                <form method="post" action="{% url 'publish' audiobook.id %}">
-                    {% csrf_token %}
-                    <input type="submit" value="{% trans "Publish" %}" />
-                </form>
-            {% else %}
-                <a href="{% url 'apiclient_oauth' %}">Podłącz się</a>
-            {% endif %}
-
-            {% if not audiobook.mp3_published or not audiobook.ogg_published %}
-            <form method="post" action="{% url 'convert' audiobook.id %}">
-                {% csrf_token %}
-                <input type="submit" value="{% trans "Convert without publishing" %}" />
+          {% if user_can_publish %}
+            <form method="post" action="{% url 'publish' audiobook.id %}">
+              {% csrf_token %}
+              <input class="btn btn-primary" type="submit" value="{% trans "Publish" %}" />
+            </form>
+          {% else %}
+            <a class="btn btn-primary" href="{% url 'apiclient_oauth' %}">Podłącz się</a>
+          {% endif %}
+
+          {% if not audiobook.mp3_published or not audiobook.ogg_published %}
+            <form class="mt-3" method="post" action="{% url 'convert' audiobook.id %}">
+              {% csrf_token %}
+              <input class="btn btn-secondary" type="submit" value="{% trans "Convert without publishing" %}" />
             </form>
             {% endif %}
+              </div>
+              </div>
 
         </td></tr>
-    </table>
-{% endif %}
-
-<hr/>
-{% if audiobook.mp3_file %}
-    <h2>{% trans "MP3 file" %}</h2>
-    <p><a href="{% url 'download' audiobook.id 'mp3' %}">{% trans "Download MP3 file." %}</a></p>
-    {% if audiobook.mp3_published %}
-        <p>{% trans "Published:" %} {{ audiobook.mp3_published }}</a></p>
-        {% if audiobook.mp3_published_tags.tags %}
-            {% tags_table audiobook.mp3_published_tags.tags %}
-        {% endif %}
-    {% else %}
-        <p>{% trans "Not published yet." %}</p>
+      </table>
     {% endif %}
-{% else %}
-    <p>{% trans "MP3 file hasn't been generated yet." %}</p>
-{% endif %}
-
-<hr/>
-{% if audiobook.ogg_file %}
-    <h2>{% trans "Ogg Vorbis file" %}</h2>
-    <p><a href="{% url 'download' audiobook.id 'ogg' %}">{% trans "Download Ogg Vorbis file." %}</a></p>
-    {% if audiobook.ogg_published %}
-        <p>{% trans "Published:" %} {{ audiobook.ogg_published }}</a></p>
-        {% if audiobook.ogg_published_tags.tags %}
-            {% tags_table audiobook.ogg_published_tags.tags %}
+  </div>
+</div>
+
+
+<div class="row">
+  <div class="col-xl-6">
+    <div class="card mt-4">
+      <div class="card-header">
+	<h2>{% trans "MP3 file" %}</h2>
+      </div>
+      <div class="card-body">
+        {% if audiobook.mp3_file %}
+          <p><a href="{% url 'download' audiobook.id 'mp3' %}">{% trans "Download MP3 file." %}</a></p>
+          {% if audiobook.mp3_published %}
+            <p>{% trans "Published:" %} {{ audiobook.mp3_published }}</a></p>
+            {% if audiobook.mp3_published_tags.tags %}
+              {% tags_table audiobook.mp3_published_tags.tags %}
+            {% endif %}
+          {% else %}
+            <p>{% trans "Not published yet." %}</p>
+          {% endif %}
+        {% else %}
+          <p>{% trans "MP3 file hasn't been generated yet." %}</p>
         {% endif %}
-    {% else %}
-        <p>{% trans "Not published yet." %}</p>
-    {% endif %}
-{% else %}
-    <p>{% trans "Ogg Vorbis file hasn't been generated yet." %}</p>
-{% endif %}
-
-
-
-
-<hr />
-
-
-
-
-<h2>{% trans "Update tags" %}</h2>
-
-Last modified: {{ audiobook.modified }}
-
-{% multiple_tags_table tags %}
-
-
-
-<form method='post' action='.'>
-    {% csrf_token %}
-    <table>
-        {{ form.as_table }}
-        <td></td><td><input type="submit" value='{% trans "Commit" %}' /></td></td>
-    </table>
-</form>
-
-
-
-<hr />
-
-
-
-<form method="post" action="{% url 'remove_to_archive' audiobook.id %}"
-    onsubmit='return confirm("{% trans "Are you sure you want to move this audiobook to archive?" %}")'>
-    {% csrf_token %}
-    <input type="submit" value="{% trans "Remove to archive" %}" />
-</form>
-
-
+      </div>
+    </div>
+  </div>
+
+  <div class="col-xl-6">
+    <div class="card mt-4">
+      <div class="card-header">
+        <h2>{% trans "Ogg Vorbis file" %}</h2>
+      </div>
+      <div class="card-body">
+        {% if audiobook.ogg_file %}
+          <p><a href="{% url 'download' audiobook.id 'ogg' %}">{% trans "Download Ogg Vorbis file." %}</a></p>
+          {% if audiobook.ogg_published %}
+            <p>{% trans "Published:" %} {{ audiobook.ogg_published }}</a></p>
+            {% if audiobook.ogg_published_tags.tags %}
+              {% tags_table audiobook.ogg_published_tags.tags %}
+            {% endif %}
+          {% else %}
+            <p>{% trans "Not published yet." %}</p>
+          {% endif %}
+        {% else %}
+          <p>{% trans "Ogg Vorbis file hasn't been generated yet." %}</p>
+        {% endif %}
+      </div>
+    </div>
+  </div>
+
+  <div class="col-xl-6">
+    <div class="card mt-4">
+      <div class="card-header">
+	<h2>Plik źródłowy</h2>
+      </div>
+      <div class="card-body">
+        <p>Last modified: {{ audiobook.modified }}</p>
+        <p>Plik źródłowy: <a href='{% url "download" audiobook.id %}'>{{ path }}</a>
+          (sha1: <tt>{{ audiobook.source_sha1 }}</tt>).
+        </p>
+        {% multiple_tags_table tags %}
+
+        <form method="post" action="{% url 'remove_to_archive' audiobook.id %}"
+              onsubmit='return confirm("{% trans "Are you sure you want to move this audiobook to archive?" %}")'>
+          {% csrf_token %}
+          <input class="btn btn-danger" type="submit" value="{% trans "Remove to archive" %}" />
+        </form>
+
+      </div>
+    </div>
+  </div>
+
+  <div class="col-xl-6">
+    <div class="card mt-4 mb-4">
+      <div class="card-header">
+	<h2>{% trans "Update tags" %}</h2>
+      </div>
+      <div class="card-body">
+
+        <form method='post' action='.'>
+          {% csrf_token %}
+	  {% bootstrap_form form %}
+          <input class="btn btn-primary" type="submit" value='{% trans "Commit" %}' />
+        </form>
+
+      </div>
+    </div>
+  </div>
+</div>
 
 {% endblock %}
diff --git a/src/archive/templates/archive/file_new.html b/src/archive/templates/archive/file_new.html
index acc161d..9dc17d4 100644
--- a/src/archive/templates/archive/file_new.html
+++ b/src/archive/templates/archive/file_new.html
@@ -1,23 +1,31 @@
 {% extends "archive/base.html" %}
-{% load i18n tags %}
+{% load i18n tags bootstrap4 %}
 
 {% block content %}
 
-<form method="post" action="{% url 'move_to_archive' filename %}">
-    {% csrf_token %}
-    <input type="submit" value="{% trans "Move to archive" %}" />
-</form>
+<div class="card mt-4">
+  <div class="card-header">
+    <h1>{{ filename }}</h1>
+  </div>
+  <div class="card-body">
+    <form method="post" action="{% url 'move_to_archive' filename %}">
+      {% csrf_token %}
+      <input class="btn btn-danger" type="submit" value="{% trans "Move to archive" %}" />
+    </form>
 
+    <hr>
 
-{% multiple_tags_table tags %}
+    {% multiple_tags_table tags %}
 
+    <hr>
+
+    <form method='post' action='.'>
+      {% csrf_token %}
+      {% bootstrap_form form %}
+      <input class="btn btn-primary" type="submit" value='{% trans "Commit" %}' />
+    </form>
+  </div>
+</div>
 
-<form method='post' action='.'>
-    {% csrf_token %}
-    <table>
-        {{ form.as_table }}
-        <td></td><td><input type="submit" value='{% trans "Commit" %}' /></td></td>
-    </table>
-</form>
 
 {% endblock %}
diff --git a/src/archive/templates/archive/file_unmanaged.html b/src/archive/templates/archive/file_unmanaged.html
old mode 100755
new mode 100644
index 89f79ba..a05d556
--- a/src/archive/templates/archive/file_unmanaged.html
+++ b/src/archive/templates/archive/file_unmanaged.html
@@ -1,5 +1,6 @@
 {% extends "archive/base.html" %}
 {% load i18n %}
+{% load tags %}
 
 {% block messages %}
     {% if err_exists %}
@@ -10,22 +11,19 @@
 
 {% block content %}
 
+<div class="card mt-4">
+  <div class="card-header">
+    <h1>{{ filename }}</h1>
+  </div>
+  <div class="card-body">
+    {% multiple_tags_table tags %}
 
-<ul id="tags">
-    {% for t, v in tags.items %}
-        <li>{{t}}
-        <ul>
-        {% for x in v %}
-            <li>{{x}}</li>
-        {% endfor %}
-        </ul></li>
-    {% endfor %}
-</ul>
+    <form method="post" action="{% url 'move_to_new' filename %}">
+      {% csrf_token %}
+      <input class="btn btn-primary" type="submit" value="{% trans "Move to new files" %}" />
+    </form>
+  </div>
+</div>
 
 
-<form method="post" action="{% url 'move_to_new' filename %}">
-    {% csrf_token %}
-    <input type="submit" value="{% trans "Move to new files" %}" />
-</form>
-
 {% endblock %}
diff --git a/src/archive/templates/archive/list.html b/src/archive/templates/archive/list.html
index bcd85de..9d53422 100644
--- a/src/archive/templates/archive/list.html
+++ b/src/archive/templates/archive/list.html
@@ -4,12 +4,20 @@
 
 {% block content %}
 
-    <div id="file-list">
-        <h1>{% block file-list-title %}{% endblock %}</h1>
-        <div>{% block file-list-info %}{% endblock %}</div>
-        {% block file-list-wrapper %}
-            <ul>{% block file-list %}{% endblock %}</ul>
-        {% endblock file-list-wrapper %}
+<div class="card mt-4">
+  <div class="card-header">
+    <h1>{% block file-list-title %}{% endblock %}</h1>
+  </div>
+  <div class="card-body">
+    <div class="lead">
+	{% block file-list-info %}{% endblock %}
     </div>
+    {% block file-list-wrapper %}
+    <table class="table">
+      {% block file-list %}{% endblock %}
+    </table>
+    {% endblock %}
+  </div>
+</div>
 
 {% endblock %}
diff --git a/src/archive/templates/archive/list_new.html b/src/archive/templates/archive/list_new.html
index 28019cd..5e804ca 100644
--- a/src/archive/templates/archive/list_new.html
+++ b/src/archive/templates/archive/list_new.html
@@ -9,14 +9,16 @@
 
 {% block file-list-info %}
     {% trans "Put source audiobooks in:" %}
-    <span>{{ path }}</span>
+    <tt>{{ path }}</tt>
 {% endblock %}
 
 
 {% block file-list %}
-    {% for file in objects %}
-        <li>
-            <a href='{% url "file_new" file %}'>{{ file }}</a>
-        </li>
-    {% endfor %}
+  {% for file in objects %}
+    <tr>
+      <td>
+        <a href='{% url "file_new" file %}'>{{ file }}</a>
+      </td>
+    </tr>
+  {% endfor %}
 {% endblock %}
diff --git a/src/archive/templates/archive/list_published.html b/src/archive/templates/archive/list_published.html
old mode 100755
new mode 100644
index 5e61ba1..04396f6
--- a/src/archive/templates/archive/list_published.html
+++ b/src/archive/templates/archive/list_published.html
@@ -12,9 +12,11 @@
 
 
 {% block file-list %}
-    {% for file in objects %}
-        <li>
-            <a href='{% url "file" file.id %}'>{{ file }}</a>
-        </li>
-    {% endfor %}
+  {% for file in objects %}
+    <tr>
+      <td>
+        <a href='{% url "file" file.id %}'>{{ file }}</a>
+      </td>
+    </tr>
+  {% endfor %}
 {% endblock %}
diff --git a/src/archive/templates/archive/list_publishing.html b/src/archive/templates/archive/list_publishing.html
old mode 100755
new mode 100644
index 055f05b..3cccbaa
--- a/src/archive/templates/archive/list_publishing.html
+++ b/src/archive/templates/archive/list_publishing.html
@@ -9,15 +9,20 @@
 
 
 {% block file-list-wrapper %}
-    {% for k, objects in status_objects %}
-        <h2>{{ k.1 }}</h2>
-        <ul>
-            {% for file in objects %}
-            <li>
-                <a href='{% url "file" file.id %}'>{{ file }}</a>
-                ({% if file.mp3_status == k.0 %}MP3{% if file.ogg_status == k.0 %}, {% endif %}{% endif %}{% if file.ogg_status == k.0 %}Ogg{% endif %})
-            </li>
-            {% endfor %}
-        </ul>
-    {% endfor %}
+  {% for k, objects in status_objects %}
+    <h2>{{ k.1 }}</h2>
+    <table class="table">
+      {% for file in objects %}
+        <tr>
+          <td><a href='{% url "file" file.id %}'>{{ file }}</a></td>
+          <td class="text-warning">
+            {% if file.mp3_status == k.0 %}MP3{% endif %}
+          </td>
+          <td class="text-warning">
+            {% if file.ogg_status == k.0 %}Ogg{% endif %}
+          </td>
+        </tr>
+      {% endfor %}
+    </table>
+  {% endfor %}
 {% endblock %}
diff --git a/src/archive/templates/archive/list_unmanaged.html b/src/archive/templates/archive/list_unmanaged.html
old mode 100755
new mode 100644
index df3ccfb..7ca92a1
--- a/src/archive/templates/archive/list_unmanaged.html
+++ b/src/archive/templates/archive/list_unmanaged.html
@@ -12,8 +12,10 @@
 
 {% block file-list %}
     {% for file in objects %}
-        <li>
+    <tr>
+	    <td>
             <a href='{% url "file_unmanaged" file %}'>{{ file }}</a>
-        </li>
+	    </td>
+    </tr>
     {% endfor %}
 {% endblock %}
diff --git a/src/archive/templates/archive/list_unpublished.html b/src/archive/templates/archive/list_unpublished.html
old mode 100755
new mode 100644
index b901ef0..d51b66b
--- a/src/archive/templates/archive/list_unpublished.html
+++ b/src/archive/templates/archive/list_unpublished.html
@@ -12,21 +12,29 @@
 
 
 {% block file-list %}
-    {% for file in objects %}
-        <li>
-            <a href='{% url "file" file.id %}'>{{ file }}</a>
-
-            {% if file.mp3_published %}
-                <span class="list-published-tag" title="{{ file.mp3_published }}">MP3</span>
-            {% else %}{% if file.mp3_status %}
-                <span class="list-publishing-tag" title="{{ file.get_mp3_status_display }}">MP3</span>
-            {% endif %}{% endif %}
-
-            {% if file.ogg_published %}
-                <span class="list-published-tag" title="{{ file.ogg_published }}">Ogg</span>
-            {% else %}{% if file.ogg_status %}
-                <span class="list-publishing-tag" title="{{ file.get_ogg_status_display }}">Ogg</span>
-            {% endif %}{% endif %}
-        </li>
-    {% endfor %}
+  {% for file in objects %}
+    <tr>
+      <td>
+        <a href='{% url "file" file.id %}'>{{ file }}</a>
+      </td>
+      <td>
+        {% if file.mp3_published %}
+          <span class="text-success" title="{{ file.mp3_published }}">MP3</span>
+        {% else %}
+          {% if file.mp3_status %}
+            <span class="text-warning" title="{{ file.get_mp3_status_display }}">MP3</span>
+          {% endif %}
+            {% endif %}
+      </td>
+      <td>
+        {% if file.ogg_published %}
+          <span class="text-success" title="{{ file.ogg_published }}">Ogg</span>
+        {% else %}
+          {% if file.ogg_status %}
+            <span class="text-warning" title="{{ file.get_ogg_status_display }}">Ogg</span>
+          {% endif %}
+        {% endif %}
+      </td>
+    </tr>
+  {% endfor %}
 {% endblock %}
diff --git a/src/archive/templates/archive/tags/multiple_tags_table.html b/src/archive/templates/archive/tags/multiple_tags_table.html
index 4609278..142299e 100755
--- a/src/archive/templates/archive/tags/multiple_tags_table.html
+++ b/src/archive/templates/archive/tags/multiple_tags_table.html
@@ -1,4 +1,4 @@
-{% if table %}<table class='multiple_tags'>{% endif %}
+{% if table %}<table class='table'>{% endif %}
     {% for t, v in tags.items %}
         <tr><th>{{ t }}</th><td>
         {% for x in v %}
diff --git a/src/archive/templates/archive/tags/tags_table.html b/src/archive/templates/archive/tags/tags_table.html
index 70b9d48..040c62a 100755
--- a/src/archive/templates/archive/tags/tags_table.html
+++ b/src/archive/templates/archive/tags/tags_table.html
@@ -1,4 +1,4 @@
-{% if table %}<table class='tags'>{% endif %}
+{% if table %}<table class='table'>{% endif %}
     {% for t, v in tags.items %}
         <tr><th>{{ t }}</th><td>
             {{ v|linebreaksbr }}
diff --git a/src/archive/templates/base.html b/src/archive/templates/base.html
old mode 100755
new mode 100644
index 4b69db8..d3db485
--- a/src/archive/templates/base.html
+++ b/src/archive/templates/base.html
@@ -1,22 +1,27 @@
-{% load i18n static %}
 <!DOCTYPE html>
+{% load i18n static %}
+
 <html>
 <head>
     <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
+
     <link rel="stylesheet" type="text/css" href="{% static 'style.css' %}" />
     <title>{% trans "Audiobook repository" %}</title>
 </head>
 <body>
 
-<div id="repo-zones-nav">
+<header class="navbar bg-light">
     {% block repo-zones-nav %}&nbsp;{% endblock %}
-</div>
+</header>
+
 
-<div id="messages">
+<div>
 {% block messages %}{% endblock %}
 </div>
 
-<div id="content">
+<div class="container">
 {% block content %}{% endblock %}
 </div>
 
diff --git a/src/archive/views.py b/src/archive/views.py
index 98556ef..55f4f07 100644
--- a/src/archive/views.py
+++ b/src/archive/views.py
@@ -65,7 +65,7 @@ def file_new(request, filename):
                     d[tag] = None
 
     if not request.POST:
-        form = AudiobookForm(d)
+        form = AudiobookForm(initial=d)
     return render(request, "archive/file_new.html", locals())
 
 
diff --git a/src/audiobooks/settings.py b/src/audiobooks/settings.py
index 714fadb..d87cc00 100644
--- a/src/audiobooks/settings.py
+++ b/src/audiobooks/settings.py
@@ -131,6 +131,7 @@ INSTALLED_APPS = (
     'django.contrib.admin',
     # Uncomment the next line to enable admin documentation:
     # 'django.contrib.admindocs',
+    'bootstrap4',
 
     'apiclient',
     'archive',
-- 
2.20.1