Skip to content

Commit 0addd26

Browse files
alexy-osalexy-os
committed
Enhance UI components and layout for improved responsiveness and accessibility
- Added new utility classes to allowed.json for better layout control, including max-width and margin adjustments. - Updated views_templ.go and views.templ to utilize responsive classes, ensuring proper alignment and spacing. - Improved breadcrumb and featured media components for better text alignment and visual consistency. - Refactored publicMainContainerClass function to dynamically adjust container styles based on page type.
1 parent 64a0848 commit 0addd26

9 files changed

Lines changed: 143 additions & 46 deletions

File tree

‎.ui8px/policy/allowed.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,7 @@
4949
},
5050
"utilities": [
5151
"!hidden",
52+
"!max-w-[960px]",
5253
"-translate-x-1/2",
5354
"-translate-y-1/2",
5455
"absolute",
@@ -73,6 +74,7 @@
7374
"bg-secondary",
7475
"bg-transparent",
7576
"block",
77+
"break-words",
7678
"border",
7779
"border-0",
7880
"border-b",
@@ -169,7 +171,9 @@
169171
"list-decimal",
170172
"list-disc",
171173
"max-h-dvh",
174+
"max-w-3xl",
172175
"max-w-7xl",
176+
"max-w-[960px]",
173177
"max-w-full",
174178
"max-w-sm",
175179
"md:flex",
@@ -181,6 +185,7 @@
181185
"min-w-8",
182186
"min-w-full",
183187
"mt-8",
188+
"mx-auto",
184189
"no-underline",
185190
"object-",
186191
"object-bottom",
@@ -236,6 +241,7 @@
236241
"shadow-lg",
237242
"shadow-none",
238243
"shadow-sm",
244+
"shrink",
239245
"shrink-0",
240246
"space-y-1",
241247
"sticky",
@@ -284,6 +290,7 @@
284290
"w-5",
285291
"w-8",
286292
"w-full",
293+
"whitespace-normal",
287294
"whitespace-nowrap",
288295
"whitespace-pre-wrap",
289296
"xl:col-span-3",

‎internal/themes/company/views.templ‎

Lines changed: 35 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -103,8 +103,8 @@ templ pageBody(data publicrender.PublicPage) {
103103
"data-gocms-theme-package": "company",
104104
},
105105
}) {
106-
@ui.Container(ui.ContainerProps{Class: "py-12"}) {
107-
@ui.Stack(ui.StackProps{Class: "gap-10"}) {
106+
@ui.Container(ui.ContainerProps{Class: publicMainContainerClass(data.Kind)}) {
107+
@ui.Stack(ui.StackProps{Class: "min-w-0 w-full gap-10"}) {
108108
@breadcrumbs(data.Breadcrumbs)
109109
@companyHero(data)
110110
switch data.Kind {
@@ -237,15 +237,19 @@ templ relatedItems(data publicrender.PublicPage) {
237237

238238
templ featuredMedia(item *publicrender.MediaView) {
239239
if item != nil && item.URL != "" {
240-
@ui.Block(ui.BlockProps{Tag: "figure"}) {
241-
@ui.Stack(ui.StackProps{Class: "gap-2"}) {
240+
@ui.Block(ui.BlockProps{Tag: "figure", Class: "m-0 w-full"}) {
241+
@ui.Stack(ui.StackProps{Class: "items-center gap-2"}) {
242242
@ui.Image(ui.ImageProps{
243243
Src: item.URL,
244244
Alt: item.AltText,
245-
Class: "w-full rounded-lg border border-border",
245+
Class: "block w-full max-w-full rounded-lg border border-border",
246246
})
247247
if item.Caption != "" {
248-
@ui.Text(ui.TextProps{FontSize: "sm", TextColor: "muted-foreground"}, item.Caption)
248+
@ui.Text(ui.TextProps{
249+
FontSize: "sm",
250+
TextColor: "muted-foreground",
251+
TextAlign: "center",
252+
}, item.Caption)
249253
}
250254
}
251255
}
@@ -263,18 +267,30 @@ templ contentBlock(content string) {
263267
templ breadcrumbs(items []publicrender.Breadcrumb) {
264268
if len(items) > 0 {
265269
@elements.MarkerSection(elements.MarkerProps{
266-
Class: "gocms-public-breadcrumbs",
270+
Class: "gocms-public-breadcrumbs min-w-0 w-full",
267271
Attrs: templpkg.Attributes{"data-gocms-breadcrumbs": "public"},
268272
}) {
269-
@ui.Group(ui.GroupProps{Class: "flex-wrap gap-2"}) {
273+
@ui.Group(ui.GroupProps{Class: "flex-wrap items-start gap-2 min-w-0 max-w-full"}) {
270274
for i, item := range items {
271275
if item.URL != "" {
272-
@ui.Button(ui.ButtonProps{Href: item.URL, Variant: "link"}, item.Label)
276+
@ui.Button(ui.ButtonProps{
277+
Href: item.URL,
278+
Variant: "unstyled",
279+
Class: "min-w-0 max-w-full shrink whitespace-normal break-words text-left text-sm font-medium text-primary underline-offset-4 hover:underline",
280+
}, item.Label)
273281
} else {
274-
@ui.Text(ui.TextProps{FontSize: "sm", TextColor: "muted-foreground"}, item.Label)
282+
@ui.Text(ui.TextProps{
283+
FontSize: "sm",
284+
TextColor: "muted-foreground",
285+
Class: "min-w-0 max-w-full shrink break-words",
286+
}, item.Label)
275287
}
276288
if i < len(items)-1 {
277-
@ui.Text(ui.TextProps{FontSize: "sm", TextColor: "muted-foreground"}, "/")
289+
@ui.Text(ui.TextProps{
290+
FontSize: "sm",
291+
TextColor: "muted-foreground",
292+
Class: "shrink-0",
293+
}, "/")
278294
}
279295
}
280296
}
@@ -319,6 +335,14 @@ templ pagination(data publicrender.Pagination) {
319335
}
320336
}
321337

338+
func publicMainContainerClass(kind publicrender.RenderKind) string {
339+
base := "px-4 py-12 sm:px-6"
340+
if kind == publicrender.RenderKindPost {
341+
return base + " !max-w-[960px]"
342+
}
343+
return base
344+
}
345+
322346
func ogType(value string) string {
323347
if strings.TrimSpace(value) == "" {
324348
return "website"

‎internal/themes/company/views_templ.go‎

Lines changed: 35 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎internal/themes/gocmsdefault/views.templ‎

Lines changed: 31 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -177,8 +177,8 @@ templ pageBody(data publicrender.PublicPage) {
177177
"data-gocms-theme": string(data.Layout.ThemeID),
178178
},
179179
}) {
180-
@ui.Container(ui.ContainerProps{Class: "px-4 pb-10 pt-6 sm:px-6"}) {
181-
@ui.Stack(ui.StackProps{Class: "gap-6"}) {
180+
@ui.Container(ui.ContainerProps{Class: publicMainContainerClass(data.Kind)}) {
181+
@ui.Stack(ui.StackProps{Class: "min-w-0 w-full gap-6"}) {
182182
@breadcrumbs(data.Breadcrumbs)
183183
@pageHero(data)
184184
switch data.Kind {
@@ -272,19 +272,20 @@ templ contentMeta(data publicrender.PublicPage) {
272272

273273
templ featuredMedia(item *publicrender.MediaView) {
274274
if item != nil && item.URL != "" {
275-
@ui.Figure(ui.FigureProps{Class: "m-0"}) {
276-
@ui.Stack(ui.StackProps{Class: "gap-2"}) {
275+
@ui.Figure(ui.FigureProps{Class: "m-0 w-full"}) {
276+
@ui.Stack(ui.StackProps{Class: "items-center gap-2"}) {
277277
@ui.Image(ui.ImageProps{
278278
Src: item.URL,
279279
Alt: item.AltText,
280-
Class: "w-full rounded-lg border border-border",
280+
Class: "block w-full max-w-full rounded-lg border border-border",
281281
Fit: "cover",
282282
})
283283
if item.Caption != "" {
284284
@ui.Text(ui.TextProps{
285285
Tag: "figcaption",
286286
FontSize: "sm",
287287
TextColor: "muted-foreground",
288+
TextAlign: "center",
288289
}, item.Caption)
289290
}
290291
}
@@ -426,18 +427,30 @@ templ relatedItems(data publicrender.PublicPage) {
426427
templ breadcrumbs(items []publicrender.Breadcrumb) {
427428
if len(items) > 0 {
428429
@elements.MarkerSection(elements.MarkerProps{
429-
Class: "gocms-public-breadcrumbs",
430+
Class: "gocms-public-breadcrumbs min-w-0 w-full",
430431
Attrs: templpkg.Attributes{"data-gocms-breadcrumbs": "public"},
431432
}) {
432-
@ui.Group(ui.GroupProps{Class: "flex-wrap gap-2"}) {
433+
@ui.Group(ui.GroupProps{Class: "flex-wrap items-start gap-2 min-w-0 max-w-full"}) {
433434
for i, item := range items {
434435
if item.URL != "" {
435-
@ui.Button(ui.ButtonProps{Href: item.URL, Variant: "link"}, item.Label)
436+
@ui.Button(ui.ButtonProps{
437+
Href: item.URL,
438+
Variant: "unstyled",
439+
Class: "min-w-0 max-w-full shrink whitespace-normal break-words text-left text-sm font-medium text-primary underline-offset-4 hover:underline",
440+
}, item.Label)
436441
} else {
437-
@ui.Text(ui.TextProps{FontSize: "sm", TextColor: "muted-foreground"}, item.Label)
442+
@ui.Text(ui.TextProps{
443+
FontSize: "sm",
444+
TextColor: "muted-foreground",
445+
Class: "min-w-0 max-w-full shrink break-words",
446+
}, item.Label)
438447
}
439448
if i < len(items)-1 {
440-
@ui.Text(ui.TextProps{FontSize: "sm", TextColor: "muted-foreground"}, "/")
449+
@ui.Text(ui.TextProps{
450+
FontSize: "sm",
451+
TextColor: "muted-foreground",
452+
Class: "shrink-0",
453+
}, "/")
441454
}
442455
}
443456
}
@@ -465,6 +478,14 @@ templ ifText(content string) {
465478
}
466479
}
467480

481+
func publicMainContainerClass(kind publicrender.RenderKind) string {
482+
base := "px-4 pb-10 pt-6 sm:px-6"
483+
if kind == publicrender.RenderKindPost {
484+
return base + " !max-w-[960px]"
485+
}
486+
return base
487+
}
488+
468489
func archiveSlice(items []publicrender.ArchiveItem, start, end int) []publicrender.ArchiveItem {
469490
if start < 0 {
470491
start = 0

0 commit comments

Comments
 (0)