colour tweaks and pagination

pull/3/head
meeb 2020-11-28 15:06:46 +11:00
parent b347959083
commit c353e5c849
8 changed files with 72 additions and 10 deletions

View File

@ -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;

View File

@ -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 {

View File

@ -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://yt-dl.org/" target="_blank"><i class="fas fa-link"></i> youtube-dl</a> version {{ youtube_dl_version }} and
<a href="https://ffmpeg.org/" target="_blank"><i class="fas fa-link"></i> FFmpeg</a> version {{ ffmpeg_version }}.
<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/" 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/" class="nowrap" target="_blank"><i class="fas fa-link"></i> FFmpeg</a> version <strong>{{ ffmpeg_version }}</strong>.
</p>
</div>
</footer>

View File

@ -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 %}

View File

@ -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

View File

@ -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>

View File

@ -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 %}

View File

@ -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: