mirror/Plan
2
0
Fork 0
mirror of https://github.com/plan-player-analytics/Plan.git synced 2025-02-17 17:00:45 +08:00
Code Issues Packages Projects Releases Wiki Activity

Updated Page Navigation to use extremely compact Sidenav #307

Browse Source 
New Pages compatible with old version.
This commit is contained in:
Rsl1122 2017-11-01 15:46:07 +02:00
parent 9ed6b3b3c2
commit d5415e1018
7 changed files with 172 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
Plan/src/main/resources/html/error.html
View File

@ -25,7 +25,8 @@
<p class="right">Player Analytics v.${version}</p>
</div>
</header>
<div class="content">
<div class="headwrap">
<div class="content-centered">
<div class="row">
<div class="column">
<div class="box-header">
@ -37,5 +38,6 @@
</div>
</div>
</div>
</div>
</body>
</html>

51
Plan/src/main/resources/html/network.html
View File

@ -26,29 +26,40 @@
<h1>${networkName} | Network</h1>
</div>
</header>
<div class="headwrap">
<div class="sidenav">
<a class="nav-button" href="javascript:void(0)"><div title="Information" class="sidenav-button">
<div><i class="fa fa-info-circle"></i></div>
</div></a>
<a class="nav-button"><div title="Coming Soon" class="sidenav-button sidenav-button-disabled">
<div><i class="fa fa-area-chart"></i></div>
</div></a>
</div>
<div class="content">
<div class="row">
<div class="column">
<div class="box-header">
<h2><i class="fa fa-bar-chart"></i> Players Online</h2>
<div class="row">
<div class="column">
<div class="box-header">
<h2><i class="fa fa-bar-chart"></i> Players Online</h2>
</div>
<div class="box-footer">
<div id="playersOnline" style="width: 100%; height: 400px;"></div>
</div>
</div>
<div class="column">
<div class="box-header">
<h2><i class="fa fa-info-circle"></i> Information</h2>
</div>
<div class="box" style="height: 75%;">
<p>${playersOnline} Players Online</p>
<p>${playersTotal} Total Players</p>
<p>${playersNewDay} New Players Today<br>${playersNewWeek} New Players This Week</p>
</div>
</div>
</div>
<div class="box-footer">
<div id="playersOnline" style="width: 100%; height: 400px;"></div>
</div>
</div>
<div class="column">
<div class="box-header">
<h2><i class="fa fa-info-circle"></i> Information</h2>
</div>
<div class="box" style="height: 75%;">
<p>${playersOnline} Players Online</p>
<p>${playersTotal} Total Players</p>
<p>${playersNewDay} New Players Today<br>${playersNewWeek} New Players This Week</p>
</div>
</div>
${contentServers}
</div>
</div>
${contentServers}
</div>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="./js/playerGraph.js"></script>

43
Plan/src/main/resources/html/player.html
View File

@ -32,24 +32,26 @@
<h1>${networkName} | ${playerName}</h1>
</div>
</header>
<div class="content-server">
<div class="nav-bar row">
<a href="javascript:void(0)" class="nav-button">
<i class="fa fa-info-circle" aria-hidden="true"></i> Information
</a>
<a href="javascript:void(0)" class="nav-button">
<i class="fa fa-calendar" aria-hidden="true"></i> Sessions
</a>
<a href="javascript:void(0)" class="nav-button">
<i class="fa fa-line-chart" aria-hidden="true"></i> Overview
</a>
<a href="javascript:void(0)" class="nav-button">
<i class="fa fa-cubes" aria-hidden="true"></i> Plugins
</a>
</div>
<div id="limiter" class="main-limiter">
<div id="main" class="main-wrapper" style="width: 400%;">
<div id="tab-information" class="tab">
<div class="headwrap">
<div class="sidenav">
<a class="nav-button" href="javascript:void(0)"><div title="Information" class="sidenav-button">
<div><i class="fa fa-info-circle"></i></div>
</div></a>
<a class="nav-button" href="javascript:void(0)"><div title="Sessions" class="sidenav-button">
<div><i class="fa fa-calendar"></i></div>
</div></a>
<a class="nav-button" href="javascript:void(0)"><div title="Overview" class="sidenav-button">
<div><i class="fa fa-line-chart"></i></div>
</div></a>
<a class="nav-button" href="javascript:void(0)"><div title="Plugins" class="sidenav-button">
<div><i class="fa fa-cubes"></i></div>
</div></a>
</div>
<div class="content">
<div id="limiter" class="main-limiter">
<div id="main" class="main-wrapper" style="width: 500%;">
<div id="tab-information" class="tab">
<div class="row">
<div class="column">
<div class="box-header">
@ -183,7 +185,9 @@
<div id="tab-plugins" class="tab column">
${tabContentPlugins}
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
@ -274,6 +278,5 @@
};
}
</script>
</div>
</body>
</html>

