Skip to content

Commit 6d23aeb

Browse files
ImTheKaiImTheKai
committed
Adding spacing and font size client side feature to the users profile
settings Signed-off-by: Kai Wagner <kai.wagner@percona.com>
1 parent 9078b4d commit 6d23aeb

5 files changed

Lines changed: 151 additions & 9 deletions

File tree

‎app/assets/stylesheets/components/settings.css‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -124,7 +124,8 @@
124124
border-color: var(--color-border);
125125
}
126126

127-
.theme-choice {
127+
.theme-choice,
128+
.density-choice {
128129
display: flex;
129130
align-items: center;
130131
justify-content: space-between;
@@ -135,18 +136,21 @@
135136
border: var(--border-width) solid var(--color-border);
136137
}
137138

138-
.theme-choice-label {
139+
.theme-choice-label,
140+
.density-choice-label {
139141
font-weight: var(--font-weight-medium);
140142
color: var(--color-text-primary);
141143
}
142144

143-
.theme-choice-buttons {
145+
.theme-choice-buttons,
146+
.density-choice-buttons {
144147
display: inline-flex;
145148
align-items: center;
146149
gap: var(--spacing-2);
147150
}
148151

149-
.theme-choice-button {
152+
.theme-choice-button,
153+
.density-choice-button {
150154
display: inline-flex;
151155
align-items: center;
152156
gap: var(--spacing-2);
@@ -159,19 +163,22 @@
159163
transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
160164
}
161165

162-
.theme-choice-button:hover {
166+
.theme-choice-button:hover,
167+
.density-choice-button:hover {
163168
background: var(--color-bg-hover);
164169
box-shadow: var(--shadow-sm);
165170
transform: translateY(-1px);
166171
}
167172

168-
.theme-choice-button.is-active {
173+
.theme-choice-button.is-active,
174+
.density-choice-button.is-active {
169175
background: var(--color-bg-button);
170176
color: var(--color-text-button);
171177
border-color: transparent;
172178
}
173179

174-
.theme-choice-button.is-active i {
180+
.theme-choice-button.is-active i,
181+
.density-choice-button.is-active i {
175182
color: currentColor;
176183
}
177184

‎app/assets/stylesheets/variables.css‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,3 +60,69 @@
6060
--avatar-size-md: 32px;
6161
--avatar-size-default: 40px;
6262
}
63+
64+
:root[data-density="tiny"] {
65+
--font-size-xs: 0.625rem;
66+
--font-size-sm: 0.675rem;
67+
--font-size-base: 0.725rem;
68+
--font-size-md: 0.775rem;
69+
--font-size-lg: 0.825rem;
70+
71+
--spacing-2: 0.25rem;
72+
--spacing-3: 0.375rem;
73+
--spacing-4: 0.625rem;
74+
--spacing-5: 0.75rem;
75+
--spacing-6: 1rem;
76+
77+
--line-height-normal: 1.4;
78+
--line-height-relaxed: 1.45;
79+
}
80+
81+
:root[data-density="compact"] {
82+
--font-size-xs: 0.70rem;
83+
--font-size-sm: 0.75rem;
84+
--font-size-base: 0.80rem;
85+
--font-size-md: 0.875rem;
86+
--font-size-lg: 0.90rem;
87+
88+
--spacing-2: 0.375rem;
89+
--spacing-3: 0.5rem;
90+
--spacing-4: 0.75rem;
91+
--spacing-5: 1rem;
92+
--spacing-6: 1.25rem;
93+
94+
--line-height-normal: 1.5;
95+
--line-height-relaxed: 1.55;
96+
}
97+
98+
:root[data-density="comfortable"] {
99+
--font-size-xs: 0.875rem;
100+
--font-size-sm: 0.95rem;
101+
--font-size-base: 1rem;
102+
--font-size-md: 1.1rem;
103+
--font-size-lg: 1.15rem;
104+
105+
--spacing-3: 0.875rem;
106+
--spacing-4: 1.25rem;
107+
--spacing-5: 1.5rem;
108+
--spacing-6: 1.75rem;
109+
110+
--line-height-normal: 1.65;
111+
--line-height-relaxed: 1.80;
112+
}
113+
114+
:root[data-density="spacious"] {
115+
--font-size-xs: 0.95rem;
116+
--font-size-sm: 1.05rem;
117+
--font-size-base: 1.1rem;
118+
--font-size-md: 1.2rem;
119+
--font-size-lg: 1.25rem;
120+
121+
--spacing-3: 1rem;
122+
--spacing-4: 1.5rem;
123+
--spacing-5: 1.75rem;
124+
--spacing-6: 2rem;
125+
126+
--line-height-normal: 1.70;
127+
--line-height-relaxed: 1.85;
128+
}

‎app/javascript/controllers/density_controller.js‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { Controller } from "@hotwired/stimulus"
2+
3+
const STORAGE_KEY = "hackorum-density"
4+
const DEFAULT_DENSITY = "default"
5+
const VALID_DENSITIES = ["tiny", "compact", "default", "comfortable", "spacious"]
6+
7+
export default class extends Controller {
8+
static targets = ["button"]
9+
10+
connect() {
11+
this.applyInitialDensity()
12+
}
13+
14+
select(event) {
15+
event.preventDefault()
16+
const { densityValue } = event.currentTarget.dataset
17+
this.setDensity(densityValue)
18+
}
19+
20+
applyInitialDensity() {
21+
const stored = window.localStorage.getItem(STORAGE_KEY)
22+
const initial = VALID_DENSITIES.includes(stored) ? stored : DEFAULT_DENSITY
23+
this.setDensity(initial, { persist: false })
24+
}
25+
26+
setDensity(density, { persist = true } = {}) {
27+
const normalized = VALID_DENSITIES.includes(density) ? density : DEFAULT_DENSITY
28+
document.documentElement.dataset.density = normalized
29+
30+
if (persist) {
31+
window.localStorage.setItem(STORAGE_KEY, normalized)
32+
}
33+
34+
this.updateButtons(normalized)
35+
}
36+
37+
updateButtons(density) {
38+
if (this.hasButtonTarget) {
39+
this.buttonTargets.forEach((button) => {
40+
button.classList.toggle("is-active", button.dataset.densityValue === density)
41+
})
42+
}
43+
}
44+
45+
get currentDensity() {
46+
return document.documentElement.dataset.density || DEFAULT_DENSITY
47+
}
48+
}

‎app/views/layouts/application.html.slim‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
doctype html
2-
html data-theme="light"
2+
html data-theme="light" data-density="default"
33
head
44
title = meta_title
55
meta[name="description" content=meta_description]
@@ -30,14 +30,18 @@ html data-theme="light"
3030
var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
3131
var theme = stored || (prefersDark ? 'dark' : 'light');
3232
document.documentElement.dataset.theme = theme;
33+
var densityKey = 'hackorum-density';
34+
var validDensities = ['tiny', 'compact', 'default', 'comfortable', 'spacious'];
35+
var storedDensity = window.localStorage.getItem(densityKey);
36+
document.documentElement.dataset.density = validDensities.includes(storedDensity) ? storedDensity : 'default';
3337
})();
3438
= stylesheet_link_tag "application", "data-turbo-track": "reload"
3539
= javascript_importmap_tags
3640
script[src="https://kit.fontawesome.com/92fb6aa8ba.js"]
3741
- if ENV["UMAMI_WEBSITE_ID"].present?
3842
- umami_host = ENV["UMAMI_HOST"].presence || "https://umami.hackorum.dev"
3943
script[async defer data-website-id=ENV["UMAMI_WEBSITE_ID"] src="#{umami_host}/script.js"]
40-
body class=(content_for?(:sidebar) ? "has-sidebar" : nil) data-controller="sidebar swipe-nav"
44+
body class=(content_for?(:sidebar) ? "has-sidebar" : nil) data-controller="sidebar swipe-nav density"
4145
- if user_signed_in? && current_user.username.blank?
4246
.global-warning
4347
span Please set a username in Settings.

‎app/views/settings/profiles/show.html.slim‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,23 @@
2424
i.fa-regular.fa-moon aria-hidden="true"
2525
span Dark
2626

27+
.settings-section
28+
h2 Text Density
29+
p.settings-hint Choose your preferred text size and spacing.
30+
.density-choice data-controller="density"
31+
span.density-choice-label Density
32+
.density-choice-buttons
33+
button.density-choice-button type="button" data-density-value="tiny" data-density-target="button" data-action="click->density#select"
34+
span Tiny
35+
button.density-choice-button type="button" data-density-value="compact" data-density-target="button" data-action="click->density#select"
36+
span Compact
37+
button.density-choice-button type="button" data-density-value="default" data-density-target="button" data-action="click->density#select"
38+
span Default
39+
button.density-choice-button type="button" data-density-value="comfortable" data-density-target="button" data-action="click->density#select"
40+
span Comfortable
41+
button.density-choice-button type="button" data-density-value="spacious" data-density-target="button" data-action="click->density#select"
42+
span Spacious
43+
2744
.settings-section
2845
h2 Mention Settings
2946
p.settings-hint Control who can @mention you in notes.

0 commit comments

Comments
 (0)