- Misc fixes in Admin Control Panel CSS and templates

- WIP UserCP layout change

static/admin/css/admin.css

@@ -913,8 +913,8 @@ td>ul.list-actions{list-style:none;margin:0px;overflow:auto;padding:0px;}td>ul.l
 td>ul.list-actions>li>a,td>ul.list-actions>li>form>button{background:none;border:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;display:block;margin:0px 3px;padding:2px 5px;}td>ul.list-actions>li>a:hover,td>ul.list-actions>li>form>button:hover{background-color:#0088cc;}td>ul.list-actions>li>a:hover i,td>ul.list-actions>li>form>button:hover i{background-image:url("../img/glyphicons-halflings-white.png");}
 .navbar-sections .brand{margin-right:-10px;color:#333333;font-size:200%;}.navbar-sections .brand span{color:#999999;font-size:50%;line-height:50%;}
 .navbar-sections .user-profile{padding:7px 10px 7px 3px;margin:15px 5px;color:#222222;font-weight:bold;}
-.navbar-sections .nav{margin-left:0px;margin-right:0px;}.navbar-sections .nav li a,.navbar-sections .nav li a:link,.navbar-sections .nav li a:active,.navbar-sections .nav li a:visited{opacity:0.5;filter:alpha(opacity=50);padding:22px 10px 22px;margin:0px 5px;font-weight:bold;text-shadow:0px 1px 0px #ffffff;}
-.navbar-sections .nav li a:hover,.navbar-sections .nav li a:active{background:#e8e8e8;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:7px 10px 7px;margin:15px 5px;opacity:1;filter:alpha(opacity=100);}
+.navbar-sections .nav{margin-left:0px;margin-right:0px;}.navbar-sections .nav li a,.navbar-sections .nav li a:link,.navbar-sections .nav li a:visited,.navbar-sections .nav li a:active{opacity:0.5;filter:alpha(opacity=50);padding:22px 10px 22px;margin:0px 5px;font-weight:bold;text-shadow:0px 1px 0px #ffffff;}
+.navbar-sections .nav li a:focus,.navbar-sections .nav li a:hover{background-color:#e8e8e8;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:7px 10px 7px;margin:15px 5px;opacity:1;filter:alpha(opacity=100);}
 .navbar-sections .nav li form{margin:0px;padding:0px;}
 .navbar-sections .nav li.active a,.navbar-sections .nav li.active a:link,.navbar-sections .nav li.active a:active,.navbar-sections .nav li.active a:visited,.navbar-sections .nav li.active a:hover{background-color:#0088cc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;padding:7px 10px 7px;margin:15px 0px;opacity:1;filter:alpha(opacity=100);text-shadow:0px 1px 0px #0077b3;}.navbar-sections .nav li.active a i,.navbar-sections .nav li.active a:link i,.navbar-sections .nav li.active a:active i,.navbar-sections .nav li.active a:visited i,.navbar-sections .nav li.active a:hover i{background-image:url("../img/glyphicons-halflings-white.png");opacity:1;filter:alpha(opacity=100);}
 .navbar-sections .btn-link,.navbar-sections .btn-link:link,.navbar-sections .btn-link:visited{-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:7px 8px 7px;margin:15px 0px;opacity:0.6;filter:alpha(opacity=60);color:#333333;font-weight:bold;font-size:100%;}.navbar-sections .btn-link i,.navbar-sections .btn-link:link i,.navbar-sections .btn-link:visited i{opacity:1;filter:alpha(opacity=100);}

static/admin/css/admin/navbar.less

@@ -31,7 +31,7 @@
     margin-right: 0px;
     
     li {
-      a, a:link, a:active, a:visited{
+      a, a:link, a:visited, a:active {
         .opacity(50);
         padding: ((@navbarHeight - @baseLineHeight) / 2) 10px ((@navbarHeight - @baseLineHeight) / 2);
         margin: 0px 5px;
@@ -39,9 +39,9 @@
         font-weight: bold;
         text-shadow: 0px 1px 0px @white;
       }
-      
-      a:hover, a:active {
-        background: @navbarLinkBackgroundHover;
+
+      a:focus, a:hover {
+        background-color: @navbarLinkBackgroundHover;
         .border-radius(4px);
         padding: ((@navbarHeight - @baseLineHeight) / 2)-15px 10px ((@navbarHeight - @baseLineHeight) / 2)-15px;
         margin: 15px 5px;

static/sora/css/sora.css

@@ -895,12 +895,16 @@ th.table-sort.sort-desc a:hover{border-bottom:3px solid #eca09a;padding-bottom:5
 .page-header h2 .avatar{width:40px;height:40px;}
 .page-header h3 .avatar{width:28px;height:28px;}
 .page-header h4 .avatar{width:22px;height:22px;}
-.header-tabbed{border-bottom:none;padding-bottom:0px;margin-bottom:0px;}
-.nav-tabs li a:link,.nav-tabs li a:active,.nav-tabs li a:visited{opacity:0.6;filter:alpha(opacity=60);color:#333333;font-weight:bold;}
-.nav-tabs li i{margin-right:4px;}
-.nav-tabs li.active a:link,.nav-tabs li.active a:active,.nav-tabs li.active a:visited,.nav-tabs li.active a:hover{background-color:#fcfcfc;}.nav-tabs li.active a:link i,.nav-tabs li.active a:active i,.nav-tabs li.active a:visited i,.nav-tabs li.active a:hover i{background-image:url("../img/glyphicons-halflings.png");}
-.nav-tabs li.active a:link,.nav-tabs li.active a:active,.nav-tabs li.active a:visited,.nav-tabs li.active a:hover,.nav-tabs li a:hover{opacity:1;filter:alpha(opacity=100);}
-.nav-tabs li.fallback{float:right;}.nav-tabs li.fallback a:link,.nav-tabs li.fallback a:active,.nav-tabs li.fallback a:visited,.nav-tabs li.fallback a:hover{border-bottom:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;margin-top:4px;padding:4px 12px;}
+.header-tabbed{border-bottom:none;padding-bottom:0px;margin-bottom:0px;}.header-tabbed .nav-tabs li a:link,.header-tabbed .nav-tabs li a:active,.header-tabbed .nav-tabs li a:visited{opacity:0.6;filter:alpha(opacity=60);color:#333333;font-weight:bold;}
+.header-tabbed .nav-tabs li i{margin-right:4px;}
+.header-tabbed .nav-tabs li.active a:link,.header-tabbed .nav-tabs li.active a:active,.header-tabbed .nav-tabs li.active a:visited,.header-tabbed .nav-tabs li.active a:hover{background-color:#fcfcfc;}.header-tabbed .nav-tabs li.active a:link i,.header-tabbed .nav-tabs li.active a:active i,.header-tabbed .nav-tabs li.active a:visited i,.header-tabbed .nav-tabs li.active a:hover i{background-image:url("../img/glyphicons-halflings.png");}
+.header-tabbed .nav-tabs li.active a:link,.header-tabbed .nav-tabs li.active a:active,.header-tabbed .nav-tabs li.active a:visited,.header-tabbed .nav-tabs li.active a:hover,.header-tabbed .nav-tabs li a:hover{opacity:1;filter:alpha(opacity=100);}
+.header-tabbed .nav-tabs li.fallback{float:right;}.header-tabbed .nav-tabs li.fallback a:link,.header-tabbed .nav-tabs li.fallback a:active,.header-tabbed .nav-tabs li.fallback a:visited,.header-tabbed .nav-tabs li.fallback a:hover{border-bottom:none;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;margin-top:4px;padding:4px 12px;}
+.tabs-left{background-color:#f7f7f7;-webkit-border-radius:3px 0px 0px 3px;-moz-border-radius:3px 0px 0px 3px;border-radius:3px 0px 0px 3px;padding-left:8px;}.tabs-left ul{margin-bottom:0px;width:100%;}.tabs-left ul li.nav-header{font-size:100%;}
+.tabs-left ul li a,.tabs-left ul li a:link,.tabs-left ul li a:active,.tabs-left ul li a:visited{opacity:0.8;filter:alpha(opacity=80);font-weight:bold;}
+.tabs-left ul li a:hover{opacity:0.9;filter:alpha(opacity=90);}
+.tabs-left ul li.active a,.tabs-left ul li.active a:link,.tabs-left ul li.active a:active,.tabs-left ul li.active a:visited,.tabs-left ul li.active a:hover{background-color:#fcfcfc;opacity:1;filter:alpha(opacity=100);color:#000000;}.tabs-left ul li.active a i,.tabs-left ul li.active a:link i,.tabs-left ul li.active a:active i,.tabs-left ul li.active a:visited i,.tabs-left ul li.active a:hover i{background-image:url("../img/glyphicons-halflings.png");}
+.tabs-left ul li:first-child{padding-top:12px;}
 .navbar-fixed-top{position:static;}
 .navbar-userbar .navbar-inner{background:none;background-color:#fcfcfc;border-bottom:4px solid #e3e3e3;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;overflow:auto;}
 .navbar-userbar li a,.navbar-userbar li a:link,.navbar-userbar li a:active,.navbar-userbar li a:visited,.navbar-userbar li button.btn-link{opacity:0.5;filter:alpha(opacity=50);color:#000000;font-weight:bold;}.navbar-userbar li a i,.navbar-userbar li a:link i,.navbar-userbar li a:active i,.navbar-userbar li a:visited i,.navbar-userbar li button.btn-link i{opacity:1;filter:alpha(opacity=100);}

static/sora/css/sora/navs.less

@@ -4,43 +4,88 @@
   border-bottom: none;
   padding-bottom: 0px;
   margin-bottom: 0px;
-}
 
-.nav-tabs li {
-  a:link, a:active, a:visited {
-    .opacity(60);
+  .nav-tabs li {
+    a:link, a:active, a:visited {
+      .opacity(60);
+      
+      color: @textColor;
+      font-weight: bold;
+    }
     
-    color: @textColor;
-    font-weight: bold;
-  }
-  
-  i {
-    margin-right: 4px;
-  }
-  
-  &.active a:link, &.active a:active,
-  &.active a:visited, &.active a:hover {
-    background-color: @bodyBackground;
-        
     i {
-      background-image: url("@{iconSpritePath}");
+      margin-right: 4px;
+    }
+    
+    &.active a:link, &.active a:active,
+    &.active a:visited, &.active a:hover {
+      background-color: @bodyBackground;
+          
+      i {
+        background-image: url("@{iconSpritePath}");
+      }
+    }
+    
+    &.active a:link, &.active a:active,
+    &.active a:visited, &.active a:hover, a:hover {
+      .opacity(100);
+    }
+    
+    &.fallback {
+      float:right;
+      
+      a:link, a:active,
+      a:visited, a:hover {
+        border-bottom: none;
+        .border-radius(3px);
+        margin-top: 4px;
+        padding: 4px 12px;
+      }
     }
   }
+}
+
+// Tabs on left
+.tabs-left {
+  background-color: darken(@bodyBackground, 2%);
+  .border-radius(3px 0px 0px 3px);
+  padding-left: 8px;
   
-  &.active a:link, &.active a:active,
-  &.active a:visited, &.active a:hover, a:hover {
-    .opacity(100);
-  }
-  
-  &.fallback {
-    float:right;
+  ul {
+    margin-bottom: 0px;
+    width: 100%;
+    
+    li {
+      &.nav-header {
+        font-size: 100%;
+      }
+      
+      a, a:link, a:active, a:visited {
+        .opacity(80);
+        font-weight: bold;
+      }
+      
+      a:hover {
+        .opacity(90);
+      }
+      
+      &.active {
+        a, a:link, a:active,
+        a:visited, a:hover {
+          background-color: @bodyBackground;
+          .opacity(100);
+        
+          color: @black;
+            
+          i {
+            background-image: url("@{iconSpritePath}");
+          }          
+        }
+      }
+    }
     
-    a:link, a:active,
-    a:visited, a:hover {
-      border-bottom: none;
-      .border-radius(3px);
-      margin-top: 4px;
-      padding: 4px 12px;
+    li:first-child {
+      padding-top: 12px;
     }
   }
 }

templates/admin/settings/settings.html

@@ -17,7 +17,7 @@
       <h4>{% trans %}Search Settings{% endtrans %}</h4>
       <form action="{% url 'admin_settings_search' %}" class="form-inline" method="post">
         <input type="hidden" name="{{ csrf_id }}" value="{{ csrf_token }}">
-        {{ form_theme.input_text(search_form.fields.search_text, width=3, attrs={'placeholder': _('Search Settings...')}, horizontal=true) }}
+        {{ form_theme.input_text(search_form.fields.search_text, width=2, attrs={'placeholder': _('Search Settings...')}) }}
         <button type="submit" class="btn btn-primary"><i class="icon-search icon-white"></i></button>
       </form>
       <h4>{% trans%}Settings Groups{% endtrans %}</h4>{% for group in groups %}

templates/sora/userbar.html

@@ -11,7 +11,7 @@
         <li><a href="{% url 'register' %}" title="{% trans %}Register new account{% endtrans %}" class="tooltip-bottom"><i class="icon-edit"></i> {% trans %}Register{% endtrans %}</a></li>{% endif %}
       {% endif %}</ul>
       <ul class="nav pull-right">{% if user.is_authenticated() %}
-        <li><a href="#" title="{% trans %}Notifications{% endtrans %}" class="tooltip-bottom"><i class="icon-fire"></i><span class="stat att">13</span></a></li>
+        <li><a href="#" title="{% trans %}Your Notifications{% endtrans %}" class="tooltip-bottom"><i class="icon-fire"></i><span class="stat att">13</span></a></li>
         <li><a href="#" title="{% trans %}Private messages{% endtrans %}" class="tooltip-bottom"><i class="icon-inbox"></i><span class="stat">2</span></a></li>
         <li><a href="#" title="{% trans %}Reported posts{% endtrans %}" class="tooltip-bottom"><i class="icon-bell"></i><span class="stat">5</span></a></li>
         <li><a href="#" title="{% trans %}People you are following{% endtrans %}" class="tooltip-bottom"><i class="icon-heart"></i></a></li>

templates/sora/users/usercp/avatar.html

@@ -4,7 +4,6 @@
 
 {% block title %}{% trans %}Change your Avatar{% endtrans %} | {{ settings.board_name }}{% endblock %}
 
-{% block content %}
-{{ super() }}
+{% block action %}
 <h2>{% trans %}Change your Avatar{% endtrans %}</h2>
 {% endblock %}

templates/sora/users/usercp/credentials.html

@@ -4,7 +4,7 @@
 
 {% block title %}{% trans %}Change Sign-In Credentials{% endtrans %} | {{ settings.board_name }}{% endblock %}
 
-{% block content %}
+{% block action %}
 {{ super() }}
 <h2>{% trans %}Change Sign-In Credentials{% endtrans %}</h2>
 {% endblock %}

templates/sora/users/usercp/ignored.html

@@ -4,7 +4,7 @@
 
 {% block title %}{% trans %}Manage Ignored Members{% endtrans %} | {{ settings.board_name }}{% endblock %}
 
-{% block content %}
+{% block action %}
 {{ super() }}
 <h2>{% trans %}Manage Ignored Members{% endtrans %}</h2>
 {% endblock %}

templates/sora/users/usercp/options.html

@@ -4,7 +4,7 @@
 
 {% block title %}{% trans %}Change Forum Options{% endtrans %} | {{ settings.board_name }}{% endblock %}
 
-{% block content %}
+{% block action %}
 {{ super() }}
 <h2>{% trans %}Change Forum Options{% endtrans %}</h2>
 {% endblock %}

templates/sora/users/usercp/signature.html

@@ -4,7 +4,7 @@
 
 {% block title %}{% trans %}Change your Signature{% endtrans %} | {{ settings.board_name }}{% endblock %}
 
-{% block content %}
+{% block action %}
 {{ super() }}
 <h2>{% trans %}Change your Signature{% endtrans %}</h2>
 {% endblock %}

templates/sora/users/usercp/usercp.html

@@ -5,15 +5,30 @@
 {% block title %}{% trans %}Options{% endtrans %} | {{ settings.board_name }}{% endblock %}
 
 {% block content %}
-<div class="page-header header-tabbed">
+<div class="page-header">
   <h1>{% trans %}Your Control Panel{% endtrans %}</h1>
-  <ul class="nav nav-tabs">
-  	<li{% if tab == 'options' %} class="active"{% endif %}><a href="{% url 'usercp' %}"><i class="icon-cog"></i> {% trans %}Forum Options{% endtrans %}</a></li>
-  	<li{% if tab == 'credentials' %} class="active"{% endif %}><a href="{% url 'usercp_credentials' %}"><i class="icon-edit"></i> {% trans %}Email & Password{% endtrans %}</a></li>
-  	<li{% if tab == 'username' %} class="active"{% endif %}><a href="{% url 'usercp_username' %}"><i class="icon-user"></i> {% trans %}Username{% endtrans %}</a></li>
-  	<li{% if tab == 'avatar' %} class="active"{% endif %}><a href="{% url 'usercp_avatar' %}"><i class="icon-picture"></i> {% trans %}Avatar{% endtrans %}</a></li>
-  	<li{% if tab == 'signature' %} class="active"{% endif %}><a href="{% url 'usercp_signature' %}"><i class="icon-align-left"></i> {% trans %}Signature{% endtrans %}</a></li>
-  	<li{% if tab == 'ignored' %} class="active"{% endif %}><a href="{% url 'usercp_ignored' %}"><i class="icon-eye-close"></i> {% trans %}Ignored Members{% endtrans %}</a></li>
-  </ul>
+</div>
+<div class="row">
+  <div class="span3">
+  	<div class="tabbable tabs-left">
+  	  <ul class="nav nav-tabs">
+        <li class="nav-header">{% trans %}Your Activity{% endtrans %}</li>
+        <li><a href="{% url 'usercp_ignored' %}"><i class="icon-fire"></i> {% trans %}Your Notifications{% endtrans %}</a></li>
+        <li><a href="{% url 'usercp_ignored' %}"><i class="icon-comment"></i> {% trans %}Your Posts{% endtrans %}</a></li>
+        <li class="nav-header">{% trans %}Account Settings{% endtrans %}</li>
+        <li><a href="{% url 'usercp_ignored' %}"><i class="icon-bookmark"></i> {% trans %}Threads you are watching{% endtrans %}</a></li>
+        <li><a href="{% url 'usercp_ignored' %}"><i class="icon-heart"></i> {% trans %}People you are following{% endtrans %}</a></li>
+        <li{% if tab == 'avatar' %} class="active"{% endif %}><a href="{% url 'usercp_avatar' %}"><i class="icon-picture"></i> {% trans %}Change Avatar{% endtrans %}</a></li>
+        <li{% if tab == 'signature' %} class="active"{% endif %}><a href="{% url 'usercp_signature' %}"><i class="icon-align-left"></i> {% trans %}Edit Signature{% endtrans %}</a></li>
+  	    <li{% if tab == 'credentials' %} class="active"{% endif %}><a href="{% url 'usercp_credentials' %}"><i class="icon-edit"></i> {% trans %}Change E-mail or Password{% endtrans %}</a></li>
+  	    <li{% if tab == 'username' %} class="active"{% endif %}><a href="{% url 'usercp_username' %}"><i class="icon-user"></i> {% trans %}Change Username{% endtrans %}</a></li>
+  	    <li{% if tab == 'options' %} class="active"{% endif %}><a href="{% url 'usercp' %}"><i class="icon-cog"></i> {% trans %}Forum Options{% endtrans %}</a></li>
+        <li{% if tab == 'ignored' %} class="active"{% endif %}><a href="{% url 'usercp_ignored' %}"><i class="icon-eye-close"></i> {% trans %}People you ignore{% endtrans %}</a></li>
+      </ul>
+    </div>
+  </div>
+  <div class="span9">
+  	{% block action %}{% endblock %}
+  </div>
 </div>
 {% endblock %}

templates/sora/users/usercp/username.html

@@ -4,7 +4,7 @@
 
 {% block title %}{% trans %}Change your Username{% endtrans %} | {{ settings.board_name }}{% endblock %}
 
-{% block content %}
+{% block action %}
 {{ super() }}
 <h2>{% trans %}Change your Username{% endtrans %}</h2>
 {% endblock %}