Changeset 12982

Timestamp:

07/01/2021 08:22:45 PM (4 years ago)

Author:

imath

Message:

BP Nouveau: Improve the Latest Activities widget/block display

Fixes #8493

Location:

trunk/src/bp-templates/bp-nouveau

Files:

• buddypress/activity/widget.php (modified) (3 diffs)
• common-styles/_bp_widgets.scss (modified) (1 diff)
• css/buddypress-rtl.css (modified) (1 diff)
• css/buddypress.css (modified) (1 diff)

trunk/src/bp-templates/bp-nouveau/buddypress/activity/widget.php

@@ -4 +4 @@
  *
  * @since 3.0.0
- * @version 3.0.0
+ * @version 9.0.0
  */
 ?>
@@ -17 +17 @@
         ?>
 
-            <?php if ( bp_activity_has_content() ) : ?>
+            <blockquote>
 
-                <blockquote>
+                <?php if ( bp_activity_has_content() ) : ?>
 
-                    <?php bp_activity_content_body(); ?>
+                    <div class="<?php bp_activity_css_class(); ?>">
+                        <?php bp_activity_content_body(); ?>
+                    </div>
 
                     <footer>
@@ -43 +45 @@
                     </footer>
 
-                </blockquote>
+                    <?php else : ?>
 
-            <?php else : ?>
+                        <div class="<?php bp_activity_css_class(); ?>">
+                            <p><?php bp_activity_action(); ?></p>
+                        </div>
 
-                <p><?php bp_activity_action(); ?></p>
+                    <?php endif; ?>
 
-            <?php endif; ?>
+            </blockquote>
 
         <?php endwhile; ?>

trunk/src/bp-templates/bp-nouveau/common-styles/_bp_widgets.scss

@@ -53 +53 @@
     }
 
+    div.activity-list {
+
+        blockquote {
+            padding: 0;
+            border: none;
+
+            .activity-item {
+
+                &:not(.mini) {
+                    position: relative;
+                    box-shadow: 1px 0 4px rgba(0, 0, 0, 0.15);
+                    padding: 0 1em;
+
+                    &:after,
+                    &:before {
+                        position: absolute;
+                        left: 15px;
+                        display: block;
+                        width: 0;
+                        height: 0;
+                        border-style: solid;
+                        border-color: transparent;
+                        content: "";
+                    }
+
+                    &:before {
+                        bottom: -18px;
+                        border-top-color: rgba(0, 0, 0, 0.15);
+                        border-width: 9px;
+                        left: 14px;
+                    }
+
+                    &:after {
+                        bottom: -16px;
+                        border-top-color: #fff;
+                        border-width: 8px;
+                    }
+                }
+
+                &.mini {
+
+                    .avatar {
+                        display: inline-block;
+                        width: 20px;
+                        height: 20px;
+                        vertical-align: middle;
+                        margin-right: 2px;
+                    }
+                }
+            }
+        }
+
+        footer {
+            display: flex;
+            align-items: center;
+
+            img.avatar {
+                display: inline-block;
+                border: none;
+                margin-right: 0.5em;
+            }
+
+            .activity-time-since {
+                font-size: 90%;
+            }
+        }
+    }
+
     .avatar-block {
 

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

@@ -4679 +4679 @@
 }
 
+.buddypress.widget div.activity-list blockquote {
+    padding: 0;
+    border: none;
+}
+
+.buddypress.widget div.activity-list blockquote .activity-item:not(.mini) {
+    position: relative;
+    box-shadow: -1px 0 4px rgba(0, 0, 0, 0.15);
+    padding: 0 1em;
+}
+
+.buddypress.widget div.activity-list blockquote .activity-item:not(.mini):after, .buddypress.widget div.activity-list blockquote .activity-item:not(.mini):before {
+    position: absolute;
+    right: 15px;
+    display: block;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-color: transparent;
+    content: "";
+}
+
+.buddypress.widget div.activity-list blockquote .activity-item:not(.mini):before {
+    bottom: -18px;
+    border-top-color: rgba(0, 0, 0, 0.15);
+    border-width: 9px;
+    right: 14px;
+}
+
+.buddypress.widget div.activity-list blockquote .activity-item:not(.mini):after {
+    bottom: -16px;
+    border-top-color: #fff;
+    border-width: 8px;
+}
+
+.buddypress.widget div.activity-list blockquote .activity-item.mini .avatar {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    vertical-align: middle;
+    margin-left: 2px;
+}
+
+.buddypress.widget div.activity-list footer {
+    display: flex;
+    align-items: center;
+}
+
+.buddypress.widget div.activity-list footer img.avatar {
+    display: inline-block;
+    border: none;
+    margin-left: 0.5em;
+}
+
+.buddypress.widget div.activity-list footer .activity-time-since {
+    font-size: 90%;
+}
+
 .buddypress.widget .avatar-block {
     display: -moz-flex;

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

@@ -4679 +4679 @@
 }
 
+.buddypress.widget div.activity-list blockquote {
+    padding: 0;
+    border: none;
+}
+
+.buddypress.widget div.activity-list blockquote .activity-item:not(.mini) {
+    position: relative;
+    box-shadow: 1px 0 4px rgba(0, 0, 0, 0.15);
+    padding: 0 1em;
+}
+
+.buddypress.widget div.activity-list blockquote .activity-item:not(.mini):after, .buddypress.widget div.activity-list blockquote .activity-item:not(.mini):before {
+    position: absolute;
+    left: 15px;
+    display: block;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-color: transparent;
+    content: "";
+}
+
+.buddypress.widget div.activity-list blockquote .activity-item:not(.mini):before {
+    bottom: -18px;
+    border-top-color: rgba(0, 0, 0, 0.15);
+    border-width: 9px;
+    left: 14px;
+}
+
+.buddypress.widget div.activity-list blockquote .activity-item:not(.mini):after {
+    bottom: -16px;
+    border-top-color: #fff;
+    border-width: 8px;
+}
+
+.buddypress.widget div.activity-list blockquote .activity-item.mini .avatar {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    vertical-align: middle;
+    margin-right: 2px;
+}
+
+.buddypress.widget div.activity-list footer {
+    display: flex;
+    align-items: center;
+}
+
+.buddypress.widget div.activity-list footer img.avatar {
+    display: inline-block;
+    border: none;
+    margin-right: 0.5em;
+}
+
+.buddypress.widget div.activity-list footer .activity-time-since {
+    font-size: 90%;
+}
+
 .buddypress.widget .avatar-block {
     display: -moz-flex;