Various improvements for long file and commit names (#30374)
Fixes: https://github.com/go-gitea/gitea/issues/29438 This contains numerous enhancements for how large commit messages and large filenames render. Another notable change is that the file path is no longer cut off by backend at 30 chars, but rendered in full with wrapping. <img width="1329" alt="Screenshot 2024-04-09 at 21 53 57" src="5ccbb3d6
-643a-4f60-ba79-3572b36d5182"> <hr> <img width="711" alt="Screenshot 2024-04-09 at 21 44 24" src="6ffe8fbb
-407c-4aa7-b591-3d80daea7d57"> <hr> <img width="439" alt="Screenshot 2024-04-09 at 21 19 03" src="1ec7f6e9
-2fd8-4841-87eb-6ca02ab9cd61"> <hr> <img width="444" alt="Screenshot 2024-04-09 at 21 18 52" src="70931b9e
-5841-477e-b3bc-98f8d2662964"> --------- Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
parent
6cac11cb1b
commit
50099d7af4
8 changed files with 107 additions and 78 deletions
|
@ -25,6 +25,19 @@
|
|||
--tab-size: 4;
|
||||
--checkbox-size: 15px; /* height and width of checkbox and radio inputs */
|
||||
--page-spacing: 16px; /* space between page elements */
|
||||
--page-margin-x: 32px; /* minimum space on left and right side of page */
|
||||
}
|
||||
|
||||
@media (min-width: 768px) and (max-width: 1200px) {
|
||||
:root {
|
||||
--page-margin-x: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
:root {
|
||||
--page-margin-x: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
:root * {
|
||||
|
|
|
@ -49,30 +49,11 @@
|
|||
/* overwrite width of containers inside the main page content div (div with class "page-content") */
|
||||
.page-content .ui.ui.ui.container:not(.fluid) {
|
||||
width: 1280px;
|
||||
max-width: calc(100% - 64px);
|
||||
max-width: calc(100% - calc(2 * var(--page-margin-x)));
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.ui.container.fluid.padded {
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
/* enable fluid page widths for medium size viewports */
|
||||
@media (min-width: 768px) and (max-width: 1200px) {
|
||||
.page-content .ui.ui.ui.container:not(.fluid) {
|
||||
max-width: calc(100% - 32px);
|
||||
}
|
||||
.ui.container.fluid.padded {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.page-content .ui.ui.ui.container:not(.fluid) {
|
||||
max-width: calc(100% - 16px);
|
||||
}
|
||||
.ui.container.fluid.padded {
|
||||
padding: 0 8px;
|
||||
}
|
||||
padding: 0 var(--page-margin-x);
|
||||
}
|
||||
|
|
|
@ -177,12 +177,44 @@
|
|||
}
|
||||
}
|
||||
|
||||
.repository.file.list .repo-path {
|
||||
word-break: break-word;
|
||||
.commit-summary {
|
||||
flex: 1;
|
||||
overflow-wrap: anywhere;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.repository.file.list #repo-files-table {
|
||||
table-layout: fixed;
|
||||
.commit-header .commit-summary,
|
||||
td .commit-summary {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.latest-commit {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.latest-commit .sha {
|
||||
display: none;
|
||||
}
|
||||
.latest-commit .commit-summary {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.repo-path {
|
||||
display: flex;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
/* this is what limits the commit table width to a value that works on all viewport sizes */
|
||||
#repo-files-table th:first-of-type {
|
||||
max-width: calc(calc(min(100vw, 1280px)) - 145px - calc(2 * var(--page-margin-x)));
|
||||
}
|
||||
|
||||
.repository.file.list #repo-files-table thead th {
|
||||
|
@ -262,7 +294,6 @@
|
|||
}
|
||||
|
||||
.repository.file.list #repo-files-table td.age {
|
||||
width: 120px;
|
||||
color: var(--color-text-light-1);
|
||||
}
|
||||
|
||||
|
@ -1219,10 +1250,6 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
.repository #commits-table td.message {
|
||||
text-overflow: unset;
|
||||
}
|
||||
|
||||
.repository #commits-table.ui.basic.striped.table tbody tr:nth-child(2n) {
|
||||
background-color: var(--color-light) !important;
|
||||
}
|
||||
|
@ -2114,6 +2141,20 @@
|
|||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.commit-header-buttons {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
align-items: flex-start;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 767.98px) {
|
||||
.commit-header-buttons {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
}
|
||||
|
||||
.settings.webhooks .list > .item:not(:first-child),
|
||||
.settings.githooks .list > .item:not(:first-child),
|
||||
.settings.actions .list > .item:not(:first-child) {
|
||||
|
@ -2346,7 +2387,7 @@ tbody.commit-list {
|
|||
.author-wrapper {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
max-width: calc(100% - 50px);
|
||||
max-width: 100%;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
@ -2371,10 +2412,6 @@ tbody.commit-list {
|
|||
tr.commit-list {
|
||||
width: 100%;
|
||||
}
|
||||
th .message-wrapper {
|
||||
display: block;
|
||||
max-width: calc(100vw - 70px);
|
||||
}
|
||||
.author-wrapper {
|
||||
max-width: 80px;
|
||||
}
|
||||
|
@ -2384,27 +2421,18 @@ tbody.commit-list {
|
|||
tr.commit-list {
|
||||
width: 723px;
|
||||
}
|
||||
th .message-wrapper {
|
||||
max-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) and (max-width: 1200px) {
|
||||
tr.commit-list {
|
||||
width: 933px;
|
||||
}
|
||||
th .message-wrapper {
|
||||
max-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1201px) {
|
||||
tr.commit-list {
|
||||
width: 1127px;
|
||||
}
|
||||
th .message-wrapper {
|
||||
max-width: 525px;
|
||||
}
|
||||
}
|
||||
|
||||
.commit-list .commit-status-link {
|
||||
|
@ -2732,7 +2760,7 @@ tbody.commit-list {
|
|||
.repository.file.list #repo-files-table .entry td.message,
|
||||
.repository.file.list #repo-files-table .commit-list td.message,
|
||||
.repository.file.list #repo-files-table .entry span.commit-summary,
|
||||
.repository.file.list #repo-files-table .commit-list span.commit-summary {
|
||||
.repository.file.list #repo-files-table .commit-list tr span.commit-summary {
|
||||
display: none !important;
|
||||
}
|
||||
.repository.view.issue .comment-list .timeline,
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue