feat: add scrollbars to package page

nimpkgs · Feb 20, 2024 · dccb441 · dccb441
1 parent b8bdf52
commit dccb441
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 15 deletions.
diff --git a/src/pages/package.nim b/src/pages/package.nim
@@ -35,20 +35,21 @@ proc renderAlias(pkg: NimPackage): VNode = buildHtml:
     a(href = "#/pkg/" & pkg.alias):
       text pkg.alias
 
-proc renderLinks(pkg: NimPackage): VNode = buildHtml(tdiv):
-  tdiv: text "links:"
-  tdiv:
-    pkg.projectUrl
-  if pkg.web != "" and pkg.web != pkg.url:
-    tdiv():
-      a(href = pkg.web, class = "flex items-center space-x-2"):
-        tdiv(class = "i-mdi-web shrink-0")
-        span: text pkg.web.noProtocol
-  if pkg.doc != "":
-    tdiv():
-      a(href = pkg.doc, class = "flex items-center space-x-2"):
-        tdiv(class = "i-mdi-file-outline shrink-0")
-        span: text pkg.doc.noProtocol
+proc renderLinks(pkg: NimPackage): VNode =
+  buildHtml(tdiv(class = "overflow-auto")):
+    tdiv: text "links:"
+    tdiv:
+      pkg.projectUrl
+    if pkg.web != "" and pkg.web != pkg.url:
+      tdiv():
+        a(href = pkg.web, class = "flex items-center space-x-2"):
+          tdiv(class = "i-mdi-web shrink-0")
+          span: text pkg.web.noProtocol
+    if pkg.doc != "":
+      tdiv():
+        a(href = pkg.doc, class = "flex items-center space-x-2"):
+          tdiv(class = "i-mdi-file-outline shrink-0")
+          span: text pkg.doc.noProtocol
 
 proc getTimeSinceCommit(pkg: NimPackage): kstring =
   if pkg.lastCommitTime == fromUnix(0): "unknown".jss
@@ -73,7 +74,7 @@ proc renderPkgInfo(pkg: NimPackage): VNode =
         text pkg.getTimeSinceCommit
       tdiv:
         tdiv: text "usage:"
-        tdiv(class = "bg-ctp-surfacezero rounded my-2 mx-3 p-2 w-auto"):
+        tdiv(class = "bg-ctp-surfacezero rounded my-2 mx-3 p-2 w-auto overflow-auto"):
           pre:
             text "nimble install " & pkg.name
           pre:

diff --git a/unocss.config.ts b/unocss.config.ts
@@ -43,6 +43,29 @@ export default defineConfig({
       color: ${catppuccinColors.mauve};
       cursor: pointer;
     }
+
+    /* width */
+    ::-webkit-scrollbar {
+        width: 10px;
+    }
+    /* Track */
+    ::-webkit-scrollbar-track {
+        background: ${catppuccinColors.crust};
+        border-radius: 5px;
+    }
+    /* Handle */
+    ::-webkit-scrollbar-thumb {
+        background: ${catppuccinColors.mantle};
+        border: 1px solid transparent;
+        border-color: ${catppuccinColors.rosewater};
+        border-radius: 5px;
+    }
+    /* Handle on hover */
+    ::-webkit-scrollbar-thumb:hover {
+        background: ${catppuccinColors.roswater};
+    }
+
+
     /* loading animation */
     .lds-dual-ring {
       display: inline-block;