taskrambler / taskrambler · Commits

Commit 5897c437b4dfa66a094bb9eb52c7c85eea077387

Authored by Georg Hopp
1 parent cc23d732

make signup and login popup visually more fitting to the rest of the pages.

Inline Side-by-side
Showing 7 changed files with 210 additions and 82 deletions
1 -<div class="border">  
2 - <div class="tl"></div>  
3 - <div class="t"></div>  
4 - <div class="tr"></div>  
5 - <div class="l"></div>  
6 - <div class="img">  
7 - <img src="/image/waldschrat.jpg" />  
8 - </div>  
9 - <div class="r"></div>  
10 - <div class="bl"></div>  
11 - <div class="b"></div>  
12 - <div class="br"></div> 1 +<div class="border left">
  2 + <table>
  3 + <tr>
  4 + <td class="tl"></td>
  5 + <td class="t"></td>
  6 + <td class="tr"></td>
  7 + </tr>
  8 + <td class="l"></td>
  9 + <td class="content">
  10 + <img src="/image/waldschrat.jpg" />
  11 + </td>
  12 + <td class="r"></td>
  13 + <tr>
  14 + </tr>
  15 + <tr>
  16 + <td class="bl"></td>
  17 + <td class="b"></td>
  18 + <td class="br"></td>
  19 + </tr>
  20 + </table>
13 </div> 21 </div>
14 22
15 <h1>The Author</h1> 23 <h1>The Author</h1>
  1 +<h4>Login</h4><div id="login-close" class="link right">(close)</div>
  2 +<hr />
1 <form> 3 <form>
2 - <label for="username">username</label>  
3 - <input type="text" name="username" /><br />  
4 - <label for="password">password</label>  
5 - <input type="password" name="password" /><br />  
6 - <input type="submit" /> 4 + <div>
  5 + <label for="username">username</label>
  6 + <input type="text" name="username" />
  7 + </div>
  8 + <div>
  9 + <label for="password">password</label>
  10 + <input type="password" name="password" /><br />
  11 + </div>
  12 + <div style="height: 10px;" />
  13 + <div>
  14 + <hr />
  15 + <hr />
  16 + </div>
  17 + <div style="height: 10px;" />
  18 + <div>
  19 + <input type="submit" />
  20 + </div>
7 </form> 21 </form>
8 22
9 <!-- vim: set ts=4 sw=4: --> 23 <!-- vim: set ts=4 sw=4: -->
  1 +<h4>Signup</h4><div id="signup-close" class="link right">(close)</div>
  2 +<hr />
1 <form> 3 <form>
2 - <label for="firstname">firstname</label>  
3 - <input type="text" name="firstname" /><br />  
4 - <label for="surname">surname</label>  
5 - <input type="text" name="surname" /><br />  
6 - <label for="mail">email</label>  
7 - <input type="text" name="email" /><br />  
8 - <label for="password">password</label>  
9 - <input type="password" name="password" /><br />  
10 - <label for="pwrepeat">password (again)</label>  
11 - <input type="password" name="pwrepeat" /><br />  
12 - <input type="submit" /> 4 + <div>
  5 + <label for="firstname">firstname</label>
  6 + <input type="text" name="firstname" /><br />
  7 + </div>
  8 + <div>
  9 + <label for="surname">surname</label>
  10 + <input type="text" name="surname" /><br />
  11 + </div>
  12 + <div>
  13 + <label for="mail">email</label>
  14 + <input type="text" name="email" /><br />
  15 + </div>
  16 + <div>
  17 + <label for="password">password</label>
  18 + <input type="password" name="password" /><br />
  19 + </div>
  20 + <div>
  21 + <label for="pwrepeat">password (again)</label>
  22 + <input type="password" name="pwrepeat" /><br />
  23 + </div>
  24 + <div style="height: 10px;" />
  25 + <div>
  26 + <hr />
  27 + <hr />
  28 + </div>
  29 + <div style="height: 10px;" />
  30 + <div>
  31 + <input type="submit" />
  32 + </div>
