forked from tangled.org/core
Monorepo for Tangled — https://tangled.org

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
···
<title>{{ block "title" . }}{{ end }} · tangled</title>
{{ block "extrameta" . }}{{ end }}
</head>
-
<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">
{{ block "topbarLayout" . }}
-
<header class="px-1 col-span-1 md:col-start-2 md:col-span-8 lg:col-start-3" style="z-index: 20;">
{{ if .LoggedInUser }}
<div id="upgrade-banner"
···
{{ end }}
{{ block "mainLayout" . }}
-
<div class="px-1 col-span-1 md:col-start-2 md:col-span-8 lg:col-start-3 flex flex-col gap-4">
{{ block "contentLayout" . }}
<main class="col-span-1 md:col-span-8">
{{ block "content" . }}{{ end }}
···
{{ end }}
{{ block "footerLayout" . }}
-
<footer class="px-1 col-span-1 md:col-start-2 md:col-span-8 lg:col-start-3 mt-12">
{{ template "layouts/fragments/footer" . }}
</footer>
{{ end }}
···
<title>{{ block "title" . }}{{ end }} · tangled</title>
{{ block "extrameta" . }}{{ end }}
</head>
+
<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"
+
style="grid-template-columns: minmax(1rem, 1fr) minmax(auto, 1024px) minmax(1rem, 1fr);">
{{ block "topbarLayout" . }}
+
<header class="px-1 col-span-full md:col-span-1 md:col-start-2" style="z-index: 20;">
{{ if .LoggedInUser }}
<div id="upgrade-banner"
···
{{ end }}
{{ block "mainLayout" . }}
+
<div class="px-1 col-span-full md:col-span-1 md:col-start-2 flex flex-col gap-4">
{{ block "contentLayout" . }}
<main class="col-span-1 md:col-span-8">
{{ block "content" . }}{{ end }}
···
{{ end }}
{{ block "footerLayout" . }}
+
<footer class="px-1 col-span-full md:col-span-1 md:col-start-2 mt-12">
{{ template "layouts/fragments/footer" . }}
</footer>
{{ end }}
+6 -8
appview/pages/templates/layouts/repobase.html
···
{{ template "repo/fragments/repoDescription" . }}
</section>
-
<section
-
class="w-full flex flex-col"
-
>
<nav class="w-full pl-4 overflow-auto">
<div class="flex z-60">
{{ $activeTabStyles := "-mb-px bg-white dark:bg-gray-800" }}
···
{{ end }}
</div>
</nav>
-
<section
-
class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto dark:text-white"
-
>
{{ block "repoContent" . }}{{ end }}
-
</section>
-
{{ block "repoAfter" . }}{{ end }}
</section>
{{ end }}
···
{{ template "repo/fragments/repoDescription" . }}
</section>
+
<section class="w-full flex flex-col" >
<nav class="w-full pl-4 overflow-auto">
<div class="flex z-60">
{{ $activeTabStyles := "-mb-px bg-white dark:bg-gray-800" }}
···
{{ end }}
</div>
</nav>
+
{{ block "repoContentLayout" . }}
+
<section class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto dark:text-white">
{{ block "repoContent" . }}{{ end }}
+
</section>
+
{{ block "repoAfter" . }}{{ end }}
+
{{ end }}
</section>
{{ end }}
+15
appview/pages/templates/repo/issues/issue.html
···
{{ template "repo/fragments/og" (dict "RepoInfo" .RepoInfo "Title" $title "Url" $url) }}
{{ end }}
{{ define "repoContent" }}
<section id="issue-{{ .Issue.IssueId }}">
{{ template "issueHeader" .Issue }}
···
{{ template "repo/fragments/og" (dict "RepoInfo" .RepoInfo "Title" $title "Url" $url) }}
{{ end }}
+
{{ define "repoContentLayout" }}
+
<div class="grid grid-cols-1 md:grid-cols-4 gap-4 w-full">
+
<div class="col-span-1 md:col-span-3">
+
<section class="bg-white dark:bg-gray-800 p-6 rounded relative w-full mx-auto dark:text-white">
+
{{ block "repoContent" . }}{{ end }}
+
</section>
+
{{ block "repoAfter" . }}{{ end }}
+
</div>
+
<div class="col-span-1 flex flex-col gap-6">
+
{{ template "issueLabels" . }}
+
{{ template "issueParticipants" . }}
+
</div>
+
</div>
+
{{ end }}
+
{{ define "repoContent" }}
<section id="issue-{{ .Issue.IssueId }}">
{{ template "issueHeader" .Issue }}