improve ui

public/index.html

@@ -20,5 +20,9 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
+    <script>
+        if(/Android|iPhone|iPad|iPod/.test(navigator.userAgent))
+            alert('你为什么不用 PKU Helper 客户端呢？');
+    </script>
 </body>
 </html>

src/Common.css

@@ -1,12 +1,26 @@
 .centered-line {
-    width: 100%;
+    overflow: hidden;
     text-align: center;
-    border-bottom: 1px solid #000;
+    color: #fff;
-    line-height: 0.1em;
-    margin: 10px 0 20px;
 }
 
-.centered-line span {
+.centered-line::before,
-    background:#eee;
+.centered-line::after {
-    padding:0 10px;
+    background-color: #fff;
+    content: "";
+    display: inline-block;
+    height: 1px;
+    position: relative;
+    vertical-align: middle;
+    width: 50%;
+}
+
+.centered-line::before {
+    right: 0.5em;
+    margin-left: -50%;
+}
+
+.centered-line::after {
+    left: 0.5em;
+    margin-right: -50%;
 }

src/Flows.css

@@ -24,7 +24,8 @@
     margin-left: 50px;
 }
 
-.flow-item-row {
+:not(.sidebar-flow-item).flow-item-row {
+    cursor: pointer;
     transition: margin-left 200ms ease-out;
 }
 :not(.sidebar-flow-item).flow-item-row:hover {
@@ -44,6 +45,7 @@
 .flow-item-row pre {
     white-space: pre-wrap;
     font-family: '微软雅黑', 'Microsoft YaHei', sans-serif;
+    word-wrap: break-word;
 }
 
 .box-header-badge {
@@ -57,5 +59,5 @@
 }
 
 .flow-reply-gray {
-    background-color: #e7e7e7;
+    background-color: #eee;
 }

src/Sidebar.css

@@ -23,7 +23,7 @@
     height: 100%;
     width: calc(100% - 700px);
     padding: 1em;
-    background-color: #fff;
+    background-color: rgba(255,255,255,.8);
     z-index: 3;
     overflow-y: auto;
 }
@@ -31,6 +31,15 @@
     left: 700px;
 }
 
+@media screen and (max-width: 1200px) {
+    .sidebar {
+        width: 600px;
+    }
+    .sidebar-on .sidebar {
+        left: calc(100% - 600px);
+    }
+}
+
 .sidebar-flow-item {
     display: block;
 }

src/Sidebar.js

@@ -10,7 +10,7 @@ export function Sidebar(props) {
                     <a onClick={props.do_close}>×</a>
                     &nbsp;{props.title}
                 </p>
-                <hr />
+                <br />
                 {props.content}
             </div>
         </div>

src/Title.css

@@ -7,7 +7,7 @@
     height: 2em;
     line-height: 2em;
     font-size: 1.5em;
-    background-color: #fff;
+    background-color: rgba(255,255,255,.8);
     padding: 0 .5em;
     box-shadow: 0 0 25px #999;
     margin-bottom: 1em;

src/Title.js

@@ -8,6 +8,7 @@ export function Title(props) {
                 <a onClick={()=>{props.callback(
                     '关于 P大树洞（非官方） 网页版',
                     <div>
+                        <br />
                         <p>使用提示：</p>
                         <ul>
                             <li>为保证使用体验，请使用分辨率恰好为 1920*1080 像素的电脑，并用 Chrome 浏览器 stable 分支最新版</li>

src/index.css

@@ -1,8 +1,12 @@
 body {
+    min-width: 700px;
     margin: 0;
     padding: 0;
     font-family: '微软雅黑', 'Microsoft YaHei', sans-serif;
-    background-color: #eee;
+    background-color: black;
+    background-image: url(/eriri_bg.jpg);
+    background-size: cover;
+    background-attachment: fixed;
 }
 
 body::-webkit-scrollbar {
@@ -19,7 +23,7 @@ p {
 
 a {
     text-decoration: none;
-    color: blue;
+    color: #00c;
     cursor: pointer;
     margin: 0 .5em;
 }