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:
parent
3e8aa42a1b
commit
ca4b920bbc
1 changed files with 24 additions and 0 deletions
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue