Skip to content

Commit 890ece8

Browse files
explodingcameraexplodingcamera
committed
chore: css improvements
Signed-off-by: Henry Gressmann <[email protected]>
1 parent 24b6442 commit 890ece8

File tree

7 files changed

+127
-53
lines changed

7 files changed

+127
-53
lines changed

‎web/src/components/dimensions/dimensions.module.css‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
11
.card {
22
padding: 1rem;
33
padding-bottom: 0.6rem;
4-
background-color: var(--pico-form-element-background-color);
54
border-radius: var(--pico-border-radius);
6-
background: var(--pico-card-background-color);
75
box-shadow: var(--pico-card-box-shadow);
6+
background-color: var(--card-background);
87
display: flex;
98
flex-direction: column;
109
}
@@ -72,6 +71,11 @@
7271
gap: 1rem;
7372
color: var(--pico-h5-color);
7473
margin-bottom: 1rem;
74+
75+
> div:first-of-type {
76+
font-weight: 600;
77+
color: var(--pico-color);
78+
}
7579
}
7680

7781
.dimensionTable {

‎web/src/components/dimensions/index.tsx‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as Tabs from "@radix-ui/react-tabs";
2-
import { FullscreenIcon, LinkIcon, ZoomIn } from "lucide-react";
2+
import { FullscreenIcon, LinkIcon, SquareArrowOutUpRightIcon, ZoomIn } from "lucide-react";
33
import styles from "./dimensions.module.css";
44

55
import {
@@ -247,11 +247,29 @@ const dimensionLabels: Record<Dimension, (value: DimensionTableRow) => React.Rea
247247
<ReferrerIcon referrer={value.dimensionValue} icon={value.icon} size={24} />
248248
&nbsp;
249249
{value.displayName || value.dimensionValue || "Unknown"}
250+
{value.dimensionValue && isValidFqdn(value.dimensionValue) && (
251+
<>
252+
&nbsp;
253+
<a href={`https://${value.dimensionValue}`} target="_blank" rel="noreferrer">
254+
<SquareArrowOutUpRightIcon size={16} />
255+
</a>
256+
</>
257+
)}
250258
</>
251259
),
252260
path: (value) => value.dimensionValue,
253261
};
254262

263+
const isValidFqdn = (fqdn: string) => {
264+
if (!fqdn.includes(".")) return false;
265+
try {
266+
new URL(`https://${fqdn}`);
267+
return true;
268+
} catch {
269+
return false;
270+
}
271+
};
272+
255273
const DimensionLabel = ({ dimension, value }: { dimension: Dimension; value: DimensionTableRow }) =>
256274
dimensionLabels[dimension](value);
257275

‎web/src/components/project.module.css‎

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,14 @@
1010
align-items: center;
1111
gap: 1rem;
1212
width: 100%;
13-
padding-bottom: 0rem;
13+
padding-bottom: .5rem;
1414

1515
a {
1616
cursor: pointer;
1717
}
1818

1919
> h1 {
20-
font-size: 1.4rem;
20+
font-size: 1.5rem;
2121
margin: 0;
2222
align-items: first baseline;
2323
}
@@ -59,15 +59,31 @@ div.graph {
5959
&::after {
6060
content: "";
6161
position: absolute;
62-
background: linear-gradient(
63-
to right,
64-
transparent,
65-
var(--pico-card-background-color)
62+
--direction: right;
63+
background: linear-gradient(
64+
to var(--direction),
65+
hsla(var(--card-background-base) / 0) 0%,
66+
hsla(var(--card-background-base) / 0.018) 9.5%,
67+
hsla(var(--card-background-base) / 0.058) 17.9%,
68+
hsla(var(--card-background-base) / 0.116) 25.6%,
69+
hsla(var(--card-background-base) / 0.188) 32.5%,
70+
hsla(var(--card-background-base) / 0.273) 38.8%,
71+
hsla(var(--card-background-base) / 0.365) 44.7%,
72+
hsla(var(--card-background-base) / 0.462) 50.3%,
73+
hsla(var(--card-background-base) / 0.56) 55.7%,
74+
hsla(var(--card-background-base) / 0.657) 61.1%,
75+
hsla(var(--card-background-base) / 0.747) 66.5%,
76+
hsla(var(--card-background-base) / 0.829) 72.2%,
77+
hsla(var(--card-background-base) / 0.899) 78.3%,
78+
hsla(var(--card-background-base) / 0.953) 84.8%,
79+
hsla(var(--card-background-base) / 0.988) 92%,
80+
hsl(var(--card-background-base)) 100%
6681
);
82+
6783
right: 0;
6884
top: 0;
6985
bottom: 0;
70-
width: 2rem;
86+
width: 3rem;
7187
}
7288
}
7389

@@ -93,12 +109,8 @@ div.graph {
93109
top: unset;
94110
width: 100%;
95111
left: 0;
96-
height: 2rem;
97-
background: linear-gradient(
98-
to bottom,
99-
transparent,
100-
var(--pico-card-background-color)
101-
);
112+
height: 3rem;
113+
--direction: bottom;
102114
}
103115
}
104116

