Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create repo page automatically scrolls down #16937

Closed
2 of 6 tasks
axifive opened this issue Sep 3, 2021 · 6 comments · Fixed by #17012
Closed
2 of 6 tasks

Create repo page automatically scrolls down #16937

axifive opened this issue Sep 3, 2021 · 6 comments · Fixed by #17012
Labels
topic/ui Change the appearance of the Gitea UI type/bug

Comments

@axifive
Copy link
Member

axifive commented Sep 3, 2021

  • Gitea version (or commit ref): 1.16.0+dev-195-gb6c752e91
  • Git version: -
  • Operating system: -
  • Browser: Desktop Opera/Chrome, Chrome Mobile
  • Database (use [x]):
    • PostgreSQL
    • MySQL
    • MSSQL
    • SQLite
  • Can you reproduce the bug at https://try.gitea.io:
  • Log gist:

Description

Noticed that when opening the repo create page it quickly shows breaking layout and then automatically scrolls down.

Screenshots

Untitled_screenvideo (1)

@axifive axifive added the topic/ui-interaction Change the process how users use Gitea instead of the visual appearance label Sep 3, 2021
@wxiaoguang
Copy link
Contributor

wxiaoguang commented Sep 3, 2021

The bug is more obvious in Chrome.

Some guess:

The page layout may be wrong (eg: tag mismatching), or the HTML output is not smooth (eg: incomplete HTML strucutre)

So the rendered page may appear in some intermediate state (see the screen shot), then page height is very large.

Then when the page is completely rendered, Chrome tries to adjust the scrolling position during rendering. Then the page becomes what you have seen.

The screenshot about a partially rendered page. (although the page will be rendered correctly finally).
image

@silverwind
Copy link
Member

Is there some reliable way to get the partial rendered state? I tried with DevTools network throttling but it switches to regular layout too fast for me to pause the page.

@axifive
Copy link
Member Author

axifive commented Sep 3, 2021

@silverwind Try disable

.ui.grid>.column:only-child, .ui.grid>.row>.column:only-child {
    /* width: 100%; */
}

And this property is applied before it:

.ui.grid>.column:not(.row),.ui.grid>.row>.column {
    width:6.25%;
}

@wxiaoguang
Copy link
Contributor

wxiaoguang commented Sep 3, 2021

Agree axifive.

The problem is caused by mis-used fomantic layout.

Old code:

<div class="ui middle very relaxed page grid">
   <div class="column">

The inner column has a width: 6.25% by .ui.grid>.column:not(.row),.ui.grid>.row>.column {

When Chrome is loading page, before <div class="column"> ends, Chrome won't apply the :only-child.

I think the correct layout should be something like:

<div class="ui middle very relaxed page one column grid">
   <div class="column">

With one column grid (https://fomantic-ui.com/examples/grid.html) , the inside column has width 100%.

@silverwind silverwind removed their assignment Sep 3, 2021
@silverwind
Copy link
Member

silverwind commented Sep 3, 2021

Fomantic's grid system is incredibly hacky (negative margins everywhere and the width issue above during page load), I hope we can get rid of it eventually, but I'd be okay with doing a short-term fix now.

I guess this won't be the only page with such an issue.

@wxiaoguang
Copy link
Contributor

wxiaoguang commented Sep 3, 2021

Yes, I have the same feeling. Fomantic was born very early, so what it did was already the best it could do.

Other pages may not be affected because only this page has a very long list.

@axifive axifive added topic/ui Change the appearance of the Gitea UI and removed topic/ui-interaction Change the process how users use Gitea instead of the visual appearance labels Sep 10, 2021
@go-gitea go-gitea locked and limited conversation to collaborators Oct 19, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
topic/ui Change the appearance of the Gitea UI type/bug
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants