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

improve ui

dev
xmcp 7 years ago
parent
c807fa04ce
commit
4fdc0753c1
9 changed files with 53 additions and 19 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      public/eriri_bg.jpg
  2. 14
      public/index.html
  3. 28
      src/Common.css
  4. 6
      src/Flows.css
  5. 11
      src/Sidebar.css
  6. 2
      src/Sidebar.js
  7. 2
      src/Title.css
  8. 1
      src/Title.js
  9. 8
      src/index.css

BIN
public/eriri_bg.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 324 KiB

14
public/index.html
Unescape View File

@ -1,13 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh"> <html lang="zh">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>AsHole</title> <title>AsHole</title>
</head> </head>
<body> <body>
<noscript> <noscript>
You need to enable JavaScript to run this app. You need to enable JavaScript to run this app.
</noscript> </noscript>
<div id="root"></div> <div id="root"></div>
<!-- <!--
@ -20,5 +20,9 @@
To begin the development, run `npm start` or `yarn start`. To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`. 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> </html>

28
src/Common.css
Unescape View File

@ -1,12 +1,26 @@
.centered-line { .centered-line {
width: 100%; overflow: hidden;
text-align: center; 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%;
} }

6
src/Flows.css
Unescape View File

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

11
src/Sidebar.css
Unescape View File

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

2
src/Sidebar.js
Unescape View File

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

2
src/Title.css
Unescape View File

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

1
src/Title.js
Unescape View File

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

8
src/index.css
Unescape View File

@ -1,8 +1,12 @@
body { body {
min-width: 700px;
margin: 0; margin: 0;
padding: 0; padding: 0;
font-family: '微软雅黑', 'Microsoft YaHei', sans-serif; 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 { body::-webkit-scrollbar {
@ -19,7 +23,7 @@ p {
a { a {
text-decoration: none; text-decoration: none;
color: blue; color: #00c;
cursor: pointer; cursor: pointer;
margin: 0 .5em; margin: 0 .5em;
} }
Write Preview
Loading…
Cancel
Save