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 21 </div>
14 22
15 23 <h1>The Author</h1>
... ...
  1 +<h4>Login</h4><div id="login-close" class="link right">(close)</div>
  2 +<hr />
1 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 21 </form>
8 22
9 23 <!-- vim: set ts=4 sw=4: -->
... ...
  1 +<h4>Signup</h4><div id="signup-close" class="link right">(close)</div>
  2 +<hr />
1 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 33 </form>
14 34
15 35 <!-- vim: set ts=4 sw=4: -->
... ...
... ... @@ -17,10 +17,46 @@
17 17 </head>
18 18
19 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 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 60 </div>
25 61
26 62 <div id="page">
... ...
... ... @@ -25,12 +25,26 @@ $(document).ready(function() {
25 25 $("#main").load(asset);
26 26
27 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 77
64 78 $("#login").load("/_login.html", function (){
65 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 87 $("#login form").submit(function(event) {
... ... @@ -71,14 +89,18 @@ $(document).ready(function() {
71 89 $.post("/authenticate/",
72 90 $("#login form").serialize(),
73 91 $.proxy(sess.loadUserJSON, sess));
74   - $("#login").addClass("hide");
  92 + $("#login-container").addClass("hide");
75 93 $.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess));
76 94 });
77 95 });
78 96
79 97 $("#signup").load("/_signup.html", function (){
80 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 106 $("#signup form").submit(function(event) {
... ... @@ -86,7 +108,7 @@ $(document).ready(function() {
86 108 $.post("/signup/",
87 109 $("#signup form").serialize(),
88 110 $.proxy(sess.loadUserJSON, sess));
89   - $("#signup").addClass("hide");
  111 + $("#signup-container").addClass("hide");
90 112 $.getJSON("/sessinfo/", $.proxy(sess.loadJSON, sess));
91 113 });
92 114 });
... ...
... ... @@ -12,31 +12,25 @@ div#randval {
12 12 z-index: 20;
13 13 }
14 14
15   -div#signup {
  15 +div#signup-container {
16 16 -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
17 17 -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
18 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 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 23 z-index: 20;
27 24 }
28 25
29   -div#login {
  26 +div#login-container {
30 27 -moz-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
31 28 -webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
32 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 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 34 z-index: 20;
41 35 }
42 36
... ...
... ... @@ -38,89 +38,99 @@ h2 {
38 38 font-size: 20px;
39 39 }
40 40
41   -h3 {
  41 +h3,h4 {
42 42 font-family: old_newspaper;
43 43 font-weight: bold;
44 44 font-size: 15px;
45 45 text-decoration: underline;
46 46 }
47 47
  48 +h4 {
  49 + margin: 0px;
  50 + display: inline-block;
  51 +}
  52 +
48 53 hr {
49 54 height: 10px;
50 55 border: none;
51 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 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 84 padding: 0px;
62 85 margin: 0px;
63 86 }
64 87
65   -div.border div.tl {
66   - float: left;
  88 +div.border .tl {
67 89 width: 10px;
68 90 height: 10px;
69 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 96 height: 10px;
76 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 101 width: 10px;
82 102 height: 10px;
83 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 107 width: 10px;
90   - height: 250px;
  108 + height: 100%;
91 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 116 width: 10px;
103   - height: 250px;
  117 + height: 100%;
104 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 122 width: 10px;
111 123 height: 10px;
112 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 129 height: 10px;
119 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 134 width: 10px;
125 135 height: 10px;
126 136 background: url(/image/rambler-border-br.jpg);
... ... @@ -251,6 +261,30 @@ div.border div.br {
251 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 288 #menu ul div {
255 289 width: 100%;
256 290 display: inline-block;
... ...
Please register or login to post a comment