Changeset 13376

Timestamp:

11/30/2022 08:53:25 PM (4 years ago)

Author:

imath

Message:

BP Nouveau: improve activity list display in Twenty Twenty-Two

When the BuddyPress content width is set to regular (instead of default's wide customizer setting), Avatars in activity entries are overlapping the text. To avoid this, let's apply the workaround used in #8746 for Twenty Twenty-Three companion stylesheet to Twenty Twenty-Two's one.

Fixes #8773

Location:

trunk/src/bp-templates/bp-nouveau

Files:

• css/twentytwentytwo-rtl.css (modified) (2 diffs)
• css/twentytwentytwo.css (modified) (2 diffs)
• sass/twentytwentytwo.scss (modified) (2 diffs)

trunk/src/bp-templates/bp-nouveau/css/twentytwentytwo-rtl.css

@@ -464 +464 @@
 }
 
+body .wp-site-blocks #buddypress.twentytwentytwo:not(.alignwide) .activity-list .activity-avatar {
+        margin-right: 0;
+        margin-left: 1em;
+        width: auto;
+}
+
+body .wp-site-blocks #buddypress.twentytwentytwo:not(.alignwide) .activity-list .activity-avatar img.avatar {
+        max-width: 25px;
+        max-height: 25px;
+        margin-bottom: 0;
+}
+
+body .wp-site-blocks #buddypress.twentytwentytwo:not(.alignwide) .activity-list .activity-content .activity-meta.action {
+        margin-right: 0;
+}
+
 body.activity-permalink #buddypress.twentytwentytwo .activity-list {
         border: none;
@@ -492 +508 @@
         width: auto;
         margin-left: 0;
+}
+
+#buddypress.twentytwentytwo .bp-list li .activity-comments .acomment-avatar img.avatar {
+        max-width: none;
 }
 

trunk/src/bp-templates/bp-nouveau/css/twentytwentytwo.css

@@ -464 +464 @@
 }
 
+body .wp-site-blocks #buddypress.twentytwentytwo:not(.alignwide) .activity-list .activity-avatar {
+        margin-left: 0;
+        margin-right: 1em;
+        width: auto;
+}
+
+body .wp-site-blocks #buddypress.twentytwentytwo:not(.alignwide) .activity-list .activity-avatar img.avatar {
+        max-width: 25px;
+        max-height: 25px;
+        margin-bottom: 0;
+}
+
+body .wp-site-blocks #buddypress.twentytwentytwo:not(.alignwide) .activity-list .activity-content .activity-meta.action {
+        margin-left: 0;
+}
+
 body.activity-permalink #buddypress.twentytwentytwo .activity-list {
         border: none;
@@ -492 +508 @@
         width: auto;
         margin-right: 0;
+}
+
+#buddypress.twentytwentytwo .bp-list li .activity-comments .acomment-avatar img.avatar {
+        max-width: none;
 }
 

trunk/src/bp-templates/bp-nouveau/sass/twentytwentytwo.scss

@@ -579 +579 @@
                         }
                 }
+
+                #buddypress.twentytwentytwo:not(.alignwide) {
+
+                        .activity-list {
+
+                                .activity-avatar {
+                                        margin-left: 0;
+                                        margin-right: 1em;
+                                        width: auto;
+
+                                        img.avatar {
+                                                max-width: 25px;
+                                                max-height: 25px;
+                                                margin-bottom: 0;
+                                        }
+                                }
+
+                                .activity-content {
+
+                                        .activity-meta.action {
+                                                margin-left: 0;
+                                        }
+                                }
+                        }
+                }
         }
 
@@ -631 +656 @@
                                         width: auto;
                                         margin-right: 0;
+
+                                        img.avatar {
+                                                max-width: none;
+                                        }
                                 }