1
0

Merge pull request #1509 from WebFreak001/master

Made WebAdmin more modern
This commit is contained in:
Mattes D 2014-10-06 10:46:46 +02:00
commit 75003e1537
4 changed files with 475 additions and 309 deletions

View File

@ -30,5 +30,6 @@ xoft
Yeeeeezus (Donated AlchemistVillage prefabs) Yeeeeezus (Donated AlchemistVillage prefabs)
Howaner Howaner
Masy98 Masy98
WebFreak001
Please add yourself to this list if you contribute to MCServer. Please add yourself to this list if you contribute to MCServer.

View File

@ -1,326 +1,353 @@
/* reset CSS */ body, html
{
font-family: "Open Sans", Tahoma, sans-serif;
padding: 0;
margin: 0;
font-weight: 400;
background-color: #fbe9e7;
color: rgba(0, 0, 0, 0.87);
}
html, body, div, span, applet, object, iframe, .light { font-weight: 300; }
h1, h2, h3, h4, h5, h6, p, blockquote, pre, .bold { font-weight: 600; }
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, #wrapper
small, strike, strong, sub, sup, tt, var, {
b, u, i, center, background-color: #ff5722;
dl, dt, dd, ol, ul, li, margin: 40px auto;
fieldset, form, label, legend, width: 99%;
table, caption, tbody, tfoot, thead, tr, th, td { max-width: 1200px;
box-sizing: border-box;
-moz-box-sizing: border-box;
box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.15);
color: rgba(0, 0, 0, 0.87);
}
.title
{
font-size: 30pt;
padding: 10px 40px;
text-decoration: none;
color: white;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3);
display: block;
}
#sidebar
{
float: left;
width: 20%;
}
.sideNav
{
list-style: none;
background-color: #fafafa;
margin: 20px 0;
padding: 5px 0;
width: 100%;
box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.2);
}
.sideNav li
{
padding: 10px;
color: rgba(0, 0, 0, 0.54);
}
.sideNav li.link
{
padding-left: 30px;
}
.sideNav li.link a
{
text-decoration: none;
color: rgba(0, 0, 0, 0.87);
}
#container
{
margin: 0; margin: 0;
padding: 0; padding: 0;
border: 0; overflow: hidden;
outline: 0; background-color: #f5f5f5;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
} }
/* remember to define focus styles! */ #main
:focus { {
outline: 0; float: right;
width: 80%;
padding: 0 15px 20px 15px;
box-sizing: border-box;
-moz-box-sizing: border-box;
} }
/* remove textarea resize at Safari */ .clear
textarea { {
resize: none; clear: both;
} }
/* remember to highlight inserts somehow! */ table
ins { {
text-decoration: none; width: 100%;
}
del {
text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0;
} }
table td
{
padding: 5px;
}
/* table th
Origional from http://www.perspectived.com/ {
Modified by Ben Phelps border-bottom: 1px solid rgba(0, 0, 0, 0.12);
Made for FakeTruth - MCServer padding: 5px;
*/
/* Basic ---------------------------------------- */
.clear { clear: both; }
body {
background: white;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #646464;
text-align: center; text-align: center;
} }
#wrapper { table tr:nth-child(odd)
text-align: left; {
width: 930px; background-color: rgba(0, 0, 0, 0.015);
margin: 0 auto;
} }
/* Logo ---------------------------------------- */ p
{
h1 { margin: 8px 0;
margin: 15px 0 10px 5px; padding: 8px 3px;
width: 180px;
height: 36px;
background: url(logo.png) no-repeat left top;
} }
h1 a { a
{
text-decoration: none;
color: #0277bd;
-webkit-transition: color 0.1s linear;
-moz-transition: color 0.1s linear;
transition: color 0.1s linear;
}
a:hover
{
color: #01579b;
}
.welcome-msg
{
color: rgba(0, 0, 0, 0.54);
}
.username
{
text-transform: capitalize;
color: rgba(0, 0, 0, 0.87);
}
a:hover
{
color: black;
}
input, select
{
padding: 8px;
}
form
{
padding: 4px;
}
.info input[type="submit"], .info button, .info input[type="button"],
.warn input[type="submit"], .warn button, .warn input[type="button"],
.err input[type="submit"], .err button, .err input[type="button"]
{
float: right;
}
.err
{
color: white;
display: block; display: block;
width: 225px; background-color: #e51c23 !important;
height: 28px; padding: 15px;
line-height: 30px;
min-height: 30px;
} }
h1 span { display: none; } .err:before
{
a { content: "ERROR: ";
color: #646464;
} }
/* Container ---------------------------------------- */ .warn
{
#containerHolder { color: white;
background: #eee; display: block;
padding: 5px; background-color: #ff5722 !important;
padding: 15px;
line-height: 30px;
min-height: 30px;
} }
.warn:before
#container { {
background: #fff url(background.gif) repeat-y left top; content: "WARNING: ";
border: 1px solid #ddd;
width: 918px;
} }
#connectHolder { .info
background: #eee; {
padding: 5px; color: white;
margin-bottom:8px; display: block;
background-color: #5677fc !important;
padding: 15px;
line-height: 30px;
min-height: 30px;
} }
.info:before
#connect { {
border: 1px solid #ddd; content: "INFORMATION: ";
background-color: #fff;
padding:5px;
width: 908px;
} }
.pics { #footer .fleft
height: 375px; {
width: 600px;
}
.pics img {
padding: 5px;
border: 1px solid #ddd;
background-color: #eee;
width: 600px;
height: 375px;
margin-left: 15px;
}
/* Login -------------------------------------- */
#loginLogo {
margin: 0 auto;
margin-top:100px;
width: 180px;
height: 36px;
background-image: url(logo.png);
}
#loginHolder {
background: #eee;
padding: 5px;
width: 310px;
margin: 0 auto;
height: 90px;
margin-top:20px;
}
#login {
padding:10px;
width: 288px;
height: 68px;
border: 1px solid #ddd;
background:#fff;
text-align: left;
}
/* Sidebar ---------------------------------------- */
#sidebar {
width: 179px;
float: left; float: left;
} }
#sidebar .sideNav { width: 179px; } #footer .fright
{
#sidebar .sideNav li { border-bottom: 1px solid #ddd; width: 179px; }
#sidebar .sideNav li a {
display: block;
color: #646464;
background: #f6f6f6;
text-decoration: none;
height: 29px;
line-height: 29px;
padding: 0 19px;
width: 141px;
}
#sidebar .sideNav li a:hover { background: #fdfcf6; }
#sidebar .sideNav li a.active, #sidebar .sideNav li a.active:hover {
background: #f0f7fa;
color: #c66653;
}
/* Breadcrumb ---------------------------------------- */
h2 {
width: 718px;
float: right; float: right;
color: #646464;
font-size: 16px;
line-height: 16px;
font-weight: bold;
margin: 20px 0 0 0;
padding: 0 0 10px 0;
border-bottom: 1px solid #ddd;
}
h2 a {
color: #646464;
text-decoration: none;
}
h2 a.active { color: #c66653; }
h2 a:hover { text-decoration: underline; }
/* Content ---------------------------------------- */
#main {
width: 700px;
float: right;
padding: 0 19px 0 0;
}
#main p {
padding: 10px;
}
h3 {
font-size: 14px;
line-height: 14px;
font-weight: bold;
color: #5494af;
padding: 0 0 0 10px;
margin: 20px 0 10px;
}
h4 {
padding: 0 0 0 10px;
margin: 20px 0 10px;
}
#main ul {
padding: 0 0 0 10px;
list-style-type: circle;
list-style-position: inside;
}
#main table {
border-top: 1px solid #ddd;
width: 700px;
}
#main table tr th {
text-align: left;
background: #f6f6f6;
padding: 0px 20px;
height: 20px;
line-height: 20px;
border-bottom: 1px solid #ddd;
}
#main table tr td {
background: #f6f6f6;
padding: 0px 20px;
height: 29px;
line-height: 29px;
border-bottom: 1px solid #ddd;
}
#main table tr.odd td {
background: #fbfbfb;
}
#main table tr:hover td { background: #fdfcf6; }
#main table .action {
text-align: right; text-align: right;
padding: 0 20px 0 10px;
} }
#main table tr .action a { margin: 0 0 0 10px; text-decoration: none; color: #9b9b9b; } #footer
#main table tr:hover .action .edit { color: #c5a059; } {
#main table tr:hover .action .delete { color: #a02b2b; } margin: 0;
#main table tr:hover .action .view { color: #55a34a; } padding: 10px;
font-size: 9pt;
#main table tr:hover .action a:hover { text-decoration: underline; } color: rgba(255, 255, 255, 0.8);
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2) inset;
fieldset {
border: 1px solid #ddd;
padding: 19px;
margin: 0 0 20px 0;
background: #fbfbfb;
} }
form p { margin: 0 0 14px 0; float: left; width: 100%; } #footer a
{
text-transform: none;
color: white;
}
label { input[type="submit"], button, input[type="button"]
display: block; {
background-color: #ffc107;
padding: 8px 15px 8px 15px;
margin: 0 2px;
display: inline-block;
text-align: center;
color: black;
box-shadow: 0px 2px 3px rgba(0,0,0,0.2);
border: none;
outline: none;
cursor: pointer;
}
input[type="submit"]:hover, button:hover, input[type="button"]:hover
{
background-color: #ffca28;
}
input[type="submit"]:active, button:active, input[type="button"]:active
{
background-color: #ffd54f;
-webkit-transform: translateY(1px);
-moz-transform: translateY(1px);
transform: translateY(1px);
}
hr
{
border: none;
height: 1px;
background-color: rgba(0, 0, 0, 0.12);
}
h4
{
padding-bottom: 10px;
margin-bottom: 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
/**** PAGE SPECIFIC CSS ****/
/* remove the * for disabling: */
.page-core-server-settings table td
{
text-align: center;
width: 25%;
}
.page-core-server-settings.no-param table td:nth-child(1) a,
.page-core-server-settings.param-tab-general table td:nth-child(1) a
{
font-weight: 600;
color: rgba(0, 0, 0, 0.87);
}
.page-core-server-settings.param-tab-monsters table td:nth-child(2) a
{
font-weight: 600;
color: rgba(0, 0, 0, 0.87);
}
.page-core-server-settings.param-tab-worlds table td:nth-child(3) a
{
font-weight: 600;
color: rgba(0, 0, 0, 0.87);
}
.page-core-server-settings.param-tab-world table td:nth-child(4) a
{
font-weight: 600;
color: rgba(0, 0, 0, 0.87);
}
.page-core-permissions form table tr,
.page-core-permissions form table td,
.page-core-permissions form table th
{
border: none;
background-color: transparent;
}
.page-core-permissions form table tr:nth-child(1) th
{
width: 35%;
}
.page-core-permissions form table tr:nth-child(1) td
{
width: 65%;
}
.page-core-permissions form table td input
{
width: 100%; width: 100%;
margin: 0 0 7px 0; box-sizing: border-box;
line-height: 12px; -moz-box-sizing: border-box;
margin: 0;
} }
/* Footer ---------------------------------------- */ #ChatDiv
{
#footer { margin-bottom: 10px;
margin: 10px 0 30px 0;
font-size: 11px;
line-height: 11px;
color: #9B9B9B;
padding: 0 0 0 5px;
} }
#footer a { color: #9B9B9B; } #ChatMessage
{
width: 100%;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
#footer a:hover { text-decoration: none; } /**/

View File

@ -70,25 +70,33 @@ function ShowPage(WebAdmin, TemplateRequest)
PageContent, SubTitle = GetDefaultPage() PageContent, SubTitle = GetDefaultPage()
end end
local reqParamsClass = ""
for key,value in pairs(TemplateRequest.Request.Params) do
reqParamsClass = reqParamsClass .. " param-" .. string.lower(string.gsub(key, "[^a-zA-Z0-9]+", "-") .. "-" .. string.gsub(value, "[^a-zA-Z0-9]+", "-"))
end
if (string.gsub(reqParamsClass, "%s", "") == "") then
reqParamsClass = " no-param"
end
Output([[ Output([[
<!DOCTYPE html> <!DOCTYPE html>
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<title>]] .. Title .. [[</title> <title>]] .. Title .. [[</title>
<link rel="stylesheet" type="text/css" media="screen" href="/style.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="/style.css">
</head> </head>
<body> <body>
<div id="wrapper"> <div id="wrapper">
<!-- h1 tag stays for the logo, you can use the a tag for linking the index page --> <div id="containerHolder">
<h1> <a href="./" class="title light">MCServer</a>
<a href="]] .. BaseURL .. [["><span>MCServer</span></a> <div id="container">
</h1> <div id="sidebar">
<div id="containerHolder"> <ul class="sideNav">
<div id="container"> <li class='link'><a href=']] .. BaseURL .. [['>Home</a></li>
<div id="sidebar">
<ul class="sideNav">
]]) ]])
@ -100,7 +108,7 @@ function ShowPage(WebAdmin, TemplateRequest)
Output("<li>"..PluginWebTitle.."</li>\n"); Output("<li>"..PluginWebTitle.."</li>\n");
for webname,prettyname in pairs(TabNames) do for webname,prettyname in pairs(TabNames) do
Output("<li><a href='" .. BaseURL .. PluginWebTitle .. "/" .. webname .. "'>" .. prettyname .. "</a></li>\n") Output("<li class='link'><a href='" .. BaseURL .. PluginWebTitle .. "/" .. webname .. "'>" .. prettyname .. "</a></li>\n")
end end
end end
end end
@ -108,30 +116,23 @@ function ShowPage(WebAdmin, TemplateRequest)
Output([[ Output([[
</ul> </ul>
<!-- // .sideNav -->
</div>
<!-- // #sidebar -->
<!-- h2 stays for breadcrumbs -->
<h2>Welcome ]] .. TemplateRequest.Request.Username .. [[</h2>
<div id="main">
<h3>]] .. SubTitle .. [[</h3>
]] .. PageContent .. [[
</div>
<!-- // #main -->
<div class="clear"></div>
</div> </div>
<!-- // #container -->
</div>
<!-- // #containerHolder -->
<p id="footer">MCServer is using: ]] .. MemoryUsageKiB / 1024 .. [[ MiB of memory; Current chunk count: ]] .. NumChunks .. [[ </p> <div id="main" class="page-]] .. string.lower(PluginPage.PluginName .. "-" .. string.gsub(PluginPage.TabName, "[^a-zA-Z0-9]+", "-")) .. reqParamsClass .. [[">
<h2 class="welcome-msg">Welcome <span class="username">]] .. TemplateRequest.Request.Username .. [[</span></h2>
<hr/>
<h3>]] .. SubTitle .. [[</h3>
]] .. PageContent .. [[</div>
<div class="clear"></div>
</div>
</div> </div>
<!-- // #wrapper --> <div id="footer"><div class="fleft">running MCServer using <span class="bold">]] .. MemoryUsageKiB / 1024 .. [[MB</span> of memory; <span class="bold">]] .. NumChunks .. [[</span> chunks</div><div class="fright">design by <a href="//www.github.com/WebFreak001">WebFreak001</a></div><div class="clear"></div></div>
</div>
</body> </body>
</html> </html>
]]) ]])
return table.concat(SiteContent) return table.concat(SiteContent)
end end

View File

@ -0,0 +1,137 @@
-- Use a table for fast concatenation of strings
local SiteContent = {}
function Output(String)
table.insert(SiteContent, String)
end
function GetTableSize(Table)
local Size = 0
for key,value in pairs(Table) do
Size = Size + 1
end
return Size
end
function GetDefaultPage()
local PM = cRoot:Get():GetPluginManager()
local SubTitle = "Current Game"
local Content = ""
Content = Content .. "<h4>Server Name:</h4>"
Content = Content .. "<p>" .. cRoot:Get():GetServer():GetServerID() .. "</p>"
Content = Content .. "<h4>Plugins:</h4><ul>"
local AllPlugins = PM:GetAllPlugins()
for key,value in pairs(AllPlugins) do
if( value ~= nil and value ~= false ) then
Content = Content .. "<li>" .. key .. " V." .. value:GetVersion() .. "</li>"
end
end
Content = Content .. "</ul>"
Content = Content .. "<h4>Players:</h4><ul>"
local AddPlayerToTable = function( Player )
Content = Content .. "<li>" .. Player:GetName() .. "</li>"
end
cRoot:Get():ForEachPlayer( AddPlayerToTable )
Content = Content .. "</ul><br>";
return Content, SubTitle
end
function ShowPage(WebAdmin, TemplateRequest)
SiteContent = {}
local BaseURL = WebAdmin:GetBaseURL(TemplateRequest.Request.Path)
local Title = "MCServer WebAdmin"
local MemoryUsageKiB = cRoot:GetPhysicalRAMUsage()
local NumChunks = cRoot:Get():GetTotalChunkCount()
local PluginPage = WebAdmin:GetPage(TemplateRequest.Request)
local PageContent = PluginPage.Content
local SubTitle = PluginPage.PluginName
if (PluginPage.TabName ~= "") then
SubTitle = PluginPage.PluginName .. " - " .. PluginPage.TabName
end
if (PageContent == "") then
PageContent, SubTitle = GetDefaultPage()
end
Output([[
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="icon" href="/favicon.ico">
<title>]] .. Title .. [[</title>
<link rel="stylesheet" type="text/css" media="screen" href="/style.css">
</head>
<body>
<div id="wrapper">
<!-- h1 tag stays for the logo, you can use the a tag for linking the index page -->
<h1>
<a href="]] .. BaseURL .. [["><span>MCServer</span></a>
</h1>
<div id="containerHolder">
<div id="container">
<div id="sidebar">
<ul class="sideNav">
]])
local AllPlugins = WebAdmin:GetPlugins()
for key,value in pairs(AllPlugins) do
local PluginWebTitle = value:GetWebTitle()
local TabNames = value:GetTabNames()
if (GetTableSize(TabNames) > 0) then
Output("<li>"..PluginWebTitle.."</li>\n");
for webname,prettyname in pairs(TabNames) do
Output("<li><a href='" .. BaseURL .. PluginWebTitle .. "/" .. webname .. "'>" .. prettyname .. "</a></li>\n")
end
end
end
Output([[
</ul>
<!-- // .sideNav -->
</div>
<!-- // #sidebar -->
<!-- h2 stays for breadcrumbs -->
<h2>Welcome ]] .. TemplateRequest.Request.Username .. [[</h2>
<div id="main">
<h3>]] .. SubTitle .. [[</h3>
]] .. PageContent .. [[
</div>
<!-- // #main -->
<div class="clear"></div>
</div>
<!-- // #container -->
</div>
<!-- // #containerHolder -->
<p id="footer">MCServer is using: ]] .. MemoryUsageKiB / 1024 .. [[ MiB of memory; Current chunk count: ]] .. NumChunks .. [[ </p>
</div>
<!-- // #wrapper -->
</body>
</html>
]])
return table.concat(SiteContent)
end