Add nested posts UI (#5)
## Summary - Cut hunt, question, submission, voting, hiding, and profile flows over to unified posts - Render nested replies with permission-aware inline Reply/Edit controls and edited markers - Add post profile queries and the author index migration they depend on Co-authored-by: codegirl-007 <s.raide@gmail.com>
This commit was merged in pull request #5.
This commit is contained in:
+104
-30
@@ -552,12 +552,14 @@ input:focus, textarea:focus, .btn:focus-visible, .chip:focus-visible, .vote-btn:
|
||||
padding: 18px 14px;
|
||||
}
|
||||
|
||||
.post-content { min-width: 0; }
|
||||
|
||||
.question-page h1 {
|
||||
font-size: clamp(1.5rem, 3.5vw, 2.1rem);
|
||||
line-height: 1.15;
|
||||
}
|
||||
|
||||
.q-body, .answer-body {
|
||||
.post-body {
|
||||
white-space: pre-wrap;
|
||||
margin: 14px 0 0;
|
||||
text-wrap: pretty;
|
||||
@@ -574,18 +576,7 @@ input:focus, textarea:focus, .btn:focus-visible, .chip:focus-visible, .vote-btn:
|
||||
}
|
||||
.crumb a:hover { color: var(--signal); }
|
||||
|
||||
.answer {
|
||||
margin-top: 16px;
|
||||
padding: 20px 18px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.answer.is-in {
|
||||
border-color: var(--signal);
|
||||
}
|
||||
|
||||
.answer-kicker {
|
||||
.post-kicker {
|
||||
margin: 0 0 6px;
|
||||
font-family: var(--mono);
|
||||
text-transform: uppercase;
|
||||
@@ -595,27 +586,99 @@ input:focus, textarea:focus, .btn:focus-visible, .chip:focus-visible, .vote-btn:
|
||||
color: var(--signal);
|
||||
}
|
||||
|
||||
.answer h2 {
|
||||
margin: 0;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
.conversation {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.byline {
|
||||
.conversation-head {
|
||||
margin-bottom: 12px;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.conversation h2 {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.conversation-head .eyebrow {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.thread {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.thread-post {
|
||||
position: relative;
|
||||
padding: 16px;
|
||||
background: var(--panel);
|
||||
border: 1px solid var(--line);
|
||||
border-left: 2px solid var(--zinc);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.thread-post.is-shop {
|
||||
border-left-color: var(--signal);
|
||||
}
|
||||
|
||||
.thread-post:target,
|
||||
.q-detail:target {
|
||||
outline: 2px solid var(--signal);
|
||||
outline-offset: 3px;
|
||||
}
|
||||
|
||||
.thread-post-branch,
|
||||
.thread-post-deep {
|
||||
margin-left: clamp(12px, 4vw, 28px);
|
||||
}
|
||||
|
||||
.thread-post-deep .thread-post-deep {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.post-replies {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.post-meta {
|
||||
margin: 6px 0 0;
|
||||
color: var(--muted);
|
||||
font-family: var(--mono);
|
||||
font-size: 0.72rem;
|
||||
}
|
||||
|
||||
.answer-editor {
|
||||
margin-top: 16px;
|
||||
.edited {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
color: var(--zinc);
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.post-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-start;
|
||||
gap: 0 16px;
|
||||
margin-top: 10px;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.answer-editor summary {
|
||||
.post-composer {
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.post-composer[open] {
|
||||
flex: 1 0 100%;
|
||||
}
|
||||
|
||||
.post-composer summary {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
min-height: 44px;
|
||||
@@ -630,23 +693,34 @@ input:focus, textarea:focus, .btn:focus-visible, .chip:focus-visible, .vote-btn:
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.answer-editor summary::-webkit-details-marker { display: none; }
|
||||
.answer-editor summary:hover,
|
||||
.answer-editor[open] summary { color: var(--signal); }
|
||||
.answer-editor summary:focus-visible {
|
||||
.post-composer summary::-webkit-details-marker { display: none; }
|
||||
.post-composer summary::marker { content: ""; }
|
||||
.post-composer summary:hover,
|
||||
.post-composer[open] summary { color: var(--signal); }
|
||||
.post-composer summary:focus-visible {
|
||||
outline: 2px solid var(--signal);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
.answer-editor .answer-form { margin-top: 4px; }
|
||||
.post-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
width: 100%;
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
|
||||
.answer-form-actions {
|
||||
.post-form-actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.answer-form-actions .btn { flex: 1 1 10rem; }
|
||||
.post-form-actions .btn { flex: 1 1 10rem; }
|
||||
|
||||
.post-hide {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.waiting { color: var(--muted); margin: 0; font-family: var(--mono); font-size: 0.8rem; }
|
||||
|
||||
|
||||
Reference in New Issue
Block a user