try show/hie button for more oversight

This commit is contained in:
2015-07-09 12:08:09 +03:00
parent ec1f97ac7c
commit 23a440f9c3
4 changed files with 97 additions and 38 deletions

View File

@@ -2,9 +2,10 @@
<head>
<meta charset="utf-8">
<title>UAAP | Uberspace Account Administration Panel</title>
<link rel='stylesheet' href='/style.css' type='text/css' media='all' />
<link rel='stylesheet' href='/static/style.css' type='text/css' media='all' />
<script src="/static/click_toggle.js" type="text/javascript"></script>
</head>
<body>
<body onload="clickMenu('outer','div','more')">
<h1>Account Administration Panel</h1>
@@ -21,18 +22,28 @@
<hr />
<hr />
<h2 id="adduser">Add an Email account</h2>
<form action="submit.php" method="post">
<label>Username:</label>
<input name="user" title="User" />
<label>Password:</label>
<input name="pass" title="Password" type="password" />
<br />
<button type="submit" name="action" value="adduser">Add new account</button>
<!-- Hidden confirmation box -->
<input type="hidden" name="sure" value="yes" />
</form>
<hr />
<div id="outer">
<div class="holder">
<h2 id="adduser">Add an Email account</h2>
<p>You can add a new Email account your primary and all other domains.<br />
Please do not add your domain, just everything in front of the @-symbol.</p>
<div class="more">
<i class="show">more &#187;</i>
<i class="hide">&#171; less</i>
<form action="submit.php" method="post">
<label>Username:</label>
<input name="user" title="User" />
<label>Password:</label>
<input name="pass" title="Password" type="password" />
<br />
<button type="submit" name="action" value="adduser">Add new account</button>
<!-- Hidden confirmation box -->
<input type="hidden" name="sure" value="yes" />
</form>
</div> <!-- /more -->
<hr />
</div> <!-- /holder -->
</div> <!-- outer -->
<h2 id="changepw">Change password of an Email account</h2>
<form action="submit.php" method="post">

28
static/click_toggle.js Normal file
View File

@@ -0,0 +1,28 @@
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this script and the associated (x)html
is available at http://www.stunicholls.com/various/more.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This script and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
clickMenu = function(menu,element,cname) {
var getEls = document.getElementById(menu).getElementsByTagName(element);
for (var i=0; i<getEls.length; i++) {
getEls[i].onclick=function() {
if ((this.className.indexOf(cname))!=-1)
{
if ((this.className.indexOf('click'))!=-1) {
this.className=this.className.replace("click", "");;
}
else {
this.className+=" click";
}
}
}
}
}

44
static/style.css Normal file
View File

@@ -0,0 +1,44 @@
body {
color: #333;
font-family: Arial,Helvetica,sans-serif;
font-size: 100%;
}
body warn {
color: #FF0000;
}
label {
display: block;
margin-top: 10px;
}
button {
margin-top: 5px;
}
.boxed {
background: #ECF4FF none repeat scroll 0 0;
border: 1px solid green;
padding: 6px;
}
/* Click Toogle */
/* always visible */
#outer .holder {padding:1em; border:1px solid #ddd; margin:0 20px 10px 0;}
#outer .holder p {padding:5px 0 0 0; margin:0;}
#outer .holder p.bold {font-weight:bold;}
#outer .holder h2 {margin:0; padding:0;}
/* unclicked style div.more */
#outer div.more i {float:right; margin-right:-10px 10px 0 0; cursor:pointer; color:#c00; font-weight:bold;}
#outer div.more i.hide {display:none;}
#outer div.more p {display:none;}
#outer div.more img {display:none;}
/* clicked style div.click */
#outer div.click i.show {display:none;}
#outer div.click i.hide {display:block;}
#outer div.click p {display:block;}
#outer div.click img {display:block; float:left; padding-right:10px;}

View File

@@ -1,24 +0,0 @@
body {
color: #333;
font-family: Arial,Helvetica,sans-serif;
font-size: 100%;
}
body warn {
color: #FF0000;
}
label {
display: block;
margin-top: 10px;
}
button {
margin-top: 5px;
}
.boxed {
background: #ECF4FF none repeat scroll 0 0;
border: 1px solid green;
padding: 6px;
}