Skip to content

Commit b489cdc

Browse files
committed
Docs: Improve mobile design
1 parent ca225a7 commit b489cdc

3 files changed

Lines changed: 119 additions & 6 deletions

File tree

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import styles from "./styles.module.css";
2+
3+
// Responsive comparison of the download variants. Renders as three columns on
4+
// desktop and stacks vertically on mobile — unlike a markdown table, it never
5+
// overflows the viewport and so never causes horizontal page scrolling.
6+
const VARIANTS = [
7+
{
8+
version: "Setup (MSI)",
9+
description: (
10+
<>
11+
Installs system-wide and requires administrator privileges, integrating
12+
with Windows like any other installed app. It's the right choice for most
13+
users and the standard way to roll NETworkManager out to many machines via
14+
Intune, SCCM, or Group Policy (see <em>Silent install</em> below). Updates
15+
install cleanly over a previous version.
16+
</>
17+
),
18+
location: <code>~\Documents\NETworkManager</code>,
19+
},
20+
{
21+
version: "Portable (ZIP)",
22+
description: (
23+
<>
24+
Runs straight from the extracted folder — no installation and no
25+
administrator rights required, which makes it ideal for a USB stick, a
26+
network share, or locked-down environments. Settings and profiles are
27+
stored next to the executable, so the whole setup travels with the folder.
28+
To upgrade, copy your <code>Profiles</code> and <code>Settings</code>{" "}
29+
directories into the new version.
30+
</>
31+
),
32+
location: "Next to the executable",
33+
},
34+
{
35+
version: "Archive (ZIP)",
36+
description: (
37+
<>
38+
Works like the Portable version — no installation required — but stores
39+
settings and profiles in your Documents folder instead of next to the
40+
executable. This suits custom or multi-user setups such as a Terminal
41+
Server, where the application files stay shared while each user keeps their
42+
own profile. Just extract it and run the executable directly.
43+
</>
44+
),
45+
location: <code>~\Documents\NETworkManager</code>,
46+
},
47+
];
48+
49+
export default function VersionComparison() {
50+
return (
51+
<div className={styles.grid}>
52+
{VARIANTS.map((v) => (
53+
<div key={v.version} className={styles.card}>
54+
<div className={styles.cardTitle}>{v.version}</div>
55+
<p className={styles.cardDesc}>{v.description}</p>
56+
<div className={styles.cardSpec}>
57+
<span className={styles.specLabel}>Settings &amp; profiles</span>
58+
<span>{v.location}</span>
59+
</div>
60+
</div>
61+
))}
62+
</div>
63+
);
64+
}
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
.grid {
2+
display: grid;
3+
grid-template-columns: repeat(3, 1fr);
4+
gap: 16px;
5+
margin: 1rem 0 2rem;
6+
}
7+
8+
.card {
9+
display: flex;
10+
flex-direction: column;
11+
padding: 18px 20px;
12+
border: 1px solid var(--ifm-color-emphasis-300);
13+
border-radius: 12px;
14+
background: var(--ifm-color-emphasis-100);
15+
}
16+
17+
.cardTitle {
18+
margin-bottom: 10px;
19+
font-size: 18px;
20+
font-weight: 700;
21+
}
22+
23+
.cardDesc {
24+
flex-grow: 1;
25+
margin-bottom: 14px;
26+
font-size: 14px;
27+
line-height: 1.55;
28+
color: var(--ifm-color-emphasis-800);
29+
}
30+
31+
.cardSpec {
32+
display: flex;
33+
flex-direction: column;
34+
gap: 2px;
35+
padding-top: 12px;
36+
border-top: 1px solid var(--ifm-color-emphasis-200);
37+
font-size: 14px;
38+
}
39+
40+
.specLabel {
41+
font-size: 11px;
42+
font-weight: 700;
43+
letter-spacing: 0.03em;
44+
text-transform: uppercase;
45+
color: var(--ifm-color-emphasis-600);
46+
}
47+
48+
@media only screen and (max-width: 768px) {
49+
.grid {
50+
grid-template-columns: 1fr;
51+
}
52+
}

Website/src/pages/download.mdx

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import Tabs from "@theme/Tabs";
99
import TabItem from "@theme/TabItem";
1010
import styles from "./styles.module.css";
1111
import DownloadSection from "@site/src/components/DownloadSection";
12+
import VersionComparison from "@site/src/components/VersionComparison";
1213
import LatestPrerelease from "@site/src/components/LatestPrerelease";
1314

1415
# Download
@@ -65,13 +66,9 @@ import LatestPrerelease from "@site/src/components/LatestPrerelease";
6566

6667
## Which version should I download?
6768

68-
The download cards above summarize each variant. This table compares where settings and profiles are stored and what each version is best suited for:
69+
Each version is suited to a different scenario — here's a closer look to help you choose:
6970

70-
| Version | Settings &amp; profiles stored in | Best for |
71-
|---|---|---|
72-
| **Setup** (MSI) | `~\Documents\NETworkManager` | Most users — system-wide install, central deployment (Intune, SCCM) |
73-
| **Portable** (ZIP) | Next to the executable | USB stick / network share. To upgrade, copy the `Profiles` and `Settings` directories to the new version |
74-
| **Archive** (ZIP) | `~\Documents\NETworkManager` | Custom scenarios (e.g. Terminal Server) — portable, but Documents-based |
71+
<VersionComparison />
7572

7673
## System requirements
7774

0 commit comments

Comments
 (0)