Skip to content

Commit

Permalink
By default force vertical tabs on mobile
Browse files Browse the repository at this point in the history
- While experimenting with using vertical tabs instead of horizontal
tabs on gitea for a better mobile experience, I made a recent
PR(go-gitea#19468) in order to see if
there was any objections to this new behavior for the repo headers(one
of the most annoying horizontal tabs). This PR had no objections and
even a user commenting that this change is brilliant.
- This PR now improves upon the previous PR by making this the de-facto
behavior for all menu's on mobile. The only exemption is the navbar
which also uses the menu but caught some layout errors with the changes.
  • Loading branch information
Gusted committed Apr 25, 2022
1 parent fc00286 commit 6ccbd11
Show file tree
Hide file tree
Showing 4 changed files with 14 additions and 31 deletions.
2 changes: 1 addition & 1 deletion templates/base/head.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@
{{template "custom/body_inner_pre" .}}

{{if not .PageIsInstall}}
<div class="ui top secondary stackable main menu following bar light">
<div class="ui top secondary stackable main menu following bar light no-vertical-tabs">
{{template "base/head_navbar" .}}
</div><!-- end bar -->
{{end}}
Expand Down
2 changes: 1 addition & 1 deletion templates/repo/header.tmpl
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@
</div><!-- end grid -->
</div><!-- end container -->
{{end}}
<div class="ui tabs container repo-header-container">
<div class="ui tabs container">
{{if not (or .Repository.IsBeingCreated .Repository.IsBroken)}}
<div class="ui tabular stackable menu navbar">
{{if .Permission.CanRead $.UnitTypeCode}}
Expand Down
26 changes: 12 additions & 14 deletions web_src/less/_base.less
Original file line number Diff line number Diff line change
Expand Up @@ -1350,27 +1350,13 @@ footer {
overflow: auto;
}

@media @mediaSm {
.ui.menu.new-menu {
overflow: visible !important;
}
}

.ui.menu.new-menu .new-menu-inner {
display: flex;
margin-left: auto;
margin-right: auto;
overflow-x: auto;
}

@media @mediaSm {
.ui.menu.new-menu .new-menu-inner {
flex-wrap: wrap;
margin-left: 0;
margin-right: 0;
}
}

.ui.menu.new-menu::after {
position: absolute;
display: block;
Expand Down Expand Up @@ -2194,3 +2180,15 @@ table th[data-sortt-desc] {
height: 15px;
}
}

@media @mediaSm {
.ui.stackable.menu:not(.no-vertical-tabs) {
overflow-y: hidden;
overflow-x: auto;
flex-direction: row;

.item {
width: initial !important;
}
}
}
15 changes: 0 additions & 15 deletions web_src/less/_repository.less
Original file line number Diff line number Diff line change
Expand Up @@ -3237,18 +3237,3 @@ 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;
}
}
}
}

0 comments on commit 6ccbd11

Please sign in to comment.