Permalink
Browse files

Updates web-based UI with some CSS3 stuff

Everything is more drop-shadow-y, and animated. I still don't quite like
the buttons for submitting things on the page, but they'll do for now.
  • Loading branch information...
1 parent d826a97 commit b79474bf66e2da39ebded6e4e98d124e9bb381ea @bgw bgw committed Jul 21, 2012
Showing with 103 additions and 20 deletions.
  1. +78 −4 src/web/litter.css
  2. +2 −1 src/web/litter.html
  3. +23 −15 src/web/litter.js
View
@@ -3,11 +3,15 @@ body {
font-size: 12px;
margin: 0px;
padding: 0px;
+ background-color: #EEEEEE;
}
#header {
width: 100%;
background-color: #3B5998;
+ box-shadow: 0 -70px 70px 70px rgba(0, 0, 0, .7);
+ text-shadow: 0 -1px 0px rgba(0, 0, 0, .7);
+ border-bottom: 1px solid #EEEEEE;
}
#subheader {
@@ -111,21 +115,91 @@ body {
text-align: center;
}
+#postdiv h1 {
+ color: #777777;
+ font-size: 24px;
+ text-align: left;
+ margin-top: 20px;
+ margin-bottom: 0px;
+}
+
#postdiv textarea {
margin: 10px 0px 0px 0px;
padding: 5px;
border: 1px solid #CCCCCC;
width: 670px;
- font-size: 16px;
+ font-size: 15px;
height: 55px;
+ background-color: white;
+ color: #444444;
+ font-family: sans;
+ border-radius: 4px;
+ -moz-transition-property: box-shadow, border;
+ -moz-transition-duration: .4s, .4s;
+ -webkit-transition-property: box-shadow, border;
+ -webkit-transition-duration: .4s, .4s;
+ transition-property: box-shadow, border;
+ transition-duration: .4s, .4s;
+}
+
+#postdiv textarea::-webkit-input-placeholder {
+ color: #CCCCCC;
+}
+
+#postdiv textarea:-moz-placeholder {
+ color: #CCCCCC;
+}
+
+#postdiv textarea:focus {
+ box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .25);
+ border: 1px solid #999999;
}
#postdiv button {
padding: 5px;
- margin: 5px;
- height: 45px;
- width: 80px;
+ margin: 15px;
+ width: 130px;
+ font-size: 13px;
float: right;
+ color: white;
+ background-color: #AAAAAA;
+ border: none;
+ border-radius: 3px;
+ text-shadow: 0px -1px 0px rgba(0, 0, 0, .2),
+ 0px 2px 3px rgba(255, 255, 255, .3);
+ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .3),
+ -5px -5px 10px 0px rgba(0, 0, 0, .1) inset,
+ 5px 5px 10px 0px rgba(255, 255, 255, .1) inset,
+ -1px -1px 0px 0px rgba(0, 0, 0, .1) inset;
+ -moz-transition-property: background, box-shadow;
+ -moz-transition-duration: .25s, .25s;
+ -webkit-transition-property: background, box-shadow;
+ -webkit-transition-duration: .25s, .25s;
+ transition-property: background, box-shadow;
+ transition-duration: .25s, .25s;
+}
+
+#postdiv button:hover {
+ background-color: #A0A0A0;
+ box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .4),
+ -5px -5px 10px 0px rgba(0, 0, 0, .15) inset,
+ 5px 5px 10px 0px rgba(255, 255, 255, .15) inset;
+}
+
+#postdiv button#everyonebutton {
+ background-color: #5A87E6;
+}
+
+#postdiv button#everyonebutton:hover {
+ background-color: #5077CC;
+}
+
+#countid {
+ color: rgba(0, 0, 0, .3); /* color gets changed when we run out of chars */
+ text-align: left;
+ width: 600px;
+ font-size: 20px;
+ margin-left: 10px;
}
.rating {
View
@@ -1 +1,2 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery-ui.js"></script><script type="text/javascript" src="json2.js"></script><script type="text/javascript" src="md5.js"></script><script type="text/javascript" src="litter.js"></script><link rel="stylesheet" type="text/css" href="jquery-ui.css" /><link rel="stylesheet" type="text/css" href="litter.css" /></head></html>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="jquery.js"></script><script type="text/javascript" src="jquery-ui.js"></script><script type="text/javascript" src="json2.js"></script><script type="text/javascript" src="md5.js"></script><script type="text/javascript" src="litter.js"></script><link rel="stylesheet" type="text/css" href="jquery-ui.css" /><link rel="stylesheet" type="text/css" href="litter.css" /></head></html>
View
@@ -20,6 +20,8 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
+(function() {// document closure wrapper
+
$(document).ready(init);
function init() {
@@ -43,7 +45,8 @@ function loadPage() {
}
function loadHeader() {
- $("<h1/>", {text : 'Litter - Microblog for the LAN'}).appendTo("#subheader");
+ $("<h1/>", {text : 'Litter: Microblogging for the LAN'})
+ .appendTo("#subheader");
var menu = $("<ul/>").appendTo("#subheader");
menu.append($("<li/>", {text : 'Refresh', click : getState}));
}
@@ -52,20 +55,18 @@ function doNothing() {}
function loadPost() {
var q = $("<h1/>", {text : "What's new?"}).appendTo("#postdiv");
- q.css({"color" : "gray", "text-align" : "left"});
var tarea = $("<textarea/>", {"name" : "post", "cols" : "100", "rows" : "3",
- id : "txt"}).appendTo("#postdiv");
- $("<button/>", {text : "Everyone", click : doEverybodyPost}
+ id : "txt", autofocus : true, placeholder : "Your message goes here."}
+ ).appendTo("#postdiv");
+ $("<button/>", {id: "everyonebutton", text : "Everyone",
+ click : doEverybodyPost}
).appendTo("#postdiv");
- $("<button/>", {text : "2-hop Friends", click : doFriendPost}
+ $("<button/>", {text : "Friends of Friends", click : doFriendPost}
).appendTo("#postdiv");
- $("<button/>", {text : "1-hop Friends", click : doFriendPost}
+ $("<button/>", {text : "Friends", click : doFriendPost}
).appendTo("#postdiv");
var par = $("<p/>", { id : "countid", text : '140 characters left'}
).appendTo("#postdiv");
- par.css({"color" : "black", "text-align" : "right", "width" : "600px"});
- par.css({"font-size" : "20px"});
-
tarea.keypress(messageCount);
tarea.mouseup(messageCount);
}
@@ -78,11 +79,11 @@ function messageCount() {
elem.css({"color" : "#FF0000"});
}
else {
- elem.css({"color" : "black"});
+ elem.css({"color" : null});
}
}
-function loadResults(state) {
+function loadResults(state, initialPopulation) {
for (var i = state.length-1; i >= 0; i--) {
var result = {}
result['msg'] = state[i][0]
@@ -92,7 +93,7 @@ function loadResults(state) {
result['postid'] = state[i][4]
result['perms'] = state[i][5]
result['hashid'] = state[i][6]
- addResult(result);
+ addResult(result, initialPopulation);
}
}
@@ -110,7 +111,7 @@ function createTable() {
ratingcol.appendTo(row);
}
-function addResult(result) {
+function addResult(result, initialPopulation) {
// we check to see if we already have this in our table
if ($("body").data(result.hashid) != null) {
return;
@@ -119,7 +120,8 @@ function addResult(result) {
// time is returned in seconds, needs to be in milliseconds
var date = new Date(result.txtime * 1000);
- var row = $("<tr/>");
+ var row = $("<tr/>", {id: "post" + result.hashid,
+ style: initialPopulation ? "" : "display: none;"});
$("#firstrow").after(row);
var imgcol = $("<td/>", { 'valign' : 'top'});
var infocol = $("<td/>", { 'width': '100%'});
@@ -146,6 +148,9 @@ function addResult(result) {
// this is a patch so that we don't have duplicate messages in browser
// but this may cause memory leak, not too sure at the moment
$("body").data(result.hashid, result);
+ if (!initialPopulation) {
+ $("#post" + result.hashid).fadeIn("slow");
+ }
}
function updateUrl(msg) {
@@ -215,6 +220,9 @@ function doEverybodyPost() {
doPost(2);
}
+initialPopulation = true;
function processState(state) {
- loadResults(state['posts']);
+ loadResults(state['posts'], initialPopulation);
+ initialPopulation = false;
}
+})();

0 comments on commit b79474b

Please sign in to comment.