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

update ui

dev
xmcp 7 years ago
parent
c118e64c7a
commit
4d57f67e54
7 changed files with 75 additions and 30 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. 2
      public/index.html
  2. 64
      src/Flows.css
  3. 14
      src/Flows.js
  4. 11
      src/Sidebar.css
  5. 3
      src/Title.js
  6. 2
      src/color_picker.js
  7. 9
      src/index.css

2
public/index.html
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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
Unescape 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 {
@ -34,3 +36,8 @@ input {
audio { audio {
vertical-align: middle; vertical-align: middle;
} }
pre {
white-space: pre-wrap;
font-family: '微软雅黑', 'Microsoft YaHei', sans-serif;
}
Write Preview
Loading…
Cancel
Save