user2/hole_thu_frontend
1
0
Fork 0
forked from newthuhole/hole_thu_frontend
Code Issues Pull Requests Projects Releases Wiki Activity

update ui

Browse Source
This commit is contained in:
xmcp
2018-08-21 23:13:32 +08:00
parent c118e64c7a
commit 4d57f67e54
7 changed files with 75 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
public/index.html
View File

@@ -2,7 +2,7 @@
<html lang="zh"> <html lang="zh">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, shrink-to-fit=yes"> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>P大树洞（非官方）</title> <title>P大树洞（非官方）</title>
</head> </head>
<body> <body>

64
src/Flows.css
View File

@@ -1,18 +1,56 @@
.box { .box {
background-color: #fff; background-color: hsl(0,0%,95%);
border-radius: 5px; border-radius: 5px;
margin: 1em 0; margin: 1em 0;
padding: .5em; padding: .5em;
box-shadow: 0 5px 20px rgba(0,0,0,.4); box-shadow: 0 5px 20px rgba(0,0,0,.5);
} }
.flow-item { .left-container .flow-item {
flex: 0 0 600px; display: inline-block;
width: 600px;
float: left;
} }
.flow-reply-row {
display: inline-flex;
align-items: flex-start;
width: calc(100% - 625px);
margin-left: -25px;
padding-left: 20px;
overflow-x: hidden;
}
.flow-reply-row:empty {
margin: 0 !important;
}
.flow-item-row::after {
content: "";
display: block;
clear: both;
}
@media screen and (max-width: 900px) {
.left-container .flow-item {
display: block;
width: calc(100vw - 20px);
max-width: 600px;
float: none;
}
.flow-reply-row {
display: flex;
width: calc(100% - 10px) !important;
margin-left: 10px;
padding-left: 20px;
margin-top: -2.5em;
}
}
.left-container .flow-reply { .left-container .flow-reply {
flex: 0 0 300px; flex: 0 0 300px;
max-height: 15em; max-height: 15em;
margin-left: -5px; margin-right: -5px;
overflow-y: hidden; overflow-y: hidden;
} }
@@ -32,6 +70,10 @@
.aux-margin { .aux-margin {
width: calc(100% - 2 * 10px); width: calc(100% - 2 * 10px);
} }
.flow-reply-row {
width: calc(100% - 585px);
}
} }
.left-container .flow-item-row { .left-container .flow-item-row {
@@ -42,22 +84,10 @@
margin-left: -10px; margin-left: -10px;
} }
.left-container .flow-item-row {
display: flex;
overflow-x: hidden;
align-items: flex-start;
}
.flow-item-row img { .flow-item-row img {
max-width: 100%; max-width: 100%;
} }
.flow-item-row pre {
white-space: pre-wrap;
font-family: '微软雅黑', 'Microsoft YaHei', sans-serif;
word-wrap: break-word;
}
.box-header-badge { .box-header-badge {
float: right; float: right;
margin: 0 .5em; margin: 0 .5em;

14
src/Flows.js
View File

@@ -14,9 +14,9 @@ const CLICKABLE_TAGS={a: true, audio: true};
function Reply(props) { function Reply(props) {
return ( return (
<div className={'flow-reply box'} style={{ <div className={'flow-reply box'} style={props.info._display_color ? {
backgroundColor: props.info._display_color, backgroundColor: props.info._display_color,
}}> } : null}>
<div className="box-header"> <div className="box-header">
<span className="box-id">#{props.info.cid}</span>&nbsp; <span className="box-id">#{props.info.cid}</span>&nbsp;
<Time stamp={props.info.timestamp} /> <Time stamp={props.info.timestamp} />
@@ -39,7 +39,7 @@ function FlowItem(props) {
<div className="flow-item box"> <div className="flow-item box">
<div className="box-header"> <div className="box-header">
{!!parseInt(props.info.likenum, 10) && <span className="box-header-badge">{props.info.likenum}★</span>} {!!parseInt(props.info.likenum, 10) && <span className="box-header-badge">{props.info.likenum}★</span>}
{!!parseInt(props.info.reply, 10) && <span className="box-header-badge">{props.info.reply} 回复</span>} {!!parseInt(props.info.reply, 10) && <span className="box-header-badge">{props.info.reply}回复</span>}
<span className="box-id">#{props.info.pid}</span>&nbsp; <span className="box-id">#{props.info.pid}</span>&nbsp;
<Time stamp={props.info.timestamp} /> <Time stamp={props.info.timestamp} />
</div> </div>
@@ -79,7 +79,7 @@ class FlowItemRow extends Component {
throw new Error(json.code); throw new Error(json.code);
this.setState({ this.setState({
replies: json.data.map((info)=>{ replies: json.data.map((info)=>{
info._display_color=info.islz ? '#fff' : this.color_picker.get(info.name) info._display_color=info.islz ? null : this.color_picker.get(info.name)
return info; return info;
}), }),
reply_loading: false, reply_loading: false,
@@ -101,8 +101,10 @@ class FlowItemRow extends Component {
); );
}}> }}>
<FlowItem info={this.info} /> <FlowItem info={this.info} />
{!!this.state.reply_loading && <ReplyPlaceholder count={this.info.reply} />} <div className="flow-reply-row">
{this.state.replies.slice(0,10).map((reply)=><Reply info={reply} key={reply.cid} />)} {!!this.state.reply_loading && <ReplyPlaceholder count={this.info.reply} />}
{this.state.replies.slice(0,10).map((reply)=><Reply info={reply} key={reply.cid} />)}
</div>
</div> </div>
); );
} }

11
src/Sidebar.css
View File

@@ -39,11 +39,18 @@
left: calc(100% - 550px); left: calc(100% - 550px);
} }
} }
@media screen and (max-width: 600px) {
.sidebar {
width: calc(100% - 50px);
}
.sidebar-on .sidebar {
left: 50px;
}
}
.sidebar-flow-item { .sidebar-flow-item {
display: block; display: block;
} }
.sidebar-flow-item .box { .sidebar-flow-item .box {
margin: 1em; width: 100%;
width: calc(100% - 2em);
} }

