mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-09-10 12:12:32 +02:00
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">
This commit is contained in:
parent
1e76a824bc
commit
7e160f8824
7 changed files with 30 additions and 29 deletions
|
@ -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 */}}
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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 */}}
|
||||
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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";
|
||||
|
|
23
web_src/css/modules/flexcontainer.css
Normal file
23
web_src/css/modules/flexcontainer.css
Normal file
|
@ -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;
|
||||
}
|
||||
}
|
Loading…
Reference in a new issue