From 86825f1c09b472ca89ef0375289f79ada74de7d4 Mon Sep 17 00:00:00 2001 From: Ben Visness Date: Fri, 21 Jun 2024 20:13:20 -0500 Subject: [PATCH] Add projects / following UI to home page --- public/style.css | 29 ++- src/hmndata/snippet_helper.go | 10 +- src/models/follow.go | 7 + src/rawdata/scss/core.css | 19 +- src/rawdata/scss/header.css | 7 +- src/rawdata/scss/timeline.css | 14 +- src/rawdata/scss/vars.css | 9 +- src/templates/img/add.svg | 4 +- src/templates/img/chevron-down.svg | 6 +- src/templates/mapping.go | 7 +- src/templates/src/include/header-2024.html | 10 +- src/templates/src/include/timeline_item.html | 2 +- src/templates/src/landing.html | 85 +++++-- src/templates/types.go | 5 + src/website/admin.go | 2 +- src/website/base_data.go | 2 +- src/website/feed.go | 2 +- src/website/jam.go | 16 +- src/website/landing.go | 64 +++-- src/website/projects.go | 10 +- src/website/snippet.go | 2 +- src/website/timeline_helper.go | 248 +++++++++++-------- src/website/user.go | 2 +- 23 files changed, 374 insertions(+), 188 deletions(-) create mode 100644 src/models/follow.go diff --git a/public/style.css b/public/style.css index 38a063ab..b27f2460 100644 --- a/public/style.css +++ b/public/style.css @@ -7189,8 +7189,10 @@ code { --notice-warn-color: #aa7d30; --notice-failure-color: #b42222; --spoiler-border: #aaa; - --site-width: 80rem; - --site-width-narrow: 60rem; + --site-width: 54rem; + --site-width-narrow: 40rem; + --avatar-size-small: 1.5rem; + --avatar-size-normal: 2.5rem; } @media (prefers-color-scheme: dark) { :root { @@ -7756,7 +7758,6 @@ pre, } .svgicon svg { fill: currentColor; - stroke: currentColor; width: 1em; height: 1em; overflow: visible; @@ -7764,6 +7765,10 @@ pre, .svgicon:not(.svgicon-nofix) svg { transform: translate(0px, 0.1em); } +.svgicon-lite svg { + fill: currentColor; + overflow: visible; +} .sr { border: 0; clip: rect(1px, 1px, 1px, 1px); @@ -8467,6 +8472,8 @@ header.old .submenu > a { } header { background-color: var(--bg-3); + border-bottom-style: solid; + border-bottom-width: 1px; } header .hmn-logo { font-family: "MohaveHMN", sans-serif; @@ -8478,10 +8485,10 @@ header .hmn-logo { header .menu-chevron { display: inline-block; margin-left: var(--spacing-extra-small); - font-size: var(--font-size-7); } header .avatar { width: 1.8rem; + height: 1.8rem; } header .header-nav > a, header .header-nav > .root-item > a { @@ -8495,6 +8502,9 @@ header .header-nav .submenu { z-index: 100; min-width: 8rem; background-color: var(--card-background); + border-style: solid; + border-width: 1px; + border-top-width: 0; } header .header-nav .submenu > a { padding: var(--spacing-small) var(--spacing-medium); @@ -8880,10 +8890,19 @@ code .ss, /* src/rawdata/scss/timeline.css */ .avatar { object-fit: cover; - border-radius: 100%; overflow: hidden; background-color: var(--dimmest-color); flex-shrink: 0; + border: none; + width: var(--avatar-size-normal); + height: var(--avatar-size-normal); +} +.avatar.avatar-user { + border-radius: 999px; +} +.avatar.avatar-small { + width: var(--avatar-size-small); + height: var(--avatar-size-small); } .timeline-item { background-color: var(--card-background); diff --git a/src/hmndata/snippet_helper.go b/src/hmndata/snippet_helper.go index 4eb01767..ba31a946 100644 --- a/src/hmndata/snippet_helper.go +++ b/src/hmndata/snippet_helper.go @@ -44,6 +44,8 @@ func FetchSnippets( } defer tx.Rollback(ctx) + isFiltering := len(q.IDs) > 0 || len(q.Tags) > 0 || len(q.ProjectIDs) > 0 + var tagSnippetIDs []int if len(q.Tags) > 0 { // Get snippet IDs with this tag, then use that in the main query @@ -103,15 +105,17 @@ func FetchSnippets( allSnippetIDs = append(allSnippetIDs, q.IDs...) allSnippetIDs = append(allSnippetIDs, tagSnippetIDs...) allSnippetIDs = append(allSnippetIDs, projectSnippetIDs...) - if len(allSnippetIDs) == 0 { + if isFiltering && len(allSnippetIDs) == 0 { // We already managed to filter out all snippets, and all further // parts of this query are more filters, so we can just fail everything // else from right here. qb.Add(`AND FALSE`) - } else if len(q.OwnerIDs) > 0 { + } else if len(allSnippetIDs) > 0 && len(q.OwnerIDs) > 0 { qb.Add(`AND (snippet.id = ANY ($?) OR snippet.owner_id = ANY ($?))`, allSnippetIDs, q.OwnerIDs) } else { - qb.Add(`AND snippet.id = ANY ($?)`, allSnippetIDs) + if len(allSnippetIDs) > 0 { + qb.Add(`AND snippet.id = ANY ($?)`, allSnippetIDs) + } if len(q.OwnerIDs) > 0 { qb.Add(`AND snippet.owner_id = ANY ($?)`, q.OwnerIDs) } diff --git a/src/models/follow.go b/src/models/follow.go new file mode 100644 index 00000000..d267f559 --- /dev/null +++ b/src/models/follow.go @@ -0,0 +1,7 @@ +package models + +type Follow struct { + UserID int `db:"user_id"` + FollowingUserID *int `db:"following_user_id"` + FollowingProjectID *int `db:"following_project_id"` +} diff --git a/src/rawdata/scss/core.css b/src/rawdata/scss/core.css index b41e34a0..2e964d33 100644 --- a/src/rawdata/scss/core.css +++ b/src/rawdata/scss/core.css @@ -441,7 +441,7 @@ pre, .w7-ns { width: var(--width-7); } - + .w8-ns { width: var(--width-8); } @@ -527,7 +527,7 @@ pre, .w7-m { width: var(--width-7); } - + .w8-m { width: var(--width-8); } @@ -609,7 +609,7 @@ pre, .w7-l { width: var(--width-7); } - + .w8-l { width: var(--width-8); } @@ -683,10 +683,14 @@ pre, } } +/* +TODO(redesign): It's really unfortunate that we rely on text stuff so much...it +makes all our SVGs fuzzy. Evaluate the places we use this and see if we can use the +lite variant instead. +*/ .svgicon { svg { fill: currentColor; - stroke: currentColor; width: 1em; height: 1em; overflow: visible; @@ -697,6 +701,13 @@ pre, } } +.svgicon-lite { + svg { + fill: currentColor; + overflow: visible; + } +} + .sr { border: 0; clip: rect(1px, 1px, 1px, 1px); diff --git a/src/rawdata/scss/header.css b/src/rawdata/scss/header.css index 9b5367fa..7d4b4eff 100644 --- a/src/rawdata/scss/header.css +++ b/src/rawdata/scss/header.css @@ -115,6 +115,8 @@ header.old { header { background-color: var(--bg-3); + border-bottom-style: solid; + border-bottom-width: 1px; .hmn-logo { font-family: 'MohaveHMN', sans-serif; @@ -128,11 +130,11 @@ header { /* ensure that it also has .svgicon */ display: inline-block; margin-left: var(--spacing-extra-small); - font-size: var(--font-size-7); } .avatar { width: 1.8rem; + height: 1.8rem; } .header-nav { @@ -150,6 +152,9 @@ header { z-index: 100; min-width: 8rem; background-color: var(--card-background); + border-style: solid; + border-width: 1px; + border-top-width: 0; >a { padding: var(--spacing-small) var(--spacing-medium); diff --git a/src/rawdata/scss/timeline.css b/src/rawdata/scss/timeline.css index ed67dd88..821876e1 100644 --- a/src/rawdata/scss/timeline.css +++ b/src/rawdata/scss/timeline.css @@ -1,9 +1,21 @@ .avatar { object-fit: cover; - border-radius: 100%; overflow: hidden; background-color: var(--dimmest-color); flex-shrink: 0; + border: none; + + width: var(--avatar-size-normal); + height: var(--avatar-size-normal); +} + +.avatar.avatar-user { + border-radius: 999px; +} + +.avatar.avatar-small { + width: var(--avatar-size-small); + height: var(--avatar-size-small); } .timeline-item { diff --git a/src/rawdata/scss/vars.css b/src/rawdata/scss/vars.css index a0df6b19..15d497ea 100644 --- a/src/rawdata/scss/vars.css +++ b/src/rawdata/scss/vars.css @@ -56,8 +56,11 @@ $breakpoint-large: screen and (min-width: 60em) --spoiler-border: #aaa; - --site-width: 80rem; - --site-width-narrow: 60rem; + --site-width: 54rem; + --site-width-narrow: 40rem; + + --avatar-size-small: 1.5rem; + --avatar-size-normal: 2.5rem; } @media (prefers-color-scheme: dark) { @@ -112,4 +115,4 @@ $breakpoint-large: screen and (min-width: 60em) --spoiler-border: #777; } -} +} \ No newline at end of file diff --git a/src/templates/img/add.svg b/src/templates/img/add.svg index f896f6e0..be77364a 100644 --- a/src/templates/img/add.svg +++ b/src/templates/img/add.svg @@ -1 +1,3 @@ - \ No newline at end of file + + + diff --git a/src/templates/img/chevron-down.svg b/src/templates/img/chevron-down.svg index 744ded62..7bb9f155 100644 --- a/src/templates/img/chevron-down.svg +++ b/src/templates/img/chevron-down.svg @@ -1,7 +1,5 @@ - - - - + + diff --git a/src/templates/mapping.go b/src/templates/mapping.go index 390061ef..c53fab39 100644 --- a/src/templates/mapping.go +++ b/src/templates/mapping.go @@ -74,7 +74,6 @@ func ProjectLogoUrl(p *models.Project, lightAsset *models.Asset, darkAsset *mode func ProjectToTemplate( p *models.Project, - url string, ) Project { return Project{ ID: p.ID, @@ -82,7 +81,7 @@ func ProjectToTemplate( Subdomain: p.Subdomain(), Color1: p.Color1, Color2: p.Color2, - Url: url, + Url: hmndata.UrlContextForProject(p).BuildHomepage(), Blurb: p.Blurb, ParsedDescription: template.HTML(p.ParsedDescription), @@ -98,8 +97,8 @@ func ProjectToTemplate( } } -func ProjectAndStuffToTemplate(p *hmndata.ProjectAndStuff, url string) Project { - res := ProjectToTemplate(&p.Project, url) +func ProjectAndStuffToTemplate(p *hmndata.ProjectAndStuff) Project { + res := ProjectToTemplate(&p.Project) res.Logo = ProjectLogoUrl(&p.Project, p.LogoLightAsset, p.LogoDarkAsset) for _, o := range p.Owners { res.Owners = append(res.Owners, UserToTemplate(o)) diff --git a/src/templates/src/include/header-2024.html b/src/templates/src/include/header-2024.html index 09a2e796..b8847c02 100644 --- a/src/templates/src/include/header-2024.html +++ b/src/templates/src/include/header-2024.html @@ -1,4 +1,4 @@ -
+
@@ -8,7 +8,7 @@ Jams
- +