Change the layout of the view page from CSS Grid to Flexbox

This commit is contained in:
Kerwin Bryant 2025-03-10 07:34:15 +00:00
parent 3b41bea9a2
commit e761360555
2 changed files with 10 additions and 20 deletions

View File

@ -16,7 +16,7 @@
{{template "repo/code/recently_pushed_new_branches" .}}
<div class="{{Iif .RepoPreferences.ShowFileViewTreeSidebar "repo-view-with-sidebar" "repo-view-content-only"}}">
<div class="repo-view-container {{Iif .RepoPreferences.ShowFileViewTreeSidebar "repo-view-with-sidebar" "repo-view-content-only"}}">
<div class="repo-view-file-tree-sidebar not-mobile {{if not .RepoPreferences.ShowFileViewTreeSidebar}}tw-hidden{{end}}" {{if .IsSigned}} data-is-signed {{end}}>{{template "repo/view_file_tree_sidebar" .}}</div>
<div class="repo-view-content">
{{template "repo/view_content" .}}

View File

@ -49,23 +49,14 @@
}
}
.repo-view-with-sidebar {
display: grid;
grid-template-columns: 300px auto;
grid-template-rows: auto auto 1fr;
.repo-view-container {
display: flex;
flex-wrap: wrap;
gap: var(--page-spacing);
}
.repo-view-content {
min-width: 0;
grid-column: 1;
grid-row: 1 / 4;
}
.repo-view-with-sidebar .repo-view-content {
min-width: 0;
grid-column: 2;
grid-row: 1 / 4;
margin-left: 1rem;
flex: 1;
}
#view-file-tree.is-loading {
@ -73,6 +64,7 @@
}
.repo-view-with-sidebar .repo-view-file-tree-sidebar {
flex: 0 1 15%;
display: flex;
flex-direction: column;
gap: 8px;
@ -83,18 +75,16 @@
z-index: 8;
}
.repo-view-with-sidebar .repo-button-row {
.repo-view-container .repo-button-row {
margin-top: 0 !important;
}
@media (max-width: 767.98px) {
.repo-view-with-sidebar {
grid-template-columns: auto;
grid-template-rows: auto auto auto;
flex: 1 1 0;
}
.repo-view-content {
grid-column: 1;
grid-row: 2;
flex: 1 1 0;
}
}