web/forgejo
10
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Revamp repo header (#27760)

Browse source 
Redesign repo header with following new aspects:
- responsive & better-looking repo title
- hide repo button text instead of icons in mobile view
- use same tab style as on explore and org page

<details>
<summary>Before:</summary>


![grafik](57360b77-d43c-49ac-b798-2363c03da7ec)

![grafik](d4117f79-a5f5-4f36-bf65-bbada3e7e73b)

![grafik](e26f967f-e264-4337-9925-3d942e04fd6d)

![grafik](b4683c8d-9c6a-4089-afa7-8dd219e43a46)


</details>

<details>
<summary>After:</summary>


![grafik](8ddbc9f6-53c7-4e4e-bea9-704fd93524ca)

![grafik](c0588aa9-788d-469c-98a0-81484fbd220c)

![grafik](206e931e-404d-4d1b-92ce-908698addfcc)

![grafik](a508f9c8-fadc-4a85-94ba-18796f77e07b)
This commit is contained in:
Denys Konovalov 2024-01-12 04:44:06 +01:00 • committed by GitHub
parent ba4d0b8ffb
commit 7d62615513
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 150 additions and 154 deletions
Download patch file Download diff file Expand all files Collapse all files

17
web_src/css/base.css
View file

@ -1358,23 +1358,6 @@ img.ui.avatar,
padding-right: 4.5px;
}
.repo-title {
font-size: 1.5rem;
display: flex;
align-items: center;
flex: 1;
word-break: break-all;
color: var(--color-text-light);
}
.repo-title .labels {
margin-left: 0.5rem;
}
.repo-title .labels > * + * {
margin-left: 0.5rem;
}
.activity-bar-graph {
background-color: var(--color-primary);
color: var(--color-primary-contrast);

1
web_src/css/index.css
View file

@ -47,6 +47,7 @@
@import "./repo/list-header.css";
@import "./repo/linebutton.css";
@import "./repo/wiki.css";
@import "./repo/header.css";
@import "./editor/fileeditor.css";
@import "./editor/combomarkdowneditor.css";

93
web_src/css/repo.css
View file

@ -4,23 +4,6 @@
user-select: none;
}
.repository .repo-header .ui.compact.menu {
margin-left: 1rem;
}
.repository .repo-header .ui.header {
margin-top: 0;
}
.repository .repo-header .fork-flag {
font-size: 12px;
margin-top: 2px;
}
.repository .tabs .navbar {
justify-content: initial;
}
.repository .navbar {
display: flex;
justify-content: space-between;
@ -106,14 +89,6 @@
white-space: nowrap;
}
.repository .header-wrapper {
background-color: var(--color-header-wrapper);
}
.repository .header-wrapper .ui.tabular .svg {
margin-right: 5px;
}
.repository .filter.menu.labels .label-filter .menu .info {
display: inline-block;
padding: 0.5rem 0;
@ -2593,74 +2568,6 @@ tbody.commit-list {
overflow: hidden;
}
.repo-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
word-break: break-word;
gap: 0.5rem;
}
@media (max-width: 767.98px) {
.repo-header + .container {
margin-top: 7px;
}
}
.repo-buttons {
align-items: center;
display: flex;
flex-direction: row;
flex-wrap: wrap;
word-break: keep-all;
gap: 0.25em;
}
@media (max-width: 767.98px) {
.repo-buttons {
margin-top: 1em;
}
}
.repo-buttons .ui.labeled.button > .label:hover {
color: var(--color-primary-light-2);
background: var(--color-light);
}
.repo-buttons button[disabled] ~ .label {
opacity: var(--opacity-disabled);
color: var(--color-text-dark);
background: var(--color-light-mimic-enabled) !important;
}
.repo-buttons button[disabled] ~ .label:hover {
color: var(--color-primary-dark-1);
}
.repo-buttons .ui.labeled.button.disabled {
pointer-events: inherit !important;
}
.repo-buttons .ui.labeled.button.disabled > .label {
color: var(--color-text-dark);
background: var(--color-light-mimic-enabled) !important;
}
.repo-buttons .ui.labeled.button.disabled > .label:hover {
color: var(--color-primary-dark-1);
}
.repo-buttons .ui.labeled.button.disabled > .button {
pointer-events: none !important;
}
@media (max-width: 767.98px) {
.repo-buttons .ui.labeled.button .svg {
display: none;
}
}
.tag-code {
height: 28px;
}

101
web_src/css/repo/header.css Normal file
View file

@ -0,0 +1,101 @@
.fork-flag {
margin-top: 0.5rem;
font-size: 12px;
}
.repo-header {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
gap: 0.5rem;
}
.repo-header .flex-item {
padding: 0;
}
.repo-header .btn.interact-bg:hover {
text-decoration: none;
}
.repo-header .flex-item-main {
flex-basis: unset;
}
.repo-header .flex-item-trailing {
flex-wrap: nowrap;
}
.repo-header .flex-item-trailing .repo-icon {
display: none;
}
.repo-buttons {
align-items: center;
display: flex;
flex-flow: row wrap;
word-break: keep-all;
gap: 0.25em;
}
.repo-buttons .ui.labeled.button > .label:hover {
color: var(--color-primary-light-2);
background: var(--color-light);
}
.repo-buttons button[disabled] ~ .label {
opacity: var(--opacity-disabled);
color: var(--color-text-dark);
background: var(--color-light-mimic-enabled) !important;
}
.repo-buttons button[disabled] ~ .label:hover {
color: var(--color-primary-dark-1);
}
.repo-buttons .ui.labeled.button.disabled {
pointer-events: inherit !important;
}
.repo-buttons .ui.labeled.button.disabled > .label {
color: var(--color-text-dark);
background: var(--color-light-mimic-enabled) !important;
}
.repo-buttons .ui.labeled.button.disabled > .label:hover {
color: var(--color-primary-dark-1);
}
.repo-buttons .ui.labeled.button.disabled > .button {
pointer-events: none !important;
}
.repository .header-wrapper {
background-color: var(--color-header-wrapper);
}
.repository .header-wrapper .new-menu {
padding-top: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.repository .header-wrapper .new-menu .item {
margin-left: 0 !important;
margin-right: 0 !important;
}
@media (max-width: 767.98px) {
.repo-header .flex-item {
flex-grow: 1;
}
.repo-buttons .ui.labeled.button .text {
display: none;
}
.repo-header .flex-item-trailing .label {
display: none;
}
.repo-header .flex-item-trailing .repo-icon {
display: initial;
}
}