Coffee journaling on ATProto (alpha) alpha.arabica.social
coffee
17
fork

Configure Feed

Select the types of activity you want to include in your feed.

feat: nicer rating styling on bean view page

+41 -18
+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
··· 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
··· 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