diff --git a/src/Common.css b/src/Common.css index fbb955b..9c11a6d 100644 --- a/src/Common.css +++ b/src/Common.css @@ -8,13 +8,13 @@ } .black-outline { - text-shadow: - -1px -1px 0 #000, - 0 -1px 0 #000, - 1px -1px 0 #000, - -1px 1px 0 #000, - 0 1px 0 #000, - 1px 1px 0 #000; + text-shadow: /* also change .flow-item-row-with-prompt:hover::before */ + -1px -1px 0 rgba(0,0,0,.6), + 0 -1px 0 rgba(0,0,0,.6), + 1px -1px 0 rgba(0,0,0,.6), + -1px 1px 0 rgba(0,0,0,.6), + 0 1px 0 rgba(0,0,0,.6), + 1px 1px 0 rgba(0,0,0,.6); } .search-query-highlight { diff --git a/src/Flows.css b/src/Flows.css index b066749..31af572 100644 --- a/src/Flows.css +++ b/src/Flows.css @@ -13,7 +13,8 @@ } .box-danger { - background-color: #faa; + background-color: #fcc; + border: 2px solid #f77; } .left-container .flow-item { @@ -54,7 +55,7 @@ .left-container .flow-reply { flex: 0 0 300px; - max-height: 15em; + .max-height: 15em; margin-right: -7px; overflow-y: hidden; } @@ -70,7 +71,13 @@ left: 10px; margin-top: 1.5em; color: white; - text-shadow: 0 0 2px #000; + text-shadow: /* copied from .black-outline */ + -1px -1px 0 rgba(0,0,0,.6), + 0 -1px 0 rgba(0,0,0,.6), + 1px -1px 0 rgba(0,0,0,.6), + -1px 1px 0 rgba(0,0,0,.6), + 0 1px 0 rgba(0,0,0,.6), + 1px 1px 0 rgba(0,0,0,.6); font-family: 'Consolas', 'Courier', monospace; } } @@ -152,6 +159,11 @@ margin: .5em 0; } +.left-container .box-content { + max-height: calc(100vh + 15em); + overflow-y: hidden; +} + .box-id { color: #666666; } @@ -197,4 +209,13 @@ width: 2.5em; text-align: center; color: white; +} + +.box-header-tag { + color: white; + background-color: #00c; + font-weight: bold; + border-radius: 3px; + margin-right: .25em; + padding: 0 .25em; } \ No newline at end of file diff --git a/src/Flows.js b/src/Flows.js index 74fd1c5..d845a6a 100644 --- a/src/Flows.js +++ b/src/Flows.js @@ -79,7 +79,13 @@ class Reply extends PureComponent { backgroundColor: this.props.info._display_color, } : null}>
- #{this.props.info.cid}  + #{this.props.info.cid} +   + {this.props.info.tag!==null && + + {this.props.info.tag} + + }
@@ -139,6 +145,11 @@ class FlowItem extends PureComponent { } #{props.info.pid}   + {props.info.tag!==null && + + {props.info.tag} + + }
diff --git a/src/UserAction.js b/src/UserAction.js index a5cb9ea..2c537ba 100644 --- a/src/UserAction.js +++ b/src/UserAction.js @@ -9,8 +9,11 @@ import md5 from 'md5'; import './UserAction.css'; const LOGIN_BASE=PKUHELPER_ROOT+'services/login'; -const MAX_IMG_PX=2500; -const MAX_IMG_FILESIZE=300000; + +const BASE64_RATE=4/3; +const MAX_IMG_DIAM=8000; +const MAX_IMG_PX=6000000; +const MAX_IMG_FILESIZE=450000*BASE64_RATE; export {ISOP_APPKEY,ISOP_APPCODE,ISOP_SVCID}; @@ -427,16 +430,24 @@ export class PostForm extends Component { let width=image.width; let height=image.height; let compressed=false; - if(width>MAX_IMG_PX) { - height=height*MAX_IMG_PX/width; - width=MAX_IMG_PX; + + if(width>MAX_IMG_DIAM) { + height=height*MAX_IMG_DIAM/width; + width=MAX_IMG_DIAM; + compressed=true; + } + if(height>MAX_IMG_DIAM) { + width=width*MAX_IMG_DIAM/height; + height=MAX_IMG_DIAM; compressed=true; } - if(height>MAX_IMG_PX) { - width=width*MAX_IMG_PX/height; - height=MAX_IMG_PX; + if(height*width>MAX_IMG_PX) { + let rate=Math.sqrt(height*width/MAX_IMG_PX); + height/=rate; + width/=rate; compressed=true; } + console.log('chosen img size',width,height); let canvas=document.createElement('canvas'); let ctx=canvas.getContext('2d'); @@ -445,7 +456,7 @@ export class PostForm extends Component { ctx.drawImage(image,0,0,width,height); let quality_l=.1,quality_r=.9,quality,new_url; - while(quality_r-quality_l>=.06) { + while(quality_r-quality_l>=.03) { quality=(quality_r+quality_l)/2; new_url=canvas.toDataURL('image/jpeg',quality); console.log(quality_l,quality_r,'trying quality',quality,'size',new_url.length); @@ -481,7 +492,7 @@ export class PostForm extends Component { .then((d)=>{ this.setState({ img_tip: `(${d.compressed?'压缩到':'尺寸'} ${d.width}*${d.height} / `+ - `质量 ${Math.floor(d.quality*100)}% / ${Math.floor(d.img.length/1000)}KB)`, + `质量 ${Math.floor(d.quality*100)}% / ${Math.floor(d.img.length/BASE64_RATE/1000)}KB)`, }); }) .catch((e)=>{