Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 18:36:30 +01:00
Code Issues Packages Projects Releases Activity

feat(website): improve hero download buttons on mobile

Browse Source
This commit is contained in:
Elian Doran
2025-09-27 14:27:31 +03:00
parent 6fda669307
commit 8416dab870
5 changed files with 20 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/website/src/components/DownloadButton.css
View File

@@ -1,7 +1,3 @@
.download-button {
display: none;
}
.download-button .platform { .download-button .platform {
font-size: 0.75em; font-size: 0.75em;
opacity: 0.75; opacity: 0.75;
@@ -14,6 +10,6 @@
@media (min-width: 720px) { @media (min-width: 720px) {
.download-button { .download-button {
display: inline-block; display: inline-block !important;
} }
} }

2
apps/website/src/components/DownloadButton.tsx
View File

@@ -12,7 +12,7 @@ const { name, url } = getRecommendedDownload();
export default function DownloadButton({ big }: DownloadButtonProps) { export default function DownloadButton({ big }: DownloadButtonProps) {
return ( return (
<Button <Button
className={`download-button ${big ? "big" : ""}`} className={`download-button desktop-only ${big ? "big" : ""}`}
href={url} href={url}
iconSvg={downloadIcon} iconSvg={downloadIcon}
text={<> text={<>

7
apps/website/src/pages/Home/index.css
View File

@@ -80,8 +80,9 @@ section.hero-section .screenshot {
} }
section.hero-section .download-wrapper { section.hero-section .download-wrapper {
display: inline-flex; display: flex;
flex-direction: column; flex-direction: column;
align-content: center;
} }
section.hero-section .download-button { section.hero-section .download-button {
@@ -130,6 +131,10 @@ section.hero-section .additional-options a {
flex-direction: row; flex-direction: row;
padding: 3em; padding: 3em;
} }
section.hero-section .download-wrapper {
display: inline-flex;
}
} }
section:nth-of-type(2n+1) { section:nth-of-type(2n+1) {

3
apps/website/src/pages/Home/index.tsx
View File

@@ -31,7 +31,8 @@ function HeroSection() {
<div className="download-wrapper"> <div className="download-wrapper">
<DownloadButton big /> <DownloadButton big />
<a class="more-download-options" href="./download">See all download options</a> <a class="more-download-options desktop-only" href="./download">See all download options</a>
<Button href="./download" className="mobile-only" text="See download options" />
<div className="additional-options"> <div className="additional-options">
<Button iconSvg={gitHubIcon} outline text="GitHub" href="https://github.com/TriliumNext/Trilium/" openExternally /> <Button iconSvg={gitHubIcon} outline text="GitHub" href="https://github.com/TriliumNext/Trilium/" openExternally />
<Button iconSvg={dockerIcon} outline text="Docker Hub" href="https://hub.docker.com/r/triliumnext/trilium" openExternally /> <Button iconSvg={dockerIcon} outline text="Docker Hub" href="https://hub.docker.com/r/triliumnext/trilium" openExternally />

9
apps/website/src/style.css
View File

@@ -112,12 +112,15 @@ img {
fill: currentColor; fill: currentColor;
} }
@media (max-width: 719px) { @media (max-width: 719px) {
.grid-3-cols > *, .grid-3-cols > *,
.grid-2-cols > * { .grid-2-cols > * {
margin-bottom: 1em; margin-bottom: 1em;
} }
.desktop-only {
display: none !important;
}
} }
@media (min-width: 720px) { @media (min-width: 720px) {
@@ -140,4 +143,8 @@ img {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 1em; gap: 1em;
} }
.mobile-only {
display: none !important;
}
} }