forked from tangled.org/core
Monorepo for Tangled

appview/pages: rework layouts to accomodate sidebar in issue view

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

oppi.li bfdb79be e1a08c7b

verified
Changed files
+26 -12
appview
pages
templates
layouts
repo
issues
+5 -4
appview/pages/templates/layouts/base.html
··· 21 21 <title>{{ block "title" . }}{{ end }} · tangled</title> 22 22 {{ block "extrameta" . }}{{ end }} 23 23 </head> 24 - <body class="min-h-screen grid grid-cols-1 grid-rows-[min-content_auto_min-content] md:grid-cols-10 lg:grid-cols-12 gap-4 bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200"> 24 + <body class="min-h-screen grid grid-cols-1 grid-rows-[min-content_auto_min-content] gap-4 bg-slate-100 dark:bg-gray-900 dark:text-white transition-colors duration-200" 25 + style="grid-template-columns: minmax(1rem, 1fr) minmax(auto, 1024px) minmax(1rem, 1fr);"> 25 26 {{ block "topbarLayout" . }} 26 - <header class="px-1 col-span-1 md:col-start-2 md:col-span-8 lg:col-start-3" style="z-index: 20;"> 27 + <header class="px-1 col-span-full md:col-span-1 md:col-start-2" style="z-index: 20;"> 27 28 28 29 {{ if .LoggedInUser }} 29 30 <div id="upgrade-banner" ··· 37 38 {{ end }} 38 39 39 40 {{ block "mainLayout" . }} 40 - <div class="px-1 col-span-1 md:col-start-2 md:col-span-8 lg:col-start-3 flex flex-col gap-4"> 41 + <div class="px-1 col-span-full md:col-span-1 md:col-start-2 flex flex-col gap-4"> 41 42 {{ block "contentLayout" . }} 42 43 <main class="col-span-1 md:col-span-8"> 43 44 {{ block "content" . }}{{ end }} ··· 53 54 {{ end }} 54 55 55 56 {{ block "footerLayout" . }} 56 - <footer class="px-1 col-span-1 md:col-start-2 md:col-span-8 lg:col-start-3 mt-12"> 57 + <footer class="px-1 col-span-full md:col-span-1 md:col-start-2 mt-12"> 57 58 {{ template "layouts/fragments/footer" . }} 58 59 </footer> 59 60 {{ end }}
+6 -8
appview/pages/templates/layouts/repobase.html
··· 41 41 {{ template "repo/fragments/repoDescription" . }} 42 42 </section> 43 43 44 - <section 45 - class="w-full flex flex-col" 46 - > 44 + <section class="w-full flex flex-col" > 47 45 <nav class="w-full pl-4 overflow-auto"> 48 46 <div class="flex z-60"> 49 47 {{ $activeTabStyles := "-mb-px bg-white dark:bg-gray-800" }} ··· 80 78 {{ end }} 81 79 </div> 82 80 </nav> 83 - <section 84 - class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto dark:text-white" 85 - > 81 + {{ block "repoContentLayout" . }} 82 + <section class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto dark:text-white"> 86 83 {{ block "repoContent" . }}{{ end }} 87 - </section> 88 - {{ block "repoAfter" . }}{{ end }} 84 + </section> 85 + {{ block "repoAfter" . }}{{ end }} 86 + {{ end }} 89 87 </section> 90 88 {{ end }}
+15
appview/pages/templates/repo/issues/issue.html
··· 8 8 {{ template "repo/fragments/og" (dict "RepoInfo" .RepoInfo "Title" $title "Url" $url) }} 9 9 {{ end }} 10 10 11 + {{ define "repoContentLayout" }} 12 + <div class="grid grid-cols-1 md:grid-cols-4 gap-4 w-full"> 13 + <div class="col-span-1 md:col-span-3"> 14 + <section class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto dark:text-white"> 15 + {{ block "repoContent" . }}{{ end }} 16 + </section> 17 + {{ block "repoAfter" . }}{{ end }} 18 + </div> 19 + <div class="col-span-1 flex flex-col gap-6"> 20 + {{ template "issueLabels" . }} 21 + {{ template "issueParticipants" . }} 22 + </div> 23 + </div> 24 + {{ end }} 25 + 11 26 {{ define "repoContent" }} 12 27 <section id="issue-{{ .Issue.IssueId }}"> 13 28 {{ template "issueHeader" .Issue }}