Discourse/discourse
Discourse/discourse
0
0
Fork 0
mirror of https://gh.wpcy.net/https://github.com/discourse/discourse.git synced 2026-05-07 08:54:19 +08:00
Code Packages Activity Actions
discourse/lib/onebox/templates
History
Exact
Kris 5ddd04fa0b
UX: improve quote title alignment, wrapping (#33796) 
Reported here:
https://meta.discourse.org/t/expand-quote-arrow-new-line-creates-gap-in-quote-style/375067

In cases of long content and narrow viewports, sometimes quote content
can break the layout:

<img width="244" alt="image"
src="https://github.com/user-attachments/assets/3674cabb-e278-4bec-a9cf-48623dfdce6c"
/>


This improves the situation by adding an additional wrapper to the quote
onebox title and category. This allows text to wrap independently from
the avatar and controls, and in worst cases the text truncates:

<img width="500" alt="image"
src="https://github.com/user-attachments/assets/3e29bf52-0b36-4f70-8237-22ee3b9377b2"
/>

<img width="300" alt="image"
src="https://github.com/user-attachments/assets/8fbd83bf-dafd-42cc-a470-a928c252c183"
/>

Even without a post HTML rebuild for the quotes to get the new wrapper,
the new CSS prevents layout breakage through `text-overflow: ellipsis;`
alone

Old quote without the new wrapper, but with the new CSS:

<img width="350" alt="image"
src="https://github.com/user-attachments/assets/8922bce0-17a7-4731-a1de-33daad9d7b37"
/>
2025-07-23 16:21:55 -04:00
..
github
json_ld_partials
_layout.mustache A11Y: onebox avatars/images are decorative, so screenreaders can skip (#33572) 2025-07-11 09:55:48 -04:00
allowlistedgeneric.mustache A11Y: onebox avatars/images are decorative, so screenreaders can skip (#33572) 2025-07-11 09:55:48 -04:00
amazon.mustache FIX: correctly unescape title for amazon oneboxes (#33010) 2025-06-02 17:50:13 +05:30
discourse_category_onebox.mustache
discourse_topic_onebox.mustache UX: improve quote title alignment, wrapping (#33796) 2025-07-23 16:21:55 -04:00
discourse_user_onebox.mustache
discoursetopic.mustache
githubactions.mustache
githubblob.mustache UX: Improve git blob oneboxes (#30694) 2025-01-10 11:49:36 +00:00
githubcommit.mustache A11Y: remove redundant alt text from github oneboxes (#30083) 2024-12-04 12:25:03 +11:00
githubfolder.mustache
githubgist.mustache
githubissue.mustache A11Y: remove redundant alt text from github oneboxes (#30083) 2024-12-04 12:25:03 +11:00
githubpullrequest.mustache A11Y: remove redundant alt text from github oneboxes (#30083) 2024-12-04 12:25:03 +11:00
githubrepo.mustache
gitlabblob.mustache UX: Improve git blob oneboxes (#30694) 2025-01-10 11:49:36 +00:00
googledocs.mustache
googledrive.mustache
googleplayapp.mustache
hackernews.mustache
instagram.mustache
pastebin.mustache
pdf.mustache
preview_error_fragment_onebox.mustache
preview_error_onebox.mustache A11Y: onebox avatars/images are decorative, so screenreaders can skip (#33572) 2025-07-11 09:55:48 -04:00
pubmed.mustache
stackexchange.mustache
threadsstatus.mustache A11Y: onebox avatars/images are decorative, so screenreaders can skip (#33572) 2025-07-11 09:55:48 -04:00
twitterstatus.mustache A11Y: onebox avatars/images are decorative, so screenreaders can skip (#33572) 2025-07-11 09:55:48 -04:00
wikimedia.mustache
wikipedia.mustache
xkcd.mustache