From 5897c437b4dfa66a094bb9eb52c7c85eea077387 Mon Sep 17 00:00:00 2001 From: Georg Hopp Date: Sat, 9 Nov 2013 20:34:28 +0000 Subject: [PATCH] make signup and login popup visually more fitting to the rest of the pages. --- assets/html/_author.html | 32 +++++++----- assets/html/_login.html | 24 +++++++-- assets/html/_signup.html | 42 +++++++++++----- assets/html/layout.html | 40 ++++++++++++++- assets/js/init.js | 38 ++++++++++++--- assets/style/common.css | 22 +++------ assets/style/taskrambler.css | 94 ++++++++++++++++++++++++------------ 7 files changed, 210 insertions(+), 82 deletions(-) diff --git a/assets/html/_author.html b/assets/html/_author.html index 1b9c40e..08010ce 100644 --- a/assets/html/_author.html +++ b/assets/html/_author.html @@ -1,15 +1,23 @@ -
-
-
-
-
-
- -
-
-
-
-
+
+ + + + + + + + + + + + + + + + +
+ +

The Author

diff --git a/assets/html/_login.html b/assets/html/_login.html index 688bb1c..799627c 100644 --- a/assets/html/_login.html +++ b/assets/html/_login.html @@ -1,9 +1,23 @@ +

Login

+
- -
- -
- +
+ + +
+
+ +
+
+
+
+
+
+
+
+
+ +
diff --git a/assets/html/_signup.html b/assets/html/_signup.html index 166f176..8390746 100644 --- a/assets/html/_signup.html +++ b/assets/html/_signup.html @@ -1,15 +1,35 @@ +

Signup

