Watched threads page has been redesigned

static/cranefly/css/cranefly.css

@@ -717,8 +717,8 @@ button.btn.btn-mini,input[type="submit"].btn.btn-mini{*padding-top:1px;*padding-
 .pagination{margin:20px 0;}
 .pagination ul{display:inline-block;*display:inline;*zoom:1;margin-left:0;margin-bottom:0;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;-webkit-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:0 1px 2px rgba(0, 0, 0, 0.05);}
 .pagination ul>li{display:inline;}
-.pagination ul>li>a,.pagination ul>li>span{float:left;padding:4px 12px;line-height:20px;text-decoration:none;background-color:#ffffff;border:1px solid #dddddd;border-left-width:0;}
-.pagination ul>li>a:hover,.pagination ul>li>a:focus,.pagination ul>.active>a,.pagination ul>.active>span{background-color:#f5f5f5;}
+.pagination ul>li>a,.pagination ul>li>span{float:left;padding:4px 12px;line-height:20px;text-decoration:none;background-color:#ffffff;border:1px solid #f0f0f0;border-left-width:0;}
+.pagination ul>li>a:hover,.pagination ul>li>a:focus,.pagination ul>.active>a,.pagination ul>.active>span{background-color:#999999;}
 .pagination ul>.active>a,.pagination ul>.active>span{color:#999999;cursor:default;}
 .pagination ul>.disabled>span,.pagination ul>.disabled>a,.pagination ul>.disabled>a:hover,.pagination ul>.disabled>a:focus{color:#999999;background-color:transparent;cursor:default;}
 .pagination ul>li:first-child>a,.pagination ul>li:first-child>span{border-left-width:1px;-webkit-border-top-left-radius:3px;-moz-border-radius-topleft:3px;border-top-left-radius:3px;-webkit-border-bottom-left-radius:3px;-moz-border-radius-bottomleft:3px;border-bottom-left-radius:3px;}
@@ -848,11 +848,14 @@ a.label:hover,a.label:focus,a.badge:hover,a.badge:focus{color:#ffffff;text-decor
 .show{display:block;}
 .invisible{visibility:hidden;}
 .affix{position:fixed;}
-@media (min-width:1200px){.row{margin-left:-30px;*zoom:1;}.row:before,.row:after{display:table;content:"";line-height:0;} .row:after{clear:both;} [class*="span"]{float:left;min-height:1px;margin-left:30px;} .container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:1170px;} .span12{width:1170px;} .span11{width:1070px;} .span10{width:970px;} .span9{width:870px;} .span8{width:770px;} .span7{width:670px;} .span6{width:570px;} .span5{width:470px;} .span4{width:370px;} .span3{width:270px;} .span2{width:170px;} .span1{width:70px;} .offset12{margin-left:1230px;} .offset11{margin-left:1130px;} .offset10{margin-left:1030px;} .offset9{margin-left:930px;} .offset8{margin-left:830px;} .offset7{margin-left:730px;} .offset6{margin-left:630px;} .offset5{margin-left:530px;} .offset4{margin-left:430px;} .offset3{margin-left:330px;} .offset2{margin-left:230px;} .offset1{margin-left:130px;} .row-fluid{width:100%;*zoom:1;}.row-fluid:before,.row-fluid:after{display:table;content:"";line-height:0;} .row-fluid:after{clear:both;} .row-fluid [class*="span"]{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.564102564102564%;*margin-left:2.5109110747408616%;} .row-fluid [class*="span"]:first-child{margin-left:0;} .row-fluid .controls-row [class*="span"]+[class*="span"]{margin-left:2.564102564102564%;} .row-fluid .span12{width:100%;*width:99.94680851063829%;} .row-fluid .span11{width:91.45299145299145%;*width:91.39979996362975%;} .row-fluid .span10{width:82.90598290598291%;*width:82.8527914166212%;} .row-fluid .span9{width:74.35897435897436%;*width:74.30578286961266%;} .row-fluid .span8{width:65.81196581196582%;*width:65.75877432260411%;} .row-fluid .span7{width:57.26495726495726%;*width:57.21176577559556%;} .row-fluid .span6{width:48.717948717948715%;*width:48.664757228587014%;} .row-fluid .span5{width:40.17094017094017%;*width:40.11774868157847%;} .row-fluid .span4{width:31.623931623931625%;*width:31.570740134569924%;} .row-fluid .span3{width:23.076923076923077%;*width:23.023731587561375%;} .row-fluid .span2{width:14.52991452991453%;*width:14.476723040552828%;} .row-fluid .span1{width:5.982905982905983%;*width:5.929714493544281%;} .row-fluid .offset12{margin-left:105.12820512820512%;*margin-left:105.02182214948171%;} .row-fluid .offset12:first-child{margin-left:102.56410256410257%;*margin-left:102.45771958537915%;} .row-fluid .offset11{margin-left:96.58119658119658%;*margin-left:96.47481360247316%;} .row-fluid .offset11:first-child{margin-left:94.01709401709402%;*margin-left:93.91071103837061%;} .row-fluid .offset10{margin-left:88.03418803418803%;*margin-left:87.92780505546462%;} .row-fluid .offset10:first-child{margin-left:85.47008547008548%;*margin-left:85.36370249136206%;} .row-fluid .offset9{margin-left:79.48717948717949%;*margin-left:79.38079650845607%;} .row-fluid .offset9:first-child{margin-left:76.92307692307693%;*margin-left:76.81669394435352%;} .row-fluid .offset8{margin-left:70.94017094017094%;*margin-left:70.83378796144753%;} .row-fluid .offset8:first-child{margin-left:68.37606837606839%;*margin-left:68.26968539734497%;} .row-fluid .offset7{margin-left:62.393162393162385%;*margin-left:62.28677941443899%;} .row-fluid .offset7:first-child{margin-left:59.82905982905982%;*margin-left:59.72267685033642%;} .row-fluid .offset6{margin-left:53.84615384615384%;*margin-left:53.739770867430444%;} .row-fluid .offset6:first-child{margin-left:51.28205128205128%;*margin-left:51.175668303327875%;} .row-fluid .offset5{margin-left:45.299145299145295%;*margin-left:45.1927623204219%;} .row-fluid .offset5:first-child{margin-left:42.73504273504273%;*margin-left:42.62865975631933%;} .row-fluid .offset4{margin-left:36.75213675213675%;*margin-left:36.645753773413354%;} .row-fluid .offset4:first-child{margin-left:34.18803418803419%;*margin-left:34.081651209310785%;} .row-fluid .offset3{margin-left:28.205128205128204%;*margin-left:28.0987452264048%;} .row-fluid .offset3:first-child{margin-left:25.641025641025642%;*margin-left:25.53464266230224%;} .row-fluid .offset2{margin-left:19.65811965811966%;*margin-left:19.551736679396257%;} .row-fluid .offset2:first-child{margin-left:17.094017094017094%;*margin-left:16.98763411529369%;} .row-fluid .offset1{margin-left:11.11111111111111%;*margin-left:11.004728132387708%;} .row-fluid .offset1:first-child{margin-left:8.547008547008547%;*margin-left:8.440625568285142%;} input,textarea,.uneditable-input{margin-left:0;} .controls-row [class*="span"]+[class*="span"]{margin-left:30px;} input.span12,textarea.span12,.uneditable-input.span12{width:1156px;} input.span11,textarea.span11,.uneditable-input.span11{width:1056px;} input.span10,textarea.span10,.uneditable-input.span10{width:956px;} input.span9,textarea.span9,.uneditable-input.span9{width:856px;} input.span8,textarea.span8,.uneditable-input.span8{width:756px;} input.span7,textarea.span7,.uneditable-input.span7{width:656px;} input.span6,textarea.span6,.uneditable-input.span6{width:556px;} input.span5,textarea.span5,.uneditable-input.span5{width:456px;} input.span4,textarea.span4,.uneditable-input.span4{width:356px;} input.span3,textarea.span3,.uneditable-input.span3{width:256px;} input.span2,textarea.span2,.uneditable-input.span2{width:156px;} input.span1,textarea.span1,.uneditable-input.span1{width:56px;} .thumbnails{margin-left:-30px;} .thumbnails>li{margin-left:30px;} .row-fluid .thumbnails{margin-left:0;}}html,body{height:100%;}
+@media (min-width:1200px){.row{margin-left:-30px;*zoom:1;}.row:before,.row:after{display:table;content:"";line-height:0;} .row:after{clear:both;} [class*="span"]{float:left;min-height:1px;margin-left:30px;} .container,.navbar-static-top .container,.navbar-fixed-top .container,.navbar-fixed-bottom .container{width:1170px;} .span12{width:1170px;} .span11{width:1070px;} .span10{width:970px;} .span9{width:870px;} .span8{width:770px;} .span7{width:670px;} .span6{width:570px;} .span5{width:470px;} .span4{width:370px;} .span3{width:270px;} .span2{width:170px;} .span1{width:70px;} .offset12{margin-left:1230px;} .offset11{margin-left:1130px;} .offset10{margin-left:1030px;} .offset9{margin-left:930px;} .offset8{margin-left:830px;} .offset7{margin-left:730px;} .offset6{margin-left:630px;} .offset5{margin-left:530px;} .offset4{margin-left:430px;} .offset3{margin-left:330px;} .offset2{margin-left:230px;} .offset1{margin-left:130px;} .row-fluid{width:100%;*zoom:1;}.row-fluid:before,.row-fluid:after{display:table;content:"";line-height:0;} .row-fluid:after{clear:both;} .row-fluid [class*="span"]{display:block;width:100%;min-height:30px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;float:left;margin-left:2.564102564102564%;*margin-left:2.5109110747408616%;} .row-fluid [class*="span"]:first-child{margin-left:0;} .row-fluid .controls-row [class*="span"]+[class*="span"]{margin-left:2.564102564102564%;} .row-fluid .span12{width:100%;*width:99.94680851063829%;} .row-fluid .span11{width:91.45299145299145%;*width:91.39979996362975%;} .row-fluid .span10{width:82.90598290598291%;*width:82.8527914166212%;} .row-fluid .span9{width:74.35897435897436%;*width:74.30578286961266%;} .row-fluid .span8{width:65.81196581196582%;*width:65.75877432260411%;} .row-fluid .span7{width:57.26495726495726%;*width:57.21176577559556%;} .row-fluid .span6{width:48.717948717948715%;*width:48.664757228587014%;} .row-fluid .span5{width:40.17094017094017%;*width:40.11774868157847%;} .row-fluid .span4{width:31.623931623931625%;*width:31.570740134569924%;} .row-fluid .span3{width:23.076923076923077%;*width:23.023731587561375%;} .row-fluid .span2{width:14.52991452991453%;*width:14.476723040552828%;} .row-fluid .span1{width:5.982905982905983%;*width:5.929714493544281%;} .row-fluid .offset12{margin-left:105.12820512820512%;*margin-left:105.02182214948171%;} .row-fluid .offset12:first-child{margin-left:102.56410256410257%;*margin-left:102.45771958537915%;} .row-fluid .offset11{margin-left:96.58119658119658%;*margin-left:96.47481360247316%;} .row-fluid .offset11:first-child{margin-left:94.01709401709402%;*margin-left:93.91071103837061%;} .row-fluid .offset10{margin-left:88.03418803418803%;*margin-left:87.92780505546462%;} .row-fluid .offset10:first-child{margin-left:85.47008547008548%;*margin-left:85.36370249136206%;} .row-fluid .offset9{margin-left:79.48717948717949%;*margin-left:79.38079650845607%;} .row-fluid .offset9:first-child{margin-left:76.92307692307693%;*margin-left:76.81669394435352%;} .row-fluid .offset8{margin-left:70.94017094017094%;*margin-left:70.83378796144753%;} .row-fluid .offset8:first-child{margin-left:68.37606837606839%;*margin-left:68.26968539734497%;} .row-fluid .offset7{margin-left:62.393162393162385%;*margin-left:62.28677941443899%;} .row-fluid .offset7:first-child{margin-left:59.82905982905982%;*margin-left:59.72267685033642%;} .row-fluid .offset6{margin-left:53.84615384615384%;*margin-left:53.739770867430444%;} .row-fluid .offset6:first-child{margin-left:51.28205128205128%;*margin-left:51.175668303327875%;} .row-fluid .offset5{margin-left:45.299145299145295%;*margin-left:45.1927623204219%;} .row-fluid .offset5:first-child{margin-left:42.73504273504273%;*margin-left:42.62865975631933%;} .row-fluid .offset4{margin-left:36.75213675213675%;*margin-left:36.645753773413354%;} .row-fluid .offset4:first-child{margin-left:34.18803418803419%;*margin-left:34.081651209310785%;} .row-fluid .offset3{margin-left:28.205128205128204%;*margin-left:28.0987452264048%;} .row-fluid .offset3:first-child{margin-left:25.641025641025642%;*margin-left:25.53464266230224%;} .row-fluid .offset2{margin-left:19.65811965811966%;*margin-left:19.551736679396257%;} .row-fluid .offset2:first-child{margin-left:17.094017094017094%;*margin-left:16.98763411529369%;} .row-fluid .offset1{margin-left:11.11111111111111%;*margin-left:11.004728132387708%;} .row-fluid .offset1:first-child{margin-left:8.547008547008547%;*margin-left:8.440625568285142%;} input,textarea,.uneditable-input{margin-left:0;} .controls-row [class*="span"]+[class*="span"]{margin-left:30px;} input.span12,textarea.span12,.uneditable-input.span12{width:1156px;} input.span11,textarea.span11,.uneditable-input.span11{width:1056px;} input.span10,textarea.span10,.uneditable-input.span10{width:956px;} input.span9,textarea.span9,.uneditable-input.span9{width:856px;} input.span8,textarea.span8,.uneditable-input.span8{width:756px;} input.span7,textarea.span7,.uneditable-input.span7{width:656px;} input.span6,textarea.span6,.uneditable-input.span6{width:556px;} input.span5,textarea.span5,.uneditable-input.span5{width:456px;} input.span4,textarea.span4,.uneditable-input.span4{width:356px;} input.span3,textarea.span3,.uneditable-input.span3{width:256px;} input.span2,textarea.span2,.uneditable-input.span2{width:156px;} input.span1,textarea.span1,.uneditable-input.span1{width:56px;} .thumbnails{margin-left:-30px;} .thumbnails>li{margin-left:30px;} .row-fluid .thumbnails{margin-left:0;}}.header-primary{background-color:#e7e7e7;border-bottom:1px solid #d7d7d7;margin:0px;margin-top:0px;padding-top:10px;}.header-primary h1{color:#555555;font-size:35px;font-weight:normal;}
+.header-primary .header-tabs{border-bottom:0px;margin:0px;margin-top:-10px;position:relative;top:9px;}.header-primary .header-tabs li a:link,.header-primary .header-tabs li a:visited{border:none;border-radius:0px;margin-bottom:4px;padding:6.666666666666667px 10px;color:#6f6f6f;}
+.header-primary .header-tabs li a:hover,.header-primary .header-tabs li a:active{background:none;border-bottom:4px solid #555555;margin-bottom:0px;color:#555555;}
+.header-primary .header-tabs li.active a:link,.header-primary .header-tabs li.active a:visited,.header-primary .header-tabs li.active a:hover,.header-primary .header-tabs li.active a:active{background:none;border-bottom:4px solid #cf402e;margin-bottom:0px;color:#cf402e;font-weight:bold;}
+html,body{height:100%;}
 #wrap{min-height:100%;height:auto !important;height:100%;margin:0 auto -100px;}#wrap .container-primary{padding-top:20px;padding-bottom:120px;}
 footer{background-color:#eeeeee;border-top:1px solid #dadada;height:80px;padding:11px 19px;}footer hr{border-bottom:1px solid #dadada;margin:10px 0px;}
 footer .credits{color:#555555;font-size:90%;}footer .credits a:link,footer .credits a:active,footer .credits a:visited,footer .credits a:hover{color:#555555;}
-.header-primary{background-color:#e7e7e7;border-bottom:1px solid #d7d7d7;margin:0px;margin-top:0px;padding-top:10px;}.header-primary h1{color:#555555;font-size:35px;font-weight:normal;}
 .navbar .navbar-inner{background:none;background-color:#f3f3f3;border-bottom:1px solid #dfdfdf;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.navbar .navbar-inner .container{background:url("../img/logo.png");background-position:left center;background-repeat:no-repeat;}
 .navbar .navbar-inner .brand{margin-left:19px;text-shadow:none;}.navbar .navbar-inner .brand:link,.navbar .navbar-inner .brand:active,.navbar .navbar-inner .brand:visited,.navbar .navbar-inner .brand:hover{color:#c24a3b;font-size:200%;}.navbar .navbar-inner .brand:link span,.navbar .navbar-inner .brand:active span,.navbar .navbar-inner .brand:visited span,.navbar .navbar-inner .brand:hover span{color:#c0c0c0;}
 .navbar .navbar-inner .navbar-search-form{background-color:#ffffff;border:1px solid #dfdfdf;border-radius:3px;margin-top:9px;color:#333333;}.navbar .navbar-inner .navbar-search-form input{border:none;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;margin:0px;}
@@ -904,6 +907,9 @@ textarea{resize:vertical;}
 .btn.btn-inverse i{background-image:url("../img/glyphicons-halflings-white.png");}
 .btn.btn-link{background:none;border:none;opacity:0.7;filter:alpha(opacity=70);color:#333333;}.btn.btn-link:hover:enabled,.btn.btn-link:active:enabled,.btn.btn-link:focus:enabled{opacity:0.9;filter:alpha(opacity=90);text-decoration:none;}
 a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opacity=90);color:#333333;text-decoration:none;}
+.pagination{margin:0px;padding:0px;}.pagination .count{margin-right:10.5px;padding:4px 0px;color:#999999;}
+.pagination ul{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}.pagination ul li{float:left;margin:0px;margin-right:4.666666666666667px;padding:0px;}.pagination ul li a:link,.pagination ul li a:visited{background-color:#ffffff;border:1px solid #f0f0f0;border-radius:3px;padding:3px 7px;color:#999999;}.pagination ul li a:link i,.pagination ul li a:visited i{opacity:0.55;filter:alpha(opacity=55);}
+.pagination ul li a:active,.pagination ul li a:hover{border:1px solid #999999;color:#555555;}.pagination ul li a:active i,.pagination ul li a:hover i{opacity:1;filter:alpha(opacity=100);}
 .editor{background-color:#eeeeee;border:1px solid #d5d5d5;border-radius:3px;}.editor .editor-error{padding:10.5px;padding-bottom:0px;margin-bottom:-10.5px;}.editor .editor-error .help-block{color:#cf402e;font-weight:bold;}
 .editor .editor-input{padding:10.5px;}.editor .editor-input>div{margin-top:-1px;margin-right:13.5px;}.editor .editor-input>div textarea{box-shadow:none;margin-bottom:0px;width:100%;}
 .editor .editor-actions{border-top:1px solid #d5d5d5;overflow:auto;padding:10.5px;}.editor .editor-actions .editor-tools{margin:0px;}.editor .editor-actions .editor-tools li{float:left;margin-right:10.5px;}.editor .editor-actions .editor-tools li .btn{padding-left:7px;padding-right:7px;}
@@ -967,6 +973,17 @@ a.btn-link:hover,a.btn-link:active,a.btn-link:focus{opacity:0.9;filter:alpha(opa
 .popular-threads .popular-thread .popular-thread-details .popular-thread-title:hover,.popular-threads .popular-thread .popular-thread-details .popular-thread-title:active{color:#333333;}
 .popular-threads .popular-thread .popular-thread-details .popular-thread-info{margin:0px;margin-left:14px;padding:0px;color:#999999;font-size:11.9px;}.popular-threads .popular-thread .popular-thread-details .popular-thread-info a:link,.popular-threads .popular-thread .popular-thread-details .popular-thread-info a:visited{color:#555555;}
 .popular-threads .popular-thread .popular-thread-details .popular-thread-info a:hover,.popular-threads .popular-thread .popular-thread-details .popular-thread-info a:active{color:#333333;}
+.watched-threads .table td{vertical-align:middle;}
+.watched-threads .table .watched-thread-flags{overflow:auto;width:118px;}.watched-threads .table .watched-thread-flags form{display:inline-block;float:left;margin:0px;}.watched-threads .table .watched-thread-flags form .btn{padding:3px 5px;padding-bottom:0px;margin-right:16px;}
+.watched-threads .table .watched-thread-flags .label{border:1px solid #555555;float:left;padding:1px 5px;padding-bottom:2px;line-height:20px;}.watched-threads .table .watched-thread-flags .label i{background-image:url("../img/glyphicons-halflings-white.png");}
+.watched-threads .table .watched-thread-flags .label.thread-read{border-color:#737373;background-color:#999999;}
+.watched-threads .table .watched-thread-flags .label.thread-new{border-color:#27576b;background-color:#3c85a3;}
+.watched-threads .table .thread-title:link,.watched-threads .table .thread-title:visited{color:#555555;}
+.watched-threads .table .thread-title:active,.watched-threads .table .thread-title:hover{color:#333333;}
+.watched-threads .table .thread-title.thread-title-new{font-weight:bold;}
+.watched-threads .table .thread-replies{color:#999999;text-align:right;}
+.watched-threads .table .thread-forum a:link,.watched-threads .table .thread-forum a:visited{color:#555555;}
+.watched-threads .table .thread-forum a:active,.watched-threads .table .thread-forum a:hover{color:#333333;}
 .index-rank-team ul li{background-color:#cf402e;border-color:#ae3627;}.index-rank-team ul li a:link,.index-rank-team ul li a:active,.index-rank-team ul li a:visited,.index-rank-team ul li a:hover{color:#ffffff;text-shadow:0px 1px 0px #3d130e;}
 .index-rank-team ul li .muted{color:#672017;}
 .index-rank-mvp ul li{background-color:#1a93c5;border-color:#037fb3;}.index-rank-mvp ul li a:link,.index-rank-mvp ul li a:active,.index-rank-mvp ul li a:visited,.index-rank-mvp ul li a:hover{color:#ffffff;text-shadow:0px 1px 0px #011f2c;}

static/cranefly/css/cranefly.less

@@ -65,12 +65,14 @@
 @import "bootstrap/responsive-1200px-min.less";
 
 // Sora theme
+@import "cranefly/header.less";
 @import "cranefly/scaffolding.less";
 @import "cranefly/navbar.less";
 @import "cranefly/breadcrumbs.less";
 @import "cranefly/messages.less";
 @import "cranefly/forms.less";
 @import "cranefly/buttons.less";
+@import "cranefly/pagination.less";
 @import "cranefly/editor.less";
 @import "cranefly/error.less";
 @import "cranefly/markdown.less";
@@ -79,6 +81,7 @@
 @import "cranefly/usercp.less";
 @import "cranefly/forummap.less";
 @import "cranefly/popularthreads.less";
+@import "cranefly/watchedthreads.less";
 
 // Keep ranks last for easy overrides!
 @import "ranks.less";

static/cranefly/css/cranefly/header.less

@@ -0,0 +1,55 @@
+// Primary header
+// -------------------------
+.header-primary {
+  background-color: @pageHeaderBackground;
+  border-bottom: 1px solid @pageHeaderBorder;
+  margin: 0px;
+  margin-top: 0px;
+  padding-top: @baseLineHeight / 2;
+
+  h1 {
+    color: @gray;
+    font-size: @fontSizeLarge * 2;
+    font-weight: normal;
+  }
+
+  .header-tabs {
+    border-bottom: 0px;
+    margin: 0px;
+    margin-top: (@baseLineHeight  * -0.5);
+    position: relative;
+    top: (@baseLineHeight * 0.5) - 1px;
+
+    li {
+      a {
+        &:link, &:visited {
+          border: none;
+          border-radius: 0px;
+          margin-bottom: 4px;
+          padding: (@baseLineHeight / 3) (@baseLineHeight / 2);
+
+          color: lighten(@gray, 10%);
+        }
+
+        &:hover, &:active {
+          background: none;
+          border-bottom: 4px solid @gray;
+          margin-bottom: 0px;
+
+          color: @gray;
+        }
+      }
+
+      &.active {
+        a:link, a:visited, a:hover, a:active {
+          background: none;
+          border-bottom: 4px solid @red;
+          margin-bottom: 0px;
+
+          color: @red;
+          font-weight: bold;
+        }
+      }
+    }
+  }
+}

static/cranefly/css/cranefly/pagination.less

@@ -0,0 +1,47 @@
+// Pagination
+// -------------------------
+.pagination {
+  margin: 0px;
+  padding: 0px;
+  
+  .count {
+    margin-right: @baseFontSize * 0.75;
+    padding: 4px 0px;
+
+    color: @grayLight;
+  }
+
+  ul {
+    .box-shadow(none);
+
+    li {
+      float: left;
+      margin: 0px;
+      margin-right: @baseFontSize / 3;
+      padding: 0px;
+
+      a:link, a:visited {
+        background-color: @paginationBackground;
+        border: 1px solid @paginationBorder;
+        border-radius: @baseBorderRadius;
+        padding: 3px 7px;
+
+        color: @grayLight;
+
+        i {
+          .opacity(55);
+        }
+      }
+
+      a:active, a:hover {
+        border: 1px solid @paginationActiveBackground;
+
+        color: @gray;
+
+        i {
+          .opacity(100);
+        }
+      }
+    }
+  }
+}

static/cranefly/css/cranefly/scaffolding.less

@@ -38,20 +38,4 @@ footer {
       color: @gray;
     }
   }
-}
-
-// Primary header
-// -------------------------
-.header-primary {
-  background-color: @pageHeaderBackground;
-  border-bottom: 1px solid @pageHeaderBorder;
-  margin: 0px;
-  margin-top: 0px;
-  padding-top: @baseLineHeight / 2;
-
-  h1 {
-    color: @gray;
-    font-size: @fontSizeLarge * 2;
-    font-weight: normal;
-  }
 }

static/cranefly/css/cranefly/watchedthreads.less

@@ -0,0 +1,79 @@
+// Watched threads
+// -------------------------
+
+.watched-threads {
+  .table {
+    td {
+      vertical-align: middle;
+    }
+
+    .watched-thread-flags {
+      overflow: auto;
+      width: 118px;
+
+      form {
+        display: inline-block;
+        float: left;
+        margin: 0px;
+
+        .btn {
+          padding: 3px 5px;
+          padding-bottom: 0px;
+          margin-right: @baseFontSize + 2px;
+        }
+      }
+
+      .label {
+        border: 1px solid @gray;
+        float: left;
+        padding: 1px 5px;
+        padding-bottom: 2px;
+
+        line-height: @baseLineHeight;
+
+        i {
+          background-image: url("@{iconWhiteSpritePath}");
+        }
+
+        &.thread-read {
+          border-color: darken(@grayLight, 15%);
+          background-color: @grayLight;
+        }
+
+        &.thread-new {
+          border-color: darken(@bluePale, 15%);
+          background-color: @bluePale;
+        }
+      }
+    }
+
+    .thread-title {
+      &:link, &:visited {
+        color: @gray;
+      }
+
+      &:active, &:hover {
+        color: @textColor;
+      }
+
+      &.thread-title-new {
+        font-weight: bold;
+      }
+    }
+
+    .thread-replies {
+      color: @grayLight;
+      text-align: right;
+    }
+
+    .thread-forum {
+      a:link, a:visited {
+        color: @gray;
+      }
+
+      a:active, a:hover {
+        color: @textColor;
+      }
+    }
+  }
+}

static/cranefly/css/variables.less

@@ -250,9 +250,9 @@
 
 // Pagination
 // -------------------------
-@paginationBackground:                #fff;
-@paginationBorder:                    #ddd;
-@paginationActiveBackground:          #f5f5f5;
+@paginationBackground:                @white;
+@paginationBorder:                    darken(@paginationBackground, 6%);
+@paginationActiveBackground:          @grayLight;
 
 
 // Hero unit

templates/cranefly/macros.html

@@ -31,52 +31,9 @@
   		{%- endif %} icon-white"></i></span></div>
 {%- endmacro %}
 
-{# Render forums list #}
-{% macro draw_forums(category, width=12) %}
-{% if category.template != 'row' %}
-<div class="row">
-  {% for forum in category.subforums %}
-    {{ draw_forum(category, forum, width) }}
-    {% if not loop.last and ((category.template == 'half' and loop.index is even()) or (category.template == 'quad' and loop.index is divisibleby(4))) %}
-    </div>
-    <div class="row">
-    {% endif %}
-  {% endfor %}
-</div>
-{% else %}
-{% for forum in category.subforums %}
-  {{ draw_forum(category, forum, width) }}
-{% endfor %}
-{% endif %}
-{% endmacro %}
-
-{# Render forum on list #}
-{% macro draw_forum(category, forum, width=12) %}
-<div{% if category.template != 'row' %} class="span{% if category.template == 'half' %}{{ widthratio(50, 100, width) }}{% elif category.template == 'quarter' %}{{ widthratio(25, 100, width) }}{% endif %}"{% endif %}>
-  <div class="well well-forum{% if forum.style %} {{ forum.style }}{% endif %}">
-    <div class="forum-icon {% if forum.type == 'redirect' %} redirect-icon{% elif not forum.is_read %} forum-new{% endif %}"><i class="icon-{% if forum.type == 'redirect' %}circle-arrow-right{% else %}comment{% endif %} icon-white"></i></div>
-    <div class="forum-details">
-      <div class="pull-left">
-        <h3><a href="{{ forum.type|url(slug=forum.slug, forum=forum.id) }}"{% if forum.type != 'redirect' and forum.is_read %} class="read-forum"{% endif %}>{{ forum.name }}</a></h3>
-        {% if forum.description %}<div class="muted">{{ forum.description }}</div>{% endif %}
-      </div>
-      {% if category.show_details and category.template != 'quarter' %}
-      {% if forum.type == 'redirect' %}
-      <div class="pull-right forum-stat stat-redirects">
-        <span class="stat {% if forum.redirects_delta > 0 %}positive{% else %}stag{% endif %}">{% if forum.redirects_delta > 0 %}+{{ forum.redirects_delta }}{% else %}{{ forum.redirects }}{% endif %}</span> <span class="muted">{% trans %}clicks{% endtrans %}</span>
-      </div>
-      {% else %}
-      <div class="pull-right forum-stat stat-posts">
-        <span class="stat {% if forum.posts_delta > 0 %}positive{% else %}stag{% endif %}">{% if forum.posts_delta > 0 %}+{{ forum.posts_delta }}{% else %}{{ forum.posts }}{% endif %}</span> <span class="muted">{% trans %}posts{% endtrans %}</span>
-      </div>
-      {% if category.template != 'half' %}
-      <div class="pull-right forum-stat stat-threads">
-        <span class="stat {% if forum.threads_delta > 0 %}positive{% else %}stag{% endif %}">{% if forum.threads_delta > 0 %}+{{ forum.threads_delta }}{% else %}{{ forum.threads }}{% endif %}</span> <span class="muted">{% trans %}threads{% endtrans %}</span>
-      </div>
-      {% endif %}
-      {% endif %}
-      {% endif %}
-    </div>
-  </div>
-</div>
-{% endmacro %}
+{# Render pagination label #}
+{% macro pager_label(pagination) -%}
+{%- trans current_page=('<strong>' ~ pagination['page'] ~ '</strong>')|safe, pages=('<strong>' ~ pagination['total'] ~ '</strong>')|safe -%}
+    Page {{ current_page }} of {{ pages }}
+{%- endtrans -%}
+{%- endmacro %}

templates/cranefly/watched.html

@@ -4,71 +4,96 @@
 
 {% block title %}{{ macros.page_title(title=_('Threads you are watching')) }}{% endblock %}
 
-{% block content %}
-<div class="page-header">
-  <h1>{% trans %}Threads you are watching{% endtrans %}</h1>
-</div>
+{% block container %}
+<div class="page-header header-primary">
+  <div class="container">
+    {% if messages %}
+    <div class="messages-list">
+      {{ messages_list(messages) }}
+    </div>
+    {% endif %}
+    <h1>{% trans %}Threads you are watching{% endtrans %}</h1>
 
-{% if message %}{{ macros.draw_message(message) }}{% endif %}
+    <ul class="nav nav-tabs header-tabs">
+      <li class="{% if not new %}active{% endif %}"><a href="{% url 'watched_threads' %}">{% trans %}All Threads{% endtrans %}</a></li>
+      <li class="{% if new %}active{% endif %}"><a href="{% url 'watched_threads_new' %}">{% trans %}Unread Threads{% endtrans %}</a></li>
+    </ul>
+  </div>
+</div>
 
-<div class="list-nav">
-  {% if items_total %}
-  {{ pager() }}
+<div class="container container-primary">
+  {% if message %}
+  <div class="messages-list">
+    {{ macros.draw_message(message) }}
+  </div>
   {% endif %}
-  <ul class="nav nav-pills pull-right">
-    <li class="{% if new %}primary{% else %}info{% endif %}"><a href="{% url 'watched_threads_new' %}">{% trans %}Unread Threads{% endtrans %}</a></li>
-    <li class="{% if not new %}primary{% else %}info{% endif %}"><a href="{% url 'watched_threads' %}">{% trans %}All Threads{% endtrans %}</a></li>
-  </ul>
-</div>
 
-{% if threads %}
-<ul class="unstyled shorts-list">
-  {% for thread in threads %}
-  <li id="watch-{{ loop.index }}">
-    <div class="row">
-      <div class="span7">
-        <img src="{% if thread.start_poster_id %}{{ thread.start_poster.get_avatar(36) }}{% else %}{{ macros.avatar_guest(24) }}{% endif %}" class="avatar tooltip-top" title="{% trans username=thread.start_poster_name %}Thread started by {{ username }}{% endtrans %}">
-        <p class="title">
-          <a href="{% url 'thread' thread=thread.pk, slug=thread.slug %}" class="hover-opacity tooltip-top" title="{% trans %}Jump to thread start{% endtrans %}"><i class="icon-asterisk"></i></a>
-          {% if not thread.is_read -%}
-          <a href="{% url 'thread_new' thread=thread.pk, slug=thread.slug %}" class="jump jump-new tooltip-top" title="{% trans %}Jump to first unread post{% endtrans %}">
-          {%- else -%}
-          <a href="{% url 'thread_last' thread=thread.pk, slug=thread.slug %}" class="jump jump-last tooltip-top" title="{% trans %}Jump to last post{% endtrans %}">
-          {%- endif -%}{% if not thread.is_read %}<strong>{{ thread.name }}</strong>{% else %}{{ thread.name }}{% endif %}</a>
-        </p>
-        <p class="location">{% trans forum=forum(thread.forum), starter=username(thread.start_poster_id, thread.start_poster_name, thread.start_poster_slug), start=thread.start|reldate %}Thread started by {{ starter }} in {{ forum }} on {{ start }}.{% endtrans %}</p>
-      </div>
-      <div class="span5 span-actions hover-opacity-strong">
-        <form action="{% url 'thread_unwatch' thread=thread.pk, slug=thread.slug %}" class="form-inline pull-right" method="post">
-          <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
-          <input type="hidden" name="retreat" value="{{ delete_retreat(loop) }}">
-          <button class="btn btn-danger"><i class="icon-remove icon-white"></i> {% trans %}Unwatch{% endtrans %}</button>
-        </form>
-        <form action="{% if thread.send_email %}{% url 'thread_unwatch_email' thread=thread.pk, slug=thread.slug %}{% else %}{% url 'thread_watch_email' thread=thread.pk, slug=thread.slug %}{% endif %}" class="form-inline pull-right" method="post">
-          <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
-          <input type="hidden" name="retreat" value="{{ request_path }}#watch-{{ loop.index }}">
-          <button class="btn{% if thread.send_email %} btn-success{% endif %}"><i class="icon-envelope{% if thread.send_email %} icon-white{% endif %}"></i> {% trans %}E-mail{% endtrans %}</button>
-        </form>
-      </div>
-    </div>
-  </li>
-  {% endfor %}
-</ul>
-<div class="list-nav last">
-  {{ pager() }}
-</div>
-{% else %}
-<p class="lead">{% if new -%}
+  {% if threads %}
+  <div class="watched-threads">
+    {{ pager() }}
+    <table class="table table-striped">
+      <thead>
+        <tr>
+          <th style="width: 1%">&nbsp;</th>
+          <th colspan="2">{% trans %}Thread{% endtrans %}</th>
+          <th class="span4">{% trans %}Forum{% endtrans %}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for thread in threads %}
+        <tr id="watch-{{ loop.index }}">
+          <td nowrap="nowrap">
+            <div class="watched-thread-flags">
+              <form action="{% url 'thread_unwatch' thread=thread.pk, slug=thread.slug %}" method="post">
+                <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
+                <input type="hidden" name="retreat" value="{{ delete_retreat(loop) }}">
+                <button type="submit" class="btn btn-danger tooltip-top" title="{% trans %}Unwatch{% endtrans %}"><i class="icon-remove"></i></button>
+              </form>
+
+              <form action="{% if thread.send_email %}{% url 'thread_unwatch_email' thread=thread.pk, slug=thread.slug %}{% else %}{% url 'thread_watch_email' thread=thread.pk, slug=thread.slug %}{% endif %}" method="post">
+                <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
+                <input type="hidden" name="retreat" value="{{ request_path }}#watch-{{ loop.index }}">
+                <button type="submit" class="btn btn-{% if thread.send_email %}success{% else %}inverse{% endif %} tooltip-top" title="{% if thread.send_email %}{% trans %}Don't notify with e-mail{% endtrans %}{% else %}{% trans %}Notify with e-mail{% endtrans %}{% endif %}"><i class="icon-envelope"></i></button>
+              </form>
+
+              <span class="label thread-{% if thread.is_read -%}read{% else %}new{% endif %} tooltip-top" title="{% if thread.is_read %}{% trans %}No new posts{% endtrans %}{% else %}{% trans %}New posts{% endtrans %}{% endif %}"><i class="icon-comment"></i></span>
+            </div>
+          </td>
+          <td>
+            {% if not thread.is_read -%}
+            <a href="{% url 'thread_new' thread=thread.pk, slug=thread.slug %}" class="thread-title thread-title-new tooltip-top" title="{% trans %}Jump to first unread post{% endtrans %}">
+            {%- else -%}
+            <a href="{% url 'thread_last' thread=thread.pk, slug=thread.slug %}" class="thread-title tooltip-top" title="{% trans %}Jump to last post{% endtrans %}">
+            {%- endif -%}{{ thread.name }}</a>
+          </td>
+          <td class="thread-replies">
+            {% trans replies=replies(thread.replies), last=thread.last|reldate|low %}{{ replies }}, last one on {{ last }}{% endtrans %}
+          </td>
+          <td class="thread-forum">
+            <a href="{% url 'forum' forum=thread.forum.pk, slug=thread.forum.slug %}">{{ thread.forum.name }}</a>
+          </td>
+        </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+    {{ pager() }}
+  </div>
+  {% else %}
+  <p class="lead">{% if new -%}
     {% trans %}There are no unread threads that you are watching.{% endtrans %}
     {%- else -%}
     {% trans %}You are not watching any threads.{% endtrans %}
     {%- endif %}</p>
-{% endif %}
+  {% endif %}
+</div>
 {% endblock %}
 
 
 {% macro pager() -%}
-  <ul class="pager pull-left">
+{% if pagination['total'] > 1 %}
+<div class="pagination">
+  <ul>
+    <li class="count">{{ macros.pager_label(pagination) }}</li>
     {% if new %}
     {%- if pagination['prev'] > 1 %}<li><a href="{% url 'watched_threads_new' %}" class="tooltip-top" title="{% trans %}Latest Threads{% endtrans %}"><i class="icon-chevron-left"></i> {% trans %}Latest{% endtrans %}</a></li>{% endif -%}
     {%- if pagination['prev'] > 0 %}<li><a href="{%- if pagination['prev'] > 1 %}{% url 'watched_threads_new' page=pagination['prev'] %}{% else %}{% url 'watched_threads_new' %}{% endif %}" class="tooltip-top" title="{% trans %}Newer Threads{% endtrans %}"><i class="icon-chevron-left"></i></a></li>{% endif -%}
@@ -78,26 +103,18 @@
     {%- if pagination['prev'] > 0 %}<li><a href="{%- if pagination['prev'] > 1 %}{% url 'watched_threads' page=pagination['prev'] %}{% else %}{% url 'watched_threads' %}{% endif %}" class="tooltip-top" title="{% trans %}Newer Threads{% endtrans %}"><i class="icon-chevron-left"></i></a></li>{% endif -%}
     {%- if pagination['next'] > 0 %}<li><a href="{% url 'watched_threads' page=pagination['next'] %}" class="tooltip-top" title="{% trans %}Older Threads{% endtrans %}"><i class="icon-chevron-right"></i></a></li>{% endif -%}
     {% endif %}
-    <li class="count">
-    {%- trans current_page=pagination['page'], pages=pagination['total'] -%}
-    Page {{ current_page }} of {{ pages }}
-    {%- endtrans -%}
-    </li>
   </ul>
+</div>
+{% endif %}
 {%- endmacro %}
 
 
-{% macro forum(forum) -%}
-<a href="{% url 'forum' forum=forum.pk, slug=forum.slug %}">{{ forum.name }}</a>
-{%- endmacro %}
-
-
-{% macro username(id, username, slug) -%}
-{%- if id -%}
-<a href="{% url 'user' user=id, username=slug %}">{{ username }}</a>
-{%- else -%}
-{{ username }}
-{%- endif -%}
+{% macro replies(thread_replies) -%}
+{% trans count=thread_replies, replies=thread_replies|intcomma -%}
+One reply
+{%- pluralize -%}
+{{ replies }} replies
+{%- endtrans %}
 {%- endmacro %}