newthuhole
/
hole_thu_frontend
4
6
Fork 2
Code Issues 8 Pull Requests Projects Releases Wiki Activity
Browse Source

fix some UI issues

master
hole-thu 3 years ago
parent
0d787e1194
commit
9bc2474348
3 changed files with 160 additions and 153 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      src/Flows.css
  2. 306
      src/Flows.js
  3. 1
      src/infrastructure/widgets.css

6
src/Flows.css
Unescape View File

@ -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;
} }

306
src/Flows.js
Unescape View File

@ -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" <span
onClick={() => { className="reply-header-badge clickable"
do_filter_name(DZ_NAME); onClick={() => {
}} do_filter_name(DZ_NAME);
> }}
<span className="icon icon-locate" /> >
</span> <span className="icon icon-locate" />
)}
{!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>
</span> )}
)} {!do_react && (
{!!parseInt(info.likenum, 10) && ( <span className="box-header-badge">
<span className="box-header-badge"> <span className="icon icon-up-and-down" />
{info.likenum}&nbsp; <span style={{ verticalAlign: 'super' }}>
{info.up_votes - info.down_votes}
</span>
</span>
)}
{!!parseInt(info.likenum, 10) && (
<span className="box-header-badge">
{info.likenum}&nbsp;
<span
className={'icon icon-' + (attention ? 'star-ok' : 'star')}
/>
</span>
)}
{!!parseInt(info.reply, 10) && (
<span className="box-header-badge">
{info.reply}&nbsp;
<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>
&nbsp;
{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 <span
className={'icon icon-' + (attention ? 'star-ok' : 'star')} 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}&nbsp; 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>
&nbsp;
{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>
); );

1
src/infrastructure/widgets.css
Unescape View File

@ -317,6 +317,7 @@ a.app-switcher-item,
.time-str { .time-str {
color: #999999; color: #999999;
display: inline-block;
} }
a.button { a.button {

Write Preview
Loading…
Cancel
Save