UPDATE: better paging

VectorLogoZone · Jun 14, 2024 · 8b16211 · 8b16211
1 parent c19be7e
commit 8b16211
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 31 deletions.
diff --git a/schemas/sourceData.schema.json b/schemas/sourceData.schema.json
@@ -3,8 +3,12 @@
   "$schema": "http://json-schema.org/draft-04/schema#",
   "type": "object",
   "properties": {
+    "css": {
+      "description": "custom css to apply to each image (for example: a dark background if the images are white)",
+      "type": "string"
+    },
     "handle": {
-      "description": "",
+      "description": "Unique identifier for the source",
       "type": "string"
     },
     "images": {
@@ -16,15 +20,15 @@
           "type": "object",
           "properties": {
             "img": {
-              "description": "",
+              "description": "URL of the image",
               "type": "string"
             },
             "name": {
-              "description": "",
+              "description": "What this image is",
               "type": "string"
             },
             "src": {
-              "description": "",
+              "description": "URL to page where the image is hosted",
               "type": "string"
             }
           },
@@ -46,23 +50,23 @@
       "type": "string"
     },
     "name": {
-      "description": "",
+      "description": "Name of the source",
       "type": "string"
     },
     "provider": {
-      "description": "",
+      "description": "[ github | gitlab | remote ]",
       "type": "string"
     },
     "provider_icon": {
-      "description": "",
+      "description": "Icon for the provider (use git host icon or https://logosear.ch/images/remote.svg)",
       "type": "string"
     },
     "url": {
-      "description": "",
+      "description": "URL of the git source or the remote source",
       "type": "string"
     },
     "website": {
-      "description": "",
+      "description": "Website.  For remote sources, this is usually the same as URL. ",
       "type": "string"
     }
   },
@@ -74,7 +78,6 @@
     "name",
     "provider",
     "provider_icon",
-    "url",
-    "website"
+    "url"
   ]
 }
diff --git a/src/sources.ts b/src/sources.ts
@@ -197,7 +197,7 @@ async function imagesPage(ctx:any, unique:boolean) {
     if (unique) {
         all = all.filter((ii) => isUnique(ii));
     }
-    let pageSize = 180;
+    let pageSize = 100;
     if ("pagesize" in ctx.query) {
         pageSize = Number(ctx.query['pagesize']);
     }

diff --git a/views/sources/_images.hbs b/views/sources/_images.hbs
@@ -1,13 +1,50 @@
 {{> above}}
 
-{{#if paging}}
 <div class="btn-toolbar d-flex justify-content-center mb-3" role="toolbar" aria-label="Paging">
-    <div class="btn-group" role="group" aria-label="Pages">
-        {{#for 1 maxPage 1}}
-            {{#isPageVisible this ../currentPage ../maxPage}}
-                <a href="?page={{../this}}" class="btn btn-outline-secondary{{#equals ../this ../../currentPage}} active{{/equals}}">{{../this}}</a>
-            {{/isPageVisible}}
-        {{/for}}
+</div>
+
+{{#if paging}}
+<div class="d-flex row justify-content-between mb-3">
+    <div class="col">
+        {{#equals currentPage 1}}
+        <a class="btn btn-primary disabled" aria-disabled="true">&laquo;</a>
+        {{else}}
+        <a class="btn btn-primary" href="?page={{dec currentPage}}">&laquo;</a>
+        {{/equals}}
+    </div>
+
+    {{#le maxPage 10}}
+    <div class="col">
+        <div class="btn-toolbar d-flex justify-content-center mb-3" role="toolbar" aria-label="Paging">
+            <div class="btn-group" role="group" aria-label="Pages">
+                {{#for 1 (inc ../maxPage) 1}}
+                <a href="?page={{this}}"
+                    class="btn btn-outline-primary{{#equals this ../../currentPage}} active{{/equals}}">{{this}}</a>
+                {{/for}}
+            </div>
+        </div>
+    </div>
+    {{else}}
+    <div class="d-flex">
+        <form class="d-flex flex-row" method="GET"
+            action="">
+            <div class="input-group">
+                <span class="input-group-text">Page</span>
+                <input type="text" class="form-control" id="page" name="page" aria-label="jump to page"
+                    value="{{currentPage}}" />
+                <div class="input-group-text">of {{maxPage}}</div>
+                <button type="submit" class="btn btn-primary">Go</button>
+            </div>
+        </form>
+    </div>
+    {{/le}}
+
+    <div class="col float-end">
+        {{#equals currentPage maxPage}}
+        <a class="float-right btn btn-primary disabled" aria-disabled="true">&raquo;</a>
+        {{else}}
+        <a class="float-right btn btn-primary" href="?page={{inc currentPage}}">&raquo;</a>
+        {{/equals}}
     </div>
 </div>
 {{/if}}
@@ -23,15 +60,5 @@
 {{/each}}
 </div>
 
-{{# if paging}}
-<div class="btn-toolbar d-flex justify-content-center mt-3" role="toolbar" aria-label="Paging">
-    <div class="btn-group" role="group" aria-label="Pages">
-        {{#for 1 maxPage 1}}
-            {{#isPageVisible this ../currentPage ../maxPage}}
-                <a href="?page={{../this}}" class="btn btn-outline-secondary{{#equals ../this ../../currentPage}} active{{/equals}}">{{../this}}</a>
-            {{/isPageVisible}}
-        {{/for}}
-    </div>
-</div>
-{{/if}}
-{{> below}}
+
+{{> below}}