diff --git a/changedetectionio/__init__.py b/changedetectionio/__init__.py index 1c5f90e1..6340ed15 100644 --- a/changedetectionio/__init__.py +++ b/changedetectionio/__init__.py @@ -33,6 +33,8 @@ from flask import ( url_for, ) +from flask_paginate import Pagination, get_page_parameter + from changedetectionio import html_tools from changedetectionio.api import api_v1 @@ -419,6 +421,9 @@ def changedetection_app(config=None, datastore_o=None): existing_tags = datastore.get_all_tags() form = forms.quickWatchForm(request.form) + page = request.args.get(get_page_parameter(), type=int, default=1) + pagination = Pagination(page=page, total=len(datastore.data['watching']), per_page=int(os.getenv('pagination_per_page', 50)), css_framework = "semantic") + output = render_template( "watch-overview.html", # Don't link to hosting when we're on the hosting environment @@ -429,6 +434,7 @@ def changedetection_app(config=None, datastore_o=None): has_proxies=datastore.proxy_list, has_unviewed=datastore.has_unviewed, hosted_sticky=os.getenv("SALTED_PASS", False) == False, + pagination=pagination, queued_uuids=[q_uuid.item['uuid'] for q_uuid in update_q.queue], sort_attribute=request.args.get('sort') if request.args.get('sort') else request.cookies.get('sort'), sort_order=request.args.get('order') if request.args.get('order') else request.cookies.get('order'), diff --git a/changedetectionio/static/styles/scss/parts/_pagination.scss b/changedetectionio/static/styles/scss/parts/_pagination.scss new file mode 100644 index 00000000..3624548a --- /dev/null +++ b/changedetectionio/static/styles/scss/parts/_pagination.scss @@ -0,0 +1,37 @@ +.pagination-page-info { + color: #fff; + font-size: 0.85rem; + text-transform: capitalize; +} + +.pagination.menu { + > * { + display: inline-block; + } + + li { + display: inline-block; + } + + a { + padding: 0.65rem; + margin: 3px; + border: none; + background: #444; + border-radius: 2px; + color: var(--color-text-button); + &.disabled { + display: none; + } + &.active { + font-weight: bold; + background: #888; + } + + &:hover { + background: #999; + } + } + + +} \ No newline at end of file diff --git a/changedetectionio/static/styles/scss/styles.scss b/changedetectionio/static/styles/scss/styles.scss index c045bb96..d799289b 100644 --- a/changedetectionio/static/styles/scss/styles.scss +++ b/changedetectionio/static/styles/scss/styles.scss @@ -5,6 +5,7 @@ @import "parts/_arrows"; @import "parts/_browser-steps"; @import "parts/_extra_proxies"; +@import "parts/_pagination"; @import "parts/_spinners"; @import "parts/_variables"; diff --git a/changedetectionio/static/styles/styles.css b/changedetectionio/static/styles/styles.css index d3c60b84..9f9fc55a 100644 --- a/changedetectionio/static/styles/styles.css +++ b/changedetectionio/static/styles/styles.css @@ -95,6 +95,32 @@ ul#requests-extra_proxies { ul#requests-extra_proxies table tr { display: inline; } +.pagination-page-info { + color: #fff; + font-size: 0.85rem; + text-transform: capitalize; } + +.pagination.menu > * { + display: inline-block; } + +.pagination.menu li { + display: inline-block; } + +.pagination.menu a { + padding: 0.65rem; + margin: 3px; + border: none; + background: #444; + border-radius: 2px; + color: var(--color-text-button); } + .pagination.menu a.disabled { + display: none; } + .pagination.menu a.active { + font-weight: bold; + background: #888; } + .pagination.menu a:hover { + background: #999; } + /* spinner */ .spinner, .spinner:after { diff --git a/changedetectionio/templates/_pagination.jinja b/changedetectionio/templates/_pagination.jinja deleted file mode 100644 index 0dce3d8e..00000000 --- a/changedetectionio/templates/_pagination.jinja +++ /dev/null @@ -1,7 +0,0 @@ -{% macro pagination(sorted_watches, total_per_page, current_page) %} - {{ sorted_watches|length }} - - {% for row in sorted_watches|batch(total_per_page, ' ') %} - {{ loop.index}} - {% endfor %} -{% endmacro %} diff --git a/changedetectionio/templates/watch-overview.html b/changedetectionio/templates/watch-overview.html index 142b1302..66076fbc 100644 --- a/changedetectionio/templates/watch-overview.html +++ b/changedetectionio/templates/watch-overview.html @@ -1,7 +1,6 @@ {% extends 'base.html' %} {% block content %} {% from '_helpers.jinja' import render_simple_field, render_field %} -{% from '_pagination.jinja' import pagination %} @@ -41,6 +40,9 @@ + {% if watches|length >= pagination.per_page %} + {{ pagination.info }} + {% endif %}