ghopp
/
taskrambler
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

v0.1.8
Georg Hopp 12 years ago
parent
cc23d732ab
commit
5897c437b4
7 changed files with 210 additions and 82 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 32
      assets/html/_author.html
  2. 24
      assets/html/_login.html
  3. 42
      assets/html/_signup.html
  4. 40
      assets/html/layout.html
  5. 38
      assets/js/init.js
  6. 22
      assets/style/common.css
  7. 94
      assets/style/taskrambler.css

32
assets/html/_author.html
View File

@ -1,15 +1,23 @@
<div class="border">
<div class="tl"></div>
<div class="t"></div>
<div class="tr"></div>
<div class="l"></div>
<div class="img">
<img src="/image/waldschrat.jpg" />
</div>
<div class="r"></div>
<div class="bl"></div>
<div class="b"></div>
<div class="br"></div>
<div class="border left">
<table>
<tr>
<td class="tl"></td>
<td class="t"></td>
<td class="tr"></td>
</tr>
<td class="l"></td>
<td class="content">
<img src="/image/waldschrat.jpg" />
</td>
<td class="r"></td>
<tr>
</tr>
<tr>
<td class="bl"></td>
<td class="b"></td>
<td class="br"></td>
</tr>
</table>
</div>
<h1>The Author</h1>

24
assets/html/_login.html
View File

@ -1,9 +1,23 @@
<h4>Login</h4><div id="login-close" class="link right">(close)</div>
<hr />
<form>
<label for="username">username</label>
<input type="text" name="username" /><br />
<label for="password">password</label>
<input type="password" name="password" /><br />
<input type="submit" />
<div>
<label for="username">username</label>
<input type="text" name="username" />
</div>
<div>
<label for="password">password</label>
<input type="password" name="password" /><br />
</div>
<div style="height: 10px;" />
<div>
<hr />
<hr />
</div>
<div style="height: 10px;" />
<div>
<input type="submit" />
</div>
</form>
<!-- vim: set ts=4 sw=4: -->

42
assets/html/_signup.html
View File

@ -1,15 +1,35 @@
<h4>Signup</h4><div id="signup-close" class="link right">(close)</div>
<hr />
<form>
<label for="firstname">firstname</label>
<input type="text" name="firstname" /><br />
<label for="surname">surname</label>
<input type="text" name="surname" /><br />
<label for="mail">email</label>
<input type="text" name="email" /><br />
<label for="password">password</label>
<input type="password" name="password" /><br />
<label for="pwrepeat">password (again)</label>
<input type="password" name="pwrepeat" /><br />
<input type="submit" />
<div>
<label for="firstname">firstname</label>
<input type="text" name="firstname" /><br />
</div>
<div>
<label for="surname">surname</label>
<input type="text" name="surname" /><br />
</div>
<div>
<label for="mail">email</label>
<input type="text" name="email" /><br />
</div>
<div>
<label for="password">password</label>
<input type="password" name="password" /><br />
</div>
<div>
<label for="pwrepeat">password (again)</label>
<input type="password" name="pwrepeat" /><br />
</div>
<div style="height: 10px;" />
<div>
<hr />
<hr />
</div>
<div style="height: 10px;" />
<div>
<input type="submit" />
</div>
</form>
<!-- vim: set ts=4 sw=4: -->

40
assets/html/layout.html
View File

@ -17,10 +17,46 @@
</head>
<body>
<div id="login" class="ui-widget-content hide">
<div id="login-container" class="ui-widget-content border hide">
<table>
<tr>
<td class="tl"></td>
<td class="t"></td>
<td class="tr"></td>
</tr>
<td class="l"></td>
<td id ="login">
</td>
<td class="r"></td>
<tr>
</tr>
<tr>
<td class="bl"></td>
<td class="b"></td>
<td class="br"></td>
</tr>
</table>
</div>
<div id="signup" class="ui-widget-content hide">
<div id="signup-container" class="ui-widget-content border hide">
<table>
<tr>
<td class="tl"></td>
<td class="t"></td>
<td class="tr"></td>
</tr>
<td class="l"></td>
<td id ="signup">
</td>
<td class="r"></td>
<tr>
</tr>
<tr>
<td class="bl"></td>
<td class="b"></td>
<td class="br"></td>
</tr>
</table>
</div>
<div id="page">

38
assets/js/init.js
View File

@ -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));
});
});

22
assets/style/common.css
View File

@ -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;
}

94
assets/style/taskrambler.css
View File

@ -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;

Write Preview
Loading…
Cancel
Save