newthuhole/hole_thu_frontend
4
6
Fork 2
Code Issues 8 Pull Requests Projects Releases Wiki Activity

improve ui

Browse Source
This commit is contained in:
xmcp
2018-08-20 18:35:35 +08:00
parent c807fa04ce
commit 4fdc0753c1
9 changed files with 53 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/eriri_bg.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 324 KiB

14
public/index.html
View File

@@ -1,13 +1,13 @@
<!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.
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!--
@@ -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>

28
src/Common.css
View File

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

6
src/Flows.css
View File

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

11
src/Sidebar.css
View File

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

2
src/Sidebar.js
View File

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

2
src/Title.css
View File

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

1
src/Title.js
View File

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

8
src/index.css
View File

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