ui: add paginator to top of problem_main page

packages/hydrooj/package.json

@@ -1,6 +1,6 @@
 {
     "name": "hydrooj",
-    "version": "3.1.42",
+    "version": "3.1.43",
     "bin": "bin/hydrooj.js",
     "main": "src/loader",
     "module": "src/loader",

packages/hydrooj/src/lib/misc.ts

@@ -24,7 +24,7 @@ export function datetimeSpan(dt: Date | ObjectID, relative = true, format = 'YYY
 }
 
 export function* paginate(page: number, numPages: number) {
-    const radius = 2;
+    const radius = 5;
     let first: number;
     let last: number;
     if (page > 1) {

packages/ui-default/components/pager/pager.page.styl

@@ -1,11 +1,23 @@
 .pager
-  margin-bottom: rem(10px)
-  border-top: 2px solid $pager-border-color
   text-align: center
   font-size: rem($font-size-small)
 
   &:empty
     display: none
+  
+  &.pager-bottom
+    margin-bottom: rem(10px)
+    border-top: 2px solid $pager-border-color
+
+    .pager__item
+      border-top: 2px solid $pager-border-color
+
+  &.pager-top
+    margin-top: rem(10px)
+    border-bottom: 2px solid $pager-border-color
+
+    .pager__item
+      border-bottom: 2px solid $pager-border-color
 
   li
     margin: 0
@@ -17,7 +29,6 @@
   padding: rem(10px)
   text-decoration: none
   border: 0
-  border-top: 2px solid $pager-border-color
   transition: border-top .2s linear, color .2s linear
   color: #a7a7a7
 
@@ -32,8 +43,8 @@
         color: #666
 
   &.current
-    color: $secondary-color
+    color: $secondary-color !important
-    border-color: $secondary-color
+    border-color: $secondary-color !important
 
 +mobile()
   .pager__item

packages/ui-default/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hydrooj/ui-default",
-  "version": "4.26.24",
+  "version": "4.26.25",
   "author": "undefined <i@undefined.moe>",
   "license": "AGPL-3.0",
   "main": "hydro.js",

packages/ui-default/templates/components/paginator.html

@@ -1,6 +1,6 @@
-{% macro render(page, num_pages, add_qs='') %}
+{% macro render(page, num_pages, add_qs='', position='bottom') %}
 {% if num_pages > 0 %}
-  <ul class="pager">
+  <ul class="pager pager-{{ position }}">
   {%- for type, page0 in paginate(page, num_pages) -%}
     <li>
     {% if type == 'first' %}

packages/ui-default/templates/partials/problem_list.html

@@ -6,6 +6,7 @@
 {% if not pdocs.length %}
   {{ nothing.render('Sorry, there is no problem in the problem set') }}
 {% else %}
+  {{ paginator.render(page, ppcount, position='top') }}
   <table class="data-table">
     <colgroup>
       <col class="col--checkbox display-mode-hide">