feat: add scrollbars to package page

This commit is contained in:
Daylin Morgan 2024-02-20 04:36:59 -06:00
parent b8bdf521b3
commit dccb441088
Signed by: daylin
GPG key ID: C1E52E7DD81DF79F
2 changed files with 39 additions and 15 deletions

View file

@ -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:

View file

@ -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;