3
src/Title.js
View File

@@ -65,7 +65,7 @@ class ControlBar extends Component {
on_keypress(event) { on_keypress(event) {
if(event.key==='Enter') if(event.key==='Enter')
this.set_search_text(this.state.search_text); this.set_search_text(this.state.search_text||null);
} }
do_refresh() { do_refresh() {
@@ -90,7 +90,6 @@ class ControlBar extends Component {
'关于 P大树洞（非官方） 网页版', '关于 P大树洞（非官方） 网页版',
HELP_TEXT HELP_TEXT
)}}>Help</a> )}}>Help</a>
<a href="https://github.com/xmcp/ashole" target="_blank">GitHub</a>
</div> </div>
) )
} }

2
src/color_picker.js
View File

@@ -12,7 +12,7 @@ export class ColorPicker {
if(!this.names[name]) { if(!this.names[name]) {
this.current_h+=golden_ratio_conjugate; this.current_h+=golden_ratio_conjugate;
this.current_h%=1; this.current_h%=1;
this.names[name]=`hsl(${this.current_h*360}, 40%, 80%)`; this.names[name]=`hsl(${this.current_h*360}, 40%, 85%)`;
} }
return this.names[name]; return this.names[name];
} }

9
src/index.css
View File

@@ -1,9 +1,9 @@
body { body {
min-width: 620px;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: '微软雅黑', 'Microsoft YaHei', sans-serif; font-family: '微软雅黑', 'Microsoft YaHei', sans-serif;
background-size: cover; background-size: cover;
overflow-x: hidden;
} }
body::-webkit-scrollbar { body::-webkit-scrollbar {
@@ -12,6 +12,8 @@ body::-webkit-scrollbar {
* { * {
box-sizing: border-box; box-sizing: border-box;
word-wrap: break-word;
-webkit-overflow-scrolling: touch;
} }
p { p {
@@ -33,4 +35,9 @@ input {
audio { audio {
vertical-align: middle; vertical-align: middle;
}
pre {
white-space: pre-wrap;
font-family: '微软雅黑', 'Microsoft YaHei', sans-serif;
} }