thegeneralist01/archivr
1
Fork 0
mirror of https://github.com/thegeneralist01/archivr synced 2026-07-22 03:05:32 +02:00
Code Issues Activity

style(frontend): ext cards in auto-fill grid

Browse source
This commit is contained in:
TheGeneralist 2026-07-13 14:36:42 +02:00
parent 38d8c1f702
commit 5bca1a5d6d
Signed by: thegeneralist01
SSH key fingerprint: SHA256:pp9qddbCNmVNoSjevdvQvM5z0DHN7LTa8qBMbcMq/R4
6 changed files with 61 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

2
crates/archivr-server/static/assets/index-AE6iQI2Q.js → crates/archivr-server/static/assets/index-BZnJs_tc.js
View file

File diff suppressed because one or more lines are too long

1
crates/archivr-server/static/assets/index-C89vW3ol.css
View file

File diff suppressed because one or more lines are too long

1
crates/archivr-server/static/assets/index-p2mzAHzf.css Normal file
View file

File diff suppressed because one or more lines are too long

4
crates/archivr-server/static/index.html
View file

@ -4,8 +4,8 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Archivr</title> <title>Archivr</title>
<script type="module" crossorigin src="/assets/index-AE6iQI2Q.js"></script> <script type="module" crossorigin src="/assets/index-BZnJs_tc.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-C89vW3ol.css"> <link rel="stylesheet" crossorigin href="/assets/index-p2mzAHzf.css">
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

100
frontend/src/components/SettingsView.jsx
View file

@ -691,7 +691,7 @@ function ExtensionsTab() {
const cookieExtEnabled = settings?.cookie_ext_enabled ?? true const cookieExtEnabled = settings?.cookie_ext_enabled ?? true
return ( return (
<div style={{ maxWidth: 560 }}> <div>
<div className="form-section"> <div className="form-section">
<h2>Extensions</h2> <h2>Extensions</h2>
<p className="form-hint" style={{ marginBottom: 20 }}> <p className="form-hint" style={{ marginBottom: 20 }}>
@ -699,60 +699,62 @@ function ExtensionsTab() {
accept cookie banners, and more. Changes take effect on the next capture. accept cookie banners, and more. Changes take effect on the next capture.
</p> </p>
<div className="ext-card"> <div className="ext-grid">
<div className="ext-card-header"> <div className="ext-card">
<div className="ext-card-info"> <div className="ext-card-header">
<span className="ext-card-name">uBlock Origin Lite</span> <div className="ext-card-info">
<span className="ext-card-desc"> <span className="ext-card-name">uBlock Origin Lite</span>
Blocks ads, trackers, and other page clutter during archiving <span className="ext-card-desc">
via Chrome&rsquo;s declarativeNetRequest API (Manifest V3). Blocks ads, trackers, and other page clutter during archiving
</span> via Chrome&rsquo;s declarativeNetRequest API (Manifest V3).
{!extAvailable && (
<span className="ext-card-hint">
Not configured &mdash; set <code>ARCHIVR_UBLOCK_EXT</code> to the
unpacked extension directory to enable.
</span> </span>
)} {!extAvailable && (
<span className="ext-card-hint">
Not configured &mdash; set <code>ARCHIVR_UBLOCK_EXT</code> to the
unpacked extension directory to enable.
</span>
)}
</div>
<button
type="button"
role="switch"
aria-checked={extEnabled}
className={`ext-toggle${extEnabled ? ' ext-toggle--on' : ''}`}
onClick={() => toggleUblock(!extEnabled)}
disabled={saving}
aria-label="Toggle uBlock Origin Lite"
>
<span className="ext-toggle-knob" />
</button>
</div> </div>
<button
type="button"
role="switch"
aria-checked={extEnabled}
className={`ext-toggle${extEnabled ? ' ext-toggle--on' : ''}`}
onClick={() => toggleUblock(!extEnabled)}
disabled={saving}
aria-label="Toggle uBlock Origin Lite"
>
<span className="ext-toggle-knob" />
</button>
</div> </div>
</div>
<div className="ext-card"> <div className="ext-card">
<div className="ext-card-header"> <div className="ext-card-header">
<div className="ext-card-info"> <div className="ext-card-info">
<span className="ext-card-name">I Still Don&rsquo;t Care About Cookies</span> <span className="ext-card-name">I Still Don&rsquo;t Care About Cookies</span>
<span className="ext-card-desc"> <span className="ext-card-desc">
Dismiss cookie consent banners during archiving. Dismiss cookie consent banners during archiving.
</span>
{!cookieExtAvailable && (
<span className="ext-card-hint">
Not configured &mdash; set <code>ARCHIVR_COOKIE_EXT</code> to the
unpacked extension directory to enable.
</span> </span>
)} {!cookieExtAvailable && (
<span className="ext-card-hint">
Not configured &mdash; set <code>ARCHIVR_COOKIE_EXT</code> to the
unpacked extension directory to enable.
</span>
)}
</div>
<button
type="button"
role="switch"
aria-checked={cookieExtEnabled}
className={`ext-toggle${cookieExtEnabled ? ' ext-toggle--on' : ''}`}
onClick={() => toggleCookieExt(!cookieExtEnabled)}
disabled={saving}
aria-label="Toggle I Still Don't Care About Cookies"
>
<span className="ext-toggle-knob" />
</button>
</div> </div>
<button
type="button"
role="switch"
aria-checked={cookieExtEnabled}
className={`ext-toggle${cookieExtEnabled ? ' ext-toggle--on' : ''}`}
onClick={() => toggleCookieExt(!cookieExtEnabled)}
disabled={saving}
aria-label="Toggle I Still Don't Care About Cookies"
>
<span className="ext-toggle-knob" />
</button>
</div> </div>
</div> </div>

6
frontend/src/styles.css
View file

@ -1014,6 +1014,12 @@ select {
.ext-toggle--sm.ext-toggle--on .ext-toggle-knob { transform: translateX(16px); } .ext-toggle--sm.ext-toggle--on .ext-toggle-knob { transform: translateX(16px); }
/* ── Extension card (Settings / Extensions tab) ──────────────────────────── */ /* ── Extension card (Settings / Extensions tab) ──────────────────────────── */
.ext-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 12px;
}
.ext-card { .ext-card {
border: 1px solid var(--line); border: 1px solid var(--line);
border-radius: var(--r2); border-radius: var(--r2);