Use horizontal tabs for repo header on mobile (#19468)

* Use horizontal tabs for repo header on mobile

- The current behavior of the repo header on mobile is to display them
vertically column-by-column. I've only experience annoyance due to this
while trying to visit gitea instanced on mobile. This commit changes
this behavior to use horizontal tabs, it uses less tabs and doesn't
bloat 60% of your mobile screen with the repo headers.
- A small fix added in this commit is to give some space around the repo
buttons, current behavior is that they are too "close" to the repo
title.

* Fix lint
This commit is contained in:
Gusted 2022-04-23 16:56:33 +00:00 committed by GitHub
parent 9550e5a23e
commit 1f05417805
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 1 deletions

View File

@ -144,7 +144,7 @@
</div><!-- end grid --> </div><!-- end grid -->
</div><!-- end container --> </div><!-- end container -->
{{end}} {{end}}
<div class="ui tabs container"> <div class="ui tabs container repo-header-container">
{{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}} {{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}}
<div class="ui tabular stackable menu navbar"> <div class="ui tabular stackable menu navbar">
{{if .Permission.CanRead $.UnitTypeCode}} {{if .Permission.CanRead $.UnitTypeCode}}

View File

@ -2956,11 +2956,21 @@ tbody.commit-list {
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
word-break: break-word; word-break: break-word;
@media @mediaSm {
+ .container {
margin-top: 7px;
}
}
} }
.repo-buttons { .repo-buttons {
display: flex; display: flex;
align-items: center; align-items: center;
@media @mediaSm {
margin-top: 1em;
}
} }
.repo-buttons .ui.labeled.button > .label:hover { .repo-buttons .ui.labeled.button > .label:hover {
@ -3227,3 +3237,18 @@ 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 {
.repo-header-container {
overflow-x: auto;
overflow-y: hidden;
.ui.stackable.menu {
flex-direction: row;
.item {
width: initial !important;
}
}
}
}