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

- MCServer -

-
-
-
- + +
- ]]) +]]) return table.concat(SiteContent) end diff --git a/MCServer/webadmin/template_orig.lua b/MCServer/webadmin/template_orig.lua new file mode 100644 index 000000000..a7480f83e --- /dev/null +++ b/MCServer/webadmin/template_orig.lua @@ -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 .. "

Server Name:

" + Content = Content .. "

" .. cRoot:Get():GetServer():GetServerID() .. "

" + + Content = Content .. "

Plugins:

" + Content = Content .. "

Players:


"; + + 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([[ + + + + +]] .. Title .. [[ + + + + +
+ +

+ MCServer +

+
+
+ + + +

Welcome ]] .. TemplateRequest.Request.Username .. [[

+
+

]] .. SubTitle .. [[

+ ]] .. PageContent .. [[ +
+ + +
+ +
+ +
+ + + +
+ + + + ]]) + + return table.concat(SiteContent) +end -- cgit v1.2.3