From a2f14ecd203074859015c3cca7cbde2c03edcd17 Mon Sep 17 00:00:00 2001 From: timb Date: Fri, 22 Jan 2010 07:11:13 -0800 Subject: removed a bunch of duplicated css, added cursor image --- static/header.css | 167 ---------------------------------------- static/img/cursors/osx.hand.gif | Bin 0 -> 931 bytes 2 files changed, 167 deletions(-) create mode 100644 static/img/cursors/osx.hand.gif (limited to 'static') diff --git a/static/header.css b/static/header.css index a128095..ffbf520 100755 --- a/static/header.css +++ b/static/header.css @@ -88,174 +88,7 @@ filter: progid:DXImageTransform.Microsoft.dropShadow(color=#036aca, offX=3, offY height: 62px; z-index: 1000; } -#topnav { - padding:10px 0px 12px; - font-size:11px; - line-height:23px; - text-align:right; -} -#topnav a.signin { - background:#88bbd4; - padding:4px 6px 6px; - text-decoration:none; - font-weight:bold; - color:#fff; - -webkit-border-radius:4px; - -moz-border-radius:4px; - border-radius:4px; - *background:transparent url("images/signin-nav-bg-ie.png") no-repeat 0 0; - *padding:4px 12px 6px; -} -#topnav a.signin:hover { - background:#59B; - *background:transparent url("images/signin-nav-bg-hover-ie.png") no-repeat 0 0; - *padding:4px 12px 6px; -} -#topnav a.signin, #topnav a.signin:hover { - *background-position:0 3px!important; -} -a.signin { - position:relative; - margin-left:3px; -} -a.signin span { - background-image:url("images/toggle_down_light.png"); - background-repeat:no-repeat; - background-position:100% 50%; - padding:4px 16px 6px 0; -} -#topnav a.menu-open { - background:#ddeef6!important; - color:#666!important; - outline:none; -} -#small_signup { - display:inline; - float:none; - line-height:23px; - margin:25px 0 0; - width:170px; -} -a.signin.menu-open span { - background-image:url("images/toggle_up_dark.png"); - color:#789; -} - -#signin_menu { - -moz-border-radius-topleft:5px; - -moz-border-radius-bottomleft:5px; - -moz-border-radius-bottomright:5px; - -webkit-border-top-left-radius:5px; - -webkit-border-bottom-left-radius:5px; - -webkit-border-bottom-right-radius:5px; - display:none; - background-color:#ddeef6; - position:absolute; - width:210px; - z-index:100; - border:1px transparent; - text-align:left; - padding:12px; - top: 24.5px; - right: 0px; - margin-top:5px; - margin-right: 0px; - *margin-right: -1px; - color:#789; - font-size:11px; -} - -#signin_menu input[type=text], #signin_menu input[type=password] { - display:block; - -moz-border-radius:4px; - -webkit-border-radius:4px; - border:1px solid #ACE; - font-size:13px; - margin:0 0 5px; - padding:5px; - width:203px; -} -#signin_menu p { - margin:0; -} -#signin_menu a { - color:#6AC; -} -#signin_menu label { - font-weight:normal; -} -#signin_menu p.remember { - padding:10px 0; -} -#signin_menu p.forgot, #signin_menu p.complete { - clear:both; - margin:5px 0; -} -#signin_menu p a { - color:#27B!important; -} -#signin_submit { - -moz-border-radius:4px; - -webkit-border-radius:4px; - background:#39d url('images/bg-btn-blue.png') repeat-x scroll 0 0; - border:1px solid #39D; - color:#fff; - text-shadow:0 -1px 0 #39d; - padding:4px 10px 5px; - font-size:11px; - margin:0 5px 0 0; - font-weight:bold; -} -#signin_submit::-moz-focus-inner { -padding:0; -border:0; -} -#signin_submit:hover, #signin_submit:focus { - background-position:0 -5px; - cursor:pointer; -} - -.tipsy-inner { - padding:10px 15px; - line-height:1.5em; - font-weight:bold; -} -.tipsy { - opacity:.8; - filter:alpha(opacity=80); - background-repeat:no-repeat; - padding:5px; -} -.tipsy-inner { - padding:8px 8px; - max-width:200px; - font:11px 'Lucida Grande', sans-serif; - font-weight:bold; - -moz-border-radius:4px; - -khtml-border-radius:4px; - -webkit-border-radius:4px; - border-radius:4px; - background-color:#000; - color:white; - text-align:left; -} -.tipsy-north { - background-image:url(images/tipsy-north.gif); - background-position:top center; -} -.tipsy-south { - background-image:url(images/tipsy-south.gif); - background-position:bottom center; -} -.tipsy-east { - background-image:url(images/tipsy-east.gif); - background-position:right center; -} -.tipsy-west { - background-image:url(images/tipsy-west.gif); - background-position:left center; -} .btnav { border: 0px #000000 solid;} body { diff --git a/static/img/cursors/osx.hand.gif b/static/img/cursors/osx.hand.gif new file mode 100644 index 0000000..2b95940 Binary files /dev/null and b/static/img/cursors/osx.hand.gif differ -- cgit v1.2.3-70-g09d2 From a5541502fbb496fbbd83ccd2e8c14b7558a9ebb0 Mon Sep 17 00:00:00 2001 From: timb Date: Fri, 22 Jan 2010 07:13:41 -0800 Subject: can login from profile; plaintext pw filler; better form handling; huge cursor on sign in button --- static/form_login/front.css | 5 +- static/index.html | 17 +++-- static/js/home.js | 158 ++++++++++++++++++++++++++++++++++++-------- static/js/pichat.js | 2 +- static/pichat.css | 9 +-- template/form_login.st | 31 ++------- template/head.st | 3 +- 7 files changed, 159 insertions(+), 66 deletions(-) (limited to 'static') diff --git a/static/form_login/front.css b/static/form_login/front.css index ea767b0..df339b3 100644 --- a/static/form_login/front.css +++ b/static/form_login/front.css @@ -143,4 +143,7 @@ border:0; #loginSubmit:hover, #loginSubmit:focus { background-position:0 -5px; cursor:pointer; -} \ No newline at end of file +} +.no-cursor { cursor: none; } +.invisible { display: none !important; } +#cursor-big { position: absolute; z-index: 1000; } \ No newline at end of file diff --git a/static/index.html b/static/index.html index f80e5da..b06fa39 100755 --- a/static/index.html +++ b/static/index.html @@ -5,9 +5,10 @@ + dump.fm @@ -168,7 +169,9 @@ body { } #nickInput {color:#000; } - +.no-cursor { cursor: none; } +.invisible { display: none !important; } +#cursor-big { position: absolute; z-index: 1000; } --> @@ -198,12 +201,14 @@ body {

Talk with pictures.

 


- +
- + +

-


- +


+ +

 

 

diff --git a/static/js/home.js b/static/js/home.js index b955d8a..441a992 100755 --- a/static/js/home.js +++ b/static/js/home.js @@ -4,37 +4,143 @@ function ifEnter(fn) { }; } -function initHome() { +function initLoginForm() { + + var nick = "#nickInput", nickFiller = "username" + var pass = "#passwordInput", passLabel = "#passwordInputLabel", passFiller = "password" + var submit = "#signin-submit" + + // username input logic: + // set filler text for the login form only if empty + if ($(nick).val() == "") $(nick).val(nickFiller); - var defaults = { - '#nickInput': "username", - "#passwordInput": "not-a-real-password" - } + // erase the form text when clicked only if it is filler text, otherwise select it + $(nick).focus(function(){ + if($(nick).val() == nickFiller) $(nick).val("") + else $(nick).select() + }) + + // restore filler text on blur if field is empty + $(nick).blur(function(){ + if($(nick).val() == "") $(nick).val(nickFiller); + }) + + // password input logic: + + var showPassHideLabel = function(){ + $(passLabel).addClass("invisible") + $(pass).removeClass("invisible") + $(pass).focus() + } + + var hidePassShowLabel = function(){ + $(passLabel).val(passFiller) + $(pass).addClass("invisible") + $(passLabel).removeClass("invisible") + } - _.map(defaults, function(value, id){ - - // set default values for the login form only if empty - if ($(id).val() == "") $(id).val(value); - - // erase the form text when clicked only if it is filler text, otherwise select it - $(id).focus(function(){ - if($(id).val() == value) $(id).val("") - else $(id).select() - }) - - // restore filler text on blur if field is empty - $(id).blur(function(){ - if($(id).val() == "") $(id).val(value); - }) - - }) + // only show password label if input is empty + if ($(pass).val() == "") hidePassShowLabel() + + $(passLabel).click(showPassHideLabel) + $(passLabel).focus(showPassHideLabel) + + $(pass).blur(function(){ + if($(pass).val() == "") hidePassShowLabel() + }) - $('#passwordInput').keyup(ifEnter(login)); - $('#loginSubmit').click(login); + $(nick).keypress(ifEnter(login)); + $(pass).keypress(ifEnter(login)); + $(submit).click(login); + + initBigHand(submit) +} + +function initExpandableLoginForm() { + + initLoginForm() + + $(".signin").click( function(e){ + e.preventDefault(); + $("fieldset#signin_menu").toggle(); + $(".signin").toggleClass("menu-open"); + $("#nickInput").select() + }); + + $("fieldset#signin_menu").mouseup( function(){ + return false + }); + + $(document).mouseup(function(e) { + if ($(e.target).parent("a.signin").length == 0) { + $(".signin").removeClass("menu-open"); + $("fieldset#signin_menu").hide(); + } + }); +} + +function initBigHand(id){ + var cursor = "#cursor-big" + + if (!$(cursor).length) // add cursor image to page if it doesn't exist already... + $('').appendTo('body') + + $(id).addClass("no-cursor") + + // i have to do this weirdly bc putting the cursor image where the mouse cursor is causes problems with mouse events: + // * it stops mousemove events on the image below the mouse cursor + // * it fucks up mouseover/out and even mouseenter/leave events, as well as click + + // so i am doing this: + // on mousing over the image: + // make cursor visible + // find image co-ords + // bind a global mousemove func + // bind cursor click event + // mousemove func: + // move image to mouse co-ords + // if mouse co-ords are outside the image co-ords: + // make cursor invisible + // unbind mousemove func + // unbind cursor click event + + var mousemove = function(e){ + $(cursor).css({ + "top": e.pageY + "px", + "left": e.pageX - 32 + "px" // 32: (4 pixels * 8 pixels per big pixel) to line up pointy finger with cursor + }) + $(id).unbind('mouseover', imageMouseOver) + if (e.pageY < initBigHand.coords.top || + e.pageY > initBigHand.coords.bottom || + e.pageX < initBigHand.coords.left || + e.pageX > initBigHand.coords.right) { + $(cursor).addClass('invisible') + $(cursor).unbind('click', cursorClick) + $('body').unbind('mousemove', mousemove) + $(id).mouseover(imageMouseOver) + } + } + + var cursorClick = function(){ $(id).click() } + + var imageMouseOver = function(){ + initBigHand.coords = { + "left": $(id).offset().left, + "top": $(id).offset().top, + "right": $(id).offset().left + $(id).width(), + "bottom": $(id).offset().top + $(id).height() + } + $('body').mousemove(mousemove) + $(cursor).click(cursorClick) + $(cursor).removeClass('invisible') + } + + $(id).mouseover(imageMouseOver) + } function login() { - $('#passwordInput, #loginSubmit').blur(); + //$('#passwordInput, #loginSubmit').blur(); var nick = $('#nickInput').val(); var password = $('#passwordInput').val(); var hash = hex_sha1(nick + '$' + password + '$dumpfm'); @@ -50,7 +156,7 @@ function login() { $.ajax({ type: 'GET', timeout: 5000, - url: 'login', + url: '/login', data: {'nick': nick, ts: '', 'hash': hash }, cache: false, dataType: 'json', diff --git a/static/js/pichat.js b/static/js/pichat.js index 20d3928..1c378e2 100755 --- a/static/js/pichat.js +++ b/static/js/pichat.js @@ -153,7 +153,7 @@ function updateUI(msgs, users) { } if (users !== null) { var flattened = users.sort().join(",") - if (!('userlist' in cache) || flattened != cache.userlist) { + if (!('userlist' in cache) || flattened != cache.userlist) { $("#userList").html($.map(users, buildUserDiv).join('')); } cache.userlist = flattened diff --git a/static/pichat.css b/static/pichat.css index 0e5fb5f..cd4dd77 100755 --- a/static/pichat.css +++ b/static/pichat.css @@ -287,13 +287,8 @@ background-color:#f3f3f3; font-family: Arial, Helvetica, sans-serif; font-size: 11px; bottom - #chatrap{ - top: 105px; - left:0px; - position:absolute; - width: 100%; - padding-bottom:20px; } +/* #chatrap{ top: 105px; left:0px; @@ -494,3 +489,5 @@ td { color: #000000; } .btnav { border: 0px #000000 solid;} +*/ +.invisible { display: none !important; } diff --git a/template/form_login.st b/template/form_login.st index aee9283..a028769 100644 --- a/template/form_login.st +++ b/template/form_login.st @@ -3,42 +3,25 @@

-


- +

- + +

- + + +

\ No newline at end of file diff --git a/template/head.st b/template/head.st index a9bb0f0..a873b7b 100755 --- a/template/head.st +++ b/template/head.st @@ -1,8 +1,7 @@ - - + -- cgit v1.2.3-70-g09d2