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>

diff --git a/templates/user/dashboard/dashboard.tmpl b/templates/user/dashboard/dashboard.tmpl
index d4553ea61ba247f64819a066971017d968b042c5..030fd49940652c76da6c693f5d2b9ac9bfeaa801 100644 (file)
--- 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 a879f1fb9d870e8a7671856d7314bc773280585c..be710675d560ac50c877cbc88d71a1aef2faf831 100644 (file)
--- 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 1ca513687ffcd611048d455e7541ce469fa8b1dd..5d4e12cc129b1121d9b936ef03d4f73717e41e97 100644 (file)
--- 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;
   }
 }