4
Plan/src/main/resources/html/players.html
View File

@ -28,7 +28,8 @@
<h1>Plan | Players</h1>
</div>
</header>
<div class="content-server">
<div class="headwrap">
<div class="content-centered">
<div class="row">
<div class="column">
<div class="box-header">
@ -39,6 +40,7 @@
</div>
</div>
</div>
</div>
</div>
</body>
</html>

97
Plan/src/main/resources/html/server.html
View File

@ -1,26 +1,30 @@
<!DOCTYPE html>
<html>
<head>
<title>Plan | Server</title>
<!doctype html>
<html lang="en">
<head>
<title>${serverName} | Server</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Player Analysis window">
<meta name="author" content="Rsl1122">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset=utf-8>
<link rel="icon" href="https://puu.sh/tK0KL/6aa2ba141b.ico" type="image/x-icon">
<!--Font-->
<link rel="stylesheet" href="./main.css">
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400" rel="stylesheet">
<script src="https://use.fontawesome.com/df48eb908b.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
</head>
<body>
<script>
var worldPieColors = [${worldPieColors}];
var gmPieColors = [${gmPieColors}];
</script>
<header>
<div>
<div class="right fa-stack fa-lg" style="padding: 23px; margin:8px">
<header>
<div>
<div class="right fa-stack fa-lg" style="padding: 23px; margin:8px; box-sizing: content-box;">
<i style="padding: 0; color: #fff; font-size: 100px;" class="fa fa-square fa-stack-1x"></i>
<i style="padding: 0; color: #348e0f; font-size: 95px;" class="fa fa-square fa-stack-1x"></i>
<i style="padding: 0; color: #fff; font-size: 60px;" class="fa fa-circle fa-stack-1x"></i>
@ -31,36 +35,38 @@
</div>
<p class="right">Player Analytics v.${version}</p>
<h1>${serverName} | Server Analysis</h1>
</div>
</header>
<div class="content-server">
<div class="nav-bar row">
<a href="javascript:void(0)" class="nav-button">
<i class="fa fa-info-circle"></i> Information
</a>
<a href="javascript:void(0)" class="nav-button">
<i class="fa fa-bar-chart"></i> Online Activity
</a>
<a href="javascript:void(0)" class="nav-button">
<i class="fa fa-calendar"></i> Sessions
</a>
<a href="javascript:void(0)" class="nav-button">
<i class="fa fa-cogs"></i> Performance
</a>
<a href="javascript:void(0)" class="nav-button">
<i class="fa fa-list-alt"></i> Playerlist
</a>
<a href="javascript:void(0)" class="nav-button">
<i class="fa fa-terminal"></i> Command usage
</a>
<a href="javascript:void(0)" class="nav-button">
<i class="fa fa-globe"></i> Demographics
</a>
<a href="javascript:void(0)" class="nav-button">
<i class="fa fa-cubes"></i> Plugins
</a>
</div>
<div id="limiter" class="main-limiter">
</div>
</header>
<div class="headwrap">
<div class="sidenav">
<a class="nav-button" href="javascript:void(0)"><div title="Information" class="sidenav-button">
<div><i class="fa fa-info-circle"></i></div>
</div></a>
<a class="nav-button" href="javascript:void(0)"><div title="Online Activity" class="sidenav-button">
<div><i class="fa fa-area-chart"></i></div>
</div></a>
<a class="nav-button" href="javascript:void(0)"><div title="Sessions" class="sidenav-button">
<div><i class="fa fa-calendar"></i></div>
</div></a>
<a class="nav-button" href="javascript:void(0)"><div title="Performance" class="sidenav-button">
<div><i class="fa fa-cogs"></i></div>
</div></a>
<a class="nav-button" href="javascript:void(0)"><div title="Playerlist" class="sidenav-button">
<div><i class="fa fa-users"></i></div>
</div></a>
<a class="nav-button" href="javascript:void(0)"><div title="Command Usage" class="sidenav-button">
<div><i class="fa fa-terminal"></i></div>
</div></a>
<a class="nav-button" href="javascript:void(0)"><div title="Demographics" class="sidenav-button">
<div><i class="fa fa-globe"></i></div>
</div></a>
<a class="nav-button" href="javascript:void(0)"><div title="Plugins" class="sidenav-button">
<div><i class="fa fa-cubes"></i></div>
</div></a>
</div>
<div class="content">
<div id="limiter" class="main-limiter">
<div id="main" class="main-wrapper" style="width: 800%;">
<div id="tab-information" class="tab">
<div class="row">
@ -332,6 +338,8 @@
${tabContentPlugins}
</div>
</div>
</div>
</div>
</div>
<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
@ -527,11 +535,6 @@
x.style.transform = "translate3d(" + value + "%,0px,0)";
};
}
</script>
</div>
</body>
</body>
</html>