+
- -
- -
- -
- -
- -
- +
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+ +
+
+
+
+
+
+
+
+
+ +
diff --git a/assets/html/layout.html b/assets/html/layout.html index 4809eb1..7c02496 100644 --- a/assets/html/layout.html +++ b/assets/html/layout.html @@ -17,10 +17,46 @@ -
+
+ + + + + + + + + + + + + + + + +
+
-
+
+ + + + + + + + + + + + + + + + +
+
diff --git a/assets/js/init.js b/assets/js/init.js index 5baefe8..47ddd9a 100644 --- a/assets/js/init.js +++ b/assets/js/init.js @@ -25,12 +25,26 @@ $(document).ready(function() { $("#main").load(asset); $("#menu").load("/_menu.html", function() { - $("div#menu ul li.signup").click(function() { - $("#signup").removeClass("hide"); + $("div#menu ul li.signup").click(function(e) { + if ($("#signup-container").hasClass("hide")) { + $("#login-container").addClass("hide"); + $("#signup-container").css("top", e.pageY + 20); + $("#signup-container").css("left", e.pageX - 100); + $("#signup-container").removeClass("hide"); + } else { + $("#signup-container").addClass("hide"); + } }); - $("div#menu ul li.login").click(function() { - $("#login").removeClass("hide"); + $("div#menu ul li.login").click(function(e) { + if ($("#login-container").hasClass("hide")) { + $("#signup-container").addClass("hide"); + $("#login-container").css("top", e.pageY + 20); + $("#login-container").css("left", e.pageX - 100); + $("#login-container").removeClass("hide"); + } else { + $("#login-container").addClass("hide"); + } }); }); @@ -63,7 +77,11 @@ $(document).ready(function() { $("#login").load("/_login.html", function (){ $(function() { - $( "#login" ).draggable(); + $("#login-container").draggable(); + }); + + $("#login-close").click(function (e) { + $("#login-container").addClass("hide"); }); $("#login form").submit(function(event) { @@ -71,14 +89,18 @@ $(document).ready(function() { $.post("/authenticate/", $("#login form").serialize(), $.proxy(sess.loadUserJSON, sess)); - $("#login").addClass("hide"); + $("#login-container").addClass("hide"); $.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess)); }); }); $("#signup").load("/_signup.html", function (){ $(function() { - $( "#signup" ).draggable(); + $("#signup-container").draggable(); + }); + + $("#signup-close").click(function (e) { + $("#signup-container").addClass("hide"); }); $("#signup form").submit(function(event) { @@ -86,7 +108,7 @@ $(document).ready(function() { $.post("/signup/", $("#signup form").serialize(), $.proxy(sess.loadUserJSON, sess)); - $("#signup").addClass("hide"); + $("#signup-container").addClass("hide"); $.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess)); }); }); diff --git a/assets/style/common.css b/assets/style/common.css index 3f02671..42663a9 100644 --- a/assets/style/common.css +++ b/assets/style/common.css @@ -12,31 +12,25 @@ div#randval { z-index: 20; } -div#signup { +div#signup-container { -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.5); -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.5); box-shadow: 0 4px 8px rgba(0,0,0,0.5); - padding: 5px; - top: 20px; - left: 20px; + padding: 0px; position: fixed; - background-color: white; - border: 1px solid black; - border-radius: 10px; + background-image: url(/image/rambler-bg.jpg); + border-radius: 5px; z-index: 20; } -div#login { +div#login-container { -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.5); -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.5); box-shadow: 0 4px 8px rgba(0,0,0,0.5); - padding: 5px; - top: 20px; - left: 20px; + padding: 0px; position: fixed; - background-color: white; - border: 1px solid black; - border-radius: 10px; + background-image: url(/image/rambler-bg.jpg); + border-radius: 5px; z-index: 20; } diff --git a/assets/style/taskrambler.css b/assets/style/taskrambler.css index 60a7147..834af72 100644 --- a/assets/style/taskrambler.css +++ b/assets/style/taskrambler.css @@ -38,89 +38,99 @@ h2 { font-size: 20px; } -h3 { +h3,h4 { font-family: old_newspaper; font-weight: bold; font-size: 15px; text-decoration: underline; } +h4 { + margin: 0px; + display: inline-block; +} + hr { height: 10px; border: none; background: url(/image/rambler-border-t.jpg); } +.left { + float: left; +} + +.right { + float: right; +} + +.link { + cursor: pointer; +} + div.border { - padding: 0px; - margin: 0px; + padding: 0px; + margin: 0px; + display: block; +} + +div.border table { + border-spacing: 0; + border-collapse: collapse; } -div.border div { +div.border td { padding: 0px; margin: 0px; } -div.border div.tl { - float: left; +div.border .tl { width: 10px; height: 10px; background: url(/image/rambler-border-tl.jpg); } -div.border div.t { - float: left; - width: 250px; +div.border .t { + width: auto; height: 10px; background: url(/image/rambler-border-t.jpg); } -div.border div.tr { - float: left; +div.border .tr { width: 10px; height: 10px; background: url(/image/rambler-border-tr.jpg); } -div.border div.l { - clear: left; - float: left; +div.border .l { width: 10px; - height: 250px; + height: 100%; background: url(/image/rambler-border-l.jpg); } -div.border div.img { - float: left; - background: url(/image/rambler-border-tr.jpg); +div.border .content { } -div.border div.r { - float: left; - margin-right: 20px; +div.border .r { width: 10px; - height: 250px; + height: 100%; background: url(/image/rambler-border-r.jpg); } -div.border div.bl { - clear: left; - float: left; +div.border .bl { width: 10px; height: 10px; background: url(/image/rambler-border-bl.jpg); } -div.border div.b { - float: left; - width: 250px; +div.border .b { + width: auto; height: 10px; background: url(/image/rambler-border-b.jpg); } -div.border div.br { - float: left; +div.border .br { width: 10px; height: 10px; background: url(/image/rambler-border-br.jpg); @@ -251,6 +261,30 @@ div.border div.br { vertical-align: center; } +#login label, #signup label { + font-family: old_newspaper; + font-size: 15px; + font-weight: bold; + color: rgb(42,44,40); + display: table-cell; +} + +#login input, #signup input { + display: table-cell; +} + +#login div, #signup div { + display: table-row; +} + +#login form, #signup form { + display: table; +} + +#login form hr, #signup form hr { + display: table-cell; +} + #menu ul div { width: 100%; display: inline-block;