Changeset 9805

Timestamp:

04/26/2015 09:06:18 AM (11 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>