Isolate paginator css and update browse.js

Author: LeviButcher

datafiles/static/browse.js

@@ -248,14 +248,14 @@ const createPageLink = (num) => {
   return a;
 };
 
-const createPrevNext = (prevNextNum, cond, txt) => {
-  const el = d.createElement(cond ? "span" : "a");
+const createPrevNext = (prevNextNum, txt) => {
+  const el = d.createElement("a");
   el.setAttribute("href", "#");
   el.addEventListener('click', (evt) => {
     evt.preventDefault();
     changePage(prevNextNum);
   });
-  if (cond) el.classList.add("disabled");
+  
   el.appendChild(d.createTextNode(txt));
   return el;
 };
@@ -271,7 +271,7 @@ const createPaginator = () => {
 
   const pag = d.createElement("div");
   pag.classList.add("paginator");
-  pag.appendChild(createPrevNext(state.page - 1, state.page === 0, "Previous"));
+  if (state.page !== 0) pag.appendChild(createPrevNext(state.page - 1, "Previous"));
   // note that page is zero-indexed
   if (maxPage <= 4) {
     // No ellipsis
@@ -303,7 +303,8 @@ const createPaginator = () => {
     pag.appendChild(createPageLink(maxPage));
   }
   const isNowOnLastPage = state.page === maxPage;
-  pag.appendChild(createPrevNext(state.page + 1, isNowOnLastPage, "Next"));
+  
+  if(!isNowOnLastPage) pag.appendChild(createPrevNext(state.page + 1, "Next"));
 
   return pag;
 };

datafiles/static/hackage.css

@@ -1042,7 +1042,6 @@ a.deprecated[href]:visited {
 }
 
 /* Paginator */
-/* Maybe should remove this from browse.html.st */
 #paginatorContainer {
   display: flex;
   align-items: center;
@@ -1085,11 +1084,12 @@ a.deprecated[href]:visited {
   background: linear-gradient(to bottom, #585858 0%, #111 100%);
 }
 
-.paginator span {
-  padding: 0 1em;
+.paginator a[href][disabled] { 
+  color: #666;
   cursor: default;
 }
 
-.paginator a[disabled], .paginator a[disabled]:hover { 
-  color: #666;
+.paginator a[href][disabled]:hover {
+  background: none;
+  border: none;
 }

datafiles/templates/Html/browse.html.st

@@ -51,38 +51,6 @@
     #browseTable th.descending {
       background-image: url(/static/images/sort_desc.png);
     }
-    .paginator {
-      margin-left: auto;
-    }
-    .paginator a {
-      box-sizing: border-box;
-      display: inline-block;
-      min-width: 1.5em;
-      padding: 0.5em 1em;
-      margin-left: 2px;
-      text-align: center;
-      text-decoration: none !important;
-      color: #333 !important;
-      border: 1px solid transparent;
-      border-radius: 2px;
-    }
-    .paginator .current, .paginator .current:hover {
-      color: #333 !important;
-      border: 1px solid #979797;
-      background: linear-gradient(to bottom, #fff 0%, #dcdcdc 100%);
-    }
-    .paginator a:hover {
-      color: white !important;
-      border: 1px solid #111;
-      background: linear-gradient(to bottom, #585858 0%, #111 100%);
-    }
-    .paginator span {
-      padding: 0 1em;
-      cursor: default;
-    }
-    .paginator .disabled {
-      color: #666;
-    }
     .filterSuggestion {
       display: flex;
       align-items: center;
@@ -102,11 +70,6 @@
     .filterSuggestion > div > input {
       margin: 0;
     }
-    #paginatorContainer {
-      display: flex;
-      align-items: center;
-      flex-wrap: wrap;
-    }
     #fatalError {
       display: none;
       color: red;