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">
<head>
<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>
</head>
<body>

64
src/Flows.css
View File

@@ -1,18 +1,56 @@
.box {
background-color: #fff;
background-color: hsl(0,0%,95%);
border-radius: 5px;
margin: 1em 0;
padding: .5em;
box-shadow: 0 5px 20px rgba(0,0,0,.4);
box-shadow: 0 5px 20px rgba(0,0,0,.5);
}
.flow-item {
flex: 0 0 600px;
.left-container .flow-item {
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 {
flex: 0 0 300px;
max-height: 15em;
margin-left: -5px;
margin-right: -5px;
overflow-y: hidden;
}
@@ -32,6 +70,10 @@
.aux-margin {
width: calc(100% - 2 * 10px);
}
.flow-reply-row {
width: calc(100% - 585px);
}
}
.left-container .flow-item-row {
@@ -42,22 +84,10 @@
margin-left: -10px;
}
.left-container .flow-item-row {
display: flex;
overflow-x: hidden;
align-items: flex-start;
}
.flow-item-row img {
max-width: 100%;
}
.flow-item-row pre {
white-space: pre-wrap;
font-family: '微软雅黑', 'Microsoft YaHei', sans-serif;
word-wrap: break-word;
}
.box-header-badge {
float: right;
margin: 0 .5em;

14
src/Flows.js
View File

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

11
src/Sidebar.css
View File

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

3
src/Title.js
View File

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

2
src/color_picker.js
View File

@@ -12,7 +12,7 @@ export class ColorPicker {
if(!this.names[name]) {
this.current_h+=golden_ratio_conjugate;
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];
}

9
src/index.css
View File

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