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

Set opaque background on markup and images #23578

Merged
merged 3 commits into from
Mar 21, 2023

Conversation

silverwind
Copy link
Member

@silverwind silverwind commented Mar 19, 2023

  • Set opaque background on markup images so they can visually break <hr>
  • Change padding of comment box so padding is provided by the .markup element instead of its parent, matching the file rendering view which does the same.

Before:
Screenshot 2023-03-19 at 19 22 03

After:
Screenshot 2023-03-19 at 19 23 26
image

Example documents:
https://try.gitea.io/silverwind/symlink-test/src/branch/master/test-page.md
https://github.com/silverwind/symlink-test/blob/master/test-page.md

@GiteaBot GiteaBot added the lgtm/need 1 This PR needs approval from one additional maintainer to be merged. label Mar 19, 2023
@silverwind
Copy link
Member Author

There is a small regression in dropzone attachment rendering because of the padding change, checking...

@silverwind silverwind marked this pull request as draft March 19, 2023 18:35
@silverwind
Copy link
Member Author

Regression fixed. Dropzone <hr> now also matches the reaction <hr> in width which it previously didn't.

Screenshot 2023-03-19 at 19 42 33

@silverwind silverwind marked this pull request as ready for review March 19, 2023 18:45
@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 Mar 20, 2023
@lunny lunny added the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Mar 21, 2023
@jolheiser jolheiser enabled auto-merge (squash) March 21, 2023 21:06
@jolheiser
Copy link
Member

🎺 🤖

@jolheiser jolheiser merged commit ca0ce9f into go-gitea:main Mar 21, 2023
@jolheiser jolheiser removed the reviewed/wait-merge This pull request is part of the merge queue. It will be merged soon. label Mar 21, 2023
zjjhot added a commit to zjjhot/gitea that referenced this pull request Mar 22, 2023
* upstream/main:
  Use a general approch to improve a11y for all checkboxes and dropdowns. (go-gitea#23542)
  [skip ci] Updated translations via Crowdin
  Update PR documentation (go-gitea#23620)
  Set opaque background on markup and images (go-gitea#23578)
  Decouple the issue-template code from comment_tab.tmpl  (go-gitea#23556)
  Remove `id="comment-form"` dead code, fix tag (go-gitea#23555)
  Introduce path Clean/Join helper functions (go-gitea#23495)
  Remove conflicting CSS rules on notifications, improve notifications table (go-gitea#23565)
  Remove @metalmatze as maintainer (go-gitea#23612)
  Keep (add if not existing) xmlns attribute for generated SVG images (go-gitea#23410)
@silverwind silverwind deleted the markdown-img-opaque branch March 22, 2023 12:56
@@ -3,6 +3,7 @@
font-size: 16px;
line-height: 1.5 !important;
word-wrap: break-word;
background: var(--color-box-body);
Copy link
Contributor

@wxiaoguang wxiaoguang Mar 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess it should be inherit, then we do not need to fix various colors again and again.

Or just remove it? I can't see difference without this style.

image

Copy link
Member Author

@silverwind silverwind Mar 27, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

background does not inherit or cascade by default, so inherit would only inherit from the direct element parent, but in the release list we actually would want to inherit from body.

@@ -2740,6 +2740,12 @@
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would also suggest to revert this change.

#23750 (comment)

It causes unnecessary overwriting problems.

silverwind added a commit that referenced this pull request Apr 7, 2023
Fix regression from #23578. Only
visible on arc-green.

Before:
<img width="997" alt="Screenshot 2023-03-27 at 19 14 21"
src="https://user-images.githubusercontent.com/115237/228016589-e7cabfb9-bfd0-45fd-9407-6b76c665ed1a.png">

After:
<img width="1000" alt="Screenshot 2023-03-27 at 19 14 05"
src="https://user-images.githubusercontent.com/115237/228016600-db2e6002-4e2c-4d18-8393-9d7e1f525acb.png">

Fixes: #20625
Fixes: #23718
@go-gitea go-gitea locked and limited conversation to collaborators May 3, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
lgtm/done This PR has enough approvals to get merged. There are no important open reservations anymore. outdated/theme/markdown type/enhancement An improvement of existing functionality
Projects
None yet
Development

Successfully merging this pull request may close these issues.

7 participants