Pagination

I hate math

gallery/static/sass/components/buttons/pill.sass

@@ -19,6 +19,25 @@
         background-color: RGB($bg-100)
         border-radius: $rad
 
+.pill-text
+    margin: 0
+    padding: 0.5rem
+
+    width: auto
+    height: 2.5rem
+
+    display: flex
+    justify-content: center
+    align-items: center
+
+    position: relative
+
+    text-align: center
+    font-size: 1rem
+    font-weight: 500
+
+    color: RGB($fg-white)
+
 .pill-item
     margin: 0
     padding: 0.5rem

gallery/templates/image.html

@@ -1,5 +1,6 @@
 {% extends 'layout.html' %}
-{% block wrapper_class %}image-wrapper{% endblock %}
+{% block page_index %}
+{% if return_page > 1 %}?page={{ return_page }}{% endif %}{% endblock %}
 {% block head %}
     <meta property="og:image" content="{{ url_for('api.file', file_name=image.filename) }}"/>
     <meta name="theme-color" content="rgb({{ image.colours.0.0 }}{{ image.colours.0.1 }}{{ image.colours.0.2 }})"/>

gallery/templates/index.html

@@ -4,15 +4,46 @@
     <div class="banner-small">
         <div class="banner-content">
             <h1 class="banner-header">{{ config.WEBSITE.name }}</h1>
-            {% if images|length == 0 %}
+            {% if total_images == 0 %}
                 <p class="banner-info">0 images D:</p>
-            {% elif images|length == 69 %}
+            {% elif total_images == 69 %}
-                <p class="banner-info">{{ images|length }} images, nice</p>
+                <p class="banner-info">{{ total_images }} images, nice</p>
             {% else %}
-                <p class="banner-info">{{ images|length }} images</p>
+                <p class="banner-info">{{ total_images }} images</p>
+            {% endif %}
+
+            {% if pages > 1 %}
+                <div class="pill-row">
+                    <div>
+                        {% if pages > 4 %}
+                            <a class="pill-item" href="{{ url_for('gallery.index') }}">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M232,128a8,8,0,0,1-8,8H91.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L91.31,120H224A8,8,0,0,1,232,128ZM40,32a8,8,0,0,0-8,8V216a8,8,0,0,0,16,0V40A8,8,0,0,0,40,32Z"></path></svg>
+                            </a>
+                        {% endif %}
+                        <a class="pill-item" href="{% if (page - 1) > 1 %} {{ url_for('gallery.index', page=page-1) }} {% else %} {{ url_for('gallery.index') }} {% endif %}">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M224,128a8,8,0,0,1-8,8H59.31l58.35,58.34a8,8,0,0,1-11.32,11.32l-72-72a8,8,0,0,1,0-11.32l72-72a8,8,0,0,1,11.32,11.32L59.31,120H216A8,8,0,0,1,224,128Z"></path></svg>
+                        </a>
+                    </div>
+
+                    <span class="pill-text">
+                        {{ page }} / {{ pages }}
+                    </span>
+
+                    <div>
+                        <a class="pill-item" href="{% if (page + 1) < pages %} {{ url_for('gallery.index', page=page+1) }} {% else %} {{ url_for('gallery.index', page=pages) }} {% endif %}">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M221.66,133.66l-72,72a8,8,0,0,1-11.32-11.32L196.69,136H40a8,8,0,0,1,0-16H196.69L138.34,61.66a8,8,0,0,1,11.32-11.32l72,72A8,8,0,0,1,221.66,133.66Z"></path></svg>
+                        </a>
+                        {% if pages > 4 %}
+                            <a class="pill-item" href="{{ url_for('gallery.index', page=pages) }}">
+                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M189.66,122.34a8,8,0,0,1,0,11.32l-72,72a8,8,0,0,1-11.32-11.32L164.69,136H32a8,8,0,0,1,0-16H164.69L106.34,61.66a8,8,0,0,1,11.32-11.32ZM216,32a8,8,0,0,0-8,8V216a8,8,0,0,0,16,0V40A8,8,0,0,0,216,32Z"></path></svg>
+                            </a>
                         {% endif %}
                     </div>
                 </div>
+            {% endif %}
+        </div>
+    </div>
+
     {% if images %}
         <div class="gallery-grid">
             {% for image in images %}
