Frontend improvements

README.md

@@ -1,31 +1,71 @@
+# BMA - Bornhack Media Archive
+
 [![Run Tox CI](https://github.com/bornhack/bma/actions/workflows/tox.yml/badge.svg?branch=develop)](https://github.com/bornhack/bma/actions/workflows/tox.yml)
 [![Ruff](https://img.shields.io/endpoint?url=https://raw.githubusercontent.com/astral-sh/ruff/main/assets/badge/v2.json)](https://github.com/astral-sh/ruff)
 [![codecov](https://codecov.io/gh/bornhack/bma/graph/badge.svg?token=AN3NmaCDAr)](https://codecov.io/gh/bornhack/bma)
 [![pre-commit.ci status](https://results.pre-commit.ci/badge/github/bornhack/bma/develop.svg)](https://results.pre-commit.ci/latest/github/bornhack/bma/develop)
 
-# bma
-BornHack Media Archive
+## What:
+
+The BornHack Media Archive is a site for sharing pictures, videos, audio and documents from BornHack events.  
+
+It uses the BornHack website oauth2 provider for login (i.e. you log in with your BornHack.dk account), Django as a framework and PostgreSQL as a database.
+
+## Setup:
+> ⚠️ Note! The server is using database functions **not** compatible with SQLite! Use PostgreSQL instead 😁
+
+BMA uses BornHack OIDC for authorization, so start by creating an oauth app on the BornHack instance you wish to use as auth server. This can be bornhack.dk or a local dev instance:
+
+1. Login to the BornHack instance and go to: `/o/applications`.
+
+2. Register a new app.
+
+3. Choose client type: `public` and grant type: `authorization code`.
+
+4. Enter your redirect uri's: "*BMA_BASEURL/accounts/oidc/bornhack/login/callback/*" e.g:
+
+    >`http://127.0.0.1:8001/accounts/oidc/bornhack/login/callback/`
+
+    ⚠️ For local development, make sure it's HTTP not HTTPS!
 
-## What
-The BornHack Media Archive is a site for sharing pictures and video from BornHack events. It uses the BornHack website oauth2 provider for login.
+5. Choose algorithm: `RSA with SHA-2 256`, make a note of `Client id`and `Client secret`, then save ✅
 
-## How
-> Note! The server is using database functions not compatible with sqlite. Use postgresql instead.
+6. Then copy `bma/environment_settings.py.dist` to `bma/environment_settings.py` and either edit it directly, or use .env file or environment variables to configure.
 
+    >⚠️ Note: If it's a local dev, you might have more success making a copy of `bma/environment_settings.py.ci` and renaming it to: `bma/environment_settings.py` - The other template contains Jinja code, which Python doesn't like 😕
 
-* BMA uses BornHack OIDC for auth. Start by creating an oauth app on the BornHack instance you wish to use as auth server. This can be bornhack.dk or a local dev instance:
-    * login to the BornHack instance and go to the url `/o/applications`.
-    * register a new app.
-    * client type `public`
-    * grant type `authorization code`
-    * redirect uri's `BMA_BASEURL/accounts/oidc/bornhack/login/callback/` eg. `http://127.0.0.1:8001/accounts/oidc/bornhack/login/callback/`.
-    * Algorithm `RSA with SHA-2 256`
+7. Enter the `Client id` and `Client secret` from earlier:
+
+    ```
+    BORNHACK_OIDC_CLIENT_ID = "client_id"
+    BORNHACK_OIDC_CLIENT_SECRET = "client_secret"
+    ```
+
+8. And make sure the OIDC server URL is configured correctly:
+
+    ````
+    BORNHACK_OIDC_SERVER_URL = "http://bornhack.dk/o/.well-known/openid-configuration"
+    ````
+
+9. Now run `manage.py migrate` (or `make init`)
 
-* Then copy `bma/environment_settings.py.dist` to `bma/environment_settings.py` and either edit it directly, or use .env file or environment variables to configure.
-* Run `manage.py migrate`
     * If you get a database error about missing 'gist', you need to run `create extension btree_gist;` on your postgresql instance.
-* Run `manage.py createsuperuser` to create a local database-based superuser in the BMA instance
+
+10. Run `manage.py createsuperuser` (`make manage createsuperuser`) to create a local database-based superuser in the BMA instance
+
+11. Now run `manage.py runserver`or `make run`, tada! 🎉
 
 It should now be possible to login to BMA using a BornHack account.
 
-To use the CLI app for uploading or BMA workers make sure the url of the autocreated oauth application for the user matches the BMA instance (for localhost dev change https to http).
+⚠️ To use the CLI app for uploading or BMA workers, **make sure** the url of the autocreated oauth application for the user matches the BMA instance (for localhost dev change https to http).  
+⚠️ Make also sure you've added your user to the appropriate groups and have been given the neccesary permissions - otherwise file uploading or job grinding will not work!
+
+## Contribute:
+
+ Bornhack Media Archive is still under development, so please submit any issues you come across! or a pull-request if you're *that* clever😉
+
+ #### Contributers:
+
+<a href="https://github.com/bornhack/bma/graphs/contributors">
+  <img src="https://contrib.rocks/image?repo=bornhack/bma"/>
+</a>

src/albums/templates/album_list.html

@@ -2,22 +2,19 @@
 {% load django_bootstrap5 %}
 {% load render_table from django_tables2 %}
 {% block title %}Album list{% endblock title %}
-
 {% block main_content %}
-  <div class="row">
-
+<section class="row">
     <!-- Sidebar with album filters start -->
-    <div id="AlbumFilters" class="col-xl-2 col-12 collapse collapse-horizontal">
-    {% include "includes/album_filters.html" %}
-    </div>
+    <aside id="AlbumFilters" class="col-md-4 collapse collapse-horizontal">
+        {% include "includes/album_filters.html" %}
+    </aside>
     <!-- Sidebar with album filters end -->
 
     <!-- Main content start -->
-    <div class="col">
+     <section class="col">
       <h1>Albums</h1>
       {% include "includes/album_list_table.html" %}
-    </div>
     <!-- Main content end -->
-
-  </div>
+     </section>
+  </section>
 {% endblock main_content %}

src/albums/templates/includes/album_filters.html

@@ -2,7 +2,7 @@
 {% load django_bootstrap5 %}
 <div class="card">
   <h5 class="card-header">Filter Albums
-    <button class="btn btn-secondary float-end me-1" type="button" data-bs-toggle="collapse" data-bs-target="#AlbumFilters" aria-expanded="false" aria-controls="AlbumFilters"><i class="fas fa-times"></i></button>
+    <button class="btn btn-secondary float-end me-1" type="button" data-bs-toggle="collapse" data-bs-target="#AlbumFilters" aria-expanded="false" aria-controls="#AlbumFilters"><i class="fas fa-times"></i></button>
   </h5>
   <div class="card-body">
     <p class="lead">Showing {{ filter.qs.count }} of {{ albums.count }} albums</p>

src/albums/templates/includes/album_toolbar.html

@@ -2,7 +2,7 @@
   <div class="col">
     <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
       <div class="btn-group me-2 mb-3" role="group" aria-label="Toggle filters button">
-        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#AlbumFilters" aria-expanded="false" aria-controls="AlbumFilters">
+        <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#AlbumFilters" aria-expanded="false" aria-controls="#AlbumFilters">
           <i class="fas fa-filter"></i> Toggle Filters
         </button>
       </div>

src/albums/views.py

@@ -46,6 +46,7 @@ class AlbumListView(SingleTableMixin, FilterView):
     template_name = "album_list.html"
     filterset_class = AlbumFilter
     context_object_name = "albums"
+    paginate_by = 10
 
     def get_queryset(self) -> models.QuerySet[Album]:
         """Annotate albums with memberships. Exclude empty albums for now."""

src/bma/settings.py

@@ -322,17 +322,20 @@
     ]
 
 DJANGO_TABLES2_TEMPLATE = "django_tables2/bootstrap5.html"
+DJANGO_TABLES2_TABLE_ATTRS = {
+    "class": "table table-hover",
+}
 
 BOOTSTRAP5 = {
     "css_url": {
         "url": "/static/css/vendor/bootstrap-v5.3.3.bmacustom.css",
         "integrity": "sha384-NSDJNX0+9+JzRVqkB3YCbc+RPJViTJTxRtbNxtPdijmG31S8GbNfHNX3ycwBm632",
-        "crossorigin": "anonymous",
+        "crossorigin": "anonymous",      
     },
     "javascript_url": {
-        "url": "/static/js/vendor/bootstrap-v5.3.3.bundle.min.js",
-        "integrity": "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz",
-        "crossorigin": "anonymous",
+                "url": "/static/js/vendor/bootstrap-v5.3.3.bundle.min.js",
+                "integrity": "sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz",
+                "crossorigin": "anonymous",
     },
 }
 
@@ -355,8 +358,3 @@
     "USE_PLACEHOLDERS": False,
     "PROCESSOR": "images.picture_processor.dummy_processor",
 }
-
-
-DJANGO_TABLES2_TABLE_ATTRS = {
-    "class": "table table-hover",
-}

src/files/templates/file_list.html

@@ -13,9 +13,9 @@
   <div class="row">
 
     <!-- Sidebar with file filters start -->
-    <div class="col-xl-2 col-12 collapse collapse-horizontal" id="FileFilters">
+    <aside class="col-md-4 collapse collapse-horizontal" id="FileFilters">
     {% include "includes/file_filters.html" %}
-    </div>
+    </aside>
     <!-- Sidebar with file filters end -->
 
     <!-- Main content -->

src/files/templates/file_list_grid.html

@@ -1,20 +1,62 @@
 {% extends "file_list.html" %}
 {% load humanize static %}
+{% load django_tables2 %}
 {% block extra_head %}
 <link rel="stylesheet" href="{% static 'css/vendor/photoswipe-v5.4.4.css' %}">
 <link rel="stylesheet" href="{% static 'css/vendor/photoswipe-dynamic-caption-plugin-v1.2.7.css' %}">
 <script type="module" src="{% static 'js/photoswipe.js' %}"></script>
 {% endblock extra_head %}
 
 {% block file_list %}
-<div class="row">
+<div class="row text-center">
   <form action="{% url 'files:file_multiple_action' %}" method="POST">
   {% include "includes/file_toolbar.html" %}
   {% csrf_token %}
   <div class="pswp-gallery" id="gallery">
-  {% for file in table.data %}
-    {% include "includes/file_thumbnail_pswp.html" with record=file width=150 ratio="1/1" %}
-  {% endfor %}
+  {% for row in table.page %}
+    {% include "includes/file_thumbnail_pswp.html" with record=row.record width=150 ratio="1/1" only %}
+  {% endfor %} 
+  {% if table.page %}
+  <nav aria-label="File pagination" class="mt-3">
+    <ul class="pagination justify-content-center">
+      {% if table.page.has_previous %}
+        <li class="page-item">
+          <a class="page-link"
+             href="{% querystring table.prefixed_page_field=table.page.previous_page_number %}">
+            Previous
+          </a>
+        </li>
+      {% endif %}
+
+      {% for p in table.paginator.page_range %}
+        <li class="page-item{% if p == table.page.number %} active{% endif %}">
+          {% if p == table.page.number %}
+            <span class="page-link">{{ p }}</span>
+          {% else %}
+            <a class="page-link"
+               href="{% querystring table.prefixed_page_field=p %}">
+              {{ p }}
+            </a>
+          {% endif %}
+        </li>
+      {% endfor %}
+
+      {% if table.page.has_next %}
+        <li class="page-item">
+          <a class="page-link"
+             href="{% querystring table.prefixed_page_field=table.page.next_page_number %}">
+            Next
+          </a>
+        </li>
+        {% else %}
+        <li class="page-item disabled">
+          <span class="page-link">Next</span>
+        </li>
+      {% endif %}
+
+    </ul>
+  </nav>
+{% endif %}
   </div>
   </form>
 </div>

src/files/templates/includes/file_pswp_caption.html

@@ -1,4 +1,4 @@
-<div class="pswp-caption-content" data-bma-file-uuid="{{ file.uuid }}">
+<div class="pswp-caption-content" d-none data-bma-file-uuid="{{ file.uuid }}">
   <p class="d-inline-block me-3"><i class="{{ file.filetype_icon }}"></i> <a href="{{ file.get_absolute_url }}"><b>{{ file.title }}</b></a></p>
 
 <span class="d-inline-block me-3"><i class="fas fa-user fa-fw"></i> {{ file.attribution }}</span>

src/files/views.py

@@ -87,7 +87,7 @@ class FileListView(SingleTableMixin, FilterView):
     template_name = "file_list.html"
     filterset_class = FileFilter
     context_object_name = "files"
-    paginator_class = LazyPaginator
+    paginate_by = 25
 
     def get_template_names(self) -> list[str]:
         """Template name depends on the type of listview."""