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

Changes

2 changed files (+26/-1)

• templates/repo/header.tmpl
  • @@ -144,7 +144,7 @@
    </div><!-- end grid --> </div><!-- end container --> {{end}} - <div class="ui tabs container"> + <div class="ui tabs container repo-header-container"> {{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}} <div class="ui tabular stackable menu navbar"> {{if .Permission.CanRead $.UnitTypeCode}}
• web_src/less/_repository.less
  • @@ -2956,11 +2956,21 @@ tbody.commit-list {
    justify-content: space-between; flex-wrap: wrap; word-break: break-word; + + @media @mediaSm { + + .container { + margin-top: 7px; + } + } } .repo-buttons { display: flex; align-items: center; + + @media @mediaSm { + margin-top: 1em; + } } .repo-buttons .ui.labeled.button > .label:hover {
  • @@ -3227,3 +3237,18 @@ td.blob-excerpt {
    transform: scale(105%); 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; + } + } + } + }