Make repository file list useable on mobile (#19515)

* Make repository file list useable on mobile

- When you're browsing a repository on mobile, you're met by a giant
block called the "repository file list". The current design is not
useable for mobile and is a big annoyance while browsing a repo on
mobile. This PR removes that annoyance by making it more suitable design
when on mobile.
- Adds HTML for the commit/file time to align it vertically(noticeable
on mobile, not on PC).
- Show all information horizontally and not vertically.
- Remove the last commit message of the file, there isn't enough space
on mobile to place this anywhere, so we're not trying to make a
best-effort here and instead just not display it.

* Remove unnecessary `!important`

* Fix broken HTML

* Simplify code
This commit is contained in:
Gusted 2022-04-28 01:59:49 +00:00 committed by GitHub
parent 3e8aa42a1b
commit ca4b920bbc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -3237,3 +3237,27 @@ td.blob-excerpt {
transform: scale(105%); transform: scale(105%);
box-shadow: 0 .5rem 1rem var(--color-shadow) !important; box-shadow: 0 .5rem 1rem var(--color-shadow) !important;
} }
@media @mediaSm {
.repository.file.list {
#repo-files-table {
.entry,
.commit-list {
align-items: center;
display: flex !important;
padding-top: 4px;
padding-bottom: 4px;
td.age,
th.age {
margin-left: auto;
}
td.message,
span.commit-summary {
display: none !important;
}
}
}
}
}