feat: implement marking page scrollspy #34
Conversation
| @@ -20,7 +21,6 @@ interface MarkInputPanelProps { | |||
| onSave: (_: MarkRoot) => void | |||
| } | |||
|
|
|||
| const NO_MARK = 'No mark' | |||
| const NO_FEEDBACK = 'No comment' | |||
There was a problem hiding this comment.
Should NO_FEEDBACK also be grouped in ../constants?
There was a problem hiding this comment.
I moved NO_MARK to constants because it's used in two different places now. NO_FEEDBACK is only used in this component.
| id: string | ||
| active: boolean | ||
| label: string | ||
| partial?: number |
There was a problem hiding this comment.
Rename to partMarks and totalMarks for more clarity?
There was a problem hiding this comment.
This is a good suggestion but the ScrollspyItem is used for both Question and Section. For question, this is partial compound marks over total/available marks, for a section this is current mark over maximum mark. To avoid inconsistency, I have generalised by a single step and made this into a more generic indicator of partial/total. Don't have a strooong opinion on it though.
| }, | ||
| { | ||
| rootMargin: '-10% 0px -80% 0px', // Adjusting to trigger around 3/4 up the viewport | ||
| threshold: 0.15, // Trigger when the element is fully visible in the viewport |
There was a problem hiding this comment.
@IlliaDerevianko This was very tricky to get right i.e. rootMargin and threshold were interacting with each other.
| @@ -20,7 +21,6 @@ interface MarkInputPanelProps { | |||
| onSave: (_: MarkRoot) => void | |||
| } | |||
|
|
|||
| const NO_MARK = 'No mark' | |||
| const NO_FEEDBACK = 'No comment' | |||
|
all great, only one small issue:
|
|
ooops was i not supposed to close? |
|
@sergiomaffeis You are very right. The implementation marks as RED the absence of marks, green the absence of positive marks, and grey the 0s. This was my understanding, but I may have misinterpreted the colour-coding. What should gray mean? Or, equivalently (as far as we are concerned), what did it use to mean? |
|
how about:
|
Reproduce scrollspy capability from Answerbook v1 plus slicker makeup.
demo-scrollspy.mov