tangled.org / core
Monorepo for Tangled tangled.org
fork atom

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

closed opened by jensroemer.com targeting master from jensroemer.com/core: appview-pages-header-and-footer-occupy-full-page-width

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.

Labels

None yet.

assignee

None yet.

Participants 2
AT URI
at://did:plc:laqygfbyvnkyuhsuaxmp6ez3/sh.tangled.repo.pull/3m23esdehyg22
+53 -35
Interdiff #1 → #2
appview/config/config.go

This file has not been changed.

+7 -6
appview/pages/templates/user/login.html
··· 5 5 6 6 7 7 8 - 9 - 10 - 11 - 12 - 13 - 8 + <meta property="og:url" content="https://tangled.org/login" /> 9 + <meta property="og:description" content="login to for tangled" /> 10 + <script src="/static/htmx.min.js"></script> 11 + <link rel="manifest" href="/pwa-manifest.json" /> 12 + <link rel="stylesheet" href="/static/tw.css?{{ cssContentHash }}" type="text/css" /> 13 + <title>login &middot; tangled</title> 14 + </head> 14 15 15 16 16 17
+3 -2
appview/pages/templates/user/signup.html
··· 5 5 6 6 7 7 8 - 9 - 8 + <meta property="og:url" content="https://tangled.org/signup" /> 9 + <meta property="og:description" content="sign up for tangled" /> 10 10 <script src="/static/htmx.min.js"></script> 11 + <link rel="manifest" href="/pwa-manifest.json" /> 11 12 <link rel="stylesheet" href="/static/tw.css?{{ cssContentHash }}" type="text/css" /> 12 13 <title>sign up &middot; tangled</title> 13 14
appview/signup/signup.go

This file has not been changed.

appview/db/email.go

This file has not been changed.

appview/pages/templates/repo/fork.html

This file has not been changed.

appview/repo/repo.go

This file has not been changed.

appview/db/db.go

This file has not been changed.

appview/db/pulls.go

This file has not been changed.

appview/models/pull.go

This file has not been changed.

appview/issues/issues.go

This file has not been changed.

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

This file has not been changed.

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

This file has not been changed.

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

This file has not been changed.

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

This file has not been changed.

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

This file has not been changed.

appview/pulls/pulls.go

This file has not been changed.

appview/db/notifications.go

This file has not been changed.

appview/notifications/notifications.go

This file has not been changed.

appview/notify/db/db.go

This file has not been changed.

appview/models/notifications.go

This file has not been changed.

appview/pages/templates/notifications/fragments/item.html

This file has not been changed.

appview/pages/templates/notifications/list.html

This file has not been changed.

appview/pagination/page.go

This file has not been changed.

nix/pkgs/knot-unwrapped.nix

This file has not been changed.

appview/pages/templates/layouts/fragments/footer.html

This file has not been changed.

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

This file has not been changed.

docs/spindle/pipeline.md

This file has not been changed.

knotserver/config/config.go

This file has not been changed.

+18 -27
appview/pages/templates/layouts/base.html
··· 18 18 19 19 20 20 21 - <title>{{ block "title" . }}{{ end }} · tangled</title> 22 - {{ block "extrameta" . }}{{ end }} 23 - </head> 24 - <body class="min-h-screen flex flex-col gap-4 bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200"> 25 - {{ block "topbarLayout" . }} 26 - <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;"> 27 21 28 - {{ if .LoggedInUser }} 29 - <div id="upgrade-banner" 30 22 31 23 32 24 ··· 34 26 35 27 36 28 37 - {{ end }} 38 29 30 + 31 + 32 + 33 + 34 + 35 + 36 + 37 + 38 + 39 + 39 40 {{ block "mainLayout" . }} 41 + <div class="px-1 col-span-full md:col-span-1 md:col-start-2 flex flex-col gap-4"> 42 + {{ block "contentLayout" . }} 43 + <main class="col-span-1 md:col-span-8"> 40 - <div class="flex-grow"> 41 - <div class="max-w-screen-lg px-4 mx-auto my-6 flex flex-col gap-4"> 42 - {{ block "contentLayout" . }} 43 - <main> 44 44 {{ block "content" . }}{{ end }} 45 45 </main> 46 + {{ end }} 47 + 48 + {{ block "contentAfterLayout" . }} 49 + <main class="col-span-1 md:col-span-8"> 46 - {{ end }} 47 - 48 - {{ block "contentAfterLayout" . }} 49 - <main> 50 50 {{ block "contentAfter" . }}{{ end }} 51 51 </main> 52 + {{ end }} 52 - {{ end }} 53 - </div> 54 - </div> 55 - {{ end }} 56 - 57 - {{ block "footerLayout" . }} 58 - <footer class="bg-white dark:bg-gray-800 mt-12"> 59 - {{ template "layouts/fragments/footer" . }} 60 - </footer> 61 - {{ end }}
appview/pages/templates/layouts/fragments/topbar.html

This file has not been changed.

+1
appview/pages/templates/user/completeSignup.html
··· 20 20 content="complete your signup for tangled" 21 21 /> 22 22 <script src="/static/htmx.min.js"></script> 23 + <link rel="manifest" href="/pwa-manifest.json" /> 23 24 <link 24 25 rel="stylesheet" 25 26 href="/static/tw.css?{{ cssContentHash }}"
+1
appview/state/router.go
··· 37 37 router.Use(middleware.TryRefreshSession()) 38 38 router.Get("/favicon.svg", s.Favicon) 39 39 router.Get("/favicon.ico", s.Favicon) 40 + router.Get("/pwa-manifest.json", s.PWAManifest) 40 41 41 42 userRouter := s.UserRouter(&middleware) 42 43 standardRouter := s.StandardRouter(&middleware)
+23
appview/state/state.go
··· 198 198 s.pages.Favicon(w) 199 199 } 200 200 201 + // https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest 202 + const manifestJson = `{ 203 + "name": "tangled", 204 + "description": "tightly-knit social coding.", 205 + "icons": [ 206 + { 207 + "src": "/favicon.svg", 208 + "sizes": "144x144" 209 + } 210 + ], 211 + "start_url": "/", 212 + "id": "org.tangled", 213 + 214 + "display": "standalone", 215 + "background_color": "#111827", 216 + "theme_color": "#111827" 217 + }` 218 + 219 + func (p *State) PWAManifest(w http.ResponseWriter, r *http.Request) { 220 + w.Header().Set("Content-Type", "application/json") 221 + w.Write([]byte(manifestJson)) 222 + } 223 + 201 224 func (s *State) TermsOfService(w http.ResponseWriter, r *http.Request) { 202 225 user := s.oauth.GetUser(r) 203 226 s.pages.TermsOfService(w, pages.TermsOfServiceParams{

History

3 rounds 2 comments
sign up or login to add to the discussion
jensroemer.com submitted #2
diff
20 commits
expand
e4dba60f
appview/signup: set up cf turnstile
69fe99e7
appview/pages: center captcha in signup page
05b1e261
appview: associate users to commits by did
31a12035
appview/repo: add an option to choose the name of the forked repo
c8bc5f33
appview/db: refactor GetPulls
8e4a85c0
appview/pages: add labels to pulls
6b022285
appview/notifications: code cleanup for notifier
b0eacfbd
appview/pages: improve notification styles
054a6a04
appview/notifications: fix pagination
5c9bf597
appview/notifications: add link element to each notification
c174b225
appview/db: populate pull-source in GetPulls
218b13d4
knotserver: bump version to 1.9.1-alpha
5df3d5df
appview/pages: fix brand link
b3c2b81d
appview/db: handle nils
3ff045c0
appview/pages: Update .sh to .org in ssh clone dropdown
6dfc5e51
docs/spindle: fix grammar
32b7c17e
knotserver/config: fix default appview endpoint
59138d48
appview/state,appview/pages/templates: add installable pwa support for tangled
34c71cba
Remove redundant grid item properties in layouts/base
b59bfab8
Header and footer background is full page width
expand 0 comments
closed without merging
jensroemer.com submitted #1
diff interdiff
19 commits
expand
e4dba60f
appview/signup: set up cf turnstile
69fe99e7
appview/pages: center captcha in signup page
05b1e261
appview: associate users to commits by did
31a12035
appview/repo: add an option to choose the name of the forked repo
c8bc5f33
appview/db: refactor GetPulls
8e4a85c0
appview/pages: add labels to pulls
6b022285
appview/notifications: code cleanup for notifier
b0eacfbd
appview/pages: improve notification styles
054a6a04
appview/notifications: fix pagination
5c9bf597
appview/notifications: add link element to each notification
c174b225
appview/db: populate pull-source in GetPulls
218b13d4
knotserver: bump version to 1.9.1-alpha
5df3d5df
appview/pages: fix brand link
b3c2b81d
appview/db: handle nils
3ff045c0
appview/pages: Update .sh to .org in ssh clone dropdown
6dfc5e51
docs/spindle: fix grammar
32b7c17e
knotserver/config: fix default appview endpoint
6fc66687
Remove redundant grid item properties in layouts/base
9e9e69ef
Header and footer background is full page width
expand 0 comments
jensroemer.com submitted #0
diff
2 commits
expand
3b4a685a
Remove redundant grid item properties in layouts/base
73f7bd8d
Header and footer background is full page width
expand 2 comments
jensroemer.com

I signed off on the commits, but I see other PR's also are signed-off in the description. I would've wanted to edit the description, but doesn't look like I can :-) Let me know if/how I should change, it it's needed.

oppi.li

the sign-off in commit messages is what is necessary, that looks alright!