improve sidebar on small screen

public/static/fonts_5/icomoon.css

@@ -18,6 +18,7 @@
   font-variant: normal;
   text-transform: none;
   line-height: 1;
+  vertical-align: -.0625em;
 
   /* Better Font Rendering =========== */
   -webkit-font-smoothing: antialiased;

src/Flows.css

@@ -154,6 +154,11 @@
     border-radius: 50%;
     background-color: #ffcc77;
     box-shadow: 1px 1px 5px rgba(0,0,0,.5);
+    display: none;
+}
+
+.left-container .flow-item-dot {
+    display: block;
 }
 
 .box-content {

src/Sidebar.css

@@ -15,6 +15,9 @@
     opacity: .3;
     pointer-events: initial;
 }
+.sidebar-on .sidebar-shadow:active {
+    opacity: .6;
+}
 
 .sidebar {
     user-select: text;
@@ -73,12 +76,16 @@
         left: calc(100% - 550px);
     }
 }
-@media screen and (max-width: 570px) {
+@media screen and (max-width: 580px) {
     .sidebar, .sidebar-title {
-        width: calc(100% - 20px);
+        width: calc(100% - 30px);
+    }
+    .sidebar, .sidebar-title {
+        padding-left: .25em;
+        padding-right: .25em;
     }
     .sidebar-on .sidebar, .sidebar-on .sidebar-title {
-        left: 20px;
+        left: 30px;
     }
 }
 

src/Sidebar.js

@@ -16,7 +16,7 @@ export class Sidebar extends PureComponent {
     render() {
         return (
             <div className={this.props.title!==null ? 'sidebar-on' : ''}>
-                <div className="sidebar-shadow" onClick={this.props.do_close} />
+                <div className="sidebar-shadow" onClick={this.props.do_close} onTouchEnd={(e)=>{e.preventDefault();e.target.click();}} />
                 <div ref={this.sidebar_ref} className="sidebar">
                     {this.props.content}
                 </div>

src/UserAction.css

@@ -44,7 +44,7 @@
     border: 0;
     padding: 0 .5em;
 }
-@media screen and (max-width: 570px) {
+@media screen and (max-width: 580px) {
     .post-form-bar input[type=file] {
         width: 110px;
     }