diff --git a/src/components/Home.tsx b/src/components/Home.tsx index 712f5fb..df91e9a 100644 --- a/src/components/Home.tsx +++ b/src/components/Home.tsx @@ -691,6 +691,135 @@ export const Home: React.FC = ({ canEdit, isPortraitMode = false }) = ) } + const renderStudentRowCompact = (student: student, isLast: boolean) => { + const avatarText = getDisplayText(student.name) + const avatarColor = getAvatarColor(student.name) + const isQuickActionMode = quickActionStudentId === student.id + + return ( +
{ + if (suppressClickRef.current) { + suppressClickRef.current = false + e.preventDefault() + e.stopPropagation() + return + } + openOperation(student) + }} + onMouseDown={(e) => { + if (e.button !== 0) return + startLongPress(student) + }} + onMouseUp={cancelLongPress} + onMouseLeave={cancelLongPress} + onTouchStart={() => startLongPress(student)} + onTouchEnd={cancelLongPress} + onTouchCancel={cancelLongPress} + onContextMenu={(e) => { + e.preventDefault() + openQuickAction(student) + }} + style={{ + cursor: "pointer", + position: "relative", + padding: "8px 10px", + borderBottom: isLast ? "none" : "1px solid var(--ss-border-color)", + background: isQuickActionMode ? "rgba(22, 119, 255, 0.06)" : "transparent", + transition: "background-color 160ms ease", + }} + > +
+ {student.avatarUrl ? ( + {student.name} + ) : ( +
1 ? "12px" : "14px", + flexShrink: 0, + }} + > + {avatarText} +
+ )} + +
+
+ {student.name} +
+
+ + {isQuickActionMode ? ( + + + + + ) : ( + 0 ? "success" : student.score < 0 ? "error" : "default"} + style={{ fontWeight: "bold", marginInlineEnd: 0 }} + > + {student.score > 0 ? `+${student.score}` : student.score} + + )} +
+
+ ) + } + const renderGroupedCards = () => { return groupedStudents.map((group) => (
= ({ canEdit, isPortraitMode = false }) =
)} -
- {group.students.map((student, idx) => renderStudentCard(student, idx))} -
+ {isPortraitMode ? ( +
+ {group.students.map((student, idx) => + renderStudentRowCompact(student, idx === group.students.length - 1) + )} +
+ ) : ( +
+ {group.students.map((student, idx) => renderStudentCard(student, idx))} +
+ )} )) } @@ -920,12 +1063,7 @@ export const Home: React.FC = ({ canEdit, isPortraitMode = false }) = }, [groupedStudents, quickNavLayout.itemSize, quickNavLayout.paddingY]) const renderQuickNav = () => { - if ( - isPortraitMode || - groupedStudents.length <= 1 || - sortType === "score" || - (sortType === "alphabet" && searchKeyword) - ) + if (groupedStudents.length <= 1 || sortType === "score" || (sortType === "alphabet" && searchKeyword)) return null return (