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

Scroll images in project issues separately from the remaining issue #31683

Merged
merged 6 commits into from
Aug 12, 2024
Merged

Scroll images in project issues separately from the remaining issue #31683

merged 6 commits into from
Aug 12, 2024

Conversation

SimonPistache
Copy link
Contributor

As discussed in #31667 & #26561, when a card on a Project contains images, they can overflow the card on its containing column. This aims to fix this issue via snapping scrollbars.

Issue #31667 is open to discussion as there should be room for improvement.

@SimonPistache
fix(go-gitea#31667): fixes images in cards overflowing Projects columns
7c1eec3 
As discussed in go-gitea#31667 & go-gitea#26561, when a card on a Project contains images, they can overflow the card on its containing column. This aims to fix this issue via snapping scrollbars .
@GiteaBot GiteaBot added the lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. label Jul 23, 2024
@pull-request-size pull-request-size bot added the size/S Denotes a PR that changes 10-29 lines, ignoring generated files. label Jul 23, 2024
@silverwind
Copy link
Member

Hmm that seems like a lot of CSS properties and I'm not sure all are neccessary.

What is needed to reproduce it? Just issue with many images in it? Maybe you could create a reproduction on https://demo.gitea.com/ so I can take a closer look at that CSS.

@SimonPistache
Copy link
Contributor Author

@silverwind sure have a look here

@pull-request-size pull-request-size bot added size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. and removed size/S Denotes a PR that changes 10-29 lines, ignoring generated files. labels Jul 23, 2024
@SimonPistache
refactor(go-gitea#31667): Remove linter cleanup
62cfcb7 
Remove changes originated from linter, as it introduced a lot of visual diff.
@SimonPistache
Copy link
Contributor Author

@silverwind It should be easier to read now.

I did the following:

  • align-items: stretch; and overflow: scroll; manage the position of images in a card and avoid overflowing out of it
  • cursor: default; scroll-snap-type: x mandatory; scroll-snap-align: center; helps scrolls in images "snaps" so an image is centred (like a carrousel), this is optional
  • aspect-ratio: 1; come from this thread, but I have not investigate further if it require a max-width with the max-height discussed in this topic.

@SimonPistache SimonPistache marked this pull request as ready for review July 25, 2024 12:16
@delvh delvh changed the title fix(#31667): fixes images in cards overflowing Projects columns Scroll images in project issues separately from the remaining issue Jul 25, 2024
delvh
delvh approved these changes Jul 25, 2024
View reviewed changes
web_src/css/features/projects.css Show resolved Hide resolved
@GiteaBot GiteaBot added lgtm/need 1 This PR needs approval from one additional maintainer to be merged. and removed lgtm/need 2 This PR needs two approvals by maintainers to be considered for merging. labels Jul 25, 2024
@GiteaBot GiteaBot added lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. and removed lgtm/need 1 This PR needs approval from one additional maintainer to be merged. labels Aug 12, 2024
@lunny lunny added topic/ui Change the appearance of the Gitea UI type/bug backport/v1.22 This PR should be backported to Gitea 1.22 labels Aug 12, 2024
@lunny lunny added this to the 1.23.0 milestone Aug 12, 2024
@lunny lunny added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Aug 12, 2024
@yp05327 yp05327 mentioned this pull request Aug 12, 2024
Closed
@lunny lunny merged commit fe7c941 into go-gitea:main Aug 12, 2024
26 checks passed
GiteaBot pushed a commit to GiteaBot/gitea that referenced this pull request Aug 12, 2024
@SimonPistache @GiteaBot
Scroll images in project issues separately from the remaining issue (g…
1d24661 
…o-gitea#31683)

As discussed in go-gitea#31667 & go-gitea#26561, when a card on a Project contains
images, they can overflow the card on its containing column. This aims
to fix this issue via snapping scrollbars.

---
Issue go-gitea#31667 is open to discussion as there should be room for
improvement.
@GiteaBot GiteaBot mentioned this pull request Aug 12, 2024
Merged
@GiteaBot GiteaBot added backport/done All backports for this PR have been created and removed reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. labels Aug 12, 2024
@yp05327
Copy link
Contributor

yp05327 commented Aug 13, 2024

Please add fix #31667 in the description. PR is not linked to the issue.

zjjhot added a commit to zjjhot/gitea that referenced this pull request Aug 13, 2024
@zjjhot
Merge remote-tracking branch 'giteaofficial/main'
8942c19 
* giteaofficial/main:
  [skip ci] Updated translations via Crowdin
  Scroll images in project issues separately from the remaining issue (go-gitea#31683)
  Support issue template assignees (go-gitea#31083)
lunny pushed a commit that referenced this pull request Aug 13, 2024
@GiteaBot @SimonPistache
Scroll images in project issues separately from the remaining issue (#…
a3633b5 
…31683) (#31823)

Backport #31683 by @SimonPistache

As discussed in #31667 & #26561, when a card on a Project contains
images, they can overflow the card on its containing column. This aims
to fix this issue via snapping scrollbars.

---
Issue #31667 is open to discussion as there should be room for
improvement.

Co-authored-by: Simon Priet <[email protected]>
@lunny lunny mentioned this pull request Aug 14, 2024
Closed
4kProgrammer pushed a commit to 4kProgrammer/gitea that referenced this pull request Aug 20, 2024
@Zettat123 @4kProgrammer
[skip ci] Updated translations via Crowdin (+7 squashed commit)
49ce9fe 
Squashed commit:

[e1468e2] Fixes for unreachable project issues when transfer repository from organization (go-gitea#31770)
dfhgfdhfghfg
When transferring repositories that have issues linked to a project
board to another organization, the issues remain associated with the
original project board. This causes the columns in the project board to
become bugged, making it difficult to move other issues in or out of the
affected columns. As a solution, I removed the issue relations since the
other organization does not have this project table.

Fix for go-gitea#31538

Co-authored-by: Jason Song <[email protected]>

[c39643f] fghfghf

[38a09ea] render plain text file if the LFS object doesn't exist (go-gitea#31812)gfgdfg

We had an issue where a repo was using LFS to store a file, but the user
did not push the file. When trying to view the file, Gitea returned a
500 HTTP status code referencing `ErrLFSObjectNotExist`. It appears the
intent was the render this file as plain text, but the conditional was
flipped. I've also added a test to verify that the file is rendered as
plain text.

[2477511] Add spacing to global error message (go-gitea#31826)

Fixes go-gitea#31717.

Include Typescript files in Tailwind config so they can be
pre-processed.

![Screenshot from 2024-08-13
08-44-33](https://github.com/user-attachments/assets/196d7801-e299-4000-8b39-cd9f89917f17)

[5bcab0b] [skip ci] Updated translations via Crowdin

[fe7c941] Scroll images in project issues separately from the remaining issue (go-gitea#31683)

As discussed in go-gitea#31667 & go-gitea#26561, when a card on a Project contains
images, they can overflow the card on its containing column. This aims
to fix this issue via snapping scrollbars.

---
Issue go-gitea#31667 is open to discussion as there should be room for
improvement.

[8883d99] Support issue template assignees (go-gitea#31083)

Resolve go-gitea#13955
4kProgrammer pushed a commit to 4kProgrammer/gitea that referenced this pull request Aug 20, 2024
@Zettat123 @4kProgrammer
[skip ci] Updated translations via Crowdin (+7 squashed commit)
e69ea39 
Squashed commit:

[e1468e2] Fixes for unreachable project issues when transfer repository from organization (go-gitea#31770)
dfhgfdhfghfg
When transferring repositories that have issues linked to a project
board to another organization, the issues remain associated with the
original project board. This causes the columns in the project board to
become bugged, making it difficult to move other issues in or out of the
affected columns. As a solution, I removed the issue relations since the
other organization does not have this project table.

Fix for go-gitea#31538

Co-authored-by: Jason Song <[email protected]>

[c39643f] fghfghf

[38a09ea] render plain text file if the LFS object doesn't exist (go-gitea#31812)gfgdfg

We had an issue where a repo was using LFS to store a file, but the user
did not push the file. When trying to view the file, Gitea returned a
500 HTTP status code referencing `ErrLFSObjectNotExist`. It appears the
intent was the render this file as plain text, but the conditional was
flipped. I've also added a test to verify that the file is rendered as
plain text.

[2477511] Add spacing to global error message (go-gitea#31826)

Fixes go-gitea#31717.

Include Typescript files in Tailwind config so they can be
pre-processed.

![Screenshot from 2024-08-13
08-44-33](https://github.com/user-attachments/assets/196d7801-e299-4000-8b39-cd9f89917f17)

[5bcab0b] [skip ci] Updated translations via Crowdin

[fe7c941] Scroll images in project issues separately from the remaining issue (go-gitea#31683)

As discussed in go-gitea#31667 & go-gitea#26561, when a card on a Project contains
images, they can overflow the card on its containing column. This aims
to fix this issue via snapping scrollbars.

---
Issue go-gitea#31667 is open to discussion as there should be room for
improvement.

[8883d99] Support issue template assignees (go-gitea#31083)

Resolve go-gitea#13955
4kProgrammer pushed a commit to 4kProgrammer/gitea that referenced this pull request Aug 20, 2024
@Zettat123 @4kProgrammer
[skip ci] Updated translations via Crowdin (+7 squashed commit)
7777c6c 
Squashed commit:

[e1468e2] Fixes for unreachable project issues when transfer repository from organization (go-gitea#31770)
dfhgfdhfghfg
When transferring repositories that have issues linked to a project
board to another organization, the issues remain associated with the
original project board. This causes the columns in the project board to
become bugged, making it difficult to move other issues in or out of the
affected columns. As a solution, I removed the issue relations since the
other organization does not have this project table.

Fix for go-gitea#31538

Co-authored-by: Jason Song <[email protected]>

[c39643f] fghfghf

[38a09ea] render plain text file if the LFS object doesn't exist (go-gitea#31812)gfgdfg

We had an issue where a repo was using LFS to store a file, but the user
did not push the file. When trying to view the file, Gitea returned a
500 HTTP status code referencing `ErrLFSObjectNotExist`. It appears the
intent was the render this file as plain text, but the conditional was
flipped. I've also added a test to verify that the file is rendered as
plain text.

[2477511] Add spacing to global error message (go-gitea#31826)

Fixes go-gitea#31717.

Include Typescript files in Tailwind config so they can be
pre-processed.

![Screenshot from 2024-08-13
08-44-33](https://github.com/user-attachments/assets/196d7801-e299-4000-8b39-cd9f89917f17)

[5bcab0b] [skip ci] Updated translations via Crowdin

[fe7c941] Scroll images in project issues separately from the remaining issue (go-gitea#31683)

As discussed in go-gitea#31667 & go-gitea#26561, when a card on a Project contains
images, they can overflow the card on its containing column. This aims
to fix this issue via snapping scrollbars.

---
Issue go-gitea#31667 is open to discussion as there should be room for
improvement.

[8883d99] Support issue template assignees (go-gitea#31083)

Resolve go-gitea#13955
4kProgrammer pushed a commit to 4kProgrammer/gitea that referenced this pull request Aug 20, 2024
@Zettat123 @4kProgrammer
[skip ci] Updated translations via Crowdin (+7 squashed commit)
5301382 
Squashed commit:

[e1468e2] Fixes for unreachable project issues when transfer repository from organization (go-gitea#31770)
dfhgfdhfghfg
When transferring repositories that have issues linked to a project
board to another organization, the issues remain associated with the
original project board. This causes the columns in the project board to
become bugged, making it difficult to move other issues in or out of the
affected columns. As a solution, I removed the issue relations since the
other organization does not have this project table.

Fix for go-gitea#31538

Co-authored-by: Jason Song <[email protected]>

[c39643f] fghfghf

[38a09ea] render plain text file if the LFS object doesn't exist (go-gitea#31812)gfgdfg

We had an issue where a repo was using LFS to store a file, but the user
did not push the file. When trying to view the file, Gitea returned a
500 HTTP status code referencing `ErrLFSObjectNotExist`. It appears the
intent was the render this file as plain text, but the conditional was
flipped. I've also added a test to verify that the file is rendered as
plain text.

[2477511] Add spacing to global error message (go-gitea#31826)

Fixes go-gitea#31717.

Include Typescript files in Tailwind config so they can be
pre-processed.

![Screenshot from 2024-08-13
08-44-33](https://github.com/user-attachments/assets/196d7801-e299-4000-8b39-cd9f89917f17)

[5bcab0b] [skip ci] Updated translations via Crowdin

[fe7c941] Scroll images in project issues separately from the remaining issue (go-gitea#31683)

As discussed in go-gitea#31667 & go-gitea#26561, when a card on a Project contains
images, they can overflow the card on its containing column. This aims
to fix this issue via snapping scrollbars.

---
Issue go-gitea#31667 is open to discussion as there should be room for
improvement.

[8883d99] Support issue template assignees (go-gitea#31083)

Resolve go-gitea#13955
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@delvh delvh delvh approved these changes

@lunny lunny lunny approved these changes

Assignees
No one assigned
Labels
backport/done All backports for this PR have been created backport/v1.22 This PR should be backported to Gitea 1.22 lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. size/XS Denotes a PR that changes 0-9 lines, ignoring generated files. topic/ui Change the appearance of the Gitea UI type/bug
Projects
None yet
Milestone
1.23.0
Development

Successfully merging this pull request may close these issues.
6 participants
@SimonPistache @silverwind @yp05327 @lunny @delvh @GiteaBot