header: hide login box until hover

Signed-off-by: Florian Pritz <bluewind@xinu.at>

2 files changed, 26 insertions, 5 deletions

diff --git a/application/views/file/header.php b/application/views/file/header.php
index 215584cc5..896b9c894 100644
--- a/application/views/file/header.php
+++ b/application/views/file/header.php
@@ -18,11 +18,16 @@
 			<?php if(isset($username) && $username) { ?>
 				<?=anchor("user/logout", "Logout"); ?>
 			<?php } else { ?>
-				<?=form_open("user/login"); ?>
-					<input type="text" name="username" />
-					<input type="password" name="password" />
-					<input type="submit" value="Login" name="process" />
-				</form>
+				<a>
+					Login
+					<div id="login-form">
+						<?=form_open("user/login"); ?>
+							<input type="text" name="username" />
+							<input type="password" name="password" />
+							<input type="submit" value="Login" name="process" />
+						</form>
+					</div>
+				</a>
 			<?php } ?>
 		</div>
 	</div>
diff --git a/data/default.css b/data/default.css
index 399ca1410..cd8b1af8e 100644
--- a/data/default.css
+++ b/data/default.css
@@ -56,6 +56,22 @@ p, li {
 	padding-right: 10px;
 }
 
+#login-form {
+	visibility: hidden;
+	position: absolute;
+	right: 0;
+	top: 0;
+
+	/* these help to keep the box displayed once the user hovered over login*/
+	padding-top: 35px;
+	padding-left: 10px;
+	padding-bottom: 10px;
+}
+
+a:hover #login-form {
+	visibility: visible;
+}
+
 .top a {
   color: lightblue;
 }