fix some UI issues
This commit is contained in:
@@ -398,15 +398,15 @@
|
|||||||
margin: 0 0.25em;
|
margin: 0 0.25em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box-content-wrapper {
|
.box-post {
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box-content-wrapper .box-content {
|
.box .box-post-main {
|
||||||
flex: 1 1;
|
flex: 1 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box-content-wrapper .box-content-vote {
|
.box .box-post-vote {
|
||||||
flex: 0 0;
|
flex: 0 0;
|
||||||
margin-left: 6px;
|
margin-left: 6px;
|
||||||
}
|
}
|
||||||
|
|||||||
308
src/Flows.js
308
src/Flows.js
@@ -246,110 +246,113 @@ class FlowItem extends PureComponent {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div
|
<div
|
||||||
className="box"
|
className="box box-post"
|
||||||
style={{
|
style={{
|
||||||
'--box-bgcolor-light': _display_color[0],
|
'--box-bgcolor-light': _display_color[0],
|
||||||
'--box-bgcolor-dark': _display_color[1],
|
'--box-bgcolor-dark': _display_color[1],
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{!!window.LATEST_POST_ID &&
|
<div className="box-post-main">
|
||||||
parseInt(info.pid, 10) > window.LATEST_POST_ID && (
|
{!!window.LATEST_POST_ID &&
|
||||||
<div className="flow-item-dot" />
|
parseInt(info.pid, 10) > window.LATEST_POST_ID && (
|
||||||
)}
|
<div className="flow-item-dot" />
|
||||||
{!!attention && !cached && <div className="flow-item-dot" />}
|
)}
|
||||||
<div className="box-header">
|
{!!attention && !cached && <div className="flow-item-dot" />}
|
||||||
{!!do_filter_name && (
|
<div className="box-header">
|
||||||
<span
|
{!!do_filter_name && (
|
||||||
className="reply-header-badge clickable"
|
|
||||||
onClick={() => {
|
|
||||||
do_filter_name(DZ_NAME);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<span className="icon icon-locate" />
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{!do_react && (
|
|
||||||
<span className="box-header-badge">
|
|
||||||
<span className="icon icon-up-and-down" />
|
|
||||||
<span style={{ verticalAlign: 'super' }}>
|
|
||||||
{info.up_votes - info.down_votes}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
{!!parseInt(info.likenum, 10) && (
|
|
||||||
<span className="box-header-badge">
|
|
||||||
{info.likenum}
|
|
||||||
<span
|
<span
|
||||||
className={'icon icon-' + (attention ? 'star-ok' : 'star')}
|
className="reply-header-badge clickable"
|
||||||
|
onClick={() => {
|
||||||
|
do_filter_name(DZ_NAME);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<span className="icon icon-locate" />
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{!do_react && (
|
||||||
|
<span className="box-header-badge">
|
||||||
|
<span className="icon icon-up-and-down" />
|
||||||
|
<span style={{ verticalAlign: 'super' }}>
|
||||||
|
{info.up_votes - info.down_votes}
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{!!parseInt(info.likenum, 10) && (
|
||||||
|
<span className="box-header-badge">
|
||||||
|
{info.likenum}
|
||||||
|
<span
|
||||||
|
className={'icon icon-' + (attention ? 'star-ok' : 'star')}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
{!!parseInt(info.reply, 10) && (
|
||||||
|
<span className="box-header-badge">
|
||||||
|
{info.reply}
|
||||||
|
<span className="icon icon-comment" />
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<code className="box-id">
|
||||||
|
<a href={'##' + info.pid} onClick={this.copy_link.bind(this)}>
|
||||||
|
#{info.pid}
|
||||||
|
{info.room_id !== parseInt(window.config.room) && (
|
||||||
|
<> @{info.room_id}</>
|
||||||
|
)}
|
||||||
|
</a>
|
||||||
|
</code>
|
||||||
|
|
||||||
|
{info.author_title && (
|
||||||
|
<span className="box-header-name author-title">{`"${info.author_title}"`}</span>
|
||||||
|
)}
|
||||||
|
{info.is_tmp && (
|
||||||
|
<span className="box-header-name tmp-title">临时账号</span>
|
||||||
|
)}
|
||||||
|
{info.is_reported && <span className="danger-info"> R </span>}
|
||||||
|
{!!do_delete && !!info.can_del && (
|
||||||
|
<span
|
||||||
|
className="clickable icon icon-delete op-btn"
|
||||||
|
onClick={() => {
|
||||||
|
do_delete('pid', info.pid);
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
</span>
|
)}
|
||||||
)}
|
{!!do_block && (
|
||||||
{!!parseInt(info.reply, 10) && (
|
<span
|
||||||
<span className="box-header-badge">
|
className="clickable icon icon-block op-btn"
|
||||||
{info.reply}
|
onClick={do_block}
|
||||||
<span className="icon icon-comment" />
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
<code className="box-id">
|
|
||||||
<a href={'##' + info.pid} onClick={this.copy_link.bind(this)}>
|
|
||||||
#{info.pid}
|
|
||||||
{info.room_id !== parseInt(window.config.room) && (
|
|
||||||
<> @{info.room_id}</>
|
|
||||||
)}
|
|
||||||
</a>
|
|
||||||
</code>
|
|
||||||
|
|
||||||
{info.author_title && (
|
|
||||||
<span className="box-header-name author-title">{`"${info.author_title}"`}</span>
|
|
||||||
)}
|
|
||||||
{info.is_tmp && (
|
|
||||||
<span className="box-header-name tmp-title">临时账号</span>
|
|
||||||
)}
|
|
||||||
{info.is_reported && <span className="danger-info"> R </span>}
|
|
||||||
{!!do_delete && !!info.can_del && (
|
|
||||||
<span
|
|
||||||
className="clickable icon icon-delete op-btn"
|
|
||||||
onClick={() => {
|
|
||||||
do_delete('pid', info.pid);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{!!do_block && (
|
|
||||||
<span
|
|
||||||
className="clickable icon icon-block op-btn"
|
|
||||||
onClick={do_block}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
{info.dangerous_user && (
|
|
||||||
<span className="danger-info"> {info.dangerous_user} </span>
|
|
||||||
)}
|
|
||||||
{info.blocked_count && (
|
|
||||||
<span className="danger-info"> {info.blocked_count} </span>
|
|
||||||
)}
|
|
||||||
{info.cw !== null && (!do_edit_cw || !info.can_del) && (
|
|
||||||
<span className="box-header-cw">{info.cw}</span>
|
|
||||||
)}
|
|
||||||
{!!do_edit_cw && !!info.can_del && (
|
|
||||||
<div className="box-header-cw-edit clickable">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
value={cw}
|
|
||||||
maxLength="32"
|
|
||||||
placeholder="编辑折叠警告"
|
|
||||||
onChange={this.on_cw_change.bind(this)}
|
|
||||||
/>
|
/>
|
||||||
<button type="button" onClick={(e) => do_edit_cw(cw, info.pid)}>
|
)}
|
||||||
更新
|
{info.dangerous_user && (
|
||||||
</button>
|
<span className="danger-info"> {info.dangerous_user} </span>
|
||||||
</div>
|
)}
|
||||||
|
{info.blocked_count && (
|
||||||
|
<span className="danger-info"> {info.blocked_count} </span>
|
||||||
|
)}
|
||||||
|
{info.cw !== null && (!do_edit_cw || !info.can_del) && (
|
||||||
|
<span className="box-header-cw">{info.cw}</span>
|
||||||
|
)}
|
||||||
|
{!!do_edit_cw && !!info.can_del && (
|
||||||
|
<div className="box-header-cw-edit clickable">
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
value={cw}
|
||||||
|
maxLength="32"
|
||||||
|
placeholder="编辑折叠警告"
|
||||||
|
onChange={this.on_cw_change.bind(this)}
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={(e) => do_edit_cw(cw, info.pid)}
|
||||||
|
>
|
||||||
|
更新
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{!info.allow_search && <span className="icon icon-lock" />}
|
||||||
|
<Time stamp={info.timestamp} short={!img_clickable} />
|
||||||
|
</div>
|
||||||
|
{!!info.hot_score && (
|
||||||
|
<span className="box-header">hot score: {info.hot_score}</span>
|
||||||
)}
|
)}
|
||||||
{!info.allow_search && <span className="icon icon-lock" />}
|
|
||||||
<Time stamp={info.timestamp} short={!img_clickable} />
|
|
||||||
</div>
|
|
||||||
{!!info.hot_score && (
|
|
||||||
<span className="box-header">hot score: {info.hot_score}</span>
|
|
||||||
)}
|
|
||||||
<div className="box-content-wrapper">
|
|
||||||
<div className="box-content">
|
<div className="box-content">
|
||||||
<HighlightedMarkdown
|
<HighlightedMarkdown
|
||||||
text={info.text}
|
text={info.text}
|
||||||
@@ -358,68 +361,71 @@ class FlowItem extends PureComponent {
|
|||||||
search_param={search_param}
|
search_param={search_param}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
{do_react && (
|
{info.poll && (
|
||||||
<div className="box-content-vote">
|
<div className="box-poll">
|
||||||
<span
|
<Poll
|
||||||
className="clickable"
|
key={info.poll.answers.map((a) => a.votes).join('_')}
|
||||||
onClick={() => do_react(info.reaction_status === 1 ? 0 : 1)}
|
question={''}
|
||||||
>
|
answers={info.poll.answers}
|
||||||
<svg
|
onVote={do_vote}
|
||||||
className={
|
customStyles={{ theme: 'cyan' }}
|
||||||
info.reaction_status === 1
|
noStorage={true}
|
||||||
? 'vote-icon-active'
|
vote={
|
||||||
: 'vote-icon-inactive'
|
localStorage['VOTE_RECORD:' + info.pid] || info.poll.vote
|
||||||
}
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 36 36"
|
|
||||||
>
|
|
||||||
<path d="M2 25h32L18 9 2 25Z" />
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<div className="vote-num">{info.up_votes}</div>
|
|
||||||
<hr />
|
|
||||||
<div className="vote-num">{info.down_votes}</div>
|
|
||||||
<span
|
|
||||||
className="clickable"
|
|
||||||
onClick={() =>
|
|
||||||
do_react && do_react(info.reaction_status === -1 ? 0 : -1)
|
|
||||||
}
|
}
|
||||||
>
|
/>
|
||||||
<svg
|
|
||||||
className={
|
|
||||||
info.reaction_status === -1
|
|
||||||
? 'vote-icon-active'
|
|
||||||
: 'vote-icon-inactive'
|
|
||||||
}
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 36 36"
|
|
||||||
>
|
|
||||||
<path d="M2 11h32L18 27 2 11Z"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
{!!(attention && info.variant.latest_reply) && (
|
||||||
|
<p className="box-footer">
|
||||||
|
最新回复{' '}
|
||||||
|
<Time stamp={info.variant.latest_reply} short={false} />
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
{info.poll && (
|
{do_react && (
|
||||||
<div className="box-poll">
|
<div className="box-post-vote">
|
||||||
<Poll
|
<span
|
||||||
key={info.poll.answers.map((a) => a.votes).join('_')}
|
className="clickable"
|
||||||
question={''}
|
onClick={() => do_react(info.reaction_status === 1 ? 0 : 1)}
|
||||||
answers={info.poll.answers}
|
>
|
||||||
onVote={do_vote}
|
<svg
|
||||||
customStyles={{ theme: 'cyan' }}
|
className={
|
||||||
noStorage={true}
|
info.reaction_status === 1
|
||||||
vote={localStorage['VOTE_RECORD:' + info.pid] || info.poll.vote}
|
? 'vote-icon-active'
|
||||||
/>
|
: 'vote-icon-inactive'
|
||||||
|
}
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 36 36"
|
||||||
|
>
|
||||||
|
<path d="M2 25h32L18 9 2 25Z" />
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<div className="vote-num">{info.up_votes}</div>
|
||||||
|
<hr />
|
||||||
|
<div className="vote-num">{info.down_votes}</div>
|
||||||
|
<span
|
||||||
|
className="clickable"
|
||||||
|
onClick={() =>
|
||||||
|
do_react && do_react(info.reaction_status === -1 ? 0 : -1)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
className={
|
||||||
|
info.reaction_status === -1
|
||||||
|
? 'vote-icon-active'
|
||||||
|
: 'vote-icon-inactive'
|
||||||
|
}
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 36 36"
|
||||||
|
>
|
||||||
|
<path d="M2 11h32L18 27 2 11Z"></path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{!!(attention && info.variant.latest_reply) && (
|
|
||||||
<p className="box-footer">
|
|
||||||
最新回复 <Time stamp={info.variant.latest_reply} short={false} />
|
|
||||||
</p>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -317,6 +317,7 @@ a.app-switcher-item,
|
|||||||
|
|
||||||
.time-str {
|
.time-str {
|
||||||
color: #999999;
|
color: #999999;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|
||||||
a.button {
|
a.button {
|
||||||
|
|||||||
Reference in New Issue
Block a user