‎web/src/components/projects.module.css‎

Lines changed: 31 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,14 @@ details.selectRange {
8080
justify-content: space-between;
8181
align-items: center;
8282

83+
/* background-color: var(--card-background);
84+
padding: 0.5rem 1rem;
85+
padding-right: 0.5rem;
86+
border-top-left-radius: var(--pico-border-radius);
87+
border-top-right-radius: var(--pico-border-radius);
88+
box-shadow: var(--pico-card-box-shadow); */
89+
margin-bottom: 1rem;
90+
8391
> a {
8492
padding: 1rem 0.2rem 1rem 1rem;
8593
opacity: 0.6;
@@ -99,14 +107,17 @@ details.selectRange {
99107
> div {
100108
flex: 1;
101109
}
110+
111+
details {
112+
margin-bottom: 0;
113+
}
102114
}
103115

104116
.stats {
105117
align-items: center;
106118
> div {
107119
display: flex;
108-
gap: 1rem;
109-
padding-bottom: 1rem;
120+
gap: 0.7rem;
110121
@media (max-width: 768px) {
111122
flex-wrap: wrap;
112123
}
@@ -115,7 +126,7 @@ details.selectRange {
115126

116127
.statsHeader {
117128
font-size: 1rem;
118-
margin-bottom: 0.4rem;
129+
margin-bottom: 0.7rem;
119130
align-items: center;
120131
display: flex;
121132

@@ -125,15 +136,17 @@ details.selectRange {
125136
}
126137

127138
> span.online {
139+
margin-left: 0.2rem;
128140
> svg {
129-
margin-right: 0.1rem;
141+
margin-right: 0.2rem;
130142
}
131143

132144
.pulse {
133145
position: absolute;
134146
animation: pulse 2s infinite;
135147
}
136148

149+
line-height: normal;
137150
margin-left: 0.5rem;
138151
display: inline-flex;
139152
gap: 0.2rem;
@@ -157,12 +170,17 @@ button.stat {
157170
margin: 0;
158171
font-size: 0.8rem;
159172
min-width: 7.5rem;
173+
padding: 0.4rem 0.6rem 0.3rem 0.6rem;
174+
margin-left: -0.5rem;
175+
transition: background-color 0.2s ease;
176+
border-radius: var(--pico-border-radius);
177+
user-select: none;
160178

161179
&[data-active="true"] {
162-
h2 {
163-
text-decoration: underline;
164-
font-weight: 600;
165-
}
180+
background-color: var(--card-background);
181+
box-shadow: var(--pico-card-box-shadow);
182+
183+
h2,
166184
h2,
167185
h3 {
168186
color: var(--pico-h1-color);
@@ -173,17 +191,18 @@ button.stat {
173191
margin: 0;
174192
font-size: 1.2rem;
175193
font-weight: 500;
176-
margin-right: 1rem;
177-
178194
display: inline-flex;
179195
gap: 1rem;
180196
align-items: center;
197+
color: var(--pico-h5-color);
181198
}
182199

183200
h2 {
201+
color: var(--pico-h4-color);
184202
margin: 0;
185-
font-size: 0.8rem;
186-
font-weight: 400;
203+
font-size: 0.9rem;
204+
font-weight: 500;
205+
margin-bottom: 0.3rem;
187206
}
188207

189208
span.change {

‎web/src/components/projects.tsx‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -206,14 +206,6 @@ export const ProjectOverview = ({
206206
selected={metric === "views"}
207207
/>
208208

209-
<Stat
210-
title="Total Sessions"
211-
value={stats?.stats.totalSessions}
212-
prevValue={stats?.statsPrev.totalSessions}
213-
metric={"sessions"}
214-
onSelect={() => setMetric("sessions")}
215-
selected={metric === "sessions"}
216-
/>
217209
<Stat
218210
title="Unique Visitors"
219211
value={stats?.stats.uniqueVisitors}
@@ -222,6 +214,16 @@ export const ProjectOverview = ({
222214
onSelect={() => setMetric("unique_visitors")}
223215
selected={metric === "unique_visitors"}
224216
/>
217+
218+
<Stat
219+
title="Total Sessions"
220+
value={stats?.stats.totalSessions}
221+
prevValue={stats?.statsPrev.totalSessions}
222+
metric={"sessions"}
223+
onSelect={() => setMetric("sessions")}
224+
selected={metric === "sessions"}
225+
/>
226+
225227
<Stat
226228
title="Avg. Views Per Session"
227229
value={stats?.stats.avgViewsPerSession}
@@ -278,7 +280,9 @@ export const LiveVisitorCount = ({ count }: { count: number }) => {
278280

279281
const formatPercent = (value: number) => {
280282
if (value === -1) return "∞";
281-
return value.toFixed(1).replace(/\.0$/, "") || "0";
283+
if (value >= 10000 || value <= -10000) return `${(value / 100).toFixed(0)}x`;
284+
if (value >= 1000 || value <= -1000) return `${value.toFixed(0).replace(/\.0$/, "") || "0"}%`;
285+
return `${value.toFixed(1).replace(/\.0$/, "") || "0"}%`;
282286
};
283287

284288
export const Stat = ({
@@ -308,7 +312,7 @@ export const Stat = ({
308312
<h3>
309313
{formatMetricVal(metric, value)}
310314
<span style={{ color }} className={styles.change}>
311-
{icon} {formatPercent(changePercent)}%
315+
{icon} {formatPercent(changePercent)}
312316
</span>
313317
</h3>
314318
</button>

‎web/src/components/userInfo.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,17 +33,17 @@ export const LoginButton = () => {
3333
</li>
3434
<li>
3535
{/* biome-ignore lint/a11y/useValidAnchor: */}
36-
<a
36+
<button
37+
type="button"
3738
onClick={() => {
3839
api["/api/dashboard/auth/logout"].post().then(() => {
39-
window.location.href = "/";
40+
// window.location.href = "/";
4041
});
4142
}}
42-
href="#"
4343
>
4444
<LogOutIcon size="16" />
4545
Logout
46-
</a>
46+
</button>
4747
</li>
4848
</ul>
4949
</details>

‎web/src/global.css‎

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,30 +2,43 @@
22
@import "@picocss/pico/css/pico.lime.min.css" layer(pico);
33
@import "react-tooltip/dist/react-tooltip.css" layer(tooltip);
44

5-
@layer pico {
6-
:root[data-theme="dark"] {
5+
:root {
6+
--pico-background-color: #f7f8ff;
7+
--card-background-base: 0deg 0% 100%;
8+
--card-background: hsl(var(--card-background-base));
9+
}
10+
11+
:root[data-theme="dark"] {
12+
--pico-background-color: #0a0c10;
13+
--card-background-base: 200deg 18.37% 9.6%;
14+
}
15+
16+
@media only screen and (prefers-color-scheme: dark) {
17+
:root:not([data-theme="light"]) {
718
--pico-background-color: #0a0c10;
8-
--pico-card-background-color: #141a1d;
19+
--card-background-base: 200deg 18.37% 9.6%;
920
}
21+
}
1022

11-
@media only screen and (prefers-color-scheme: dark) {
12-
:root:not([data-theme="light"]) {
13-
--pico-background-color: #0a0c10;
14-
--pico-card-background-color: #141a1d;
15-
}
16-
}
23+
h1,
24+
h2,
25+
h3,
26+
h4,
27+
h5,
28+
h6 {
29+
--pico-font-weight: 600;
1730
}
1831

1932
.full {
2033
min-height: 100%;
2134
}
22-
35+
/*
2336
body {
2437
--bg-gradient-color: oklab(0.51 -0.1 0 / 0.1);
2538
background: linear-gradient(215deg, var(--bg-gradient-color), transparent 50%),
2639
radial-gradient(var(--bg-gradient-color), transparent 40%) no-repeat -60vw -40vh /90vw
2740
300vh;
28-
}
41+
} */
2942

3043
h1,
3144
h2,
@@ -48,3 +61,7 @@ h6 {
4861
article {
4962
border-radius: 1rem;
5063
}
64+
65+
html body[data-scroll-locked] {
66+
margin-right: 0 !important;
67+
}

0 commit comments

Comments
 (0)