Reduce margins on admin pages (#26026)

Reduce margins around admin boxes and reduce sidebar size from 275px to
240px. This is the same 16px margin we use on issue pages.

Before and After:
<img width="1270" alt="Screenshot 2023-07-21 at 00 28 11"
src="https://github.com/go-gitea/gitea/assets/115237/f9b0dcb0-8f7e-49b4-b130-54bf31c142fd">
<img width="1271" alt="Screenshot 2023-07-21 at 00 30 51"
src="https://github.com/go-gitea/gitea/assets/115237/ddd75d59-9ab9-4061-8989-852e89727560">

diff --git a/templates/admin/layout_head.tmpl b/templates/admin/layout_head.tmpl
index 6d84f8f3590e3e2ee2e1b8670e4d507b78236ac9..71410ea36ba609400636eec0888738abb4fc73cf 100644 (file)
--- a/templates/admin/layout_head.tmpl
+++ b/templates/admin/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 admin-container">
                {{template "admin/navbar" .ctxData}}
-               <div class="twelve wide column">
+               <div class="admin-main">
                        {{template "base/alert" .ctxData}}
                        {{/* block: admin-setting-content */}}
 

diff --git a/templates/admin/navbar.tmpl b/templates/admin/navbar.tmpl
index 641d3fad81f8f5489c34d11e7944c30ba1561dc2..a96e5c93677a54d224fa34d88f64c57b0cacba7c 100644 (file)
--- a/templates/admin/navbar.tmpl
+++ b/templates/admin/navbar.tmpl
@@ -1,4 +1,4 @@
-<div class="four wide column">
+<div class="admin-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/web_src/css/admin.css b/web_src/css/admin.css
index f4848bef4af5ee82661b3c4ee37d3eb1c1577c69..8c9d1e201c2a7357170d5d3e76915136224d935d 100644 (file)
--- a/web_src/css/admin.css
+++ b/web_src/css/admin.css
@@ -1,3 +1,25 @@
+.admin-container {
+  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;