From 7e160f8824d1b37baaedbc547a59aaf77c503ec5 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Mon, 31 Jul 2023 09:16:03 +0200
Subject: [PATCH] Reduce margins on user settings page, introduce
 `flex-container` (#26046)

Same as https://github.com/go-gitea/gitea/pull/26026 but for the user
settings page. It introduces a new `flex-container` class and shares it
across both pages.

Before and After:
<img width="1264" alt="Screenshot 2023-07-21 at 19 35 57"
src="https://github.com/go-gitea/gitea/assets/115237/1358dab4-55c0-40ce-a4d5-673099304f3d">
<img width="1269" alt="Screenshot 2023-07-21 at 19 35 42"
src="https://github.com/go-gitea/gitea/assets/115237/34812f6d-dc65-4009-b977-90e03efdc6d1">
---
 templates/admin/layout_head.tmpl         |  4 ++--
 templates/admin/navbar.tmpl              |  2 +-
 templates/user/settings/layout_head.tmpl |  4 ++--
 templates/user/settings/navbar.tmpl      |  2 +-
 web_src/css/admin.css                    | 23 -----------------------
 web_src/css/index.css                    |  1 +
 web_src/css/modules/flexcontainer.css    | 23 +++++++++++++++++++++++
 7 files changed, 30 insertions(+), 29 deletions(-)
 create mode 100644 web_src/css/modules/flexcontainer.css

diff --git a/templates/admin/layout_head.tmpl b/templates/admin/layout_head.tmpl
index 0974c5fbed..64d03d9e54 100644
--- a/templates/admin/layout_head.tmpl
+++ b/templates/admin/layout_head.tmpl
@@ -3,9 +3,9 @@
 	<div class="ui container">
 		{{template "base/alert" .ctxData}}
 	</div>
-	<div class="ui container admin-container">
+	<div class="ui container flex-container">
 		{{template "admin/navbar" .ctxData}}
-		<div class="admin-main">
+		<div class="flex-container-main">
 			{{/* block: admin-setting-content */}}
 
 {{if false}}{{/* to make html structure "likely" complete to prevent IDE warnings */}}
diff --git a/templates/admin/navbar.tmpl b/templates/admin/navbar.tmpl
index 4cfdbac73f..9cc2f04389 100644
--- a/templates/admin/navbar.tmpl
+++ b/templates/admin/navbar.tmpl
@@ -1,4 +1,4 @@
-<div class="admin-nav">
+<div class="flex-container-nav">
 	<div class="ui fluid vertical menu">
 		<div class="header item">{{.locale.Tr "settings"}}</div>
 		<a class="{{if .PageIsAdminDashboard}}active {{end}}item" href="{{AppSubUrl}}/admin">
diff --git a/templates/user/settings/layout_head.tmpl b/templates/user/settings/layout_head.tmpl
index 26d1653948..dce496e7fa 100644
--- a/templates/user/settings/layout_head.tmpl
+++ b/templates/user/settings/layout_head.tmpl
@@ -1,8 +1,8 @@
 {{template "base/head" .ctxData}}
 <div role="main" aria-label="{{.ctxData.Title}}" class="page-content {{.pageClass}}">
-	<div class="ui container stackable grid">
+	<div class="ui container flex-container">
 		{{template "user/settings/navbar" .ctxData}}
-		<div class="twelve wide column">
+		<div class="flex-container-main">
 			{{template "base/alert" .ctxData}}
 			{{/* block: user-setting-content */}}
 
diff --git a/templates/user/settings/navbar.tmpl b/templates/user/settings/navbar.tmpl
index d1038c5b62..274540c5bd 100644
--- a/templates/user/settings/navbar.tmpl
+++ b/templates/user/settings/navbar.tmpl
@@ -1,4 +1,4 @@
-<div class="four wide column">
+<div class="flex-container-nav">
 	<div class="ui fluid vertical menu">
 		<div class="header item">{{.locale.Tr "settings"}}</div>
 		<a class="{{if .PageIsSettingsProfile}}active {{end}}item" href="{{AppSubUrl}}/user/settings">
diff --git a/web_src/css/admin.css b/web_src/css/admin.css
index f590a04180..74e6b10a7c 100644
--- a/web_src/css/admin.css
+++ b/web_src/css/admin.css
@@ -1,26 +1,3 @@
-.admin-container {
-  margin-top: 15px;
-  display: flex !important;
-  gap: 16px;
-}
-
-.admin-nav {
-  width: 240px;
-}
-
-.admin-main {
-  flex: 1;
-}
-
-@media (max-width: 767.98px) {
-  .admin-container {
-    flex-direction: column;
-  }
-  .admin-nav {
-    width: auto;
-  }
-}
-
 .admin.hooks .list > .item:not(:first-child) {
   border-top: 1px solid var(--color-secondary);
   padding: 0.25rem 1rem;
diff --git a/web_src/css/index.css b/web_src/css/index.css
index fa918f49da..230e032ac0 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -11,6 +11,7 @@
 @import "./modules/toast.css";
 @import "./modules/divider.css";
 @import "./modules/svg.css";
+@import "./modules/flexcontainer.css";
 
 @import "./shared/issuelist.css";
 @import "./shared/milestone.css";
diff --git a/web_src/css/modules/flexcontainer.css b/web_src/css/modules/flexcontainer.css
new file mode 100644
index 0000000000..1721f14b2c
--- /dev/null
+++ b/web_src/css/modules/flexcontainer.css
@@ -0,0 +1,23 @@
+/* container for full-page content with sidebar on left */
+
+.flex-container {
+  display: flex !important;
+  gap: 16px;
+}
+
+.flex-container-nav {
+  width: 240px;
+}
+
+.flex-container-main {
+  flex: 1;
+}
+
+@media (max-width: 767.98px) {
+  .flex-container {
+    flex-direction: column;
+  }
+  .flex-container-nav {
+    width: auto;
+  }
+}