Nulo/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[GITEA] Use vertical tabs on issue filters

Browse source 
- Backport of https://codeberg.org/forgejo/forgejo/pulls/1287
  - This is actually https://github.com/go-gitea/gitea/pull/19978 &
https://github.com/go-gitea/gitea/pull/19486 but was removed in one of
the UI refactors of v1.20
  - This is a very technical fix and is best explained in the CSS
comments. But the short version: When there's an overflow being set, but
you want an element to 'break out' of that overflow with `position:
absolute`, it sometimes doesn't work! You need to set some CSS to let
the browser know that the element needs to use an element outside of
that overflow as 'clip parent'.
  - Resolves my internal frustration with the mobile UI constantly getting broken.

(cherry picked from commit 879f842bed999190506e1d60508e7aede1a4be21)
This commit is contained in:
Gusted 2023-08-18 15:18:23 +02:00
parent 070904b531
commit 7e18a86a3a
No known key found for this signature in database
GPG key ID: FD821B732837125F
1 changed files with 31 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

35
web_src/css/repo/issue-list.css
View file

@ -21,10 +21,6 @@
.issue-list-toolbar { .issue-list-toolbar {
flex-direction: column-reverse; flex-direction: column-reverse;
} }
.issue-list-toolbar-right .dropdown .menu {
left: auto !important;
right: auto !important;
}
.issue-list-navbar { .issue-list-navbar {
order: 0; order: 0;
} }
@ -35,4 +31,35 @@
.issue-list-search { .issue-list-search {
order: 2 !important; order: 2 !important;
} }
/* Don't use flex wrap on mobile as it takes too much vertical space.
* Only set overflow properties on mobile screens, because while the
* CSS trick to pop out from overflowing works on desktop screen, it
* has a massive flaw that it cannot inherited any max width from it's 'real'
* parent and therefor ends up taking more vertical space than is desired.
**/
.issue-list-toolbar-right .filter.menu {
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
/* The following few CSS was created with care and built with the information
* from CSS-Tricks: https://css-tricks.com/popping-hidden-overflow/
*/
/* It's important that every element up to .issue-list-toolbar-right doesn't
* have a position set, such that element that wants to pop out will use
* .issue-list-toolbar-right as 'clip parent' and thereby avoids the
* overflow-y: hidden.
*/
.issue-list-toolbar-right .filter.menu > .dropdown.item {
position: initial;
}
/* It's important that this element and not an child has `position` set.
* Set width so that overflow-x knows where to stop overflowing.
*/
.issue-list-toolbar-right {
position: relative;
width: 100%;
}
} }