From 4d57f67e54e22d5061dce2b6091e8ea107b63c5d Mon Sep 17 00:00:00 2001 From: xmcp Date: Tue, 21 Aug 2018 23:13:32 +0800 Subject: [PATCH] update ui --- public/index.html | 2 +- src/Flows.css | 64 +++++++++++++++++++++++++++++++++------------ src/Flows.js | 14 +++++----- src/Sidebar.css | 11 ++++++-- src/Title.js | 3 +-- src/color_picker.js | 2 +- src/index.css | 9 ++++++- 7 files changed, 75 insertions(+), 30 deletions(-) diff --git a/public/index.html b/public/index.html index 8d35520..3273a61 100644 --- a/public/index.html +++ b/public/index.html @@ -2,7 +2,7 @@ - + P大树洞（非官方） diff --git a/src/Flows.css b/src/Flows.css index f58bed7..d3ecabc 100644 --- a/src/Flows.css +++ b/src/Flows.css @@ -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; diff --git a/src/Flows.js b/src/Flows.js index deff205..d656abb 100644 --- a/src/Flows.js +++ b/src/Flows.js @@ -14,9 +14,9 @@ const CLICKABLE_TAGS={a: true, audio: true}; function Reply(props) { return ( -
+ } : null}>
#{props.info.cid} 
) } diff --git a/src/color_picker.js b/src/color_picker.js index 6608a51..2c53b20 100644 --- a/src/color_picker.js +++ b/src/color_picker.js @@ -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]; } diff --git a/src/index.css b/src/index.css index d4a0670..ccf653a 100644 --- a/src/index.css +++ b/src/index.css @@ -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; } \ No newline at end of file