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.

Sign up for GitHub

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

Jump to bottom

Some problems of dropdown menus #23625

Closed
yp05327 opened this issue Mar 22, 2023 · 6 comments
Closed

Some problems of dropdown menus #23625

yp05327 opened this issue Mar 22, 2023 · 6 comments
Labels
issue/needs-feedback For bugs, we need more details. For features, the feature must be described in more detail

Comments

@yp05327
Copy link
Contributor

yp05327 commented Mar 22, 2023 •
edited
Loading

Description

Can't see Newest option: (windows height< 589px)
(gitea.com)
image
(try.gitea.io)
image

If project names are too long, smart phone user can not see all options clearly.
image

Gitea Version

1.20.0+dev-171-gb2c1c17f3

Can you reproduce the bug on the Gitea demo site?

No

Log Gist

No response

Screenshots

No response

Git Version

No response

Operating System

No response

How are you running Gitea?

gitea.com

Database

None
@wxiaoguang wxiaoguang mentioned this issue Mar 22, 2023
Merged
@wxiaoguang
Copy link
Contributor

wxiaoguang commented Mar 22, 2023 •
edited
Loading

The first problem can be fixed by https://github.com/go-gitea/gitea/pull/23626/files#diff-5132704e0ee1cedcd269ea7d54a004cf2c98206e3354f60fe5be02527c0bc982R12-R15

The second problem is also related to width&word-break .... it may need more fine tunes.

@HesterG
Copy link
Contributor

HesterG commented Mar 22, 2023 •
edited
Loading

For the second one, did some check and I found there is a div called issue-item-icons-right in the issue list, which is empty and took up space. Not sure what this is originally for.
截屏2023-03-22 18 17 34

Update:
Find in issuelist.tmpl, might need to adjust the conditions' positions

@HesterG HesterG mentioned this issue Mar 23, 2023
Merged
lunny pushed a commit that referenced this issue Mar 24, 2023
@HesterG
Fix long project name display in issue list and in related dropdown (#…
a9cceb0 
…23653)

This PR is to fix the second problem mentioned in #23625, along with the
long texts problem in `issue-item-bottom-row` of `issuelist.tmpl`

Main changes are:
1. Add `max-width` to the search dropdowns in issue list and make the
possible long texts inside to show ellipsis if texts are long
2. Adjust the conditions in
[issuelist.tmpl](https://github.com/go-gitea/gitea/blob/1d35fa0e784dffcadacb2322a3d7ac3ec2ff89b2/templates/shared/issuelist.tmpl#L146-L167)
to fix the problem as mentioned by the
[comment](#23625 (comment))
3. Use `word-break: break-word;` in `issue-item-bottom-row` to break the
possible long texts.

After the PR
issuelist in repo (similar for pr list):
<img width="366" alt="截屏2023-03-23 17 42 40"
src="https://user-images.githubusercontent.com/17645053/227163953-93e9adbd-5785-4c16-b538-9db901787775.png">

dropdowns with long name (Here take reference from github to deal with
the long names cases: show ellipsis with no title, because all these
options are clickable, and it might not be necessary to add titles to
them ):

<img width="370" alt="截屏2023-03-23 17 43 50"
src="https://user-images.githubusercontent.com/17645053/227164215-df6fcaaa-9fee-4256-a57c-053fbcffafbb.png">

<img width="365" alt="截屏2023-03-23 17 43 56"
src="https://user-images.githubusercontent.com/17645053/227164227-9c99abcd-f410-4e07-b5b8-cbce764eedcd.png">

issue page (similar for pr page):
<img width="374" alt="截屏2023-03-23 17 45 37"
src="https://user-images.githubusercontent.com/17645053/227164668-654a8188-dac8-4bbf-a6e3-f3768a644a1b.png">

on PC:
<img width="1412" alt="截屏2023-03-23 17 47 20"
src="https://user-images.githubusercontent.com/17645053/227166694-e7bcc6e5-9667-4cef-9fbf-db85640a2c6c.png">

<img width="1433" alt="截屏2023-03-23 17 46 40"
src="https://user-images.githubusercontent.com/17645053/227165182-4e2a5d19-74bc-4c66-b73c-23cbca176ffe.png">
lunny pushed a commit that referenced this issue Mar 26, 2023
@wxiaoguang
Fine tune more downdrop settings, use SVG for labels, improve Repo To…
12fff36 
…pic Edit form (#23626)

Although it seems that some different purposes are mixed in this PR,
however, they are all related, and can be tested together, so I put them
together to save everyone's time.

Diff: `+79 −84`, everything becomes much better.

### Improve the dropdown settings.

Move all fomantic-init related code into our `fomantic.js`

Fine-tune some dropdown global settings, see the comments.

Also help to fix the first problem in #23625 , cc: @yp05327 

The "language" menu has been simplified, and it works with small-height
window better.

### Use SVG instead of `<i class="delete icon">`

It's also done by `$.fn.dropdown.settings.templates.label` , cc:
@silverwind

### Remove incorrect `tabable` CSS class

It doesn't have CSS styles, and it was only in Vue. So it's totally
unnecessary, remove it by the way.

### Improve the Repo Topic Edit form

* Simplify the code
* Add a "Cancel" button
* Align elements

Before:

<details>

![image](https://user-images.githubusercontent.com/2114189/223325782-f09532de-0c38-4742-ba86-ed35cc9a858d.png)

</details>

After:

![image](https://user-images.githubusercontent.com/2114189/226796347-207feb0a-b3cd-4820-8a3e-01930bab1069.png)
@wxiaoguang wxiaoguang mentioned this issue Apr 1, 2023
Closed
@wxiaoguang
Copy link
Contributor

I guess these two problems have been fixed?

@silverwind
Copy link
Member

silverwind commented Apr 1, 2023 •
edited
Loading

For the second one, did some check and I found there is a div called issue-item-icons-right in the issue list, which is empty and took up space. Not sure what this is originally for. 截屏2023-03-22 18 17 34

Update: Find in issuelist.tmpl, might need to adjust the conditions' positions

It's reserved space for assignee, replies and i think project. I could see us collapsing that space on mobile view. On desktop, it's better to visually reserve the space.

@wxiaoguang wxiaoguang added issue/needs-feedback For bugs, we need more details. For features, the feature must be described in more detail and removed type/bug labels Apr 23, 2023
@wxiaoguang
Copy link
Contributor

I guess #23653 and #23857 could have fixed the problems?

@yp05327 yp05327 mentioned this issue Apr 24, 2023
Closed
@yp05327
Copy link
Contributor Author

yp05327 commented Apr 24, 2023

It seems that this issue has been fixed.

@yp05327 yp05327 closed this as completed Apr 24, 2023
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jun 9, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
issue/needs-feedback For bugs, we need more details. For features, the feature must be described in more detail
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@silverwind @wxiaoguang @HesterG @yp05327