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

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.

+30 -21

3 changed files

Diff round #0

expand all

unified split

appview

pages

templates

layouts

base.html

fragments

footer.html

topbar.html

+27 -18

appview/pages/templates/layouts/base.html

··· 18 19 20 21 22 23 24 ··· 26 27 28 29 30 - 31 - 32 - 33 - 34 - 35 - 36 - 37 - 38 - 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"> 44 {{ block "content" . }}{{ end }} 45 </main> 46 - {{ end }} 47 - 48 - {{ block "contentAfterLayout" . }} 49 - <main class="col-span-1 md:col-span-8"> 50 {{ block "contentAfter" . }}{{ end }} 51 </main> 52 - {{ end }}

··· 18 19 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 28 + {{ if .LoggedInUser }} 29 + <div id="upgrade-banner" 30 31 32 ··· 34 35 36 37 + {{ end }} 38 39 {{ block "mainLayout" . }} 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 {{ block "content" . }}{{ end }} 45 </main> 46 + {{ end }} 47 + 48 + {{ block "contentAfterLayout" . }} 49 + <main> 50 {{ block "contentAfter" . }}{{ end }} 51 </main> 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 }}

+2 -2

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

··· 1 {{ define "layouts/fragments/footer" }} 2 - <div class="w-full p-4 md:p-8 bg-white dark:bg-gray-800 rounded-t drop-shadow-sm"> 3 - <div class="container mx-auto max-w-7xl px-4"> 4 <div class="flex flex-col lg:flex-row justify-between items-start text-gray-600 dark:text-gray-400 text-sm gap-8"> 5 <div class="mb-4 md:mb-0"> 6 <a href="/" hx-boost="true" class="flex gap-2 font-semibold italic no-underline hover:no-underline">

··· 1 {{ define "layouts/fragments/footer" }} 2 + <div class="w-full p-8"> 3 + <div class="max-w-screen-lg mx-auto px-4"> 4 <div class="flex flex-col lg:flex-row justify-between items-start text-gray-600 dark:text-gray-400 text-sm gap-8"> 5 <div class="mb-4 md:mb-0"> 6 <a href="/" hx-boost="true" class="flex gap-2 font-semibold italic no-underline hover:no-underline">

+1 -1

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

··· 1 {{ define "layouts/fragments/topbar" }} 2 - <nav class="space-x-4 px-6 py-2 rounded-b bg-white dark:bg-gray-800 dark:text-white drop-shadow-sm"> 3 <div class="flex justify-between p-0 items-center"> 4 <div id="left-items"> 5 <a href="/" hx-boost="true" class="text-2xl no-underline hover:no-underline flex items-center gap-2">

··· 1 {{ define "layouts/fragments/topbar" }} 2 + <nav class="max-w-screen-lg mx-auto space-x-4 px-6 py-2 rounded-b dark:text-white drop-shadow-sm"> 3 <div class="flex justify-between p-0 items-center"> 4 <div id="left-items"> 5 <a href="/" hx-boost="true" class="text-2xl no-underline hover:no-underline flex items-center gap-2">

History

2 rounds 0 comments

jensroemer.com submitted #1 5mo

diff interdiff

12 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

3b4a685a

Remove redundant grid item properties in layouts/base

73f7bd8d

Header and footer background is full page width

expand 0 comments

closed without merging

jensroemer.com submitted #0 5mo

2 commits

expand

9d6ab8e7

Remove redundant grid item properties in layouts/base

a5ffa581

Header and footer background is full page width

expand 0 comments