General theme: fix style paginator

5 files changed, 17 insertions, 13 deletions

diff --git a/youtube/static/channel.css b/youtube/static/channel.css
index 6060b06..7199150 100644
--- a/youtube/static/channel.css
+++ b/youtube/static/channel.css
@@ -437,9 +437,9 @@ hr {
 }
 
 .main .pagination-container .pagination-list {
-    display: grid;
-    grid-auto-flow: column;
-    grid-column-gap: 0.5rem;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
 }
 
 .main .pagination-container .pagination-list .page-link {
@@ -450,6 +450,7 @@ hr {
     text-decoration: none;
     align-self: center;
     padding: .5rem;
+    margin: 0.2rem;
     width: 1rem;
 }
 
diff --git a/youtube/static/local_playlist.css b/youtube/static/local_playlist.css
index da3cc57..422391a 100644
--- a/youtube/static/local_playlist.css
+++ b/youtube/static/local_playlist.css
@@ -407,9 +407,9 @@ hr {
 }
 
 .main .pagination-container .pagination-list {
-    display: grid;
-    grid-auto-flow: column;
-    grid-column-gap: 0.5rem;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
 }
 
 .main .pagination-container .pagination-list .page-link {
@@ -420,6 +420,7 @@ hr {
     text-decoration: none;
     align-self: center;
     padding: .5rem;
+    margin: 0.2rem;
     width: 1rem;
 }
 
diff --git a/youtube/static/playlist.css b/youtube/static/playlist.css
index bf2a161..6eca13d 100644
--- a/youtube/static/playlist.css
+++ b/youtube/static/playlist.css
@@ -417,9 +417,9 @@ hr {
 }
 
 .main .pagination-container .pagination-list {
-    display: grid;
-    grid-auto-flow: column;
-    grid-column-gap: 0.5rem;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
 }
 
 .main .pagination-container .pagination-list .page-link {
@@ -430,6 +430,7 @@ hr {
     text-decoration: none;
     align-self: center;
     padding: .5rem;
+    margin: 0.2rem;
     width: 1rem;
 }
 
diff --git a/youtube/static/search.css b/youtube/static/search.css
index a66e063..1307403 100644
--- a/youtube/static/search.css
+++ b/youtube/static/search.css
@@ -233,9 +233,9 @@ hr {
 }
 
 .main .pagination-container .pagination-list {
-    display: grid;
-    grid-auto-flow: column;
-    grid-column-gap: 0.5rem;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
 }
 
 .main .pagination-container .pagination-list .page-link {
@@ -246,6 +246,7 @@ hr {
     text-decoration: none;
     align-self: center;
     padding: .5rem;
+    margin: 0.2rem;
     width: 1rem;
 }
 
diff --git a/youtube/templates/common_elements.html b/youtube/templates/common_elements.html
index 3c36157..56ad727 100644
--- a/youtube/templates/common_elements.html
+++ b/youtube/templates/common_elements.html
@@ -84,7 +84,7 @@
 
     {% for page in range(page_start, page_end+1) %}
         {% if page == current_page %}
-            <div class="page-link is-current">{{ page }}</div>
+            <a class="page-link is-current">{{ page }}</a>
         {% else %}
             {# https://stackoverflow.com/questions/36886650/how-to-add-a-new-entry-into-a-dictionary-object-while-using-jinja2 #}
             {% set _ = parameters_dictionary.__setitem__('page', page) %}