discourse/discourse-solved
1
0
Fork 0
mirror of https://github.com/discourse/discourse-solved.git synced 2025-05-04 15:37:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

UX: Better alignment and gaps for marked solved by (#346)

Browse Source
This commit is contained in:
Natalie Tay 2025-03-26 02:21:36 +08:00 committed by GitHub
parent d88ea600b9
commit 6b07af89da
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 23 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/javascripts/discourse/initializers/extend-for-solved-button.js
View File

@ -42,12 +42,14 @@ function initializeWithApi(api) {
const solvedQuote = ` const solvedQuote = `
<aside class='quote accepted-answer' data-post="${topic.get("accepted_answer").post_number}" data-topic="${topic.id}"> <aside class='quote accepted-answer' data-post="${topic.get("accepted_answer").post_number}" data-topic="${topic.id}">
<div class='title ${hasExcerpt ? "" : "title-only"}'> <div class='title ${hasExcerpt ? "" : "title-only"}'>
<div class="accepted-answer--solver-accepter">
<div class="accepted-answer--solver"> <div class="accepted-answer--solver">
${topic.solvedByHtml} ${topic.solvedByHtml}
<\/div> <\/div>
<div class="accepted-answer--accepter"> <div class="accepted-answer--accepter">
${topic.accepterHtml} ${topic.accepterHtml}
<\/div> <\/div>
</div>
<div class="quote-controls"><\/div> <div class="quote-controls"><\/div>
</div> </div>
${excerpt} ${excerpt}

30
assets/stylesheets/solutions.scss
View File

@ -65,11 +65,16 @@ $solved-color: green;
aside.quote.accepted-answer { aside.quote.accepted-answer {
.title { .title {
display: flex; display: flex;
flex-wrap: wrap; justify-content: space-between;
align-items: flex-start;
&.title-only {
padding: 12px;
} }
.accepted-answer--solver-accepter {
display: flex;
flex-wrap: wrap;
flex: 1;
min-width: 0;
gap: 0.25em;
} }
.accepted-answer--solver { .accepted-answer--solver {
@ -78,19 +83,14 @@ aside.quote.accepted-answer {
.accepted-answer--accepter { .accepted-answer--accepter {
font-size: var(--font-down-1); font-size: var(--font-down-1);
margin-left: auto;
margin-top: auto;
}
@media screen and (max-width: 768px) {
.accepted-answer--accepter {
width: 100%; width: 100%;
margin-top: 0.25em; flex-basis: auto;
order: 3; margin-top: auto;
} margin-bottom: auto;
margin-right: 0.25em;
.quote-controls { @media (min-width: 480px) {
order: 2; width: auto;
} }
} }
} }