colour tweaks and pagination

app/common/static/styles/_colours.scss

@@ -2,9 +2,9 @@ $colour-white: #ffffff;
 $colour-black: #000000;
 $colour-near-black: #011627;
 $colour-near-white: #fdfffc;
-$colour-light-blue: #2ec4b6;
+$colour-light-blue: #2e8ac4;
 $colour-red: #e71d36;
-$colour-orange: #ff9f1c;
+$colour-orange: #f69e12;
 
 $background-colour: $colour-near-white;
 $text-colour: $colour-near-black;
@@ -19,6 +19,8 @@ $nav-link-background-hover-colour: $colour-orange;
 $main-button-background-colour: $colour-light-blue;
 $main-button-background-hover-colour: $colour-orange;
 $main-button-text-colour: $colour-near-white;
+$main-link-colour: $colour-light-blue;
+$main-link-hover-colour: $colour-orange;
 
 $footer-background-colour: $colour-red;
 $footer-text-colour: $colour-near-white;
@@ -40,3 +42,13 @@ $collection-text-hover-colour: $colour-near-white;
 
 $box-error-background-colour: $colour-red;
 $box-error-text-colour: $colour-near-white;
+
+$pagination-background-colour: $colour-near-white;
+$pagination-text-colour: $colour-near-black;
+$pagination-border-colour: $colour-light-blue;
+$pagination-background-hover-colour: $colour-light-blue;
+$pagination-text-hover-colour: $colour-near-white;
+$pagination-border-hover-colour: $colour-light-blue;
+$pagination-current-background-colour: $colour-orange;
+$pagination-current-text-colour: $colour-near-white;
+$pagination-current-border-colour: $colour-orange;

app/common/static/styles/_template.scss

@@ -32,7 +32,6 @@ header {
         font-size: 3rem;
         line-height: 2.7rem;
     }
-
 }
 
 nav {
@@ -62,6 +61,14 @@ main {
     
     padding: 2rem 0 2rem 0;
 
+    a {
+        color: $main-link-colour;
+        text-decoration: underline;
+        &:hover {
+            color: $main-link-hover-colour;
+        }
+    }
+
     h1 {
         margin: 0;
         padding: 0 0 0.5rem 0;
@@ -85,6 +92,8 @@ main {
             display: block;
         }
         a.collection-item {
+            color: $main-link-colour;
+            text-decoration: none;
             &:hover {
                 background-color: $collection-background-hover-colour !important;
                 color: $collection-text-hover-colour !important;
@@ -95,6 +104,33 @@ main {
         }
     }
 
+
+    .pagination {
+        width: 100%;
+        padding-top: 1rem;
+        text-align: center;
+        a {
+            display: inline-block;
+            font-weight: bold;
+            text-decoration: none;
+            padding: 5px 10px 5px 10px;
+            margin: 0 3px 0 3px;
+            background-color: $pagination-background-colour;
+            color: $pagination-text-colour;
+            border: 2px $pagination-border-colour solid;
+            &:hover {
+                background-color: $pagination-background-hover-colour;
+                color: $pagination-text-hover-colour;
+                border: 2px $pagination-border-hover-colour solid;
+            }
+        }
+        .currentpage {
+            background-color: $pagination-current-background-colour;
+            color: $pagination-current-text-colour;
+            border: 2px $pagination-current-border-colour solid;
+        }
+    }
+
 }
 
 footer {

app/common/templates/base.html

@@ -52,9 +52,9 @@
           <a href="https://github.com/meeb/tubesync" class="nowrap" target="_blank"><i class="fab fa-github"></i> https://github.com/meeb/tubesync</a>.
         </p>
         <p>
-          TubeSync version {{ app_version }} with
+          <a href="https://github.com/meeb/tubesync" class="nowrap" target="_blank"><i class="fab fa-github"></i> TubeSync</a> version <strong>{{ app_version }}</strong> with
-          <a href="https://yt-dl.org/" target="_blank"><i class="fas fa-link"></i> youtube-dl</a> version {{ youtube_dl_version }} and 
+          <a href="https://yt-dl.org/" class="nowrap" target="_blank"><i class="fas fa-link"></i> youtube-dl</a> version <strong>{{ youtube_dl_version }}</strong> and 
-          <a href="https://ffmpeg.org/" target="_blank"><i class="fas fa-link"></i> FFmpeg</a> version {{ ffmpeg_version }}. 
+          <a href="https://ffmpeg.org/" class="nowrap" target="_blank"><i class="fas fa-link"></i> FFmpeg</a> version <strong>{{ ffmpeg_version }}</strong>. 
         </p>
       </div>
     </footer>

app/common/templates/pagination.html

@@ -0,0 +1,7 @@
+{% if paginator.num_pages > 1 %}
+<div class="pagination">
+  {% for i in paginator.page_range %}
+    <a class="pagenum{% if i == page_obj.number %} currentpage{% endif %}" href="?page={{ i }}">{{ i }}</a>
+  {% endfor %}
+</div>
+{% endif %}

app/common/third_party_versions.py

@@ -2,7 +2,7 @@ from youtube_dl import version as yt_version
 
 
 youtube_dl_version = str(yt_version.__version__)
-ffmpeg_version = '[shared system install]'
+ffmpeg_version = '(shared install)'
 
 
 # This file may contain data dynamically written during the container build process

app/sync/templates/sync/source.html

@@ -5,7 +5,7 @@
 {% block content %}
 <div class="row">
   <div class="col s12">
-    <h1 class="truncate">Source: {{ source.name }}</h1>
+    <h1 class="truncate">Source <strong>{{ source.name }}</strong></h1>
     <p class="truncate"><strong><a href="{{ source.url }}" target="_blank">{{ source.url }}</a></strong></p>
     <p class="truncate">Saving to: <strong>{{ source.directory_path }}</strong></p>
   </div>

app/sync/templates/sync/sources.html

@@ -18,7 +18,7 @@
       <a href="{% url 'sync:source' pk=source.pk %}" class="collection-item">
         {{ source.icon|safe }} <strong>{{ source.name }}</strong><br>
         {{ source.get_source_type_display }}<br>
-        Sync {{ source.get_source_profile_display }} media in a {{ source.get_output_format_display }}
+        {{ source.get_source_profile_display }} media in a {{ source.get_output_format_display }}
         {% if source.delete_old_media and source.days_to_keep > 0 %}Delete media after {{ source.days_to_keep }} days{% endif %}
       </a>
     {% empty %}
@@ -27,4 +27,11 @@
     </div>
   </div>
 </div>
+{% if sources %}
+<div class="row">
+  <div class="col s12">
+    {% include 'pagination.html' with pagination=sources.paginator %}
+  </div>
+</div>
+{% endif %}
 {% endblock %}

app/tubesync/settings.py

@@ -116,7 +116,7 @@ HEALTHCHECK_ALLOWED_IPS = ('127.0.0.1',)
 DJANGO_SIMPLE_TASK_WORKERS = 2
 
 
-SOURCES_PER_PAGE = 50
+SOURCES_PER_PAGE = 25
 
 
 try: