Coffee journaling on ATProto (alpha)
alpha.arabica.social
coffee
feat: colored pills on the bean view page
+51
-5
+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.0"/>
118
+
<link rel="stylesheet" href="/static/css/output.css?v=0.13.1"/>
119
119
<style>
120
120
[x-cloak] { display: none !important; }
121
121
</style>
+22
-4
internal/web/pages/bean_view.templ
+22
-4
internal/web/pages/bean_view.templ
···
55
55
}
56
56
<div class="label-tags">
57
57
if props.Bean.Origin != "" {
58
-
<span class="label-tag">{ props.Bean.Origin }</span>
58
+
<span class="label-tag label-tag-origin">{ props.Bean.Origin }</span>
59
59
}
60
60
if props.Bean.Variety != "" {
61
-
<span class="label-tag">{ props.Bean.Variety }</span>
61
+
<span class="label-tag label-tag-variety">{ props.Bean.Variety }</span>
62
62
}
63
63
if props.Bean.RoastLevel != "" {
64
-
<span class="label-tag">{ props.Bean.RoastLevel }</span>
64
+
<span class={ "label-tag", roastLevelTagClass(props.Bean.RoastLevel) }>{ props.Bean.RoastLevel }</span>
65
65
}
66
66
if props.Bean.Process != "" {
67
-
<span class="label-tag">{ props.Bean.Process }</span>
67
+
<span class="label-tag label-tag-process">{ props.Bean.Process }</span>
68
68
}
69
69
if props.Bean.Closed {
70
70
<span class="label-tag label-tag-closed">Closed</span>
···
318
318
"closed": %t
319
319
}`, bean.Name, bean.Origin, bean.Variety, bean.RoastLevel,
320
320
bean.Process, bean.Description, roasterRKey, ratingStr, bean.Closed)
321
+
}
322
+
323
+
func roastLevelTagClass(level string) string {
324
+
switch level {
325
+
case "Ultra-Light":
326
+
return "label-tag-roast-1"
327
+
case "Light":
328
+
return "label-tag-roast-2"
329
+
case "Medium-Light":
330
+
return "label-tag-roast-3"
331
+
case "Medium":
332
+
return "label-tag-roast-4"
333
+
case "Medium-Dark":
334
+
return "label-tag-roast-5"
335
+
case "Dark":
336
+
return "label-tag-roast-6"
337
+
}
338
+
return ""
321
339
}
322
340
323
341
func pluralS(n int) string {
+28
static/css/app.css
+28
static/css/app.css
···
832
832
border-style: dashed;
833
833
}
834
834
835
+
/* Category-tinted label tags — muted, earthy hues that fit the palette.
836
+
Use bg + border + text together so each pill reads as one tone. */
837
+
.label-tag-origin {
838
+
background: #eef0e8;
839
+
border-color: #b6c0a6;
840
+
color: #4a5a3a;
841
+
}
842
+
843
+
.label-tag-variety {
844
+
background: #efe5ec;
845
+
border-color: #b89aae;
846
+
color: #5c3a52;
847
+
}
848
+
849
+
.label-tag-process {
850
+
background: #e7ebef;
851
+
border-color: #a4b1bd;
852
+
color: #3e4a57;
853
+
}
854
+
855
+
/* Roast level — graduated amber/brown by darkness */
856
+
.label-tag-roast-1 { background: #fdf3dc; border-color: #e6c97a; color: #6b4f1a; }
857
+
.label-tag-roast-2 { background: #f7e6c2; border-color: #d4a85a; color: #5a3d10; }
858
+
.label-tag-roast-3 { background: #ebd2a4; border-color: #b88947; color: #4a2f0c; }
859
+
.label-tag-roast-4 { background: #d9b483; border-color: #8a6332; color: #3a2408; }
860
+
.label-tag-roast-5 { background: #b8895a; border-color: #5e3f1c; color: #2a1604; }
861
+
.label-tag-roast-6 { background: #6b4423; border-color: #2a1604; color: #fdf3dc; }
862
+
835
863
/* Description on a label — flowing paragraph, no indent */
836
864
.label-description {
837
865
@apply leading-relaxed mt-6;