From d716f2ce1fe64cf87f777490315bc51906001c72 Mon Sep 17 00:00:00 2001
From: =?utf8?q?Paul=20H=C3=A4nsch?= <paul@plutz.net>
Date: Fri, 6 Jul 2018 07:24:34 +0200
Subject: [PATCH] styling for pagination links

---
 list.sh   |  7 ++++++-
 style.css | 16 +++++++++++++++-
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/list.sh b/list.sh
index 49b9273..8d76f18 100644
--- a/list.sh
+++ b/list.sh
@@ -43,6 +43,8 @@ list_tree(){
 
 list_paginate(){
   page="$(GET p |grep -xE '[0-9]+' || printf 1)"
+
+  printf '[div .itemlist '
   while i="$(line)"; do
     c=$((${c-0} + 1))
     if [ $c -lt $page ]; then
@@ -51,11 +53,14 @@ list_paginate(){
       list_item "$i"
     fi
   done
+  printf ']'
 
+  printf '[div .pagination'
   for n in $(seq 1 $((c / LISTSIZE + 1)) ); do
     printf '[a .page href="%s" %s]' \
-      "?p=$(( (n - 1) * LISTSIZE + 1))" "$n" |tee /dev/stderr
+      "?p=$(( (n - 1) * LISTSIZE + 1))" "$n"
   done
+  printf ']'
 }
 
 printf 'Content-Type: text/html;charset=utf-8\r\n\r\n'
diff --git a/style.css b/style.css
index f0a16b5..bcd6e37 100644
--- a/style.css
+++ b/style.css
@@ -64,9 +64,10 @@ label[for=t_prefs] {
   max-width: 85%;
 }
 
+.itemlist { overflow: hidden;}
 .list {
   position: relative;
-  display: inline-block;
+  display: block; float: left;
   width: 25%;
   min-width: 250px;
   padding: .5em 1em;
@@ -83,6 +84,7 @@ label[for=t_prefs] {
   z-index: -2;
   content: '';
 }
+.list.file:first-of-type { clear: left; }
 .list.dir:before { background-color: #CCF; }
 .list.file:before { background-color: #FDD; }
 
@@ -90,3 +92,15 @@ label[for=t_prefs] {
   display: block;
   width: 100%;
 }
+.pagination {
+  display: block;
+  text-align: center;
+  margin-top: 1em;
+}
+.page {
+  display: inline-block;
+  padding: .25em .5em;
+  background-color: #FAA;
+  border: 1px solid;
+}
+.page:nth-of-type(1) {clear: left;}
-- 
2.39.2