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; + } +}