discourse/discourse-solved
1
0
Fork 0
mirror of https://github.com/discourse/discourse-solved.git synced 2025-05-02 12:14:51 +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

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

@ -42,12 +42,14 @@ function initializeWithApi(api) {
const solvedQuote = `
<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="accepted-answer--solver">
${topic.solvedByHtml}
<\/div>
<div class="accepted-answer--accepter">
${topic.accepterHtml}
<\/div>
<div class="accepted-answer--solver-accepter">
<div class="accepted-answer--solver">
${topic.solvedByHtml}
<\/div>
<div class="accepted-answer--accepter">
${topic.accepterHtml}
<\/div>
</div>
<div class="quote-controls"><\/div>
</div>
${excerpt}

30
assets/stylesheets/solutions.scss
View File

@ -65,11 +65,16 @@ $solved-color: green;
aside.quote.accepted-answer {
.title {
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 {
@ -78,19 +83,14 @@ aside.quote.accepted-answer {
.accepted-answer--accepter {
font-size: var(--font-down-1);
margin-left: auto;
width: 100%;
flex-basis: auto;
margin-top: auto;
}
margin-bottom: auto;
margin-right: 0.25em;
@media screen and (max-width: 768px) {
.accepted-answer--accepter {
width: 100%;
margin-top: 0.25em;
order: 3;
}
.quote-controls {
order: 2;
@media (min-width: 480px) {
width: auto;
}
}
}