Coffee journaling on ATProto (alpha)
alpha.arabica.social
coffee
feat: nicer rating styling on bean view page
+41
-18
+1
-1
internal/web/components/layout.templ
+1
-1
internal/web/components/layout.templ
···
115
115
<link rel="icon" href="/static/favicon.svg" type="image/svg+xml"/>
116
116
<link rel="icon" href="/static/favicon-32.svg" type="image/svg+xml" sizes="32x32"/>
117
117
<link rel="apple-touch-icon" href="/static/icon-192.svg"/>
118
-
<link rel="stylesheet" href="/static/css/output.css?v=0.13.1"/>
118
+
<link rel="stylesheet" href="/static/css/output.css?v=0.13.3"/>
119
119
<style>
120
120
[x-cloak] { display: none !important; }
121
121
</style>
+19
-15
internal/web/pages/bean_view.templ
+19
-15
internal/web/pages/bean_view.templ
···
36
36
AuthorAvatar: props.AuthorAvatar,
37
37
})
38
38
<div class="record-label p-4">
39
-
<h1 class="label-origin-hero">{ beanViewTitle(props.Bean) }</h1>
40
-
if props.Bean.Roaster != nil && props.Bean.Roaster.Name != "" {
41
-
<div class="label-byline">
42
-
<a href={ templ.SafeURL(fmt.Sprintf("/roasters/%s?owner=%s", props.Bean.Roaster.RKey, getOwnerFromShareURL(props.ShareURL))) }>
43
-
{ props.Bean.Roaster.Name }
44
-
</a>
45
-
if props.Bean.Roaster.Location != "" {
46
-
<span class="text-faint"> · { props.Bean.Roaster.Location }</span>
39
+
<div class="bean-hero-row">
40
+
<div class="bean-hero-text">
41
+
<h1 class="label-origin-hero">{ beanViewTitle(props.Bean) }</h1>
42
+
if props.Bean.Roaster != nil && props.Bean.Roaster.Name != "" {
43
+
<div class="label-byline">
44
+
<a href={ templ.SafeURL(fmt.Sprintf("/roasters/%s?owner=%s", props.Bean.Roaster.RKey, getOwnerFromShareURL(props.ShareURL))) }>
45
+
{ props.Bean.Roaster.Name }
46
+
</a>
47
+
if props.Bean.Roaster.Location != "" {
48
+
<span class="text-faint"> · { props.Bean.Roaster.Location }</span>
49
+
}
50
+
</div>
47
51
}
48
52
</div>
49
-
}
50
-
if props.Bean.Rating != nil {
51
-
<div class="brew-rating-hero mt-5">
52
-
<span class="brew-rating-value">{ fmt.Sprintf("%d", *props.Bean.Rating) }</span>
53
-
<span class="brew-rating-max">/ 10</span>
54
-
</div>
55
-
}
53
+
if props.Bean.Rating != nil {
54
+
<div class="brew-rating-hero">
55
+
<span class="brew-rating-value">{ fmt.Sprintf("%d", *props.Bean.Rating) }</span>
56
+
<span class="brew-rating-max">/ 10</span>
57
+
</div>
58
+
}
59
+
</div>
56
60
<div class="label-tags">
57
61
if props.Bean.Origin != "" {
58
62
<span class="label-tag label-tag-origin">{ props.Bean.Origin }</span>
+21
-2
static/css/app.css
+21
-2
static/css/app.css
···
640
640
}
641
641
642
642
.brew-rating-hero {
643
-
@apply inline-flex items-center gap-2 py-1;
643
+
@apply inline-flex items-baseline gap-1.5 py-1;
644
+
}
645
+
646
+
/* Bean hero header: title/byline on the left, rating fills empty space on the
647
+
right. Wraps the rating to a new line on narrow screens. */
648
+
.bean-hero-row {
649
+
@apply flex flex-wrap items-end justify-between gap-x-6 gap-y-3;
650
+
}
651
+
652
+
.bean-hero-text {
653
+
@apply min-w-0;
654
+
flex: 1 1 auto;
655
+
}
656
+
657
+
.bean-hero-row .brew-rating-hero {
658
+
@apply flex-shrink-0;
644
659
}
645
660
646
661
.brew-summary {
···
673
688
@apply font-bold tracking-tight leading-none;
674
689
font-size: clamp(3.25rem, 6vw + 1rem, 4.5rem);
675
690
color: var(--rating-text);
691
+
/* Trim the line-box to the cap/alphabetic edges so the big number sits
692
+
flush against the "/ 10" baseline without phantom leading whitespace.
693
+
Progressive enhancement — older browsers ignore these. */
694
+
text-box: trim-both cap alphabetic;
676
695
}
677
696
678
697
.brew-rating-max {
679
-
@apply text-xs font-medium uppercase tracking-wider self-end pb-1;
698
+
@apply text-xs font-medium uppercase tracking-wider;
680
699
color: var(--text-muted);
681
700
}
682
701