forked from tangled.org/core
this repo has no description

appview: pages: refactor base layout to be one big grid so we can avoid min-h-screen workarounds that cause permanent scrolling

Signed-off-by: nelind <nel.n.lindberg@gmail.com>

authored by nel.pet and committed by Tangled 0a2c9822 2328f177

Changed files
+102 -83
appview
pages
+19 -30
appview/pages/templates/layouts/base.html
··· 14 <title>{{ block "title" . }}{{ end }} · tangled</title> 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"> 19 - {{ block "topbarLayout" . }} 20 - <div class="grid grid-cols-1 md:grid-cols-12 gap-4"> 21 - <header class="col-span-1 md:col-start-3 md:col-span-8" style="z-index: 20;"> 22 - {{ template "layouts/topbar" . }} 23 - </header> 24 - </div> 25 - {{ end }} 26 - </div> 27 28 - <div class="px-1 flex flex-col min-h-screen gap-4"> 29 - {{ block "contentLayout" . }} 30 - <div class="grid grid-cols-1 md:grid-cols-12 gap-4"> 31 <div class="col-span-1 md:col-span-2"> 32 {{ block "contentLeft" . }} {{ end }} 33 </div> ··· 37 <div class="col-span-1 md:col-span-2"> 38 {{ block "contentRight" . }} {{ end }} 39 </div> 40 - </div> 41 - {{ end }} 42 - 43 - {{ block "contentAfterLayout" . }} 44 - <div class="grid grid-cols-1 md:grid-cols-12 gap-4"> 45 <div class="col-span-1 md:col-span-2"> 46 {{ block "contentAfterLeft" . }} {{ end }} 47 </div> ··· 51 <div class="col-span-1 md:col-span-2"> 52 {{ block "contentAfterRight" . }} {{ end }} 53 </div> 54 - </div> 55 - {{ end }} 56 - </div> 57 - 58 - <div class="px-1 mt-16"> 59 - {{ block "footerLayout" . }} 60 - <div class="grid grid-cols-1 md:grid-cols-12 gap-4"> 61 - <footer class="col-span-1 md:col-start-3 md:col-span-8"> 62 - {{ template "layouts/footer" . }} 63 - </footer> 64 </div> 65 - {{ end }} 66 - </div> 67 68 </body> 69 </html> 70 {{ end }}
··· 14 <title>{{ block "title" . }}{{ end }} · tangled</title> 15 {{ block "extrameta" . }}{{ end }} 16 </head> 17 + <body class="min-h-screen grid grid-cols-1 grid-rows-[min-content_auto_min-content] md:grid-cols-12 gap-4 bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200"> 18 + {{ block "topbarLayout" . }} 19 + <header class="px-1 col-span-1 md:col-start-3 md:col-span-8" style="z-index: 20;"> 20 + {{ template "layouts/topbar" . }} 21 + </header> 22 + {{ end }} 23 24 + {{ block "mainLayout" . }} 25 + <div class="px-1 col-span-1 md:col-start-3 md:col-span-8 flex flex-col gap-4"> 26 + {{ block "contentLayout" . }} 27 <div class="col-span-1 md:col-span-2"> 28 {{ block "contentLeft" . }} {{ end }} 29 </div> ··· 33 <div class="col-span-1 md:col-span-2"> 34 {{ block "contentRight" . }} {{ end }} 35 </div> 36 + {{ end }} 37 + 38 + {{ block "contentAfterLayout" . }} 39 <div class="col-span-1 md:col-span-2"> 40 {{ block "contentAfterLeft" . }} {{ end }} 41 </div> ··· 45 <div class="col-span-1 md:col-span-2"> 46 {{ block "contentAfterRight" . }} {{ end }} 47 </div> 48 + {{ end }} 49 </div> 50 + {{ end }} 51 52 + {{ block "footerLayout" . }} 53 + <footer class="px-1 col-span-1 md:col-start-3 md:col-span-8 mt-12"> 54 + {{ template "layouts/footer" . }} 55 + </footer> 56 + {{ end }} 57 </body> 58 </html> 59 {{ end }}
+1 -1
appview/pages/templates/layouts/topbar.html
··· 1 {{ define "layouts/topbar" }} 2 - <nav class="space-x-4 mb-4 px-6 py-2 rounded 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="flex gap-2 font-semibold italic">
··· 1 {{ define "layouts/topbar" }} 2 + <nav class="space-x-4 px-6 py-2 rounded 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="flex gap-2 font-semibold italic">
+19 -13
appview/pages/templates/repo/commit.html
··· 80 {{end}} 81 82 {{ define "topbarLayout" }} 83 - <header style="z-index: 20;"> 84 {{ template "layouts/topbar" . }} 85 </header> 86 {{ end }} 87 88 - {{ define "contentLayout" }} 89 - {{ block "content" . }}{{ end }} 90 - {{ end }} 91 92 - {{ define "contentAfterLayout" }} 93 - <div class="grid grid-cols-1 md:grid-cols-12 gap-4"> 94 - <div class="col-span-1 md:col-span-2"> 95 - {{ block "contentAfterLeft" . }} {{ end }} 96 </div> 97 - <main class="col-span-1 md:col-span-10"> 98 - {{ block "contentAfter" . }}{{ end }} 99 - </main> 100 </div> 101 {{ end }} 102 103 - {{ define "footerLayout" }} 104 - {{ template "layouts/footer" . }} 105 {{ end }} 106 107 {{ define "contentAfter" }}
··· 80 {{end}} 81 82 {{ define "topbarLayout" }} 83 + <header class="px-1 col-span-full" style="z-index: 20;"> 84 {{ template "layouts/topbar" . }} 85 </header> 86 {{ end }} 87 88 + {{ define "mainLayout" }} 89 + <div class="px-1 col-span-full flex flex-col gap-4"> 90 + {{ block "contentLayout" . }} 91 + {{ block "content" . }}{{ end }} 92 + {{ end }} 93 94 + {{ block "contentAfterLayout" . }} 95 + <div class="grid grid-cols-1 md:grid-cols-12 gap-4"> 96 + <div class="col-span-1 md:col-span-2"> 97 + {{ block "contentAfterLeft" . }} {{ end }} 98 + </div> 99 + <main class="col-span-1 md:col-span-10"> 100 + {{ block "contentAfter" . }}{{ end }} 101 + </main> 102 </div> 103 + {{ end }} 104 </div> 105 {{ end }} 106 107 + {{ define "footerLayout" }} 108 + <footer class="px-1 col-span-full mt-12"> 109 + {{ template "layouts/footer" . }} 110 + </footer> 111 {{ end }} 112 113 {{ define "contentAfter" }}
+21 -13
appview/pages/templates/repo/compare/compare.html
··· 11 {{ end }} 12 13 {{ define "topbarLayout" }} 14 - {{ template "layouts/topbar" . }} 15 {{ end }} 16 17 - {{ define "contentLayout" }} 18 - {{ block "content" . }}{{ end }} 19 - {{ end }} 20 21 - {{ define "contentAfterLayout" }} 22 - <div class="grid grid-cols-1 md:grid-cols-12 gap-4"> 23 - <div class="col-span-1 md:col-span-2"> 24 - {{ block "contentAfterLeft" . }} {{ end }} 25 </div> 26 - <main class="col-span-1 md:col-span-10"> 27 - {{ block "contentAfter" . }}{{ end }} 28 - </main> 29 </div> 30 {{ end }} 31 32 - {{ define "footerLayout" }} 33 - {{ template "layouts/footer" . }} 34 {{ end }} 35 36 {{ define "contentAfter" }}
··· 11 {{ end }} 12 13 {{ define "topbarLayout" }} 14 + <header class="px-1 col-span-full" style="z-index: 20;"> 15 + {{ template "layouts/topbar" . }} 16 + </header> 17 {{ end }} 18 19 + {{ define "mainLayout" }} 20 + <div class="px-1 col-span-full flex flex-col gap-4"> 21 + {{ block "contentLayout" . }} 22 + {{ block "content" . }}{{ end }} 23 + {{ end }} 24 25 + {{ block "contentAfterLayout" . }} 26 + <div class="grid grid-cols-1 md:grid-cols-12 gap-4"> 27 + <div class="col-span-1 md:col-span-2"> 28 + {{ block "contentAfterLeft" . }} {{ end }} 29 + </div> 30 + <main class="col-span-1 md:col-span-10"> 31 + {{ block "contentAfter" . }}{{ end }} 32 + </main> 33 </div> 34 + {{ end }} 35 </div> 36 {{ end }} 37 38 + {{ define "footerLayout" }} 39 + <footer class="px-1 col-span-full mt-12"> 40 + {{ template "layouts/footer" . }} 41 + </footer> 42 {{ end }} 43 44 {{ define "contentAfter" }}
+21 -13
appview/pages/templates/repo/pulls/interdiff.html
··· 29 {{ end }} 30 31 {{ define "topbarLayout" }} 32 - {{ template "layouts/topbar" . }} 33 {{ end }} 34 35 - {{ define "contentLayout" }} 36 - {{ block "content" . }}{{ end }} 37 - {{ end }} 38 39 - {{ define "contentAfterLayout" }} 40 - <div class="grid grid-cols-1 md:grid-cols-12 gap-4"> 41 - <div class="col-span-1 md:col-span-2"> 42 - {{ block "contentAfterLeft" . }} {{ end }} 43 </div> 44 - <main class="col-span-1 md:col-span-10"> 45 - {{ block "contentAfter" . }}{{ end }} 46 - </main> 47 </div> 48 {{ end }} 49 50 - {{ define "footerLayout" }} 51 - {{ template "layouts/footer" . }} 52 {{ end }} 53 54
··· 29 {{ end }} 30 31 {{ define "topbarLayout" }} 32 + <header class="px-1 col-span-full" style="z-index: 20;"> 33 + {{ template "layouts/topbar" . }} 34 + </header> 35 {{ end }} 36 37 + {{ define "mainLayout" }} 38 + <div class="px-1 col-span-full flex flex-col gap-4"> 39 + {{ block "contentLayout" . }} 40 + {{ block "content" . }}{{ end }} 41 + {{ end }} 42 43 + {{ block "contentAfterLayout" . }} 44 + <div class="grid grid-cols-1 md:grid-cols-12 gap-4"> 45 + <div class="col-span-1 md:col-span-2"> 46 + {{ block "contentAfterLeft" . }} {{ end }} 47 + </div> 48 + <main class="col-span-1 md:col-span-10"> 49 + {{ block "contentAfter" . }}{{ end }} 50 + </main> 51 </div> 52 + {{ end }} 53 </div> 54 {{ end }} 55 56 + {{ define "footerLayout" }} 57 + <footer class="px-1 col-span-full mt-12"> 58 + {{ template "layouts/footer" . }} 59 + </footer> 60 {{ end }} 61 62
+21 -13
appview/pages/templates/repo/pulls/patch.html
··· 35 {{ end }} 36 37 {{ define "topbarLayout" }} 38 - {{ template "layouts/topbar" . }} 39 {{ end }} 40 41 - {{ define "contentLayout" }} 42 - {{ block "content" . }}{{ end }} 43 - {{ end }} 44 45 - {{ define "contentAfterLayout" }} 46 - <div class="grid grid-cols-1 md:grid-cols-12 gap-4"> 47 - <div class="col-span-1 md:col-span-2"> 48 - {{ block "contentAfterLeft" . }} {{ end }} 49 </div> 50 - <main class="col-span-1 md:col-span-10"> 51 - {{ block "contentAfter" . }}{{ end }} 52 - </main> 53 </div> 54 {{ end }} 55 56 - {{ define "footerLayout" }} 57 - {{ template "layouts/footer" . }} 58 {{ end }} 59 60 {{ define "contentAfter" }}
··· 35 {{ end }} 36 37 {{ define "topbarLayout" }} 38 + <header class="px-1 col-span-full" style="z-index: 20;"> 39 + {{ template "layouts/topbar" . }} 40 + </header> 41 {{ end }} 42 43 + {{ define "mainLayout" }} 44 + <div class="px-1 col-span-full flex flex-col gap-4"> 45 + {{ block "contentLayout" . }} 46 + {{ block "content" . }}{{ end }} 47 + {{ end }} 48 49 + {{ block "contentAfterLayout" . }} 50 + <div class="grid grid-cols-1 md:grid-cols-12 gap-4"> 51 + <div class="col-span-1 md:col-span-2"> 52 + {{ block "contentAfterLeft" . }} {{ end }} 53 + </div> 54 + <main class="col-span-1 md:col-span-10"> 55 + {{ block "contentAfter" . }}{{ end }} 56 + </main> 57 </div> 58 + {{ end }} 59 </div> 60 {{ end }} 61 62 + {{ define "footerLayout" }} 63 + <footer class="px-1 col-span-full mt-12"> 64 + {{ template "layouts/footer" . }} 65 + </footer> 66 {{ end }} 67 68 {{ define "contentAfter" }}