improve img upload; add tag display; better style

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 {

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;
 }

src/Flows.js

@@ -79,7 +79,13 @@ class Reply extends PureComponent {
                 backgroundColor: this.props.info._display_color,
             } : null}>
                 <div className="box-header">
-                    <code className="box-id">#{this.props.info.cid}</code>&nbsp;
+                    <code className="box-id">#{this.props.info.cid}</code>
+                    &nbsp;
+                    {this.props.info.tag!==null &&
+                        <span className="box-header-tag">
+                                {this.props.info.tag}
+                            </span>
+                    }
                     <Time stamp={this.props.info.timestamp} />
                 </div>
                 <div className="box-content">
@@ -139,6 +145,11 @@ class FlowItem extends PureComponent {
                         }
                         <code className="box-id"><a href={'##'+props.info.pid} onClick={this.copy_link.bind(this)}>#{props.info.pid}</a></code>
                         &nbsp;
+                        {props.info.tag!==null &&
+                            <span className="box-header-tag">
+                                {props.info.tag}
+                            </span>
+                        }
                         <Time stamp={props.info.timestamp} />
                     </div>
                     <div className="box-content">

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)=>{