back round 0 view raw

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

closed

opened by

jensroemer.com 2 months ago 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.

options

Changed files

+3 -3

appview

pages

templates

layouts

fragments

footer.html

topbar.html

+2 -2

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

···

       1
       1
        
       {{ define "layouts/fragments/footer" }}

     

       2
       2
       -
       <div class="w-full p-4 md:p-8 bg-white dark:bg-gray-800 rounded-t drop-shadow-sm">

     

       3
       3
       -
         <div class="container mx-auto max-w-7xl px-4">

     

       2
       2
       +
       <div class="w-full p-8">

     

       3
       3
       +
         <div class="max-w-screen-lg mx-auto px-4">

     

       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
       5
        
             <div class="mb-4 md:mb-0">

     

       6
       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
       1
        
       {{ define "layouts/fragments/topbar" }}

     

       2
       2
       -
           <nav class="space-x-4 px-6 py-2 rounded-b bg-white dark:bg-gray-800 dark:text-white drop-shadow-sm">

     

       2
       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
       3
        
               <div class="flex justify-between p-0 items-center">

     

       4
       4
        
                   <div id="left-items">

     

       5
       5
        
                     <a href="/" hx-boost="true" class="text-2xl no-underline hover:no-underline flex items-center gap-2">