soup/lookbook
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Show item tags and titles on hover

Browse source
This commit is contained in:
soup 2026-01-17 01:44:51 -05:00
parent 9aa8373055
commit e917e67930
Signed by: soup
SSH key fingerprint: SHA256:GYxje8eQkJ6HZKzVWDdyOUF1TyDiprruGhE0Ym8qYDY
2 changed files with 34 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

7
internal/handlers/home.go
View file

@ -73,11 +73,18 @@ func (h homeContent) Render(sw *ssr.Writer) error {
{{if .LinkURL}}<div class="link-url">{{.LinkURL}}</div>{{end}} {{if .LinkURL}}<div class="link-url">{{.LinkURL}}</div>{{end}}
</div> </div>
{{end}} {{end}}
{{if or .Title .Tags}}
<div class="item-overlay">
{{if and .Title (ne .ItemType "link") (ne .ItemType "quote")}}
<div class="item-title">{{.Title}}</div>
{{end}}
{{if .Tags}} {{if .Tags}}
<div class="item-tags"> <div class="item-tags">
{{range .Tags}}<span class="item-tag">{{.}}</span>{{end}} {{range .Tags}}<span class="item-tag">{{.}}</span>{{end}}
</div> </div>
{{end}} {{end}}
</div>
{{end}}
</a> </a>
{{end}} {{end}}
</div> </div>

29
internal/static/css/app.css
View file

@ -254,14 +254,36 @@ button, input, textarea, select {
pointer-events: none; pointer-events: none;
} }
/* Item Overlay */
.item-overlay {
position: absolute;
inset: auto 0 0 0;
padding: 0.75rem;
background: rgba(255, 255, 255, 0.9);
border-top: 1px solid var(--gray-2);
display: flex;
flex-direction: column;
gap: 0.5rem;
opacity: 0;
transform: translateY(8px);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.grid-item:hover .item-overlay {
opacity: 1;
transform: translateY(0);
}
.item-title {
font-weight: 700;
font-size: 0.9rem;
}
/* Item Tags */ /* Item Tags */
.item-tags { .item-tags {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.25rem; gap: 0.25rem;
padding: 0.5rem;
background: var(--bg);
border-top: 1px solid var(--gray-2);
} }
.item-tag { .item-tag {
@ -398,6 +420,7 @@ button, input, textarea, select {
border: none; border: none;
padding: 0; padding: 0;
margin-bottom: 1rem; margin-bottom: 1rem;
gap: 0.5rem;
} }
.item-meta .timestamp { .item-meta .timestamp {