UserCP redesigned for Cranefly

misago/usercp/username/views.py

@@ -21,7 +21,6 @@ def username(request):
         return error404(request)
 
     changes_left = request.acl.usercp.changes_left(request.user)
-
     next_change = None
     if request.acl.usercp.changes_expire() and not changes_left:
         next_change = request.user.namechanges.filter(
@@ -31,30 +30,34 @@ def username(request):
 
     message = request.messages.get_message('usercp_username')
     if request.method == 'POST':
-        org_username = request.user.username
-        form = UsernameChangeForm(request.POST, request=request)
-        if form.is_valid():
-            request.user.set_username(form.cleaned_data['username'])
-            request.user.save(force_update=True)
-            request.user.namechanges.create(date=timezone.now(), old_username=org_username)
-            request.messages.set_flash(Message(_("Your username has been changed.")), 'success', 'usercp_username')
-            # Alert followers of namechange
-            alert_time = timezone.now()
-            bulk_alerts = []
-            alerted_users = []
-            for follower in request.user.follows_set.iterator():
-                alerted_users.append(follower.pk)
-                alert = Alert(user=follower, message=ugettext_lazy("User that you are following, %(username)s, has changed his name to %(newname)s").message, date=alert_time)
-                alert.strong('username', org_username)
-                alert.profile('newname', request.user)
-                alert.hydrate()
-                bulk_alerts.append(alert)
-            if bulk_alerts:
-                Alert.objects.bulk_create(bulk_alerts)
-                User.objects.filter(id__in=alerted_users).update(alerts=F('alerts') + 1)
-            # Hop back
-            return redirect(reverse('usercp_username'))
-        message = Message(form.non_field_errors()[0], 'error')
+        if changes_left:
+            message = Message(_("You have exceeded the maximum number of name changes."), 'error')
+            form = UsernameChangeForm(request=request)
+        else:
+            org_username = request.user.username
+            form = UsernameChangeForm(request.POST, request=request)
+            if form.is_valid():
+                request.user.set_username(form.cleaned_data['username'])
+                request.user.save(force_update=True)
+                request.user.namechanges.create(date=timezone.now(), old_username=org_username)
+                request.messages.set_flash(Message(_("Your username has been changed.")), 'success', 'usercp_username')
+                # Alert followers of namechange
+                alert_time = timezone.now()
+                bulk_alerts = []
+                alerted_users = []
+                for follower in request.user.follows_set.iterator():
+                    alerted_users.append(follower.pk)
+                    alert = Alert(user=follower, message=ugettext_lazy("User that you are following, %(username)s, has changed his name to %(newname)s").message, date=alert_time)
+                    alert.strong('username', org_username)
+                    alert.profile('newname', request.user)
+                    alert.hydrate()
+                    bulk_alerts.append(alert)
+                if bulk_alerts:
+                    Alert.objects.bulk_create(bulk_alerts)
+                    User.objects.filter(id__in=alerted_users).update(alerts=F('alerts') + 1)
+                # Hop back
+                return redirect(reverse('usercp_username'))
+            message = Message(form.non_field_errors()[0], 'error')
     else:
         form = UsernameChangeForm(request=request)
 

static/cranefly/css/cranefly.css

@@ -877,33 +877,42 @@ footer .breadcrumb li.active{color:#555555;}
 .messages-list .alert-info{text-shadow:0px 1px 0px #0b516e;}
 .messages-list .alert-success{text-shadow:0px 1px 0px #2e572e;}
 .messages-list .alert-error{text-shadow:0px 1px 0px #742c23;}
-.form-container{background:#ffffff;border:1px solid #e7e7e7;border-radius:3px;margin:0px -21px;margin-bottom:20px;padding:20px;padding-top:-15px;}.form-container .form-header{border-bottom:1px solid #e7e7e7;margin-top:-20px;margin-bottom:20px;padding:10px 0px;}.form-container .form-header h1{margin:0px;padding:0px;font-size:17.5px;}
-.form-container form{margin:0px;}.form-container form fieldset{border-top:1px solid #e7e7e7;padding-top:10px;}.form-container form fieldset.first{border-top:none;padding-top:0px;}
+.form-container{background:#ffffff;border:1px solid #e7e7e7;border-radius:3px;margin:0px -21px;margin-bottom:20px;padding:20px;padding-top:-15px;}.form-container .form-header{border-bottom:1px solid #e7e7e7;margin-top:-20px;margin-bottom:20px;padding:10px 0px;}.form-container .form-header h1{margin:0px;padding:0px;font-size:17.5px;}.form-container .form-header h1 small{font-size:13.125px;font-weight:bold;}
+.form-container .form-header .btn{margin-left:14px;position:relative;bottom:30px;}
+.form-container .form-preview{background-color:#fbfbfb;border:1px solid #e7e7e7;border-radius:3px;margin-bottom:20px;padding:20px;}
+.form-container form{margin:0px;}.form-container form fieldset{border-top:1px solid #e7e7e7;padding-top:10px;}.form-container form fieldset legend{margin-bottom:-10px;color:#999999;font-size:14px;font-weight:bold;}.form-container form fieldset legend div{margin-bottom:-10px;}
+.form-container form fieldset.first{border-top:none;padding-top:0px;}
 .form-container form .control-label{font-weight:bold;}
 .form-container form.form-horizontal fieldset.last .control-group:last-child{margin-bottom:0px;padding-bottom:0px;}
 .form-container form.form-horizontal .form-actions{padding-left:200px;}
-.form-container .form-actions{border-radius:0px 0px 3px 3px;margin:-20px;margin-top:10px;}
-.btn{background:none;background-color:#fbfbfb;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;font-weight:bold;}.btn:hover,.btn:active{background-color:#ffffff;border-color:#a6a6a6;}
-.btn.btn-primary{background-color:#3c85a3;border-color:#357690;text-shadow:0px 1px 0px #27576b;}.btn.btn-primary:hover,.btn.btn-primary:active{background-color:#268eb9;border-color:#217ea4;}
+.form-container .form-actions{border-radius:0px 0px 3px 3px;margin:-20px;margin-top:10px;}.form-container .form-actions .form-actions-protip{margin-left:14px;color:#555555;font-weight:bold;}
+textarea{resize:vertical;}
+.btn{background:none;background-color:#fbfbfb;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;font-weight:bold;}.btn i{position:relative;bottom:1px;}
+.btn:hover,.btn:active{background-color:#ffffff;border-color:#a6a6a6;}
+.btn.btn-primary{background-color:#3c85a3;border-color:#357690;text-shadow:0px 1px 0px #27576b;}.btn.btn-primary:hover:enabled,.btn.btn-primary:active:enabled{background-color:#268eb9;border-color:#217ea4;}
 .btn.btn-primary i{background-image:url("../img/glyphicons-halflings-white.png");}
-.btn.btn-info{background-color:#587987;border-color:#4e6b78;text-shadow:0px 1px 0px #3a5059;}.btn.btn-info:hover,.btn.btn-info:active{background-color:#478098;border-color:#3f7286;}
+.btn.btn-info{background-color:#587987;border-color:#4e6b78;text-shadow:0px 1px 0px #3a5059;}.btn.btn-info:hover:enabled,.btn.btn-info:active:enabled{background-color:#478098;border-color:#3f7286;}
 .btn.btn-info i{background-image:url("../img/glyphicons-halflings-white.png");}
-.btn.btn-success{background-color:#589358;border-color:#4e834e;text-shadow:0px 1px 0px #2f6f2f;}.btn.btn-success:hover,.btn.btn-success:active{background-color:#46a546;border-color:#3e933e;}
+.btn.btn-success{background-color:#589358;border-color:#4e834e;text-shadow:0px 1px 0px #2f6f2f;}.btn.btn-success:hover:enabled,.btn.btn-success:active:enabled{background-color:#46a546;border-color:#3e933e;}
 .btn.btn-success i{background-image:url("../img/glyphicons-halflings-white.png");}
-.btn.btn-warning{background-color:#e59119;border-color:#ce8217;text-shadow:0px 1px 0px #ad6704;}.btn.btn-warning:hover,.btn.btn-warning:active{background-color:#f89406;border-color:#df8505;}
+.btn.btn-warning{background-color:#e59119;border-color:#ce8217;text-shadow:0px 1px 0px #ad6704;}.btn.btn-warning:hover:enabled,.btn.btn-warning:active:enabled{background-color:#f89406;border-color:#df8505;}
 .btn.btn-warning i{background-image:url("../img/glyphicons-halflings-white.png");}
-.btn.btn-danger{background-color:#cf402e;border-color:#ba3a29;text-shadow:0px 1px 0px #902d20;}.btn.btn-danger:hover,.btn.btn-danger:active{background-color:#e82c15;border-color:#d12813;}
+.btn.btn-danger{background-color:#cf402e;border-color:#ba3a29;text-shadow:0px 1px 0px #902d20;}.btn.btn-danger:hover:enabled,.btn.btn-danger:active:enabled{background-color:#e82c15;border-color:#d12813;}
 .btn.btn-danger i{background-image:url("../img/glyphicons-halflings-white.png");}
-.btn.btn-inverse{background-color:#333333;border-color:#262626;text-shadow:0px 1px 0px #0d0d0d;}.btn.btn-inverse:hover,.btn.btn-inverse:active{background-color:#262626;border-color:#1a1a1a;}
+.btn.btn-inverse{background-color:#333333;border-color:#262626;text-shadow:0px 1px 0px #0d0d0d;}.btn.btn-inverse:hover:enabled,.btn.btn-inverse:active:enabled{background-color:#262626;border-color:#1a1a1a;}
 .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,.btn.btn-link:active{opacity:0.9;filter:alpha(opacity=90);}
+.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;}
+.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;}
 .error-page{text-align:center;}.error-page .error-color{color:#cf402e;}
 .error-page .error-ban-reason{border:1px solid #cf402e;border-radius:3px;background-color:#fbeeed;background-image:repeating-linear-gradient(45deg, transparent, transparent 5px, #fdf6f5 5px, #fdf6f5 10px);-webkit-box-shadow:0px 0px 0px 3px #e38b80;-moz-box-shadow:0px 0px 0px 3px #e38b80;box-shadow:0px 0px 0px 3px #e38b80;padding:11px 19px;text-align:left;}.error-page .error-ban-reason :last-child{margin-bottom:0px;padding-bottom:0px;}
 .error-page .error-ban-expires{color:#cf402e;font-weight:bold;}
 .error-page .error-protips{margin-top:40px;}.error-page .error-protips a:link,.error-page .error-protips a:visited{background-color:#333333;border:1px solid #000000;border-radius:5px;margin:2px 10px;opacity:0.7;filter:alpha(opacity=70);padding:11px 19px;color:#ffffff;font-weight:bold;text-decoration:none;}
 .error-page .error-protips a:hover,.error-page .error-protips a:active{opacity:1;filter:alpha(opacity=100);}
-.markdown{margin:0px;}.markdown:first-child{margin-top:0px;}
-.markdown:last-child{margin-bottom:0px;}
+.markdown{margin:0px;}.markdown>:first-child{margin-top:0px;}
+.markdown>:last-child{margin-bottom:0px;}
 .markdown h1{font-size:28px;}
 .markdown h2{font-size:23.8px;}
 .markdown h3{font-size:21px;}
@@ -929,6 +938,15 @@ footer .breadcrumb li.active{color:#555555;}
 .signin-help h2{margin-bottom:0px;color:#999999;font-size:17.5px;}
 .signin-help ul{margin-bottom:0px;}
 .signin-help a:link,.signin-help a:visited{opacity:0.9;filter:alpha(opacity=90);color:#333333;font-weight:bold;}
+.usercp .usercp-tabs{border:none;}.usercp .usercp-tabs li{float:none;display:block;width:100%;}.usercp .usercp-tabs li a:link,.usercp .usercp-tabs li a:visited{border:none;border-radius:2px 0px 0px 2px;float:none;display:block;width:100%;color:#555555;font-weight:bold;}
+.usercp .usercp-tabs li a:active,.usercp .usercp-tabs li a:hover{background-color:#3c85a3;color:#ffffff;text-shadow:0px 1px 0px #1a3946;}
+.usercp .usercp-tabs li.active a:link,.usercp .usercp-tabs li.active a:visited,.usercp .usercp-tabs li.active a:active,.usercp .usercp-tabs li.active a:hover{background-color:#cf402e;color:#ffffff;text-shadow:0px 1px 0px #672017;}
+.usercp .usercp-action .form-container{min-height:180px;}
+.usercp-avatar-menu{margin-bottom:0px;}.usercp-avatar-menu .media-object{border-radius:5px;margin-top:14px;width:125px;height:125px;}
+.usercp-avatar-menu .media-body{margin-left:153px;}.usercp-avatar-menu .media-body ul.unstyled{margin-left:-13px;}
+.usercp-avatar-select .usercp-avatar-gallery{margin:0px -14px;overflow:auto;padding-bottom-bottom:14px;}.usercp-avatar-select .usercp-avatar-gallery .usercp-avatar-select-form{margin:0px;padding:0px;float:left;}.usercp-avatar-select .usercp-avatar-gallery .usercp-avatar-select-form .usercp-btn-avatar{margin:14px;padding:0px;}.usercp-avatar-select .usercp-avatar-gallery .usercp-avatar-select-form .usercp-btn-avatar,.usercp-avatar-select .usercp-avatar-gallery .usercp-avatar-select-form .usercp-btn-avatar:active,.usercp-avatar-select .usercp-avatar-gallery .usercp-avatar-select-form .usercp-btn-avatar:hover{opacity:1;filter:alpha(opacity=100);}.usercp-avatar-select .usercp-avatar-gallery .usercp-avatar-select-form .usercp-btn-avatar img,.usercp-avatar-select .usercp-avatar-gallery .usercp-avatar-select-form .usercp-btn-avatar:active img,.usercp-avatar-select .usercp-avatar-gallery .usercp-avatar-select-form .usercp-btn-avatar:hover img{opacity:1;filter:alpha(opacity=100);}
+.usercp-avatar-select .usercp-avatar-gallery .usercp-avatar-select-form .usercp-btn-avatar:active img,.usercp-avatar-select .usercp-avatar-gallery .usercp-avatar-select-form .usercp-btn-avatar:hover img{border-color:#0088cc;-webkit-box-shadow:0px 0px 3px #0088cc;-moz-box-shadow:0px 0px 3px #0088cc;box-shadow:0px 0px 3px #0088cc;}
+.usercp-avatar-crop .avatar-crop-preview{border-radius:5px;float:left;width:43.75px;height:43.75px;margin-right:14px;overflow:hidden;}
 .forum-map-category{background-color:#ffffff;border:1px solid #d5d5d5;border-radius:2px;-webkit-box-shadow:0px 0px 0px 3px #eeeeee;-moz-box-shadow:0px 0px 0px 3px #eeeeee;box-shadow:0px 0px 0px 3px #eeeeee;margin-bottom:20px;}.forum-map-category table{margin:0px;}.forum-map-category table caption{background-color:#3c85a3;border:1px solid #357690;border-radius:2px 2px 0px 0px;margin:-1px;padding:2px 10px;color:#ffffff;font-size:11.9px;font-weight:bold;text-align:left;text-shadow:0px 1px 0px #1a3946;}
 .forum-map-category table .forum-map-forum h3,.forum-map-category table .forum-map-subforum h3{margin:0px;padding:0px;font-size:14px;line-height:20px;}.forum-map-category table .forum-map-forum h3 a:link,.forum-map-category table .forum-map-subforum h3 a:link,.forum-map-category table .forum-map-forum h3 a:visited,.forum-map-category table .forum-map-subforum h3 a:visited{color:#555555;}
 .forum-map-category table .forum-map-forum h3 a:active,.forum-map-category table .forum-map-subforum h3 a:active,.forum-map-category table .forum-map-forum h3 a:hover,.forum-map-category table .forum-map-subforum h3 a:hover{color:#333333;}

static/cranefly/css/cranefly.less

@@ -71,10 +71,12 @@
 @import "cranefly/messages.less";
 @import "cranefly/forms.less";
 @import "cranefly/buttons.less";
+@import "cranefly/editor.less";
 @import "cranefly/error.less";
 @import "cranefly/markdown.less";
 @import "cranefly/index.less";
 @import "cranefly/signin.less";
+@import "cranefly/usercp.less";
 @import "cranefly/forummap.less";
 
 // Keep ranks last for easy overrides!

static/cranefly/css/cranefly/buttons.less

@@ -7,7 +7,11 @@
   .box-shadow(none);
 
   font-weight: bold;
-
+  
+  i {
+    position: relative;
+    bottom: 1px;
+  }
 
   &:hover, &:active {
     background-color: @white;
@@ -21,8 +25,10 @@
     text-shadow: 0px 1px 0px darken(@bluePale, 15%);
 
     &:hover, &:active {
-      background-color: saturate(@bluePale, 20%);
-      border-color: darken(saturate(@bluePale, 20%), 5%);
+      &:enabled {
+        background-color: saturate(@bluePale, 20%);
+        border-color: darken(saturate(@bluePale, 20%), 5%);
+      }
     }
 
     i {
@@ -37,8 +43,10 @@
     text-shadow: 0px 1px 0px darken(desaturate(@bluePale, 25%), 15%);
 
     &:hover, &:active {
-      background-color: desaturate(@bluePale, 10%);
-      border-color: darken(desaturate(@bluePale, 10%), 5%);
+      &:enabled {
+        background-color: desaturate(@bluePale, 10%);
+        border-color: darken(desaturate(@bluePale, 10%), 5%);
+      }
     }
 
     i {
@@ -53,8 +61,10 @@
     text-shadow: 0px 1px 0px darken(@green, 15%);
 
     &:hover, &:active {
-      background-color: @green;
-      border-color: darken(@green, 5%);
+      &:enabled {
+        background-color: @green;
+        border-color: darken(@green, 5%);
+      }
     }
 
     i {
@@ -69,8 +79,10 @@
     text-shadow: 0px 1px 0px darken(@orange, 15%);
 
     &:hover, &:active {
-      background-color: @orange;
-      border-color: darken(@orange, 5%);
+      &:enabled {
+        background-color: @orange;
+        border-color: darken(@orange, 5%);
+      }
     }
 
     i {
@@ -85,8 +97,10 @@
     text-shadow: 0px 1px 0px darken(@red, 15%);
 
     &:hover, &:active {
-      background-color: saturate(@red, 20%);
-      border-color: darken(saturate(@red, 20%), 5%);
+      &:enabled {
+        background-color: saturate(@red, 20%);
+        border-color: darken(saturate(@red, 20%), 5%);
+      }
     }
 
     i {
@@ -101,8 +115,10 @@
     text-shadow: 0px 1px 0px darken(@textColor, 15%);
 
     &:hover, &:active {
-      background-color: darken(@textColor, 5%);
-      border-color: darken(@textColor, 10%);
+      &:enabled {
+        background-color: darken(@textColor, 5%);
+        border-color: darken(@textColor, 10%);
+      }
     }
 
     i {
@@ -117,8 +133,21 @@
 
     color: @textColor;
 
-    &:hover, &:active {
-      .opacity(90);
+    &:hover, &:active, &:focus {
+      &:enabled {
+        .opacity(90);
+        
+        text-decoration: none;
+      }
     }
   }
+}
+
+a.btn-link {
+  &:hover, &:active, &:focus {
+    .opacity(90);
+
+    color: @textColor;
+    text-decoration: none;
+  }
 }

static/cranefly/css/cranefly/editor.less

@@ -0,0 +1,54 @@
+// Editor style
+// -------------------------
+
+.editor {
+  background-color: @editorBackground;
+  border: 1px solid darken(@editorBackground, 10%);
+  border-radius: @baseBorderRadius;
+
+  .editor-error {
+    padding: @editorPadding;
+    padding-bottom: 0px;
+    margin-bottom: @editorPadding * -1;
+
+    .help-block {
+      color: @red;
+      font-weight: bold;
+    }
+  }
+
+  .editor-input {
+    padding: @editorPadding;
+
+    &>div {
+      margin-top: -1px;
+      margin-right: @editorPadding + 3px;
+
+      textarea {
+        box-shadow: none;
+        margin-bottom: 0px;
+        width: 100%;
+      } 
+    }
+  }
+
+  .editor-actions {
+    border-top: 1px solid darken(@editorBackground, 10%);
+    overflow: auto;
+    padding: @editorPadding;
+
+    .editor-tools {
+      margin: 0px;
+
+      li {
+        float: left;
+        margin-right: @editorPadding;
+
+        .btn {
+          padding-left: 7px;
+          padding-right: 7px;
+        }
+      }
+    }
+  }
+}

static/cranefly/css/cranefly/forms.less

@@ -13,55 +13,98 @@
   padding-top: @baseLineHeight * -0.75;
 
   .form-header {
-		border-bottom: 1px solid darken(@bodyBackground, 8%);
-		margin-top: @baseLineHeight * -1;
-		margin-bottom: @baseLineHeight;
-		padding: (@baseLineHeight / 2) 0px;
+  	border-bottom: 1px solid darken(@bodyBackground, 8%);
+  	margin-top: @baseLineHeight * -1;
+  	margin-bottom: @baseLineHeight;
+  	padding: (@baseLineHeight / 2) 0px;
 
-		h1 {
-		  margin: 0px;
-		  padding: 0px;
+  	h1 {
+  	  margin: 0px;
+  	  padding: 0px;
 
-		  font-size: @fontSizeLarge;
-		}
+  	  font-size: @fontSizeLarge;
+
+      small {
+        font-size: @fontSizeLarge * 0.75;
+        font-weight: bold;
+      }
+  	}
+
+    .btn {
+      margin-left: @baseFontSize;
+      position: relative;
+      bottom: @baseLineHeight * 1.5;
+    }
+  }
+
+  .form-preview {
+    background-color: @bodyBackground;
+    border: 1px solid darken(@bodyBackground, 8%);
+    border-radius: @baseBorderRadius;
+    margin-bottom: @baseLineHeight;
+    padding: @baseLineHeight;
   }
 
   form {
-		margin: 0px;
+  	margin: 0px;
+
+  	fieldset {
+  	  border-top: 1px solid darken(@bodyBackground, 8%);
+  	  padding-top: @baseLineHeight * 0.5;
+
+      legend {
+        margin-bottom: @baseLineHeight * -0.5;
+
+        color: @grayLight;
+        font-size: @baseFontSize;
+        font-weight: bold;
 
-		fieldset {
-		  border-top: 1px solid darken(@bodyBackground, 8%);
-		  padding-top: @baseLineHeight * 0.5;
+        div {
+          margin-bottom: @baseLineHeight * -0.5;
+        }
+      }
 
-		  &.first {
-		  	border-top: none;
-		  	padding-top: 0px;
+  	  &.first {
+  	  	border-top: none;
+  	  	padding-top: 0px;
+  	  }
+  	}
+
+  	.control-label {
+  	  font-weight: bold;
+  	}
+
+  	&.form-horizontal {
+  		fieldset {
+  			&.last {
+  		    .control-group:last-child {
+  		  		margin-bottom: 0px;
+  		  		padding-bottom: 0px;
+  		    }
+  		  }
+  		}
+
+		  .form-actions {
+	      padding-left: @horizontalComponentOffset + @baseLineHeight;
 		  }
-		}
-
-		.control-label {
-		  font-weight: bold;
-		}
-
-		&.form-horizontal {
-			fieldset {
-				&.last {
-			    .control-group:last-child {
-			  		margin-bottom: 0px;
-			  		padding-bottom: 0px;
-			    }
-				}
-			}
-
-			.form-actions {
-    		padding-left: @horizontalComponentOffset + @baseLineHeight;
-			}
-		}
+	  }
   }
 
   .form-actions {
 		border-radius: 0px 0px @baseBorderRadius @baseBorderRadius;
 		margin: (@baseLineHeight * -1);
 		margin-top: @baseLineHeight * 0.5;
+
+    .form-actions-protip {
+      margin-left: @baseFontSize;
+
+      color: @gray;
+      font-weight: bold;
+    }
   }
+}
+
+// Only v-resize textareas
+textarea {
+  resize: vertical;
 }

static/cranefly/css/cranefly/markdown.less

@@ -4,11 +4,11 @@
 .markdown {
   margin: 0px;
 
-  &:first-child {
+  &>:first-child {
     margin-top: 0px;
   }
 
-  &:last-child {
+  &>:last-child {
     margin-bottom: 0px;
   }
 

static/cranefly/css/cranefly/usercp.less

@@ -0,0 +1,113 @@
+// User Control Panel
+// -------------------------
+
+.usercp {
+  .usercp-tabs {
+    border: none;
+
+    li {
+      float: none;
+      display: block;
+      width: 100%;
+
+      a:link, a:visited {
+        border: none;
+        border-radius: @borderRadiusSmall 0px 0px @borderRadiusSmall;
+        float: none;
+        display: block;
+        width: 100%;
+
+        color: @gray;
+        font-weight: bold;
+      }
+
+      a:active, a:hover {
+        background-color: @bluePale;
+
+        color: @white;
+        text-shadow: 0px 1px 0px darken(@bluePale, 25%);
+      }
+
+      &.active {
+        a:link, a:visited, a:active, a:hover {
+          background-color: @red;
+
+          color: @white;
+          text-shadow: 0px 1px 0px darken(@red, 25%);
+        }
+      }
+    }
+  }
+
+  .usercp-action {
+    .form-container {
+      min-height: 180px;
+    }
+  }
+}
+
+// Avatar Edit
+// -------------------------
+.usercp-avatar-menu {
+  margin-bottom: 0px;
+
+  .media-object {
+    border-radius: @borderRadiusLarge;
+    margin-top: @baseFontSize;
+    width: 125px;
+    height: 125px;
+  }
+
+  .media-body {
+    margin-left: (@baseFontSize * 2) + 125px;
+
+    ul.unstyled {
+      margin-left: @baseFontSize * -1 + 1px;
+    }
+  }
+}
+
+.usercp-avatar-select {
+  .usercp-avatar-gallery {
+    margin: 0px (@baseFontSize * -1);
+    overflow: auto;
+    padding-bottom-bottom: @baseFontSize;
+
+    .usercp-avatar-select-form {
+      margin: 0px;
+      padding: 0px;
+      float: left;
+
+      .usercp-btn-avatar {
+        margin: @baseFontSize;
+        padding: 0px;
+
+        &, &:active, &:hover {
+          .opacity(100);
+
+          img {
+            .opacity(100);
+          }
+        }
+
+        &:active, &:hover {
+          img {
+            border-color: @linkColor;
+            .box-shadow(0px 0px 3px @linkColor);
+          }
+        }
+      } 
+    }
+  }
+}
+
+.usercp-avatar-crop {
+  .avatar-crop-preview {
+    border-radius: @borderRadiusLarge;
+    float: left;
+    width: @fontSizeLarge * 2.5;
+    height: @fontSizeLarge * 2.5;
+    margin-right: @baseFontSize;
+    overflow: hidden;
+  }
+}

static/cranefly/css/variables.less

@@ -137,6 +137,11 @@
 @formActionsBackground:         #f5f5f5;
 @inputHeight:                   @baseLineHeight + 10px; // base line-height + 8px vertical padding + 2px top/bottom border
 
+// Editor
+// -------------------------
+@editorBackground:              @grayLighter;
+@editorPadding:                 @baseFontSize * 0.75;
+
 
 // Dropdowns
 // -------------------------

templates/cranefly/editor.html

@@ -3,7 +3,7 @@
   {% if field.errors %}
   <div class="editor-error">
     {% for error in field.errors %}
-    <p class="help-block" style="font-weight: bold;">{{ error }}</p>
+    <p class="help-block">{{ error }}</p>
     {% endfor %}
   </div>
   {% endif %}

templates/cranefly/usercp/avatar.html

@@ -6,27 +6,37 @@
 {% block title %}{{ macros.page_title(title=_('Change your Avatar')) }}{% endblock %}
 
 {% block action %}
-<h2>{% trans %}Change your Avatar{% endtrans %}</h2>
-{% if message %}{{ macros.draw_message(message, 'alert-form') }}{% endif %}
-<div class="row">
-  <div class="span3" style="text-align: right;">
-  	<img src="{{ user.get_avatar() }}" class="avatar-big" alt="{% trans %}Your Avatar{% endtrans %}" title="{% trans %}Your Avatar{% endtrans %}">
+<div class="form-container">
+
+  {% if message %}
+  <div class="messages-list">
+    {{ macros.draw_message(message) }}
   </div>
-  <div class="span6 avatar-menu">
-    <h3>{% if user.avatar_type == 'upload' -%}
-    	{% trans %}Uploaded Avatar{% endtrans %}
-    	{%- elif user.avatar_type == 'gallery' -%}
-    	{% trans %}Gallery Avatar{% endtrans %}
-    	{%- else -%}
-    	{% trans %}Gravatar{% endtrans %}
-    	{%- endif %} <small>{% trans %}Current Avatar{% endtrans %}</small></h3>
-    <ul class="unstyled">
-      {% if 'gravatar' in settings.avatars_types and user.avatar_type != 'gravatar' %}<li><i class="icon-share"></i> <form action="{% url 'usercp_avatar_gravatar' %}" method="post" class="form-button"><button type="submit" class="btn btn-link">{% trans %}Use Gravatar{% endtrans %}</button><input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}"></form></li>{% endif %}
-      {% if 'gallery' in settings.avatars_types %}<li><i class="icon-th"></i> <a href="{% url 'usercp_avatar_gallery' %}">{% trans %}Pick Avatar from Gallery{% endtrans %}</a></li>{% endif %}
-      {% if user.avatar_type == 'upload' %}<li id="crop-js" style="display: none;"><i class="icon-fullscreen"></i> <a href="{% url 'usercp_avatar_crop' %}">{% trans %}Crop Your Avatar{% endtrans %}</a></li>{% endif %}
-      {% if 'upload' in settings.avatars_types %}<li><i class="icon-picture"></i> <a href="{% url 'usercp_avatar_upload' %}">{% trans %}Upload Avatar{% endtrans %}</a></li>{% endif %}
-    </ul>
+  {% endif %}
+
+  <div class="media usercp-avatar-menu">
+    <span class="pull-left">
+      <img class="media-object" src="{{ user.get_avatar(126) }}">
+    </span>
+    <div class="media-body">
+      <div class="form-header">
+        <h1>{% if user.avatar_type == 'upload' -%}
+        {% trans %}Uploaded Avatar{% endtrans %}
+        {%- elif user.avatar_type == 'gallery' -%}
+        {% trans %}Gallery Avatar{% endtrans %}
+        {%- else -%}
+        {% trans %}Gravatar{% endtrans %}
+        {%- endif %}</h1>
+      </div>
+      <ul class="unstyled">
+        {% if 'gravatar' in settings.avatars_types and user.avatar_type != 'gravatar' %}<li><form action="{% url 'usercp_avatar_gravatar' %}" method="post" class="form-button"><button type="submit" class="btn btn-link"><i class="icon-share"></i> {% trans %}Use Gravatar{% endtrans %}</button><input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}"></form></li>{% endif %}
+        {% if 'gallery' in settings.avatars_types %}<li><a href="{% url 'usercp_avatar_gallery' %}" class="btn btn-link"><i class="icon-th"></i> {% trans %}Pick Avatar from Gallery{% endtrans %}</a></li>{% endif %}
+        {% if user.avatar_type == 'upload' %}<li id="crop-js" style="display: none;"><a href="{% url 'usercp_avatar_crop' %}" class="btn btn-link"><i class="icon-fullscreen"></i> {% trans %}Crop Your Avatar{% endtrans %}</a></li>{% endif %}
+        {% if 'upload' in settings.avatars_types %}<li><a href="{% url 'usercp_avatar_upload' %}" class="btn btn-link"><i class="icon-picture"></i> {% trans %}Upload Avatar{% endtrans %}</a></li>{% endif %}
+      </ul>
+    </div>
   </div>
+
 </div>
 {% endblock %}
 

templates/cranefly/usercp/avatar_banned.html

@@ -6,11 +6,19 @@
 {% block title %}{{ macros.page_title(title=_('Change your Avatar')) }}{% endblock %}
 
 {% block action %}
-<h2>{% trans %}Change your Avatar{% endtrans %}</h2>
-{% if user.avatar_ban_reason_user %}
-<p class="lead">{% trans username=user.username %}{{ username }}, your ability to change your avatar has been removed for following reason:{% endtrans %}</p>
-{{ user.avatar_ban_reason_user|markdown|safe }}
-{% else %}
-<p class="lead">{% trans username=user.username %}{{ username }}, your ability to change your avatar has been removed.{% endtrans %}</p>
-{% endif %}
+<div class="form-container">
+
+  <div class="form-header">
+    <h1>{% trans %}Change your Avatar{% endtrans %}</h1>
+  </div>
+
+  {% if user.avatar_ban_reason_user %}
+  <p class="lead">{% trans username=user.username %}{{ username }}, your ability to change your avatar has been removed for following reason:{% endtrans %}</p>
+  <div class="markdown">
+  {{ user.avatar_ban_reason_user|markdown|safe }}
+  </div>
+  {% else %}
+  <p class="lead">{% trans username=user.username %}{{ username }}, your ability to change your avatar has been removed.{% endtrans %}</p>
+  {% endif %}
+</div>
 {% endblock %}

templates/cranefly/usercp/avatar_crop.html

@@ -7,6 +7,38 @@
 {% block title %}{{ macros.page_title(title=_('Crop Avatar')) }}{% endblock %}
 
 {% block action %}
+<div class="form-container usercp-avatar-crop">
+
+  <form action="{% if after_upload %}{% url 'usercp_avatar_upload_crop' %}{% else %}{% url 'usercp_avatar_crop' %}{% endif %}" method="post">
+
+    <div class="form-header">
+      <div class="avatar-crop-preview">
+        <img src="{{ MEDIA_URL }}{{ source }}" id="preview" alt="{% trans %}Avatar Preview{% endtrans %}" class="jcrop-preview" />
+      </div>
+      <h1>{% trans %}Crop Avatar{% endtrans %} <small>{% trans %}Change your Avatar{% endtrans %}</h1>
+      <a href="{% url 'usercp_avatar' %}" class="btn btn-inverse pull-right">{% trans %}Cancel{% endtrans %}</a>
+      <button name="save" type="submit" class="btn btn-danger pull-right">{% trans %}Crop Avatar{% endtrans %}</button>
+    </div>
+
+    {% if message %}
+    <div class="messages-list">
+      {{ macros.draw_message(message) }}
+    </div>
+    {% endif %}
+
+    <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
+    <input type="hidden" id="crop-b" name="crop_b" value="">
+    <input type="hidden" id="crop-w" name="crop_w" value="">
+    <input type="hidden" id="crop-x" name="crop_x" value="">
+    <input type="hidden" id="crop-y" name="crop_y" value="">
+
+    <div class="avatar-crop-target"><img src="{{ MEDIA_URL }}{{ source }}" id="target" alt="{% trans %}Uploaded Image{% endtrans %}"></div>
+
+  </form>
+  
+</div>
+
+{#
 <h2>{% trans %}Crop Avatar{% endtrans %} <small>{% trans %}Change your Avatar{% endtrans %}</small></h2>
 {% if message %}{{ macros.draw_message(message, 'alert-form') }}{% endif %}
 <form action="{% if after_upload %}{% url 'usercp_avatar_upload_crop' %}{% else %}{% url 'usercp_avatar_crop' %}{% endif %}" method="post">
@@ -29,7 +61,7 @@
       </div>
     </div>
   </div>
-</form>
+</form>#}
 {% endblock %}
 
 {% block javascripts %}
@@ -43,6 +75,7 @@
         var crop_w = $('#crop-w');
         var crop_x = $('#crop-x');
         var crop_y = $('#crop-y');
+        var afx = $('.avatar-crop-preview').width() / {{ avatar_size }};
 
         $('#target').Jcrop({
           onChange: updatePreview,
@@ -72,10 +105,10 @@
             $(crop_y).val(c.y);
 
             $('#preview').css({
-              width: Math.round(rx * boundx) + 'px',
-              height: Math.round(ry * boundy) + 'px',
-              marginLeft: '-' + Math.round(rx * c.x) + 'px',
-              marginTop: '-' + Math.round(ry * c.y) + 'px'
+              width: Math.round(rx * boundx * afx) + 'px',
+              height: Math.round(ry * boundy * afx) + 'px',
+              marginLeft: '-' + Math.round(rx * c.x * afx) + 'px',
+              marginTop: '-' + Math.round(ry * c.y * afx) + 'px'
             });
           }
         };

templates/cranefly/usercp/avatar_gallery.html

@@ -6,21 +6,34 @@
 {% block title %}{{ macros.page_title(title=_('Avatars Gallery')) }}{% endblock %}
 
 {% block action %}
-<h2>{% trans %}Pick Avatar from Gallery{% endtrans %} <small>{% trans %}Change your Avatar{% endtrans %}</small></h2>
-{% if message %}{{ macros.draw_message(message, 'alert-form') }}{% endif %}
+<div class="form-container">
 
-<div class="form-avatar-select">
+  <div class="form-header">
+    <h1>{% trans %}Pick Avatar from Gallery{% endtrans %} <small>{% trans %}Change your Avatar{% endtrans %}</small></h1>
+  </div>
+
+  {% if message %}
+  <div class="messages-list">
+    {{ macros.draw_message(message) }}
+  </div>
+  {% endif %}
+
+  <div class="usercp-avatar-select">
   {% for gallery in galleries %}
-  {% if loop.index > 0 %}<hr>{% endif %}
-  {% for avatar in gallery.avatars %}
-  <form action="{% url 'usercp_avatar_gallery' %}" method="post" class="form-button">
-    <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
-    <input type="hidden" name="avatar_image" value="{{ avatar }}">
-    <button type="submit" class="btn btn-link">
-      <img src="{{ STATIC_URL }}avatars/{{ avatar }}" alt="{% trans %}Gallery Avatar{% endtrans %}" class="avatar-big img-polaroid">
-    </button>
-  </form>
-  {% endfor %}
+    {% if loop.index0 > 0 and gallery.avatars %}<hr>{% endif %}
+    <div class="usercp-avatar-gallery">
+      {% for avatar in gallery.avatars %}
+      <form action="{% url 'usercp_avatar_gallery' %}" class="usercp-avatar-select-form" method="post">
+        <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
+        <input type="hidden" name="avatar_image" value="{{ avatar }}">
+        <button type="submit" class="btn btn-link usercp-btn-avatar">
+          <img src="{{ STATIC_URL }}avatars/{{ avatar }}" alt="{% trans %}Gallery Avatar{% endtrans %}" class="img-polaroid">
+        </button>
+      </form>
+      {% endfor %}
+    </div>
   {% endfor %}
+  </div>
+  
 </div>
 {% endblock %}

templates/cranefly/usercp/avatar_upload.html

@@ -7,16 +7,28 @@
 {% block title %}{{ macros.page_title(title=_('Upload Avatar')) }}{% endblock %}
 
 {% block action %}
-<h2>{% trans %}Upload Avatar{% endtrans %} <small>{% trans %}Change your Avatar{% endtrans %}</small></h2>
-{% if message %}{{ macros.draw_message(message, 'alert-form') }}{% endif %}
-<form action="{% url 'usercp_avatar_upload' %}" method="post" enctype="multipart/form-data">
-  <input type="hidden" id="js_check" name="js_check" value="0">
-  {{ form_theme.form_widget(form, width=9) }}
-  <div class="form-actions">
-  	<button name="save" type="submit" class="btn btn-primary">{% trans %}Upload Avatar{% endtrans %}</button>
-  	<a href="{% url 'usercp_avatar' %}" class="btn">{% trans %}Cancel{% endtrans %}</a>
+<div class="form-container">
+
+  <div class="form-header">
+    <h1>{% trans %}Upload Avatar{% endtrans %} <small>{% trans %}Change your Avatar{% endtrans %}</h1>
+  </div>
+
+  {% if message %}
+  <div class="messages-list">
+    {{ macros.draw_message(message) }}
   </div>
-</form>
+  {% endif %}
+
+  <form action="{% url 'usercp_avatar_upload' %}" method="post" enctype="multipart/form-data">
+    <input type="hidden" id="js_check" name="js_check" value="0">
+    {{ form_theme.form_widget(form, width=9) }}
+    <div class="form-actions">
+      <button name="save" type="submit" class="btn btn-primary">{% trans %}Upload Avatar{% endtrans %}</button>
+      <a href="{% url 'usercp_avatar' %}" class="btn">{% trans %}Cancel{% endtrans %}</a>
+    </div>
+  </form>
+  
+</div>
 {% endblock %}
 
 

templates/cranefly/usercp/credentials.html

@@ -7,12 +7,26 @@
 {% block title %}{{ macros.page_title(title=_('Change your Sign-In Credentials')) }}{% endblock %}
 
 {% block action %}
-<h2>{% trans %}Change Sign-In Credentials{% endtrans %}</h2>
-{% if message %}{{ macros.draw_message(message, 'alert-form') }}{% endif %}
-<form action="{% url 'usercp_credentials' %}" method="post">
-  {{ form_theme.form_widget(form, width=9) }}
-  <div class="form-actions">
-  	<button name="save" type="submit" class="btn btn-primary">{% trans %}Change Credentials{% endtrans %}</button>
+<div class="form-container">
+
+  <div class="form-header">
+    <h1>{% trans %}Change Sign-In Credentials{% endtrans %}</h1>
+  </div>
+
+  {% if message %}
+  <div class="messages-list">
+    {{ macros.draw_message(message) }}
   </div>
-</form>
+  {% endif %}
+
+  <form action="{% url 'usercp_credentials' %}" method="post">
+    <div class="form-fields">
+      {{ form_theme.form_widget(form, width=9) }}
+    </div>
+    <div class="form-actions">
+  	  <button name="save" type="submit" class="btn btn-primary">{% trans %}Change Credentials{% endtrans %}</button>
+    </div>
+  </form>
+  
+</div>
 {% endblock %}

templates/cranefly/usercp/layout.html

@@ -2,23 +2,35 @@
 {% load i18n %}
 {% load url from future %}
 
-{% block content %}
-<div class="page-header">
-  <h1>{% trans %}Your Control Panel{% endtrans %}</h1>
+{% block container %}
+<div class="page-header header-primary">
+  <div class="container">
+    {% if messages %}
+    <div class="messages-list">
+      {{ messages_list(messages) }}
+    </div>
+    {% endif %}
+    <h1>{% trans %}Your Control Panel{% endtrans %}</h1>
+  </div>
 </div>
-<div class="row">
-  <div class="span3">
-  	<div class="tabbable tabs-left">
-  	  <ul class="nav nav-tabs">
+
+<div class="container container-primary">
+  <div class="row usercp">
+    <div class="span3">
+
+      <ul class="nav nav-pills usercp-tabs">
         <li class="nav-header">{% trans %}Account Settings{% endtrans %}</li>
         {% for link in tabs %}
         <li{% if link.active %} class="active"{% endif %}><a href="{{ link.route|url }}">{{ link.name }}</a></li>
         {% endfor %}
       </ul>
+
+    </div>
+    <div class="span9 usercp-action">
+
+      {% block action %}{% endblock %}
+
     </div>
-  </div>
-  <div class="span9 sidetabs-content">
-  	{% block action %}{% endblock %}
   </div>
 </div>
 {% endblock %}

templates/cranefly/usercp/options.html

@@ -7,13 +7,27 @@
 {% block title %}{{ macros.page_title(title=_('Change Forum Options')) }}{% endblock %}
 
 {% block action %}
-<h2>{% trans %}Change Forum Options{% endtrans %}</h2>
-{% if message %}{{ macros.draw_message(message, 'alert-form') }}{% endif %}
-<form action="{% url 'usercp_options' %}" method="post">
-  {{ form_theme.form_widget(form, width=9) }}
-  <div class="form-actions">
-  	<button name="save" type="submit" class="btn btn-primary">{% trans %}Change Options{% endtrans %}</button>
-  	<a href="{% url 'usercp' %}" class="btn">{% trans %}Cancel{% endtrans %}</a>
+<div class="form-container">
+
+  <div class="form-header">
+    <h1>{% trans %}Change Forum Options{% endtrans %}</h1>
+  </div>
+
+  {% if message %}
+  <div class="messages-list">
+    {{ macros.draw_message(message) }}
   </div>
-</form>
+  {% endif %}
+
+  <form action="{% url 'usercp_options' %}" method="post">
+    <div class="form-fields">
+      {{ form_theme.form_widget(form, width=9) }}
+    </div>
+    <div class="form-actions">
+      <button name="save" type="submit" class="btn btn-primary">{% trans %}Change Options{% endtrans %}</button>
+      <a href="{% url 'usercp' %}" class="btn">{% trans %}Cancel{% endtrans %}</a>
+    </div>
+  </form>
+  
+</div>
 {% endblock %}

templates/cranefly/usercp/signature.html

@@ -8,22 +8,35 @@
 {% block title %}{{ macros.page_title(title=_('Edit your Signature')) }}{% endblock %}
 
 {% block action %}
-<h2>{% trans %}Edit your Signature{% endtrans %}</h2>
-{% if message %}{{ macros.draw_message(message, 'alert-form') }}{% endif %}
-{% if user.signature_preparsed %}
-<div class="well" style="margin: 0px; margin-bottom: 32px; padding: 12px;">
-  <div class="markdown">
-    {{ user.signature_preparsed|markdown_final|safe }}
+<div class="form-container">
+
+  <div class="form-header">
+    <h1>{% trans %}Edit your Signature{% endtrans %}</h1>
+  </div>
+
+  {% if message %}
+  <div class="messages-list">
+    {{ macros.draw_message(message) }}
   </div>
+  {% endif %}
+
+  {% if user.signature_preparsed %}
+  <div class="form-preview signature-preview">
+    <div class="markdown">
+      {{ user.signature_preparsed|markdown_final|safe }}
+    </div>
+  </div>
+  {% endif %}
+
+  <form action="{% url 'usercp_signature' %}" method="post">
+    <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
+    {{ editor.editor(form.fields.signature, _('Save Signature'),
+      hide_links=(not acl.usercp.allow_signature_links()),
+      hide_images=(not acl.usercp.allow_signature_images()),
+      hide_hr=True) }}
+  </form>
+  
 </div>
-{% endif %}
-<form action="{% url 'usercp_signature' %}" method="post">
-  <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
-  {{ editor.editor(form.fields.signature, _('Save Signature'),
-        hide_links=(not acl.usercp.allow_signature_links()),
-        hide_images=(not acl.usercp.allow_signature_images()),
-        hide_hr=True) }}
-</form>
 {% endblock %}
 
 {% block javascripts %}

templates/cranefly/usercp/signature_banned.html

@@ -6,11 +6,19 @@
 {% block title %}{{ macros.page_title(title=_('Edit your Signature')) }}{% endblock %}
 
 {% block action %}
-<h2>{% trans %}Edit your Signature{% endtrans %}</h2>
-{% if user.signature_ban_reason_user %}
-<p class="lead">{% trans username=user.username %}{{ username }}, your ability to edit your signature has been removed for following reason:{% endtrans %}</p>
-{{ user.signature_ban_reason_user|markdown|safe }}
-{% else %}
-<p class="lead">{% trans username=user.username %}{{ username }}, your ability to edit your signature has been removed.{% endtrans %}</p>
-{% endif %}
+<div class="form-container">
+
+  <div class="form-header">
+    <h1>{% trans %}Edit your Signature{% endtrans %}</h1>
+  </div>
+
+  {% if user.signature_ban_reason_user %}
+  <p class="lead">{% trans username=user.username %}{{ username }}, your ability to edit your signature has been removed for following reason:{% endtrans %}</p>
+  <div class="markdown">
+  {{ user.signature_ban_reason_user|markdown|safe }}
+  </div>
+  {% else %}
+  <p class="lead">{% trans username=user.username %}{{ username }}, your ability to edit your signature has been removed.{% endtrans %}</p>
+  {% endif %}
+</div>
 {% endblock %}

templates/cranefly/usercp/username.html

@@ -7,50 +7,40 @@
 {% block title %}{{ macros.page_title(title=_('Change your Username')) }}{% endblock %}
 
 {% block action %}
-<h2>{% trans %}Change your Username{% endtrans %}</h2>
-{% if message %}{{ macros.draw_message(message, 'alert-form') }}{% endif %}
-<p class="lead">{% if changes_left > 0 -%}
-{% trans count=changes_left -%}
-You can change your username one more time.
-{%- pluralize -%}
-You can change your username {{ count }} more times.
-{%- endtrans %}
-{%- else -%}
-{% trans %}You have exceeded the maximum number of name changes.{% endtrans %}
-{%- if acl.usercp.changes_expire() -%}
-<br>
-{% trans next_change=next_change|reldate|low %}You will be able to change your username on {{ next_change }}{% endtrans %}
-{%- endif %}
-{%- endif %}</p>
-{% if changes_left > 0 %}
-<form action="{% url 'usercp_username' %}" method="post">
-  {{ form_theme.form_widget(form, width=9) }}
-  <div class="form-actions">
-  	<button name="save" type="submit" class="btn btn-primary">{% trans %}Change Name{% endtrans %}</button>
+<div class="form-container">
+
+  <div class="form-header">
+    <h1>{% trans %}Change your Username{% endtrans %}</h1>
+  </div>
+
+  {% if message %}
+  <div class="messages-list">
+    {{ macros.draw_message(message) }}
   </div>
-</form>
-{% endif %}
-{% if changes_history|length > 0 %}
-<h3>{% trans count=changes_history|length -%}
-Last name changes
-{%- pluralize -%}
-Last {{ count }} name changes
-{%- endtrans %}</h3>
-<table class="table table-striped">
-  <thead>
-    <tr>
-      <th class="span3">{% trans %}Old Name{% endtrans %}</th>
-      <th>{% trans %}Change Date{% endtrans %}</th>
-    </tr>
-  </thead>
-  <tbody>
-    {% for change in changes_history %}
-    <tr>
-      <td><strong>{{ change.old_username }}</strong></td>
-      <td>{{ change.date|reltimesince }}</td>
-    </tr>
-    {% endfor %}
-  </tbody>
-</table>
-{% endif %}
+  {% endif %}
+
+  <form action="{% url 'usercp_username' %}" method="post">
+    <div class="form-fields">
+      {% if changes_left == 0 %}
+      {% do form.fields['username']['attrs'].update({'disabled': 'disabled'}) %}
+      {% endif %}
+      {{ form_theme.form_widget(form, width=9) }}
+    </div>
+    <div class="form-actions">
+      <button name="save" type="submit" class="btn btn-primary"{% if changes_left == 0 %} disabled="disabled"{% endif %}>{% trans %}Change Name{% endtrans %}</button>
+      <span class="form-actions-protip">{% if changes_left > 0 -%}
+      {% trans count=changes_left -%}
+      You can change your username one more time.
+      {%- pluralize -%}
+      You can change your username {{ count }} more times.
+      {%- endtrans %}
+      {%- elif acl.usercp.changes_expire() -%}
+      {% trans next_change=next_change|reldate|low %}You will be able to change your username on {{ next_change }}{% endtrans %}
+      {%- else -%}
+      {% trans %}You have exceeded the maximum number of name changes.{% endtrans %}
+      {%- endif %}
+      </span>
+    </div>
+  </form>
+</div>
 {% endblock %}