styling for pagination links

diff --git a/list.sh b/list.sh
index 49b9273d2854c35ba92231b3b922c84cbb628557..8d76f18418ca64e3648d93278524924a22ae6733 100644 (file)
--- 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 f0a16b5d8f99ae6c2fee56bd1d51d097d23cd6d8..bcd6e378a9e6e105ddfd2dd7d5b12eb7bfcc85a4 100644 (file)
--- 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;}