tom/forkjo
tom/forkjo
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 1

Use flex-container for dashboard layout (#30214)

Browse source 
Added new class `flex-container-sidebar` to cover the dashboard sidebar.
Previously this was 37.5% with more padding. Now there is less empty
space between the two columns and this matches other pages like repo or
admin settings page.

Desktop:

<img width="1345" alt="Screenshot 2024-03-31 at 15 11 36"
src="https://github.com/go-gitea/gitea/assets/115237/717389d9-d42c-466e-a8fe-e968f79447fd">

Mobile:
<img width="444" alt="Screenshot 2024-03-31 at 15 11 44"
src="https://github.com/go-gitea/gitea/assets/115237/7faa840b-513a-411b-bf2d-26d52b9b71a0">

---------

Co-authored-by: Giteabot <teabot@gitea.io>
(cherry picked from commit 044cc169e75dccbf1d846f8774ef2feccd0da1fd)
This commit is contained in:
silverwind 2024-04-14 13:39:11 +02:00 committed by Gergely Nagy
parent 3e53c51903
commit d8258482e2
No known key found for this signature in database
3 changed files with 15 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
templates/user/dashboard/dashboard.tmpl
View file

@ -1,15 +1,13 @@
{{template "base/head" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content dashboard feeds"> <div role="main" aria-label="{{.Title}}" class="page-content dashboard feeds">
{{template "user/dashboard/navbar" .}} {{template "user/dashboard/navbar" .}}
<div class="ui container"> <div class="ui container flex-container">
{{template "base/alert" .}} {{template "base/alert" .}}
<div class="ui mobile reversed stackable grid"> <div class="flex-container-main">
<div class="ui container ten wide column"> {{template "user/heatmap" .}}
{{template "user/heatmap" .}} {{template "user/dashboard/feeds" .}}
{{template "user/dashboard/feeds" .}}
</div>
{{template "user/dashboard/repolist" .}}
</div> </div>
{{template "user/dashboard/repolist" .}}
</div> </div>
</div> </div>
{{template "base/footer" .}} {{template "base/footer" .}}

2
templates/user/dashboard/repolist.tmpl
View file

@ -52,4 +52,4 @@ data.organizationId = {{.ContextUser.ID}};
window.config.pageData.dashboardRepoList = data; window.config.pageData.dashboardRepoList = data;
</script> </script>
<div id="dashboard-repo-list" class="six wide column"></div> <div id="dashboard-repo-list" class="flex-container-sidebar"></div>

10
web_src/css/modules/flexcontainer.css
View file

@ -6,10 +6,16 @@
margin-top: var(--page-spacing); margin-top: var(--page-spacing);
} }
/* small options menu on the left, used in settings/admin pages */
.flex-container-nav { .flex-container-nav {
width: 240px; width: 240px;
} }
/* wide sidebar on the right, used in frontpage */
.flex-container-sidebar {
width: 35%;
}
.flex-container-main { .flex-container-main {
flex: 1; flex: 1;
min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */ min-width: 0; /* make the "text truncate" work, otherwise the flex axis is not limited and the text just overflows */
@ -19,7 +25,9 @@
.flex-container { .flex-container {
flex-direction: column; flex-direction: column;
} }
.flex-container-nav { .flex-container-nav,
.flex-container-sidebar {
order: -1;
width: auto; width: auto;
} }
} }