Improve commit list/view on mobile (#19712)

- This is a continuation on [the work](https://github.com/go-gitea/gitea/pull/19546) I've done for improving mobile experience on Gitea.
- The current behavior of going trough the commits list is horrible, each individual item gets it's own row and thereby isn't quite compact as it should be on mobile. The commit view's header is in a bit better state, it's quite only that content is overlapping each other.
- This patch fixes those problems. Each row in the commit list table will actually take a row in the UI. The commit view's header has now a better organized way of placing the information.
This commit is contained in:
Gusted 2022-05-16 16:45:12 +00:00 committed by GitHub
parent 71ca131582
commit bcf13b670b
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 93 additions and 15 deletions

View file

@ -3328,4 +3328,83 @@ td.blob-excerpt {
}
}
}
.commit-header-row {
.ui.horizontal.list {
width: 100%;
overflow-x: scroll;
margin-top: 2px;
.item {
align-items: center;
display: flex;
}
}
.author {
padding: 3px 0;
}
}
.commit-header h3 {
flex-basis: auto !important;
margin-bottom: .5rem !important;
}
.commits-table {
flex-direction: column;
.commits-table-left {
align-items: initial !important;
margin-bottom: 6px;
}
.commits-table-right form {
display: flex;
flex-wrap: wrap;
> div:nth-child(1) {
order: 1;
}
> div:nth-child(2) {
order: 3;
margin-left: .5rem;
margin-top: .5rem;
}
> button:nth-child(3) {
order: 2;
margin-left: .25rem;
}
}
}
.commit-table {
overflow-x: scroll;
td.sha,
th.sha {
display: none !important;
}
.commit-list {
span.message-wrapper {
max-width: none;
}
tr td:last-child {
display: block;
width: max-content;
}
td.author {
display: block;
width: calc(100% + .5rem);
}
.copy-commit-sha {
display: none !important;
}
}
}
}