13 </form> 33 </form>
14 34
15 <!-- vim: set ts=4 sw=4: --> 35 <!-- vim: set ts=4 sw=4: -->
@@ -17,10 +17,46 @@ @@ -17,10 +17,46 @@
17 </head> 17 </head>
18 18
19 <body> 19 <body>
20 - <div id="login" class="ui-widget-content hide"> 20 + <div id="login-container" class="ui-widget-content border hide">
  21 + <table>
  22 + <tr>
  23 + <td class="tl"></td>
  24 + <td class="t"></td>
  25 + <td class="tr"></td>
  26 + </tr>
  27 + <td class="l"></td>
  28 + <td id ="login">
  29 + </td>
  30 + <td class="r"></td>
  31 + <tr>
  32 + </tr>
  33 + <tr>
  34 + <td class="bl"></td>
  35 + <td class="b"></td>
  36 + <td class="br"></td>
  37 + </tr>
  38 + </table>
21 </div> 39 </div>
22 40
23 - <div id="signup" class="ui-widget-content hide"> 41 + <div id="signup-container" class="ui-widget-content border hide">
  42 + <table>
  43 + <tr>
  44 + <td class="tl"></td>
  45 + <td class="t"></td>
  46 + <td class="tr"></td>
  47 + </tr>
  48 + <td class="l"></td>
  49 + <td id ="signup">
  50 + </td>
  51 + <td class="r"></td>
  52 + <tr>
  53 + </tr>
  54 + <tr>
  55 + <td class="bl"></td>
  56 + <td class="b"></td>
  57 + <td class="br"></td>
  58 + </tr>
  59 + </table>
