Various design and color updates #1168
Conversation
* Use Bootstrap's default color palette for better color contrast instead of the currently used matt colors * Put more color and contrast on the question and its answers within a session view by using background colors and shadows * Center question and answers on wide screens (lg, xl, xxl) to make it easier for users to intuitively focus the question and its contents * Make the question comment an `alert-warning` to make the comment more stand out The hex color codes in the chart.js config are taken from https://getbootstrap.com/docs/5.3/customize/color/#all-colors
Sorts comments on every level by highest thumbs score (thumbs up - thumbs down) instead of id / created at.
Currently, the comment section looks rather crude and the indentation and design doesn't work well on devices with a small screen width. Refactor and improve the functionality and design as follows: * Highlight / hide comments above / below a threshold of thumbs up / down * Reduce the indentation and use border elements to display the comment thread * Place the thumb up / down buttons and counter on the left side within the message element and reduce its size * Reduce the size of the shown metadata (reply icon, author info, etc.) * Use smaller buttons for Reply, Edit, etc. Also, fix a rare bug where a "deleted comment" message would be shown even when all replies are deleted as well.
| @@ -161,40 +192,43 @@ | |||
| </script> | |||
|
|
|||
| {#if questionContext.isAnswered} | |||
| <div class="mt-3 mb-3"> | |||
| <div class="mt-4 mb-3 px-2 pt-3 pb-2 border rounded-3 shadow-sm bg-white"> | |||
There was a problem hiding this comment.
pt-2 instead of pt-3here?
| @@ -82,7 +87,9 @@ | |||
| <div class="row text-end d-flex align-items-center"> | |||
| <div class="col"> | |||
| {#if questionIsAnswered && !examMode && settingsShowAnswerStats && answer.answer_percentage != null} | |||
| <span class="badge text-muted" title="Percentage of users who chose this answer">{answer.answer_percentage}%</span> | |||
| <span | |||
| class:text-dark={!answerContext.isSelectedAnswer && !answerContext.isCorrectAnswer} | |||
There was a problem hiding this comment.
Should be !answerContext.isSubmittedAnswer instead of !answerContext.isSelectedAnswer to make the text color of the answer percentage black for answers that were selected as second (or third,..) wrong answer in an attempt to find the right answer. Right now it looks like this (in this example all other answers were selected before the correct one):
| @@ -23,7 +23,7 @@ | |||
|
|
|||
| $: if (answer) { | |||
| markedAs = ''; | |||
There was a problem hiding this comment.
The "marked as" colors should stay until the question is finally answered (because the user might want to consider his marked answers again for a second try if the option for multiple tries is enabled).
(Not introduced here but worth fixing?)
| @@ -118,8 +125,8 @@ | |||
|
|
|||
| <div class="row ms-1 mb-2 me-1"> | |||
| {#if !examMode && answer.hint && (questionIsAnswered || answerContext.isSelectedAnswer)} | |||
| <div class="col-1 border-3 border-start border-secondary-subtle" /> | |||
There was a problem hiding this comment.
I think that if only the last answer has a hint (esp. when there is no question comment) it is hard for the user to intuitively see this is a answer hint. Maybe a hint that this belongs to the answer above it would be good?
| <span class="badge text-muted" title="Percentage of users who chose this answer">{answer.answer_percentage}%</span> | ||
| <span | ||
| class:text-dark={!answerContext.isSelectedAnswer && !answerContext.isCorrectAnswer} | ||
| class="badge" title="Percentage of users who chose this answer">{answer.answer_percentage}%</span> |
There was a problem hiding this comment.
On certain screen sized (e.g. 650x900) the percentage values are misaligned (to each other and to the correct / incorrect indicator). (Worth to fix?)
| @@ -105,7 +105,9 @@ | |||
| <QuestionForm bind:question {toggleEditor} /> | |||
| </div> | |||
| {:else} | |||
| <div id="question{question.id}"> | |||
| <div id="question{question.id}" | |||
| class="px-2 py-3 border rounded-3 shadow-sm bg-light-subtle" | |||
There was a problem hiding this comment.
py-2 instead of py-3 here?
Various design and color updates, most importantly a different color palette and updates to the design of the question and comment sections. Details in the commit messages. This is a work in progress with likely more updates and pull requests following at a later point.