Changeset 9805

Timestamp:

04/26/2015 09:06:18 AM (10 years ago)

Author:

imath

Message:

Avatar UI : improve the avatar nav and prefix the classes in the avatar status box

Props hnla, johnjamesjacoby

See #6290

Location:

trunk/src

Files:

• bp-core/css/avatar-rtl.css (modified) (4 diffs)
• bp-core/css/avatar.css (modified) (4 diffs)
• bp-core/js/bp-plupload.js (modified) (1 diff)
• bp-templates/bp-legacy/buddypress/assets/_attachments/uploader.php (modified) (1 diff)

trunk/src/bp-core/css/avatar-rtl.css

@@ -21 +21 @@
 }
 
-.progress {
+div.bp-avatar-status .bp-progress {
     background: none;
     border: 1px solid #d1d1d1;
@@ -34 +34 @@
 }
 
-.bar {
+div.bp-avatar-status .bp-bar {
     background-color: #c3ff88;
     width: 0;
@@ -73 +73 @@
 
 .bp-avatar-nav .avatar-nav-items li.avatar-nav-item {
-    float: right;
+    float: right !important;
     margin: 0;
     list-style: none;
@@ -84 +84 @@
 }
 
-.avatar-nav-items li.current a {
-    background-color: #eee;
-    color: #555;
+.bp-avatar-nav  ul:before,
+.bp-avatar-nav  ul:after {
+    content: " ";
+    display: table;
+}
+
+.bp-avatar-nav  ul:after {
+    clear: both;
+}
+
+.bp-avatar-nav  ul {
+    border-bottom: 1px solid #ccc;
+    margin-bottom: 10px;
+}
+
+.bp-avatar-nav  ul.avatar-nav-items li.current {
+    border: 1px solid #ccc;
+    border-bottom-color: #fff;
+    border-top-right-radius: 4px;
+    border-top-left-radius: 4px;
+    margin-bottom: -1px;
+}
+
+.bp-avatar-nav  li.current a {
+    background: none;
+    color: inherit;
     font-weight: bold;
     opacity: 0.8;
+    outline: 0;
 }
 

trunk/src/bp-core/css/avatar.css

@@ -21 +21 @@
 }
 
-.progress {
+div.bp-avatar-status .bp-progress {
     background: none;
     border: 1px solid #d1d1d1;
@@ -34 +34 @@
 }
 
-.bar {
+div.bp-avatar-status .bp-bar {
     background-color: #c3ff88;
     width: 0;
@@ -73 +73 @@
 
 .bp-avatar-nav .avatar-nav-items li.avatar-nav-item {
-    float: left;
+    float: left !important;
     margin: 0;
     list-style: none;
@@ -84 +84 @@
 }
 
-.avatar-nav-items li.current a {
-    background-color: #eee;
-    color: #555;
+.bp-avatar-nav  ul:before,
+.bp-avatar-nav  ul:after {
+    content: " ";
+    display: table;
+}
+
+.bp-avatar-nav  ul:after {
+    clear: both;
+}
+
+.bp-avatar-nav  ul {
+    border-bottom: 1px solid #ccc;
+    margin-bottom: 10px;
+}
+
+.bp-avatar-nav  ul.avatar-nav-items li.current {
+    border: 1px solid #ccc;
+    border-bottom-color: #fff;
+    border-top-left-radius: 4px;
+    border-top-right-radius: 4px;
+    margin-bottom: -1px;
+}
+
+.bp-avatar-nav  li.current a {
+    background: none;
+    color: inherit;
     font-weight: bold;
     opacity: 0.8;
+    outline: 0;
 }
 

trunk/src/bp-core/js/bp-plupload.js

@@ -369 +369 @@
         progress:function( model ) {
             if ( ! _.isUndefined( model.get( 'percent' ) ) ) {
-                $( '#' + model.get('id') + ' .progress .bar' ).css( 'width', model.get('percent') + '%' );
+                $( '#' + model.get('id') + ' .bp-progress .bp-bar' ).css( 'width', model.get('percent') + '%' );
             }
         },

trunk/src/bp-templates/bp-legacy/buddypress/assets/_attachments/uploader.php

@@ -31 +31 @@
 <script type="text/html" id="tmpl-progress-window">
     <div id="{{data.id}}">
-        <div class="progress">
-            <div class="bar"></div>
+        <div class="bp-progress">
+            <div class="bp-bar"></div>
         </div>
         <div class="filename">{{data.filename}}</div>