Changeset 9099

Timestamp:

10/29/2014 12:36:15 AM (10 years ago)

Author:

djpaul

Message:

Mentions: adjustments for narrow-width displays.

For displays <= 900 pixels wide, the display name of the user is now
shown.

For displays <= 400 pixels wide, the picker UI expands to take up the
full width of the screen.

Ported from Automattic's O2 team's implementation of the At.js library.
See #5969

File:

• trunk/src/bp-activity/css/mentions.css (modified) (4 diffs)

trunk/src/bp-activity/css/mentions.css

@@ -1 +1 @@
 .atwho-view {
-    background: #FFF;
+    background: rgba(204, 204, 204, 0.8);
     border-radius: 2px;
     border: 1px solid rgb(204, 204, 204);
@@ -17 +17 @@
 }
 .atwho-view ul {
+    background: #FFF;
     list-style: none;
     margin: auto;
@@ -63 +64 @@
         margin: 0 10px 0 0;
     }
-    .atwho-view small {
-        display: none;
-    }
 }
 @media (max-width: 400px) {
@@ -78 +76 @@
         width: 30px;
     }
+    .atwho-view {
+        border-radius: 0;
+        height: 100%;
+        left: 0 !important;
+        width: 100%;
+    }
+    .atwho-view ul li .username {
+        display: inline-block;
+        margin: -10px 0 0 0;
+        padding: 10px 0;
+    }
+    .atwho-view ul li small {
+        display: inline-block;
+        margin-left: 20px;
+    }
 }