back interdiff of round #2 and #1

appview/pages: header and footer occupy full page width #622

As discussed on Discord, the header and footer now take up full width. I went with the version where the content is still capped at 1024px, like the main content.

The changes are purely CSS, except for an extra div around the main content. This is needed because the grid no longer adds a minimum height to the main content, which means the footer will not be pushed to the bottom on pages with little main content. So now instead the header, content and footer are in a flex column, and the content flex-grow’s to make sure it’s at least taking up the remaining viewport space.

A few redundant classes have been removed, e.g. grid properties on elements that were not grid-items. I also removed (unused/invisible) border radius and drop-shadow from the header and footer.

I tried best possible to check the layout across the different views. There does not currently seem to be any specific UI test suite or similar - let me know if I missed it.

Normally I would add screenshots to a PR like this, but this does not seem supported currently. I can share over Discord if you’re interested.

files
appview
docs
spindle
knotserver
config
nix
ERROR
appview/config/config.go

Failed to calculate interdiff for this file.

REVERTED
appview/pages/templates/user/login.html
···
placeholder="akshay.tngl.sh"
/>
<span class="text-sm text-gray-500 mt-1">
+
Use your <a href="https://atproto.com">ATProto</a>
-
Use your <a href="https://atproto.com">AT Protocol</a>
handle to log in. If you're unsure, this is likely
your Tangled (<code>.tngl.sh</code>) or <a href="https://bsky.app">Bluesky</a> (<code>.bsky.social</code>) account.
</span>
ERROR
appview/db/email.go

Failed to calculate interdiff for this file.

ERROR
appview/pages/templates/repo/fork.html

Failed to calculate interdiff for this file.

ERROR
appview/repo/repo.go

Failed to calculate interdiff for this file.

ERROR
appview/db/db.go

Failed to calculate interdiff for this file.

ERROR
appview/issues/issues.go

Failed to calculate interdiff for this file.

ERROR
appview/pages/templates/repo/fragments/labelPanel.html

Failed to calculate interdiff for this file.

ERROR
appview/pages/templates/repo/fragments/participants.html

Failed to calculate interdiff for this file.

ERROR
appview/pages/templates/repo/issues/issue.html

Failed to calculate interdiff for this file.

ERROR
appview/pages/templates/repo/pulls/pull.html

Failed to calculate interdiff for this file.

ERROR
appview/pages/templates/repo/pulls/pulls.html

Failed to calculate interdiff for this file.

ERROR
appview/pulls/pulls.go

Failed to calculate interdiff for this file.

ERROR
appview/notify/db/db.go

Failed to calculate interdiff for this file.

ERROR
appview/models/notifications.go

Failed to calculate interdiff for this file.

ERROR
appview/pages/pages.go

Failed to calculate interdiff for this file.

ERROR
appview/pagination/page.go

Failed to calculate interdiff for this file.

ERROR
nix/pkgs/knot-unwrapped.nix

Failed to calculate interdiff for this file.

ERROR
appview/pages/templates/repo/fragments/cloneDropdown.html

Failed to calculate interdiff for this file.

ERROR
docs/spindle/pipeline.md

Failed to calculate interdiff for this file.

ERROR
knotserver/config/config.go

Failed to calculate interdiff for this file.

ERROR
appview/pages/templates/layouts/fragments/topbar.html

Failed to calculate interdiff for this file.

NEW
appview/pages/templates/user/completeSignup.html
···
content="complete your signup for tangled"
/>
<script src="/static/htmx.min.js"></script>
+
<link rel="manifest" href="/pwa-manifest.json" />
<link
rel="stylesheet"
href="/static/tw.css?{{ cssContentHash }}"
NEW
appview/pages/templates/user/signup.html
···
<meta property="og:url" content="https://tangled.org/signup" />
<meta property="og:description" content="sign up for tangled" />
<script src="/static/htmx.min.js"></script>
+
<link rel="manifest" href="/pwa-manifest.json" />
<link rel="stylesheet" href="/static/tw.css?{{ cssContentHash }}" type="text/css" />
<title>sign up &middot; tangled</title>
NEW
appview/state/router.go
···
router.Use(middleware.TryRefreshSession())
router.Get("/favicon.svg", s.Favicon)
router.Get("/favicon.ico", s.Favicon)
+
router.Get("/pwa-manifest.json", s.PWAManifest)
userRouter := s.UserRouter(&middleware)
standardRouter := s.StandardRouter(&middleware)
NEW
appview/state/state.go
···
s.pages.Favicon(w)
}
+
// https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest
+
const manifestJson = `{
+
"name": "tangled",
+
"description": "tightly-knit social coding.",
+
"icons": [
+
{
+
"src": "/favicon.svg",
+
"sizes": "144x144"
+
}
+
],
+
"start_url": "/",
+
"id": "org.tangled",
+
+
"display": "standalone",
+
"background_color": "#111827",
+
"theme_color": "#111827"
+
}`
+
+
func (p *State) PWAManifest(w http.ResponseWriter, r *http.Request) {
+
w.Header().Set("Content-Type", "application/json")
+
w.Write([]byte(manifestJson))
+
}
+
func (s *State) TermsOfService(w http.ResponseWriter, r *http.Request) {
user := s.oauth.GetUser(r)
s.pages.TermsOfService(w, pages.TermsOfServiceParams{
NEW
appview/pages/templates/layouts/base.html
···
<title>{{ block "title" . }}{{ end }} · tangled</title>
{{ block "extrameta" . }}{{ end }}
</head>
-
<body class="min-h-screen grid grid-cols-1 grid-rows-[min-content_auto_min-content] gap-4 bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200"
-
style="grid-template-columns: minmax(1rem, 1fr) minmax(auto, 1024px) minmax(1rem, 1fr);">
+
<body class="min-h-screen flex flex-col gap-4 bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200">
{{ block "topbarLayout" . }}
-
<header class="px-1 col-span-full md:col-span-1 md:col-start-2" style="z-index: 20;">
+
<header class="w-full bg-white dark:bg-gray-800 col-span-full md:col-span-1 md:col-start-2" style="z-index: 20;">
{{ if .LoggedInUser }}
<div id="upgrade-banner"
···
{{ end }}
{{ block "mainLayout" . }}
-
<div class="px-1 col-span-full md:col-span-1 md:col-start-2 flex flex-col gap-4">
-
{{ block "contentLayout" . }}
+
<div class="flex-grow">
+
<div class="max-w-screen-lg px-4 mx-auto my-6 flex flex-col gap-4">
+
{{ block "contentLayout" . }}
<main>
{{ block "content" . }}{{ end }}
</main>
-
{{ end }}
-
-
{{ block "contentAfterLayout" . }}
+
{{ end }}
+
+
{{ block "contentAfterLayout" . }}
<main>
{{ block "contentAfter" . }}{{ end }}
</main>
-
{{ end }}
+
{{ end }}
+
</div>
</div>
{{ end }}
{{ block "footerLayout" . }}
-
<footer class="px-1 col-span-full md:col-span-1 md:col-start-2 mt-12">
+
<footer class="bg-white dark:bg-gray-800 mt-12">
{{ template "layouts/fragments/footer" . }}
</footer>
{{ end }}