forks/forgejo
1
0
Fork 0
Code Releases Activity

Reduce margins on user settings page, introduce flex-container (#26046)

Browse source 
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:
silverwind 2023-07-31 09:16:03 +02:00 committed by GitHub
parent 1e76a824bc
commit 7e160f8824
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 30 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
templates/admin/layout_head.tmpl
View file

@ -3,9 +3,9 @@
<div class="ui container"> <div class="ui container">
{{template "base/alert" .ctxData}} {{template "base/alert" .ctxData}}
</div> </div>
<div class="ui container admin-container"> <div class="ui container flex-container">
{{template "admin/navbar" .ctxData}} {{template "admin/navbar" .ctxData}}
<div class="admin-main"> <div class="flex-container-main">
{{/* block: admin-setting-content */}} {{/* block: admin-setting-content */}}
{{if false}}{{/* to make html structure "likely" complete to prevent IDE warnings */}} {{if false}}{{/* to make html structure "likely" complete to prevent IDE warnings */}}

2
templates/admin/navbar.tmpl
View file

@ -1,4 +1,4 @@
<div class="admin-nav"> <div class="flex-container-nav">
<div class="ui fluid vertical menu"> <div class="ui fluid vertical menu">
<div class="header item">{{.locale.Tr "settings"}}</div> <div class="header item">{{.locale.Tr "settings"}}</div>
<a class="{{if .PageIsAdminDashboard}}active {{end}}item" href="{{AppSubUrl}}/admin"> <a class="{{if .PageIsAdminDashboard}}active {{end}}item" href="{{AppSubUrl}}/admin">

4
templates/user/settings/layout_head.tmpl
View file

@ -1,8 +1,8 @@
{{template "base/head" .ctxData}} {{template "base/head" .ctxData}}
<div role="main" aria-label="{{.ctxData.Title}}" class="page-content {{.pageClass}}"> <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}} {{template "user/settings/navbar" .ctxData}}
<div class="twelve wide column"> <div class="flex-container-main">
{{template "base/alert" .ctxData}} {{template "base/alert" .ctxData}}
{{/* block: user-setting-content */}} {{/* block: user-setting-content */}}

2
templates/user/settings/navbar.tmpl
View file

@ -1,4 +1,4 @@
<div class="four wide column"> <div class="flex-container-nav">
<div class="ui fluid vertical menu"> <div class="ui fluid vertical menu">
<div class="header item">{{.locale.Tr "settings"}}</div> <div class="header item">{{.locale.Tr "settings"}}</div>
<a class="{{if .PageIsSettingsProfile}}active {{end}}item" href="{{AppSubUrl}}/user/settings"> <a class="{{if .PageIsSettingsProfile}}active {{end}}item" href="{{AppSubUrl}}/user/settings">

23
web_src/css/admin.css
View file

@ -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) { .admin.hooks .list > .item:not(:first-child) {
border-top: 1px solid var(--color-secondary); border-top: 1px solid var(--color-secondary);
padding: 0.25rem 1rem; padding: 0.25rem 1rem;

1
web_src/css/index.css
View file

@ -11,6 +11,7 @@
@import "./modules/toast.css"; @import "./modules/toast.css";
@import "./modules/divider.css"; @import "./modules/divider.css";
@import "./modules/svg.css"; @import "./modules/svg.css";
@import "./modules/flexcontainer.css";
@import "./shared/issuelist.css"; @import "./shared/issuelist.css";
@import "./shared/milestone.css"; @import "./shared/milestone.css";

23
web_src/css/modules/flexcontainer.css Normal file
View 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;
}
}