diff options
| author | silverwind <me@silverwind.io> | 2024-04-14 13:39:11 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2024-04-14 13:39:11 +0200 |
| commit | 044cc169e75dccbf1d846f8774ef2feccd0da1fd (patch) | |
| tree | 28441094b2bf305654f204047ca79aff41a8123a | |
| parent | 4b1063f3dba6ef7a54c15f6e795409b504a62391 (diff) | |
| download | gitea-044cc169e75dccbf1d846f8774ef2feccd0da1fd.tar.gz gitea-044cc169e75dccbf1d846f8774ef2feccd0da1fd.zip | |
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>
| -rw-r--r-- | templates/user/dashboard/dashboard.tmpl | 12 | ||||
| -rw-r--r-- | templates/user/dashboard/repolist.tmpl | 2 | ||||
| -rw-r--r-- | web_src/css/modules/flexcontainer.css | 10 |
3 files changed, 15 insertions, 9 deletions
diff --git a/templates/user/dashboard/dashboard.tmpl b/templates/user/dashboard/dashboard.tmpl index d4553ea61b..030fd49940 100644 --- a/templates/user/dashboard/dashboard.tmpl +++ b/templates/user/dashboard/dashboard.tmpl @@ -1,15 +1,13 @@ {{template "base/head" .}} <div role="main" aria-label="{{.Title}}" class="page-content dashboard feeds"> {{template "user/dashboard/navbar" .}} - <div class="ui container"> + <div class="ui container flex-container"> {{template "base/alert" .}} - <div class="ui mobile reversed stackable grid"> - <div class="ui container ten wide column"> - {{template "user/heatmap" .}} - {{template "user/dashboard/feeds" .}} - </div> - {{template "user/dashboard/repolist" .}} + <div class="flex-container-main"> + {{template "user/heatmap" .}} + {{template "user/dashboard/feeds" .}} </div> + {{template "user/dashboard/repolist" .}} </div> </div> {{template "base/footer" .}} diff --git a/templates/user/dashboard/repolist.tmpl b/templates/user/dashboard/repolist.tmpl index a879f1fb9d..be710675d5 100644 --- a/templates/user/dashboard/repolist.tmpl +++ b/templates/user/dashboard/repolist.tmpl @@ -56,4 +56,4 @@ data.organizationId = {{.ContextUser.ID}}; window.config.pageData.dashboardRepoList = data; </script> -<div id="dashboard-repo-list" class="six wide column"></div> +<div id="dashboard-repo-list" class="flex-container-sidebar"></div> diff --git a/web_src/css/modules/flexcontainer.css b/web_src/css/modules/flexcontainer.css index 1ca513687f..5d4e12cc12 100644 --- a/web_src/css/modules/flexcontainer.css +++ b/web_src/css/modules/flexcontainer.css @@ -6,10 +6,16 @@ margin-top: var(--page-spacing); } +/* small options menu on the left, used in settings/admin pages */ .flex-container-nav { width: 240px; } +/* wide sidebar on the right, used in frontpage */ +.flex-container-sidebar { + width: 35%; +} + .flex-container-main { flex: 1; 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-direction: column; } - .flex-container-nav { + .flex-container-nav, + .flex-container-sidebar { + order: -1; width: auto; } } |