appview: pages: fix misaligned padding and grid gaps in base #329

merged

opened by

nel.pet 4 months ago targeting master

I noticed there is some minor misalignment in the gaps and padding between the header, main content and footer. This leads to a few pixel misalignment between the main content and everything else in most views but becomes very obvious in the new commit view were the main content ends up hugging the viewport edge leading to quite noticeable gap.

options

unified split

Changed files

+5 -5

appview

pages

templates

layouts

base.html

+5 -5

appview/pages/templates/layouts/base.html

···

       16
       16
        
               </head>

     

       17
       17
        
               <body class="bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200">

     

       18
       18
        
                 {{ block "topbarLayout" . }}

     

       19
       19
       -
                   <div class="px-1 grid grid-cols-1 md:grid-cols-12">

     

       19
       19
       +
                   <div class="px-1 grid grid-cols-1 md:grid-cols-12 gap-2">

     

       20
       20
        
                     <div class="{{ layoutSide }}">

     

       21
       21
        
                       {{ block "topbarLeft" . }} {{ end }}

     

       22
       22
        
                     </div>

     
···

       33
       33
        
       

     

       34
       34
        
                 <div class="flex flex-col min-h-screen">

     

       35
       35
        
                   {{ block "contentLayout" . }}

     

       36
       36
       -
                     <div class="grid grid-cols-1 md:grid-cols-12 gap-2">

     

       36
       36
       +
                     <div class="px-1 grid grid-cols-1 md:grid-cols-12 gap-2">

     

       37
       37
        
                       <div class="{{ layoutSide }}">

     

       38
       38
        
                         {{ block "contentLeft" . }} {{ end }}

     

       39
       39
        
                       </div>

     

       40
       40
       -
                       <main class="px-1 {{ layoutCenter }}">

     

       40
       40
       +
                       <main class="{{ layoutCenter }}">

     

       41
       41
        
                         {{ block "content" . }}{{ end }}

     

       42
       42
        
                       </main>

     

       43
       43
        
                       <div class="{{ layoutSide }}">

     
···

       47
       47
        
                   {{ end }}

     

       48
       48
        
       

     

       49
       49
        
                   {{ block "contentAfterLayout" . }}

     

       50
       50
       -
                     <div class="grid grid-cols-1 md:grid-cols-12 gap-2">

     

       50
       50
       +
                     <div class="px-1 grid grid-cols-1 md:grid-cols-12 gap-2">

     

       51
       51
        
                       <div class="{{ layoutSide }}">

     

       52
       52
        
                         {{ block "contentAfterLeft" . }} {{ end }}

     

       53
       53
        
                       </div>

     
···

       62
       62
        
                 </div>

     

       63
       63
        
       

     

       64
       64
        
                 {{ block "footerLayout" . }}

     

       65
       65
       -
                   <div class="px-1 grid grid-cols-1 md:grid-cols-12">

     

       65
       65
       +
                   <div class="px-1 grid grid-cols-1 md:grid-cols-12 gap-2">

     

       66
       66
        
                     <div class="{{ layoutSide }}">

     

       67
       67
        
                       {{ block "footerLeft" . }} {{ end }}

     

       68
       68
        
                     </div>