106
Plan/src/main/resources/main.css
View File

@ -61,7 +61,7 @@ header {
top: 0;
left: 0;
width: 100%;
height: 80px;
height: 50px;
padding: 0;
background: #348e0f;
background-repeat: repeat;
@ -69,10 +69,9 @@ header {
}
header h1 {
font-weight: 500;
font-size: 48px;
font-size: 30px;
margin-top: 0;
margin-bottom: 0;
margin-left: 10px;
}
header p {
font-weight: 400;
@ -81,6 +80,52 @@ header div {
padding: 5px 20px;
}
.headwrap {
position: absolute;
top: 50px;
width: 97%;
}
.sidenav {
position: fixed;
left: 0;
width: 50px;
height: 100%;
background-color: #5da341;
z-index: 2;
}
.sidenav a {
color: #fff;
text-decoration: none;
}
.sidenav-button {
position: relative;
text-align: center;
height: 50px;
}
.sidenav-button-disabled {
opacity: 0.5;
}
.sidenav-button div {
position: relative;
font-size: 20px;
}
.sidenav-button div i {
margin-top: 13px;
}
.nav-button {
}
.sidenav-button:hover {
background: #89c471;
}
.right {
float: right;
}
@ -117,16 +162,16 @@ header div {
}
.content {
margin-top: 100px;
margin-left: 15%;
margin-right: 15%;
width: 70%;
position: relative;
left: 45px;
width: 100%;
box-sizing: content-box;
}
.content-server {
margin-top: 100px;
.content-centered {
position: relative;
width: 80%;
margin-left: 10%;
margin-right: 10%;
width: 80%;
}
.box-header {
color: #fff;
@ -178,23 +223,6 @@ header div {
flex-direction: column;
}
.nav-bar {
}
.nav-button {
font-size: 20px;
font-weight: 400;
padding: 5px 10px;
margin: 5px;
text-decoration: none!important;
color: #fff;
background: #5da341;
background-repeat: repeat;
}
.nav-button:hover {
background: #348e0f;
background-repeat: repeat;
}
.active {
background: #348e0f;
background-repeat: repeat;
@ -233,12 +261,11 @@ tr {
transform: translate3d(0, 0, 0);
opacity: 0;
transition: 1.5s;
width: 500%;
display: flex;
flex-direction: row;
}
.tab {
width: 20%;
width: 20%;
height: 100%;
display: flex;
align-content: flex-start;
@ -308,27 +335,6 @@ tr {
font-size: 19px;
}
}
@media only screen and (max-width: 1150px) {
header h1 {
font-weight: 400;
font-size: 40px;
}
.content {
margin-top: 100px;
margin-left: 0;
margin-right: 0;
width: 100%;
}
.content-server {
margin-top: 100px;
margin-left: 0;
margin-right: 0;
width: 100%;
}
.nav-bar {
flex-wrap:wrap;
}
}
@media only screen and (max-width: 850px) {
header h1 {
font-weight: 400;

6
Plan/test/main/java/com/djrapitops/plan/utilities/FormatUtilsTest.java
View File

@ -95,6 +95,12 @@ public class FormatUtilsTest {
assertEquals(expResult, result);
}
@Test
public void testFormatTimeStampMonths() {
long time = TimeAmount.DAY.ms() * 40L;
assertEquals("1 month, 10d ", FormatUtils.formatTimeAmount(time));
}
@Test
public void testRemoveLetters() {
String dataPoint = "435729847jirggu.eiwb¤#¤%¤#";