From 61670421684dc173a4c6ca385703274a9a81bc21 Mon Sep 17 00:00:00 2001
From: mxmehl <mail@mehl.mx>
Date: Thu, 9 Jul 2015 12:23:07 +0300
Subject: [PATCH] improve show/hide function

---
 index.php        | 42 +++++++++++++++++++-----------------
 static/style.css | 56 +++++++++++++++++++++++++++++++++++++-----------
 2 files changed, 66 insertions(+), 32 deletions(-)
diff --git a/index.php b/index.php
index f87706e..7e915ac 100644
--- a/index.php
+++ b/index.php
@@ -1,4 +1,5 @@
-<html>
+<!DOCTYPE html>
+<html lang="en_EN">
 <head>
   <meta charset="utf-8">
   <title>UAAP | Uberspace Account Administration Panel</title>
@@ -23,26 +24,27 @@
 <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" />
+  <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">Show &#187;</i>
+      <i class="hide">&#171; Hide</i>
       <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 -->
+      <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>
diff --git a/static/style.css b/static/style.css
index bb153f7..7ac120c 100644
--- a/static/style.css
+++ b/static/style.css
@@ -25,20 +25,52 @@ button {
 
 /* 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;}
+#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;}
+#outer div.more i {
+  float:left;
+  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 form {
+  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;}
+#outer div.click i.show {
+  display:none;
+}
+#outer div.click i.hide {
+  display:block;
+}
+#outer div.click p {
+  display:block;
+}
+#outer div.click form {
+  display:block;
+}
 
