m/cup
1
0
Fork 0
mirror of https://github.com/sergi0g/cup.git synced 2025-11-14 08:03:48 -05:00
Code Wiki Activity

Tiny web UI changes

Browse Source
This commit is contained in:
Sergio
2025-02-19 20:31:57 +02:00
parent ba1cfac64b
commit 4b03a48d88
7 changed files with 38 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
web/index.html
View File

@@ -12,7 +12,7 @@
<meta <meta
name="theme-color" name="theme-color"
media="(prefers-color-scheme: dark)" media="(prefers-color-scheme: dark)"
content="#171717" content="#0a0a0a"
> >
{% else %} {% else %}
<meta <meta
@@ -23,7 +23,7 @@
<meta <meta
name="theme-color" name="theme-color"
media="(prefers-color-scheme: dark)" media="(prefers-color-scheme: dark)"
content="#101828" content="#030712"
> >
{% endif %} {% endif %}
<link rel="icon" type="image/svg+xml" href="favicon.svg"> <link rel="icon" type="image/svg+xml" href="favicon.svg">
@@ -34,7 +34,7 @@
<body> <body>
<div id="root"> <div id="root">
<div <div
class="flex justify-center min-h-screen bg-white dark:bg-{{ theme }}-900" class="flex justify-center min-h-screen bg-white dark:bg-{{ theme }}-950"
> >
<div class="mx-auto h-full w-full max-w-[80rem] px-4 sm:px-6 lg:px-8"> <div class="mx-auto h-full w-full max-w-[80rem] px-4 sm:px-6 lg:px-8">
<div class="mx-auto my-8 h-full max-w-[48rem] flex-col"> <div class="mx-auto my-8 h-full max-w-[48rem] flex-col">
@@ -103,7 +103,7 @@
</svg> </svg>
</div> </div>
<div <div
class="border shadow-sm border-{{theme}}-200 dark:border-{{theme}}-800 my-8 rounded-md" class="border shadow-sm border-{{theme}}-200 dark:border-{{theme}}-900 my-8 rounded-md"
> >
<dl <dl
class="grid grid-cols-2 gap-1 overflow-hidden *:relative lg:grid-cols-4" class="grid grid-cols-2 gap-1 overflow-hidden *:relative lg:grid-cols-4"
@@ -112,7 +112,7 @@
{% for metric in metrics %} {% for metric in metrics %}
{% if metrics_to_show contains metric.name %} {% if metrics_to_show contains metric.name %}
<div <div
class="before:bg-{{ theme }}-200 before:dark:bg-{{ theme }}-800 after:bg-{{ theme }}-200 after:dark:bg-{{ theme }}-800 gi" class="before:bg-{{ theme }}-200 before:dark:bg-{{ theme }}-900 after:bg-{{ theme }}-200 after:dark:bg-{{ theme }}-900 gi"
> >
<div <div
class="flex h-full flex-col justify-between gap-x-4 gap-y-2 px-6 py-4 align-baseline lg:min-h-32" class="flex h-full flex-col justify-between gap-x-4 gap-y-2 px-6 py-4 align-baseline lg:min-h-32"
@@ -216,7 +216,7 @@
</dl> </dl>
</div> </div>
<div <div
class="border shadow-sm border-{{theme}}-200 dark:border-{{theme}}-800 my-8 rounded-md" class="border shadow-sm border-{{theme}}-200 dark:border-{{theme}}-900 my-8 rounded-md"
> >
<div <div
class="flex justify-between items-center px-6 py-4" class="flex justify-between items-center px-6 py-4"
@@ -228,11 +228,11 @@
{% if server == '' %} {% if server == '' %}
<li class="mb-8 last:mb-0"> <li class="mb-8 last:mb-0">
<ul <ul
class="dark:divide-{{theme}}-800 divide-y dark:text-white" class="dark:divide-{{theme}}-900 divide-y dark:text-white"
> >
{% for image in servers[server] %} {% for image in servers[server] %}
<li <li
class="flex items-center gap-4 break-all px-6 py-4 text-start hover:bg-{{theme}}-100 hover:dark:bg-{{theme}}-800/50 transition-colors duration-200" class="flex items-center gap-4 break-all px-6 py-4 text-start hover:bg-{{theme}}-100 hover:dark:bg-{{theme}}-900/50 transition-colors duration-200"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
@@ -318,11 +318,11 @@
{{ server }} {{ server }}
</p> </p>
<ul <ul
class="dark:divide-{{ theme }}-800 divide-y dark:text-white" class="dark:divide-{{ theme }}-900 divide-y dark:text-white"
> >
{% for image in servers[server] %} {% for image in servers[server] %}
<li <li
class="flex items-center gap-4 break-all px-6 py-4 text-start" class="flex items-center gap-4 break-all px-6 py-4 text-start hover:bg-{{ theme }}-100 hover:dark:bg-{{ theme }}-900/50 transition-colors duration-200"
> >
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"