24 </div> 60 </div>
25 61
26 <div id="page"> 62 <div id="page">
@@ -25,12 +25,26 @@ $(document).ready(function() { @@ -25,12 +25,26 @@ $(document).ready(function() {
25 $("#main").load(asset); 25 $("#main").load(asset);
26 26
27 $("#menu").load("/_menu.html", function() { 27 $("#menu").load("/_menu.html", function() {
28 - $("div#menu ul li.signup").click(function() {  
29 - $("#signup").removeClass("hide"); 28 + $("div#menu ul li.signup").click(function(e) {
  29 + if ($("#signup-container").hasClass("hide")) {
  30 + $("#login-container").addClass("hide");
  31 + $("#signup-container").css("top", e.pageY + 20);
  32 + $("#signup-container").css("left", e.pageX - 100);
  33 + $("#signup-container").removeClass("hide");
  34 + } else {
  35 + $("#signup-container").addClass("hide");
  36 + }
30 }); 37 });
31 38
32 - $("div#menu ul li.login").click(function() {  
33 - $("#login").removeClass("hide"); 39 + $("div#menu ul li.login").click(function(e) {
  40 + if ($("#login-container").hasClass("hide")) {
  41 + $("#signup-container").addClass("hide");
  42 + $("#login-container").css("top", e.pageY + 20);
  43 + $("#login-container").css("left", e.pageX - 100);
  44 + $("#login-container").removeClass("hide");
  45 + } else {
  46 + $("#login-container").addClass("hide");
  47 + }
34 }); 48 });
35 }); 49 });
36 50
@@ -63,7 +77,11 @@ $(document).ready(function() { @@ -63,7 +77,11 @@ $(document).ready(function() {
63 77
64 $("#login").load("/_login.html", function (){ 78 $("#login").load("/_login.html", function (){
65 $(function() { 79 $(function() {
66 - $( "#login" ).draggable(); 80 + $("#login-container").draggable();
  81 + });
  82 +
  83 + $("#login-close").click(function (e) {
  84 + $("#login-container").addClass("hide");
67 }); 85 });
68 86
69 $("#login form").submit(function(event) { 87 $("#login form").submit(function(event) {
@@ -71,14 +89,18 @@ $(document).ready(function() { @@ -71,14 +89,18 @@ $(document).ready(function() {
71 $.post("/authenticate/", 89 $.post("/authenticate/",
72 $("#login form").serialize(), 90 $("#login form").serialize(),
73 $.proxy(sess.loadUserJSON, sess)); 91 $.proxy(sess.loadUserJSON, sess));
74 - $("#login").addClass("hide"); 92 + $("#login-container").addClass("hide");
75 $.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess)); 93 $.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess));
76 }); 94 });
77 }); 95 });
78 96
79 $("#signup").load("/_signup.html", function (){ 97 $("#signup").load("/_signup.html", function (){
80 $(function() { 98 $(function() {
81 - $( "#signup" ).draggable(); 99 + $("#signup-container").draggable();
  100 + });
  101 +
  102 + $("#signup-close").click(function (e) {
  103 + $("#signup-container").addClass("hide");
82 }); 104 });
83 105
84 $("#signup form").submit(function(event) { 106 $("#signup form").submit(function(event) {
@@ -86,7 +108,7 @@ $(document).ready(function() { @@ -86,7 +108,7 @@ $(document).ready(function() {
86 $.post("/signup/", 108 $.post("/signup/",
87 $("#signup form").serialize(), 109 $("#signup form").serialize(),
88 $.proxy(sess.loadUserJSON, sess)); 110 $.proxy(sess.loadUserJSON, sess));
89 - $("#signup").addClass("hide"); 111 + $("#signup-container").addClass("hide");
90 $.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess)); 112 $.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess));
91 }); 113 });
92 }); 114 });
@@ -12,31 +12,25 @@ div#randval { @@ -12,31 +12,25 @@ div#randval {
12 z-index: 20; 12 z-index: 20;
13 } 13 }
14 14
15 -div#signup { 15 +div#signup-container {
16 -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.5); 16 -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
17 -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.5); 17 -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
18 box-shadow: 0 4px 8px rgba(0,0,0,0.5); 18 box-shadow: 0 4px 8px rgba(0,0,0,0.5);
19 - padding: 5px;  
20 - top: 20px;  
21 - left: 20px; 19 + padding: 0px;
22 position: fixed; 20 position: fixed;
23 - background-color: white;  
24 - border: 1px solid black;  
25 - border-radius: 10px; 21 + background-image: url(/image/rambler-bg.jpg);
  22 + border-radius: 5px;
26 z-index: 20; 23 z-index: 20;
27 } 24 }
28 25
29 -div#login { 26 +div#login-container {
30 -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.5); 27 -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
31 -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.5); 28 -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
32 box-shadow: 0 4px 8px rgba(0,0,0,0.5); 29 box-shadow: 0 4px 8px rgba(0,0,0,0.5);
33 - padding: 5px;  
34 - top: 20px;  
35 - left: 20px; 30 + padding: 0px;
36 position: fixed; 31 position: fixed;
37 - background-color: white;  
38 - border: 1px solid black;  
39 - border-radius: 10px; 32 + background-image: url(/image/rambler-bg.jpg);
  33 + border-radius: 5px;
40 z-index: 20; 34 z-index: 20;
41 } 35 }
42 36
@@ -38,89 +38,99 @@ h2 { @@ -38,89 +38,99 @@ h2 {
38 font-size: 20px; 38 font-size: 20px;
39 } 39 }
40 40
41 -h3 { 41 +h3,h4 {
42 font-family: old_newspaper; 42 font-family: old_newspaper;
43 font-weight: bold; 43 font-weight: bold;
44 font-size: 15px; 44 font-size: 15px;
45 text-decoration: underline; 45 text-decoration: underline;
46 } 46 }
47 47
  48 +h4 {
  49 + margin: 0px;
  50 + display: inline-block;
  51 +}
  52 +
48 hr { 53 hr {
49 height: 10px; 54 height: 10px;
50 border: none; 55 border: none;
51 background: url(/image/rambler-border-t.jpg); 56 background: url(/image/rambler-border-t.jpg);
52 } 57 }
53 58
  59 +.left {
  60 + float: left;
  61 +}
  62 +
  63 +.right {
  64 + float: right;
  65 +}
  66 +
  67 +.link {
  68 + cursor: pointer;
  69 +}
  70 +
54 71
55 div.border { 72 div.border {
56 - padding: 0px;  
57 - margin: 0px; 73 + padding: 0px;
  74 + margin: 0px;
  75 + display: block;
  76 +}
  77 +
  78 +div.border table {
  79 + border-spacing: 0;
  80 + border-collapse: collapse;
58 } 81 }
59 82
60 -div.border div { 83 +div.border td {
61 padding: 0px; 84 padding: 0px;
62 margin: 0px; 85 margin: 0px;
63 } 86 }
64 87
65 -div.border div.tl {  
66 - float: left; 88 +div.border .tl {
67 width: 10px; 89 width: 10px;
68 height: 10px; 90 height: 10px;
69 background: url(/image/rambler-border-tl.jpg); 91 background: url(/image/rambler-border-tl.jpg);
70 } 92 }
71 93
72 -div.border div.t {  
73 - float: left;  
74 - width: 250px; 94 +div.border .t {
  95 + width: auto;
75 height: 10px; 96 height: 10px;
76 background: url(/image/rambler-border-t.jpg); 97 background: url(/image/rambler-border-t.jpg);
77 } 98 }
78 99
79 -div.border div.tr {  
80 - float: left; 100 +div.border .tr {
81 width: 10px; 101 width: 10px;
82 height: 10px; 102 height: 10px;
83 background: url(/image/rambler-border-tr.jpg); 103 background: url(/image/rambler-border-tr.jpg);
84 } 104 }
85 105
86 -div.border div.l {  
87 - clear: left;  
88 - float: left; 106 +div.border .l {
89 width: 10px; 107 width: 10px;
90 - height: 250px; 108 + height: 100%;
91 background: url(/image/rambler-border-l.jpg); 109 background: url(/image/rambler-border-l.jpg);
92 } 110 }
93 111
94 -div.border div.img {  
95 - float: left;  
96 - background: url(/image/rambler-border-tr.jpg); 112 +div.border .content {
97 } 113 }
98 114
99 -div.border div.r {  
100 - float: left;  
101 - margin-right: 20px; 115 +div.border .r {
102 width: 10px; 116 width: 10px;
103 - height: 250px; 117 + height: 100%;
104 background: url(/image/rambler-border-r.jpg); 118 background: url(/image/rambler-border-r.jpg);
105 } 119 }
106 120
107 -div.border div.bl {  
108 - clear: left;  
109 - float: left; 121 +div.border .bl {
110 width: 10px; 122 width: 10px;
111 height: 10px; 123 height: 10px;
112 background: url(/image/rambler-border-bl.jpg); 124 background: url(/image/rambler-border-bl.jpg);
113 } 125 }
114 126
115 -div.border div.b {  
116 - float: left;  
117 - width: 250px; 127 +div.border .b {
  128 + width: auto;
118 height: 10px; 129 height: 10px;
119 background: url(/image/rambler-border-b.jpg); 130 background: url(/image/rambler-border-b.jpg);
120 } 131 }
121 132
122 -div.border div.br {  
123 - float: left; 133 +div.border .br {
124 width: 10px; 134 width: 10px;
125 height: 10px; 135 height: 10px;
126 background: url(/image/rambler-border-br.jpg); 136 background: url(/image/rambler-border-br.jpg);
@@ -251,6 +261,30 @@ div.border div.br { @@ -251,6 +261,30 @@ div.border div.br {
251 vertical-align: center; 261 vertical-align: center;
252 } 262 }
253 263
  264 +#login label, #signup label {
  265 + font-family: old_newspaper;
  266 + font-size: 15px;
  267 + font-weight: bold;
  268 + color: rgb(42,44,40);
  269 + display: table-cell;
  270 +}
  271 +
  272 +#login input, #signup input {
  273 + display: table-cell;
  274 +}
  275 +
  276 +#login div, #signup div {
  277 + display: table-row;
  278 +}
  279 +
  280 +#login form, #signup form {
  281 + display: table;
  282 +}
  283 +
  284 +#login form hr, #signup form hr {
  285 + display: table-cell;
  286 +}
  287 +
254 #menu ul div { 288 #menu ul div {
255 width: 100%; 289 width: 100%;
256 display: inline-block; 290 display: inline-block;
Please register or login to post a comment