changed CSS from Bootstrap to Bulma

community_backup/community_backup/settings.py

@@ -116,6 +116,9 @@ STATIC_URL = "static/"
 TASKS = {"default": {"BACKEND": "django.tasks.backends.immediate.ImmediateBackend"}}
 
 STATIC_ROOT = BASE_DIR.parent.parent / "static"
+STATICFILES_DIRS = [
+    BASE_DIR / "static",
+]
 
 RELEASE_VERSION = "0.12"
 

community_backup/static/webui/css/webui.css

@@ -0,0 +1,3 @@
+h1 {
+  font-size: 2rem
+};

community_backup/webui/templates/base.html

@@ -1,17 +1,48 @@
+{% load static %}
 <!doctype html>
 <html lang="en">
   <head>
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css">
+        <link rel="stylesheet" href="{% static 'vendored/css/bulma.min.css' %}">
+    <link rel="stylesheet" href="{% static 'webui/css/webui.css' %}">
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Community Backup</title>
+    <script type="text/javascript">
+        document.addEventListener('DOMContentLoaded', () => {
+
+        // Get all "navbar-burger" elements
+        const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
+
+        // Add a click event on each of them
+        $navbarBurgers.forEach( el => {
+            el.addEventListener('click', () => {
+
+            // Get the target from the "data-target" attribute
+            const target = el.dataset.target;
+            const $target = document.getElementById(target);
+
+            // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
+            el.classList.toggle('is-active');
+            $target.classList.toggle('is-active');
+
+            });
+        });
+
+        });
+        </script>
   </head>
   <body style="display: flex; flex-direction: column; height: 100vh">
     <nav class="navbar" role="navigation" aria-label="main navigation" >
         <div class="navbar-brand">
             <a class="navbar-item" href="/">Community Backup</a>
+            <a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+                <span aria-hidden="true"></span>
+            </a>
         </div>
-        <div class="navbar-menu">
+        <div class="navbar-menu" id="navMenu">
             <div class="navbar-start"></div>
 
             <div class="navbar-end">

community_backup/webui/templates/borg_list.html

@@ -1,19 +1,21 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div class="d-flex">
+<nav class="level">
-  <h1>Your Borg Repositories</h1>
+  <div class="level-left">
-  <div class="p-2 ms-auto">
+  <h1 class="level-item">Your Borg Repositories</h1>
-    <a class="button is-primary" href="{% url 'borg_add' %}" role="button">Add Repository</a>
   </div>
-</div>
+  <div class="level-right">
+    <a class="level-item button is-primary" href="{% url 'borg_add' %}" role="button">Add Repository</a>
+  </div>
+</nav>
 
-<row>
+<section class="section">
 <p>Create a borg repository by specifying a name and the SSH public key that is allowed to access this repository. The name is only for your convenience. To set up the repository please follow the <a href="https://borgbackup.readthedocs.io/en/stable/">BorgBackup documentation</a>. There is also a <a href="https://borgbackup.readthedocs.io/en/stable/quickstart.html">Quick start guide</a> available.
   <b>Always use encrypted backups!</b></p>
-</row>
+</section>
 
-<section>
+<section class="section">
 <table class="table is-striped is-fullwidth is-hoverable">
   <thead>
     <th>Name</th>
@@ -38,7 +40,7 @@
 </section>
 
 {% if BORG_SERVER_PUBKEYS %}
-<section>
+<section class="section">
 <div class="card">
   <header class="card-header">
     <p class="card-header-title">Borg Server Public Keys</p>

community_backup/webui/templates/landing.html

@@ -1,13 +1,12 @@
 {% extends "base.html" %}
 
 {% block content %}
-<row class="p-2">
-<h1>Welcome to Community Backup!</h1>
-</row>
 
-<row>
+  <h1 class="has-text-centered">Welcome to Community Backup!</h1>
+
+  <section class="section">
   <p>This is a service offering space for backups free of charge. This is a hobby project. It comes with no guarantees for anything, especially availability of the service. This service is in a testing phase at the moment. It might be unavailable at times and features might change quickly.</p>
-  <p>Currently this service offers only backups via <a href="https://www.borgbackup.org/">Borg Backup</a>.</p>
+  <p>Currently this service offers backups only via <a href="https://www.borgbackup.org/">Borg Backup</a>.</p>
   <p>To access this service you need an account. To register for an account you need a voucher. Vouchers are required to control the amount of users, so that there is enough space available for everyone.</p>
-</row>
+  </section>
 {% endblock %}

community_backup/webui/templates/markdown.html

@@ -1,7 +1,7 @@
 {% extends "base.html" %}
 
 {% block content %}
-<row class="p-2">
+<section class="section">
   {{ markdown_content|safe }}
-</row>
+</section >
 {% endblock %}

community_backup/webui/templates/register.html

@@ -2,17 +2,18 @@
 {% load crispy_forms_tags %}
 
 {% block content %}
-
+<section class="section">
-{% if form.errors %}
+    {% if form.errors %}
             {% for error in form.errors %}
-<p>{{ error }}</p>
+    <p>{{ error }}</p>
         {% endfor %}
-{% endif %}
+    {% endif %}
 
-<form method="post" action="{% url 'register' %}">
+    <form method="post" action="{% url 'register' %}">
         {% csrf_token %}
         {{ form|crispy }}
-<input class="button is-primary" type="submit" value="Register">
+    <input class="button is-primary" type="submit" value="Register">
 </form>
 
+</section>
 {% endblock %}

community_backup/webui/templates/webui/borgrepository_confirm_delete.html

@@ -2,10 +2,12 @@
 {% load crispy_forms_tags %}
 
 {% block content %}
-<form method="post">{% csrf_token %}
+<section class="section">
+    <form method="post">{% csrf_token %}
         <p>Are you sure you want to delete "{{ object.name }}"?</p>
         {{ form }}
         <input class="button is-danger" type="submit" value="Confirm">
-</form>
+    </form>
+</section>
 {% endblock %}
 

community_backup/webui/templates/webui/borgrepository_form.html

@@ -2,6 +2,7 @@
 
 {% load crispy_forms_tags %}
 {% block content %}
+  <section class="section">
     <form method="post">
     {% csrf_token %}
     {{ form|crispy }}
@@ -10,5 +11,7 @@
       {% else %}
     <input class="button is-primary" type="submit" value="Add">
       {% endif %}
+    <a class="button" href="{% url 'borg_list' %}">Cancel</a>
     </form>
+  </section>
 {% endblock %}