6
web/src/App.tsx
View File

@@ -27,7 +27,7 @@ function App() {
if (!data) return <Loading onLoad={setData} />; if (!data) return <Loading onLoad={setData} />;
return ( return (
<div <div
className={`flex min-h-screen justify-center bg-white dark:bg-${theme}-900`} className={`flex min-h-screen justify-center bg-white dark:bg-${theme}-950`}
> >
<div className="mx-auto h-full w-full max-w-[80rem] px-4 sm:px-6 lg:px-8"> <div className="mx-auto h-full w-full max-w-[80rem] px-4 sm:px-6 lg:px-8">
<div className="mx-auto my-8 flex h-full max-w-[48rem] flex-col"> <div className="mx-auto my-8 flex h-full max-w-[48rem] flex-col">
@@ -38,7 +38,7 @@ function App() {
<Logo /> <Logo />
</div> </div>
<div <div
className={`border shadow-sm border-${theme}-200 dark:border-${theme}-800 my-8 rounded-md`} className={`border shadow-sm border-${theme}-200 dark:border-${theme}-900 my-8 rounded-md`}
> >
<dl className="grid grid-cols-2 gap-1 overflow-hidden *:relative lg:grid-cols-4"> <dl className="grid grid-cols-2 gap-1 overflow-hidden *:relative lg:grid-cols-4">
{Object.entries(data.metrics) {Object.entries(data.metrics)
@@ -55,7 +55,7 @@ function App() {
</dl> </dl>
</div> </div>
<div <div
className={`border shadow-sm border-${theme}-200 dark:border-${theme}-800 my-8 rounded-md`} className={`border shadow-sm border-${theme}-200 dark:border-${theme}-900 my-8 rounded-md`}
> >
<div <div
className={`flex items-center justify-between px-6 py-4 text-${theme}-500`} className={`flex items-center justify-between px-6 py-4 text-${theme}-500`}

32
web/src/components/Image.tsx
View File

@@ -53,7 +53,7 @@ export default function Image({ data }: { data: Image }) {
<> <>
<button onClick={handleOpen} className="w-full"> <button onClick={handleOpen} className="w-full">
<li <li
className={`flex items-center gap-4 break-all px-6 py-4 text-start hover:bg-${theme}-100 hover:dark:bg-${theme}-800/50 transition-colors duration-200`} className={`flex items-center gap-4 break-all px-6 py-4 text-start hover:bg-${theme}-100 hover:dark:bg-${theme}-900/50 transition-colors duration-200`}
> >
<Box className={`size-6 shrink-0 text-${theme}-500`} /> <Box className={`size-6 shrink-0 text-${theme}-500`} />
<span className="font-mono">{data.reference}</span> <span className="font-mono">{data.reference}</span>
@@ -83,21 +83,23 @@ export default function Image({ data }: { data: Image }) {
href={url} href={url}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className={`group flex w-fit items-center justify-center gap-1 text-black hover:underline dark:text-white`} className={`group w-fit text-black hover:underline dark:text-white`}
> >
<span>{data.reference}</span> <span>
<svg {data.reference}
viewBox="0 0 12 12" <svg
fill="none" viewBox="0 0 12 12"
width="10px" fill="none"
xmlns="http://www.w3.org/2000/svg" height="1cap"
className="transition-all duration-100 group-hover:rotate-45" xmlns="http://www.w3.org/2000/svg"
> className="ml-1 inline transition-all duration-100 group-hover:rotate-45"
<path >
d="M11 9.283V1H2.727v1.44h5.83L1 9.99 2.01 11l7.556-7.55v5.833H11Z" <path
fill="currentColor" d="M11 9.283V1H2.727v1.44h5.83L1 9.99 2.01 11l7.556-7.55v5.833H11Z"
></path> fill="currentColor"
</svg> ></path>
</svg>
</span>
</a> </a>
</> </>
) : ( ) : (

4
web/src/components/Search.tsx
View File

@@ -25,9 +25,9 @@ export default function Search({
return ( return (
<div className={`w-full px-6 text-black dark:text-white`}> <div className={`w-full px-6 text-black dark:text-white`}>
<div <div
className={`flex w-full items-center rounded-md border border-${theme}-200 dark:border-${theme}-700 gap-1 px-2 bg-${theme}-100 dark:bg-${theme}-800 peer flex-nowrap`} className={`flex w-full items-center rounded-md border border-${theme}-200 dark:border-${theme}-700 gap-1 px-2 bg-${theme}-100 dark:bg-${theme}-900 peer flex-nowrap`}
> >
<SearchIcon className="size-5" /> <SearchIcon className={`size-5 text-${theme}-600 dark:text-${theme}-400`} />
<div className="w-full"> <div className="w-full">
<input <input
className={`h-10 w-full text-sm text-${theme}-800 dark:text-${theme}-200 peer bg-transparent focus:outline-none placeholder:text-${theme}-600 placeholder:dark:text-${theme}-400`} className={`h-10 w-full text-sm text-${theme}-800 dark:text-${theme}-200 peer bg-transparent focus:outline-none placeholder:text-${theme}-600 placeholder:dark:text-${theme}-400`}

4
web/src/components/Server.tsx
View File

@@ -16,7 +16,7 @@ export function Server({
if (name.length === 0) if (name.length === 0)
return ( return (
<li className="mb-8 last:mb-0"> <li className="mb-8 last:mb-0">
<ul className={`dark:divide-${theme}-800 divide-y dark:text-white`}> <ul className={`dark:divide-${theme}-900 divide-y dark:text-white`}>
{children} {children}
</ul> </ul>
</li> </li>
@@ -34,7 +34,7 @@ export function Server({
/> />
</DisclosureButton> </DisclosureButton>
<DisclosurePanel <DisclosurePanel
className={`dark:divide-${theme}-800 divide-y dark:text-white`} className={`dark:divide-${theme}-900 divide-y dark:text-white`}
as="ul" as="ul"
transition transition
> >

2
web/src/components/Statistic.tsx
View File

@@ -20,7 +20,7 @@ export default function Statistic({
const displayName = name.replaceAll("_", " "); const displayName = name.replaceAll("_", " ");
return ( return (
<div <div
className={`before:bg-${theme}-200 before:dark:bg-${theme}-800 after:bg-${theme}-200 after:dark:bg-${theme}-800 gi`} className={`before:bg-${theme}-200 before:dark:bg-${theme}-900 after:bg-${theme}-200 after:dark:bg-${theme}-900 gi`}
> >
<div className="flex h-full flex-col justify-between gap-x-4 gap-y-2 px-6 py-4 align-baseline lg:min-h-32"> <div className="flex h-full flex-col justify-between gap-x-4 gap-y-2 px-6 py-4 align-baseline lg:min-h-32">
<dt <dt

6
web/tailwind.config.js
View File

@@ -23,7 +23,7 @@ export default {
variants: ["before", "after"], variants: ["before", "after"],
}, },
{ {
pattern: /bg-(gray|neutral)-800/, pattern: /bg-(gray|neutral)-900/,
variants: ["before:dark", "after:dark", "dark", "hover:dark"], variants: ["before:dark", "after:dark", "dark", "hover:dark"],
}, },
{ {
@@ -58,14 +58,14 @@ export default {
variants: ["group-data-[hover]:dark"], variants: ["group-data-[hover]:dark"],
}, },
{ {
pattern: /divide-(gray|neutral)-800/, pattern: /divide-(gray|neutral)-900/,
variants: ["dark"], variants: ["dark"],
}, },
{ {
pattern: /border-(gray|neutral)-(200|300)/, pattern: /border-(gray|neutral)-(200|300)/,
}, },
{ {
pattern: /border-(gray|neutral)-(700|800)/, pattern: /border-(gray|neutral)-(700|800|900)/,
variants: ["dark"], variants: ["dark"],
}, },
], ],