Tweak leaderboards; #634

This accounts for over-long usernames and drops back to digits instead
of words for age.

templates/gittip.scss

@@ -160,6 +160,7 @@ input {
     display: block;
     float: left;
     width: 100%;
+    overflow: hidden;
     @include border-radius(3px);
 
     span.inner {

www/assets/%version/gittip.css

@@ -1 +0,0 @@
-@font-face{font-family:'Mensch';src:url("../fonts/mensch.eot");src:url("../fonts/mensch.eot?#iefix") format("embedded-opentype"),url("../fonts/mensch.woff") format("woff"),url("../fonts/mensch.ttf") format("truetype"),url("../fonts/mensch.svg#Mensch") format("svg");font-weight:normal;font-style:normal}html,body{ackground:#614c3e}body{color:#231f20;font:normal 16px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif;text-rendering:optimizeLegibility}.main-padding{width:960px;margin:0 auto;position:relative}*{box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}a{color:#2a8f79;text-decoration:none;font-weight:bold}a img{border:0}p,dd{margin:0;padding:0 0 1em;line-height:130%}dt{font-weight:bold;margin:1em 0 0.25em}pre{font:9pt/13pt monospace;margin:0 0 1em 1em;padding:0;overflow:auto}li{margin:0;padding:0 0 1em 1em}.group:after{content:".";display:block;height:0;clear:both;visibility:hidden}.hidden{display:none}input{box-sizing:content-box;-moz-box-sizing:content-box;-webkit-box-sizing:content-box}.clear{clear:both}.centered{margin:0 auto}.highlight{background:#FFFE26}.mini-user{background:white;border:4px solid #dee0e0;display:block;float:left;width:100%;-webkit-background-clip:padding-box;-webkit-border-radius:3px;-moz-background-clip:padding-box;-moz-border-radius:3px;border-radius:3px;background-clip:padding-box}.mini-user span.inner{border:1px solid #b6b7b9;display:block;min-height:50px;padding:5px}.mini-user span.inner span.avatar{background:transparent url("avatar-default.gif") center center no-repeat;background-size:cover;display:block;min-height:70px;position:relative}.mini-user span.inner span.avatar span.rank{background:#444041;bottom:4px;color:white;display:block;font:normal 12px "Mensch","Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif;left:4px;padding:3px 5px 3px 6px;position:absolute;text-align:center;-webkit-background-clip:padding-box;-webkit-border-radius:2px;-moz-background-clip:padding-box;-moz-border-radius:2px;border-radius:2px;background-clip:padding-box}.mini-user span.inner span.age,.mini-user span.inner span.money{color:#231f20;display:block;font:bold 18px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif;margin:7px 0 5px 0}.mini-user span.inner span.age span.unit,.mini-user span.inner span.money span.unit{font:normal 11px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif}.mini-user span.inner span.name{display:block;font:normal 11px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif;margin:3px 0}.mini-user.anonymous{opacity:0.33}a.mini-user span.name{color:#2a8f79}span.mini-user{border-color:white}span.mini-user span.name{color:#231f20}a.mini-user:hover{border:4px solid #a49c97;text-decoration:none}a.mini-user:hover span.inner{border-color:#7D6250}button{background:#58595b;border:3px solid rgba(88,89,91,0.33);color:white;font:bold 11px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif;letter-spacing:1px;margin:0 0 0 1px;padding:4px 10px;text-transform:uppercase;-webkit-background-clip:padding-box;-webkit-border-radius:3px;-moz-background-clip:padding-box;-moz-border-radius:3px;border-radius:3px;background-clip:padding-box;cursor:pointer;display:inline}button:hover{border-color:#58595b;background:#e6e6e6;color:#58595b}button.selected{border-color:rgba(255,255,255,0.9);background:#2a8f79;color:white}button.selected:hover{border-color:rgba(42,143,121,0.5);background:#e6e6e6;color:#58595b}#header{background:white;padding:10px 0;position:relative}#header td{text-align:center;vertical-align:middle}#header h1{line-height:100%}#header .logo{padding-right:18px}#header .motto{border-left:2px solid #d0d2d3;font:bold 10px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif;letter-spacing:1px;text-transform:uppercase;padding-left:18px;text-align:left}#header div.login{padding-top:18px;position:absolute;top:0;right:0;font:normal 13px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif}#hero{background:transparent url("hero-bg.png") top left repeat;border:1px solid #d0d2d3;border-style:solid none;padding-bottom:100px;text-align:center;position:relative;z-index:1}#hero .main-padding{color:#231F20}#hero h2 span{background:transparent url("hero-bg.png") top left repeat;display:inline-block;padding:0 10px}#hero p{padding:0 20%}#hero h2.top{letter-spacing:-2px;font:normal 35px "Mensch","Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif;padding:50px 0 35px 0}#hero h2.top span{background:transparent url("hero-bg.png") top left repeat;display:inline-block;padding:0 10px}#hero h2.top:after{background:#231f20;content:"";display:block;height:1px;margin-top:-17px}#hero h1{letter-spacing:-3px;font:normal 64px/64px "Mensch","Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif;padding-bottom:20px}#hero h2.bottom{padding-bottom:20px}#hero h2.bottom span.button-container{display:inline-block;padding:0 10px}#hero h2.bottom span.button-container button{font-size:14px}#hero h2.bottom:after{background:#231f20;content:"";display:block;height:1px;margin-top:-16px}#box{text-align:center;background:white;margin:-80px auto 0;border:5px solid rgba(97,76,62,0.5);width:480px;min-width:240px;-webkit-background-clip:padding-box;-webkit-border-radius:3px;-moz-background-clip:padding-box;-moz-border-radius:3px;border-radius:3px;background-clip:padding-box;position:relative;z-index:2}#box h1{font:bold 22px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif;color:#614c3e}#box h2{font:bold 14px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif;text-transform:uppercase;color:#614c3e}#box .help{font:normal 14px/18px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif;color:#231f20}#box .help.with-padding{padding:10px}#box .as-content{padding:20px}#box .as-content.left{text-align:left}#box .as-content h1{padding-bottom:15px}#box .as-content input{width:8em}#box .is-suspicious-indicator{display:block;position:absolute;top:5px;right:5px;font:normal 10px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif;text-transform:uppercase;color:#231f20}#box label.is-suspicious-knob{display:block;position:absolute;top:2px;right:5px;font:normal 9px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif;text-transform:uppercase;color:#231f20}#box label.is-suspicious-knob input{position:relative;top:3px}#box .ready{padding-left:15px}#box .number{font:bold 56px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif}#box .unit{font:normal 12px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif}#box .on-elsewhere{width:100%}#box .on-elsewhere .offset{width:138px;height:138px}#box .on-elsewhere .picture{width:138px;height:138px}#box .on-elsewhere .picture img{width:128px;height:128px;display:block;margin:5px}#box .on-profile{width:100%}#box .on-profile.is-suspicious{background:#f99}#box .on-profile .picture{width:138px;height:138px}#box .on-profile .picture img{width:128px;height:128px;display:block;margin:5px}#box .on-profile td{text-align:left}#box .on-profile .pad-sign{padding-left:36px}#box .buttons{padding:5px}#box .buttons h2{color:#231f20;font:bold 10px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif;letter-spacing:1px;text-transform:uppercase;margin:0 0 3px}#box .buttons.tips{border-top:1px solid rgba(97,76,62,0.2);background:#e6e6e6}#box .buttons.tips #payment-prompt{display:none;margin:10px 0 5px}#box .buttons.tips #payment-prompt.needed{display:block}#box .buttons.tips #payment-prompt.really-needed{display:block}#box .buttons.nav{border-top:1px solid rgba(97,76,62,0.5);background:#d0d2d3}#box .on-confirm{padding:35px 0 0}#box .on-confirm h2{font:bold 14px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif;text-transform:uppercase;margin:35px 0 8px}#box .on-confirm .nav{margin:35px 0 0}#box .on-confirm .nav h2{margin:8px 0}#box .on-confirm .nav .selected{font-size:14px}#box .on-confirm .scenario{margin:0 auto}#box .on-confirm .scenario TD{padding:6pt;width:33%}#box .on-confirm #nix{position:absolute;top:50%;left:50%;margin:-16px 0 0 -16px}#box .on-confirm .participant{position:relative;width:96pt;display:inline-block;border:2px solid #614c3e;border-radius:6pt;font:normal 12px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif;color:#614c3e;background:#fff url("/assets/clipped-heart.gif") bottom right no-repeat;text-align:left;overflow:hidden}#box .on-confirm .participant-padding{display:block;padding:6pt 0 6pt 9pt}#box .on-confirm .participant IMG,#box .on-confirm IMG.platform-icon{margin-bottom:-1pt}#box .on-confirm .participant B{font-size:11pt}#box .on-confirm .participant TD{padding:0}#box .on-confirm .participant TH{font-weight:normal}#box .on-confirm .other,#box .on-confirm .abandoned{font:normal 10px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif}#box .on-confirm .abandoned{text-align:center;overflow:hidden}#box .on-confirm .nix{border-color:#b2a196}#box .on-confirm .other B{font-size:9pt}#box .on-form{text-align:left}#box .on-form .constrain-width{margin:0 auto 35px;width:300px}#box .on-form form h2{font:bold 14px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif;text-transform:uppercase;margin:35px 0 8px}#box .on-form #save{font-size:14px}#box .on-form .half{width:150px}#box .on-form .full{clear:both;text-align:right;padding-top:5px}#box .on-form #other{font:normal 9pt/14pt Arial,sans-serif;color:#00E;cursor:pointer;margin-right:1em}#box .on-form #other:hover{text-decoration:underline}#box .on-form .left{float:left}#box .on-form .right{float:left}#box .on-form LABEL{display:block;font:normal 10px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif;margin:8px 0 0;padding:0;text-transform:uppercase}#box .on-form INPUT{font:normal 11pt/14pt "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif;width:292px;margin:0;padding:3px;border:1px solid #b2a196;outline:none}#box .on-form INPUT.disabled{color:#b2a196}#box .on-form .half INPUT{width:137px}#box .on-form .right.half LABEL,#box .on-form .right.half INPUT{margin-left:5px}#box .on-form INPUT:focus{border-color:#2a8f79}#box .on-form .float{float:left}#box .on-form .city INPUT{width:137px}#box .on-form .state INPUT{width:43px}#box .on-form .zip INPUT{width:75px}#box .on-form .card_number INPUT{width:137px}#box .on-form .cvv INPUT{width:43px}#box .on-form INPUT.expiration_month{width:24px}#box .on-form INPUT.expiration_year{width:39px;margin-left:1px !important}#box .on-form .not-first LABEL,#box .on-form .not-first INPUT{margin-left:10px}#box .on-form .buttons{text-align:center}#box .on-form #feedback .details li{margin:0;padding:0 0 0 2em;text-indent:-2em;font:normal 12px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif}.payment-footer{font:normal 12px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif;text-align:center}#page #leaderboard ul{margin:0 0 20px 0}#page #leaderboard ul li{display:block;float:left;margin:0;min-width:90px;padding:2px;width:10%}#page{padding:20px 0 0;background:white}#page h1{color:#6D6E70;font:normal 35px "Mensch","Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif;letter-spacing:-2px;margin:35px 0 20px 0;text-transform:uppercase}#page h2{color:#614c3e;font:bold 14px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif;letter-spacing:1px;text-transform:uppercase;margin:35px 0 8px}#page.about h1{margin:0}#page.about p{color:#6D6E70;font:normal 16px/24px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif;margin:20px 0}#page.about div.meta{border-left:1px solid #231f20;padding-left:50px}#page.about div.meta p{color:#929497;font:normal 13px/21px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif}#page .col{width:auto;margin:0 auto}#page .col0{width:460px;margin:0 auto}#page .col1{width:460px;float:left}#page .col2{width:460px;float:right}#footer{margin:4em 0 1em;border-top:1px solid #231f20;padding:0.5em 0 0;text-align:right;font:normal 12px/16px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif}#accounts{margin-bottom:12pt}#accounts td{text-align:left;vertical-align:middle;line-height:100%}#accounts td.account-type{border-right:1pt solid #b2a196;padding:6pt 6pt 6pt 0}#accounts td.account-type IMG{width:36pt;height:36pt}#accounts DIV.account-type{font-size:x-small;clear:both;color:#B2A196}#accounts .account-details{padding-left:6pt}#accounts IMG.avatar{width:24pt;height:24pt;float:left;margin-right:3pt}#members{list-style:none;margin-bottom:12pt;margin:0 auto}#members TD{padding:0 0 0.5em 0;text-align:left}#members IMG{width:18pt;height:18pt;margin-right:6pt;float:left}.tip-distribution .dollar-sign{padding:0 2pt 0 24pt;text-align:right}.tip-distribution .amount{padding:0 6pt 0 0;text-align:right}.tip-distribution .amount-change{padding:6pt 0 6pt 24pt;text-align:left}.tip-distribution .count{text-align:left;white-space:nowrap}.tip-distribution .count SPAN.number{font-size:8pt}.tip-distribution .count SPAN.bar{background:#b2a196;display:inline-block;margin-right:3pt;height:9pt}.tip-distribution .count SPAN.bar.green{background:#2a8f79}#profile-edit BUTTON.save,#profile-edit BUTTON.cancel{display:none}#profile-edit .participant_id INPUT{width:6em;display:none}#profile-edit .participant_id .warning{margin-top:5px;display:block;color:red;display:none}#profile-edit .statement DIV.edit{display:none}#profile-edit .statement TEXTAREA{width:98%;height:126pt;padding:1%}#profile-edit .statement .help{font:normal 12px/12px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif}#profile-edit .goal TABLE.edit{display:none}#profile-edit .goal TD{text-align:left}#profile-edit .goal #goal-custom{text-align:right;width:6pc}#profile-edit .goal LI{margin-bottom:1em}#history th{padding:0 3pt}#history th b{font-weight:300;font-size:9pt}#history td{padding:1pt 3pt;font-size:9pt;line-height:10pt;text-align:right}#history td h2{text-align:left}#history .head td{font-size:9pt;white-space:normal;text-align:left;border-bottom:1px solid #614c3e}#history td.card,#history td.fees,#history td.debits{color:red}#history .head td.card,#history .head td.fees,#history .head td.debits{color:#614C3E}#history td.notes{text-align:left}#history .fees{border-right:1px solid #614c3e;text-align:right}#history .outside{border-right:1px solid #614c3e;text-align:right !important}@media (max-width: 1029px){.main-padding{width:auto;padding:0 35px}#page .col,#page .col1,#page .col2{width:460px;float:none;margin:0 auto}}@media (max-width: 670px){.main-padding{padding:0 34px}}@media (max-width: 660px){.main-padding{padding:0 32px}}@media (max-width: 640px){.main-padding{padding:0 30px}}@media (max-width: 620px){.main-padding{padding:0 28px}}@media (max-width: 600px){.main-padding{padding:0 26px}}@media (max-width: 580px){.main-padding{padding:0 24px}}@media (max-width: 560px){.main-padding{padding:0 22px}}@media (max-width: 540px){.main-padding{padding:0 20px}#page #leaderboard ul li.luxury{display:none}body{font:normal 14px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif}#header div.login{font:normal 12px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif}}@media (max-width: 530px){.main-padding{padding:0 18px}}@media (max-width: 520px){.main-padding{padding:0 16px}}@media (max-width: 510px){.main-padding{padding:0 14px}}@media (max-width: 500px){.main-padding{padding:0 12px}}@media (max-width: 494px){#box{width:auto}}@media (max-width: 490px){.main-padding{padding:0 10px}}@media (max-width: 480px){.main-padding{padding:0 8px}#header{text-align:center}#header div.login{position:static}#header table{margin:0 auto}body{font:normal 13px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif}#box #jump .luxury{display:none}#page .col,#page .col0,#page .col1,#page .col2{width:auto}}@media (max-width: 470px){.main-padding{padding:0 6px}}@media (max-width: 460px){.main-padding{padding:0 4px}}@media (max-width: 600px){#hero h2.top{font-size:35px;line-height:35px;padding:50px 0 35px}#hero h2.top:after{margin-top:-17px}#hero h1{font-size:64px;line-height:64px;letter-spacing:-3px;padding:0 0 20px}}@media (max-width: 550px){#hero h2.top{font-size:31px;line-height:31px;padding:43px 0 29px}#hero h2.top:after{margin-top:-9px}#hero h1{font-size:57px;line-height:57px;letter-spacing:-1px;padding:0 0 15px}}@media (max-width: 500px){#hero h2.top{font-size:27px;line-height:27px;padding:36px 0 23px}#hero h2.top:after{margin-top:-9px}#hero h1{font-size:50px;line-height:50px;letter-spacing:-1px;padding:0 0 10px}}@media (max-width: 450px){#hero h2.top{font-size:23px;line-height:23px;padding:29px 0 17px}#hero h2.top:after{margin-top:-9px}#hero h1{font-size:43px;line-height:43px;letter-spacing:-1px;padding:0 0 5px}}@media (max-width: 400px){#hero h2.top{font-size:19px;line-height:19px;padding:22px 0 11px}#hero h2.top:after{margin-top:-9px}#hero h1{font-size:36px;line-height:36px;letter-spacing:-1px;padding:0}}@media (max-width: 350px){#hero h2.top{font-size:15px;line-height:15px;padding:15px 0 5px}#hero h2.top:after{margin-top:-9px}#hero h1{font-size:29px;line-height:29px;letter-spacing:0px;padding:0}}@media (max-width: 360px){#box{border-radius:0;border-left-width:1px;border-right-width:1px}}@media (max-width: 460px){#box table h2{font-size:14px;line-height:14px}#box table .pad-sign{padding-left:36px !important}#box table .number{font-size:56px;line-height:56px}#box table .unit{font-size:12px;line-height:12px}}@media (max-width: 420px){#box table h2{font-size:13px;line-height:13px}#box table .pad-sign{padding-left:30px !important}#box table .number{font-size:48px;line-height:48px}#box table .unit{font-size:11px;line-height:11px}}@media (max-width: 380px){#box table h2{font-size:13px;line-height:12px}#box table .pad-sign{padding-left:24px !important}#box table .number{font-size:40px;line-height:40px}}@media (max-width: 340px){#box table h2{font-size:11px;line-height:11px}#box table .pad-sign{padding-left:18px !important}#box table .number{font-size:32px;line-height:32px}#box table .unit{font-size:10px;line-height:10px}}@media (max-width: 300px){#box table h2{font-size:10px;line-height:10px}#box table .pad-sign{padding-left:12px !important}#box table .number{font-size:24px;line-height:24px}#box table .unit{font-size:9px;line-height:9px}}@media (max-width: 320px){body{font:normal 13px "Helvetica Neue",Helvetica,Arial,"Liberation Sans",FreeSans,sans-serif}}@media (max-width: 240px){#header .logo{padding-right:0}#header .motto.luxury{display:none}#header .login .luxury{display:none}}@media (max-width: 200px){#box #jump input{width:80%}}

www/index.html

@@ -33,6 +33,10 @@
 
 def _to_age(participant):
     age = to_age(participant['claimed_time'], fmt_past="%(age)s")
+    words = ('zero', 'one', 'two','three', 'four', 'five', 'six', 'seven',
+                                                               'eight', 'nine')
+    for i, word in enumerate(words):
+        age = age.replace(word, str(i))
     return age.replace(' ', ' <span class="unit">') + "</span>"
 ^L