appview/pages: divide base layout using 12-col grid #321

merged

opened by

oppi.li 4 months ago targeting master from push-qkpqsrknozxs

content occupies 8 columns on medium screens and above, and blocks are defined for left and right sides of content, with col spans of 2 each (and contentAfter).

Signed-off-by: oppiliappan me@oppi.li

options

unified split

Changed files

+54 -9

appview

pages

templates

layouts

base.html

repobase.html

+53 -8

appview/pages/templates/layouts/base.html

···

       15
        
                   {{ block "extrameta" . }}{{ end }}

     

       16
        
               </head>

     

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

     

       18
       -
                 <div class="container mx-auto px-1 md:pt-4 min-h-screen flex flex-col">

     

       19
       -
                   <header style="z-index: 20">

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       20
        
                     {{ block "topbar" . }}

     

       21
       -
                     {{ template "layouts/topbar" . }}

     

       22
        
                     {{ end }}

     

       23
        
                   </header>

     

       24
       -
                   <main class="content grow">{{ block "content" . }}{{ end }}</main>

     

       25
       -
                   <footer class="mt-16">

     

       26
       -
                       {{ block "footer" . }}

     

       27
       -
                           {{ template "layouts/footer" . }}

     

       28
       -
                       {{ end }}

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       29
        
                   </footer>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       30
        
                 </div>

     

       0
        
       
     

       31
        
               </body>

     

       32
        
           </html>

     

       33
        
       {{ end }}

···

       15
        
                   {{ block "extrameta" . }}{{ end }}

     

       16
        
               </head>

     

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

     

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

     

       19
       +
                   <div class="col-span-1 md:col-span-2">

     

       20
       +
                     {{ block "topbarLeft" . }} {{ end }}

     

       21
       +
                   </div>

     

       22
       +
                   <header style="z-index: 20" class="col-span-1 md:col-span-8">

     

       23
        
                     {{ block "topbar" . }}

     

       24
       +
                       {{ template "layouts/topbar" . }}

     

       25
        
                     {{ end }}

     

       26
        
                   </header>

     

       27
       +
                   <div class="col-span-1 md:col-span-2">

     

       28
       +
                     {{ block "topbarRight" . }} {{ end }}

     

       29
       +
                   </div>

     

       30
       +
                 </div>

     

       31
       +
       

     

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

     

       33
       +
                   {{ block "contentLayout" . }}

     

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

     

       35
       +
                       <div class="col-span-1 md:col-span-2">

     

       36
       +
                         {{ block "contentLeft" . }} {{ end }}

     

       37
       +
                       </div>

     

       38
       +
                       <main class="px-1 col-span-1 md:col-span-8">

     

       39
       +
                         {{ block "content" . }}{{ end }}

     

       40
       +
                       </main>

     

       41
       +
                       <div class="col-span-1 md:col-span-2">

     

       42
       +
                         {{ block "contentRight" . }} {{ end }}

     

       43
       +
                       </div>

     

       44
       +
                     </div>

     

       45
       +
                   {{ end }}

     

       46
       +
       

     

       47
       +
                   {{ block "contentAfterLayout" . }}

     

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

     

       49
       +
                       <div class="col-span-1 md:col-span-2">

     

       50
       +
                         {{ block "contentAfterLeft" . }} {{ end }}

     

       51
       +
                       </div>

     

       52
       +
                       <main class="px-1 col-span-1 md:col-span-8">

     

       53
       +
                         {{ block "contentAfter" . }}{{ end }}

     

       54
       +
                       </main>

     

       55
       +
                       <div class="col-span-1 md:col-span-2">

     

       56
       +
                         {{ block "contentAfterRight" . }} {{ end }}

     

       57
       +
                       </div>

     

       58
       +
                     </div>

     

       59
       +
                   {{ end }}

     

       60
       +
                 </div>

     

       61
       +
       

     

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

     

       63
       +
                   <div class="col-span-1 md:col-span-2">

     

       64
       +
                     {{ block "footerLeft" . }} {{ end }}

     

       65
       +
                   </div>

     

       66
       +
                   <footer class="mt-16 col-span-1 md:col-span-8">

     

       67
       +
                     {{ block "footer" . }}

     

       68
       +
                       {{ template "layouts/footer" . }}

     

       69
       +
                     {{ end }}

     

       70
        
                   </footer>

     

       71
       +
                   <div class="col-span-1 md:col-span-2">

     

       72
       +
                     {{ block "footerRight" . }} {{ end }}

     

       73
       +
                   </div>

     

       74
        
                 </div>

     

       75
       +
       

     

       76
        
               </body>

     

       77
        
           </html>

     

       78
        
       {{ end }}

+1 -1

appview/pages/templates/layouts/repobase.html

···

       25
        
           </section>

     

       26
        
       

     

       27
        
           <section

     

       28
       -
               class="min-h-screen w-full flex flex-col drop-shadow-sm"

     

       29
        
           >

     

       30
        
               <nav class="w-full pl-4 overflow-auto">

     

       31
        
                   <div class="flex z-60">

···

       25
        
           </section>

     

       26
        
       

     

       27
        
           <section

     

       28
       +
               class="w-full flex flex-col drop-shadow-sm"

     

       29
        
           >

     

       30
        
               <nav class="w-full pl-4 overflow-auto">

     

       31
        
                   <div class="flex z-60">