improve ui

7 years ago · 4fdc0753c1
9 changed files with 53 additions and 19 deletions
--- a/public/eriri_bg.jpg
+++ b/public/eriri_bg.jpg
--- a/public/index.html
+++ b/public/index.html
@ -1,11 +1,11 @@
 <!DOCTYPE html>
 <html lang="zh">
-  <head>
+<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>AsHole</title>
-  </head>
-  <body>
+</head>
+<body>
    <noscript>
        You need to enable JavaScript to run this app.
    </noscript>
@ -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`.
    -->
-  </body>
+    <script>
+        if(/Android|iPhone|iPad|iPod/.test(navigator.userAgent))
+            alert('你为什么不用 PKU Helper 客户端呢？');
+    </script>
+</body>
 </html>
--- a/src/Common.css
+++ b/src/Common.css
@ -1,12 +1,26 @@
 .centered-line {
-    width: 100%;
+    overflow: hidden;
    text-align: center;
-    border-bottom: 1px solid #000;
-    line-height: 0.1em;
-    margin: 10px 0 20px;
+    color: #fff;
 }

-.centered-line span {
-    background:#eee;
-    padding:0 10px;
+.centered-line::before,
+.centered-line::after {
+    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%;
 }
--- a/src/Flows.css
+++ b/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;
 }
--- a/src/Sidebar.css
+++ b/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;
 }
--- a/src/Sidebar.js
+++ b/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>
--- a/src/Title.css
+++ b/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;
--- a/src/Title.js
+++ b/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>
--- a/src/index.css
+++ b/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;
 }