oppi.li / perf-test
loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Use `flex-container` for dashboard layout (#30214)

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)

authored by

silverwind
Giteabot and committed by
Gergely Nagy d8258482 3e53c519

+15 -9
+5 -7
templates/user/dashboard/dashboard.tmpl
··· 1 1 {{template "base/head" .}} 2 2 <div role="main" aria-label="{{.Title}}" class="page-content dashboard feeds"> 3 3 {{template "user/dashboard/navbar" .}} 4 - <div class="ui container"> 4 + <div class="ui container flex-container"> 5 5 {{template "base/alert" .}} 6 - <div class="ui mobile reversed stackable grid"> 7 - <div class="ui container ten wide column"> 8 - {{template "user/heatmap" .}} 9 - {{template "user/dashboard/feeds" .}} 10 - </div> 11 - {{template "user/dashboard/repolist" .}} 6 + <div class="flex-container-main"> 7 + {{template "user/heatmap" .}} 8 + {{template "user/dashboard/feeds" .}} 12 9 </div> 10 + {{template "user/dashboard/repolist" .}} 13 11 </div> 14 12 </div> 15 13 {{template "base/footer" .}}
+1 -1
templates/user/dashboard/repolist.tmpl
··· 52 52 window.config.pageData.dashboardRepoList = data; 53 53 </script> 54 54 55 - <div id="dashboard-repo-list" class="six wide column"></div> 55 + <div id="dashboard-repo-list" class="flex-container-sidebar"></div>
+9 -1
web_src/css/modules/flexcontainer.css
··· 6 6 margin-top: var(--page-spacing); 7 7 } 8 8 9 + /* small options menu on the left, used in settings/admin pages */ 9 10 .flex-container-nav { 10 11 width: 240px; 12 + } 13 + 14 + /* wide sidebar on the right, used in frontpage */ 15 + .flex-container-sidebar { 16 + width: 35%; 11 17 } 12 18 13 19 .flex-container-main { ··· 19 25 .flex-container { 20 26 flex-direction: column; 21 27 } 22 - .flex-container-nav { 28 + .flex-container-nav, 29 + .flex-container-sidebar { 30 + order: -1; 23 31 width: auto; 24 32 } 25 33 }