@@ -34,7 +65,7 @@
 {% endblock %}
 {% block script %}
     <script type="text/javascript">
-        if (document.referrer.includes('image')) {
+        /*if (document.referrer.includes('image')) {
             try {
                 let referrerId = document.referrer.split('/').pop();
         

gallery/templates/layout.html

@@ -64,7 +64,7 @@
         <div class="navigation">
             <!--<img src="{{url_for('static', filename='icon.png')}}" alt="Logo" class="logo" onload="this.style.opacity=1;" style="opacity:0">-->
 
-            <a href="{{url_for('gallery.index')}}" class="navigation-item {% block nav_home %}{% endblock %}">
+            <a href="{{url_for('gallery.index')}}{% block page_index %}{% endblock %}" class="navigation-item {% block nav_home %}{% endblock %}">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 256 256"><path d="M208,32H80A16,16,0,0,0,64,48V64H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V192h16a16,16,0,0,0,16-16V48A16,16,0,0,0,208,32ZM80,48H208v69.38l-16.7-16.7a16,16,0,0,0-22.62,0L93.37,176H80Zm96,160H48V80H64v96a16,16,0,0,0,16,16h96ZM104,88a16,16,0,1,1,16,16A16,16,0,0,1,104,88Z"></path></svg>
                 <span class="tool-tip">
                     Home

gallery/views/image.py

@@ -1,6 +1,8 @@
 """
 Onlylegs - Image View
 """
+from math import ceil
+
 from flask import Blueprint, abort, render_template, url_for
 
 from sqlalchemy.orm import sessionmaker
@@ -56,4 +58,25 @@ def image(image_id):
     if prev_url:
         prev_url = url_for('image.image', image_id=prev_url[0])
         
-    return render_template('image.html', image=image, next_url=next_url, prev_url=prev_url)
+    
+    # Yoink all the images in the database
+    total_images = (db_session.query(db.Posts.id)
+                              .order_by(db.Posts.id.desc())
+                              .all())
+    limit = 100
+
+    # If the number of items is less than the limit, no point of calculating the page
+    if len(total_images) <= limit:
+        return_page = 1
+    else:
+        # How many pages should there be
+        for i in range(ceil(len(total_images) / limit)):
+            # Slice the list of IDs into chunks of the limit
+            for j in total_images[i * limit:(i + 1) * limit]:
+                # Is our image in this chunk?
+                if image_id in j:
+                    return_page = i + 1
+                    break
+
+    return render_template('image.html', image=image, next_url=next_url,
+                           prev_url=prev_url, return_page=return_page)

gallery/views/index.py

@@ -1,6 +1,8 @@
 """
 Onlylegs Gallery - Index view
 """
+from math import ceil
+
 from flask import Blueprint, render_template, request
 from werkzeug.exceptions import abort
 
@@ -18,13 +20,30 @@ def index():
     """
     Home page of the website, shows the feed of the latest images
     """
-    images = db_session.query(db.Posts.filename,
+    # meme
-                              db.Posts.alt,
-                              db.Posts.colours,
-                              db.Posts.created_at,
-                              db.Posts.id).order_by(db.Posts.id.desc()).all()
-
     if request.args.get('coffee') == 'please':
         abort(418)
     
-    return render_template('index.html', images=images)
+    # pagination, defaults to page 1 if no page is specified
+    page = request.args.get('page', default=1, type=int)
+    limit = 100
+    
+    # get the total number of images in the database
+    # calculate the total number of pages, and make sure the page number is valid
+    total_images = db_session.query(db.Posts.id).count()
+    pages = ceil(max(total_images, limit) / limit)
+    if page > pages:
+        abort(404, 'You have reached the far and beyond, ' +
+              'but you will not find your answers here.')
+    
+    # get the images for the current page
+    images = (db_session.query(db.Posts.filename, db.Posts.alt, db.Posts.colours,
+                               db.Posts.created_at, db.Posts.id)
+                        .order_by(db.Posts.id.desc())
+                        .offset((page - 1) * limit)
+                        .limit(limit)
+                        .all())
+
+    return render_template('index.html', images=images,
+                           total_images=total_images,
+                           pages=pages, page=page)