Skip to content

Commit

Permalink
PRJ-55 - Style Activity item basic UI
Browse files Browse the repository at this point in the history
  • Loading branch information
@amincdev
amincdev committed Feb 4, 2025
1 parent 4957ebc commit 1257d3f
Show file tree
Hide file tree
Showing 6 changed files with 874 additions and 14 deletions.
25 changes: 13 additions & 12 deletions src/bp-templates/bp-nouveau/readylaunch/activity/entry.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,18 +113,19 @@
</div>

<?php else : ?>

<div class="bb-rl-activity-avatar bb-rl-item-avatar">
<a href="<?php echo $user_link; ?>">
<?php bp_activity_avatar( array( 'type' => 'full' ) ); ?>
</a>
</div>
<div class="bb-rl-activity-header">
<?php
bp_activity_action();
bp_nouveau_activity_is_edited();
bp_nouveau_activity_privacy();
?>
<div class="bb-rl-activity-head">
<div class="bb-rl-activity-avatar bb-rl-item-avatar">
<a href="<?php echo $user_link; ?>">
<?php bp_activity_avatar( array( 'type' => 'full' ) ); ?>
</a>
</div>
<div class="bb-rl-activity-header">
<?php
bp_activity_action();
bp_nouveau_activity_is_edited();
bp_nouveau_activity_privacy();
?>
</div>
</div>

<?php endif; ?>
Expand Down
285 changes: 285 additions & 0 deletions src/bp-templates/bp-nouveau/readylaunch/css/activity-rtl.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1026,3 +1026,288 @@
margin: 0 auto;
padding: var(--bb-rl-space-400) 0;
}

/* Activity Item */
.bb-rl-activity-list {
list-style: none;
}

.bb-rl-activity-list li.activity {
background: var(--bb-rl-background-color);
border: 1px solid var(--bb-rl-border-secondary-color);
border-radius: var(--bb-rl-radius-lg);
font-size: 14px;
line-height: 1.5;
margin-bottom: var(--bb-rl-space-300);
padding: var(--bb-rl-space-200) var(--bb-rl-space-300);
}

.bb-rl-activity-list .bb-rl-activity-head {
display: flex;
align-items: center;
padding-bottom: var(--bb-rl-space-200);
border-bottom: 1px solid var(--bb-rl-border-secondary-color);
margin-bottom: var(--bb-rl-space-200);
}

.bb-rl-activity-list .bb-rl-activity-head .bb-rl-activity-avatar {
margin-left: var(--bb-rl-space-200);
}

.bb-rl-activity-list .bb-rl-activity-head img.avatar {
height: 48px;
width: 48px;
border-radius: var(--bb-rl-radius-full);
}

.bb-rl-activity-list .bb-rl-activity-inner p {
margin-bottom: var(--bb-rl-space-200);
}

.bb-rl-activity-list .bb-rl-activity-inner > ol,
.bb-rl-activity-list .bb-rl-activity-inner > ul {
margin: 0 0 var(--bb-rl-space-200);
padding: 0;
}

.bb-rl-activity-list .bb-rl-activity-inner > ol li,
.bb-rl-activity-list .bb-rl-activity-inner > ul li {
list-style: decimal;
margin: 0 var(--bb-rl-space-200) var(--bb-rl-space-50) 0;
list-style-position: inside;
padding: 0;
}

.bb-rl-activity-list .bb-rl-activity-inner > ul li {
list-style: disc;
list-style-position: inside;
}

.bb-rl-activity-list .bb-rl-activity-inner b {
font-weight: 600;
}

.bb-rl-activity-list .bb-rl-activity-inner i {
font-style: italic;
}

.bb-rl-activity-list .bb-rl-activity-inner blockquote {
font-style: italic;
background-color: var(--bb-rl-background-secondary-color);
border-right: 2px solid var(--bb-rl-background-tertiary-color);
padding: var(--bb-rl-space-100) var(--bb-rl-space-200);
margin-bottom: var(--bb-rl-space-200);
}

.bb-rl-activity-list .bb-rl-activity-inner blockquote p:last-child {
margin-bottom: 0;
}

.bb-rl-activity-list .bb-rl-activity-inner pre {
background-color: var(--bb-rl-background-secondary-color);
padding: var(--bb-rl-space-100) var(--bb-rl-space-200);
margin-bottom: var(--bb-rl-space-200);
border-radius: var(--bb-rl-radius-md);
}

.bb-rl-activity-list .activity-meta {
position: relative;
}

.bb-rl-activity-list .ac-emotions_list {
position: absolute;
right: 0;
bottom: 10px;
z-index: 99;
display: none;
align-items: center;
gap: var(--bb-rl-space-100);
padding: 6px var(--bb-rl-space-100);
background-color: var(--bb-rl-background-color);
border: 1px solid var(--bb-rl-border-secondary-color);
border-radius: 34px;
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
transition: all ease 0.2s;
transition-delay: 0.5s;
}

.bb-rl-activity-list .ac-emotions_list.active {
display: flex;
bottom: 34px;
}

.bb-rl-activity-list .ac-emotions_list.active .ac-emotion_item {
top: 0;
}

.bb-rl-activity-list .ac-emotions_list .ac-emotion_item {
display: flex;
position: relative;
top: 10px;
transition: all ease 0.2s;
transition-delay: 0.5s;
min-width: 40px;
}

.bb-rl-activity-list .ac-emotions_list .ac-emotion_item img {
width: 40px;
height: 40px;
object-fit: cover;
}

.bb-rl-activity-list .ac-emotions_list .ac-emotion_item i {
display: block;
font-size: 40px;
line-height: 1;
transition: all linear 0.2s;
transform-origin: bottom;
}

/* Privacy */
.bb-media-privacy-wrap {
display: inline-block;
position: relative;
}

.bb-media-privacy-wrap:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 4px;
width: 4px;
background-color: var(--bb-rl-background-tertiary-color);
border-radius: var(--bb-rl-radius-full);
margin: 0 6px;
}

.bb-media-privacy-wrap .privacy-wrap {
display: inline-block;
vertical-align: middle;
}

.bb-media-privacy-wrap .privacy {
display: flex;
align-items: center;
cursor: pointer;
line-height: 1;
}

.bb-media-privacy-wrap .privacy:before {
content: "\e288";
font-family: bb-icons-rl;
font-size: 16px;
vertical-align: middle;
display: inline-block;
}

.bb-media-privacy-wrap .privacy.no-change:after {
display: none;
}

.bb-media-privacy-wrap .privacy.onlyme:before {
content: "\e2fa";
}

.bb-media-privacy-wrap .privacy.loggedin:before {
content: "\e68c";
}

.bb-media-privacy-wrap .privacy.friends:before {
content: "\e4d6";
}

.bb-media-privacy-wrap .privacy.loading:before {
content: "";
display: inline-block;
height: 16px;
vertical-align: middle;
width: 16px;
border: 2px solid var(--bb-rl-border-quaternary-color);
border-top-color: var(--bb-rl-border-tertiary-color);
border-radius: var(--bb-rl-radius-full);
animation: spin 3s infinite linear;
}

.bb-media-privacy-wrap .activity-privacy {
display: none;
margin: 0;
position: absolute;
background: var(--bb-rl-background-color);
box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.12);
border-radius: var(--bb-rl-radius-md);
padding: var(--bb-rl-space-100) 0;
min-width: 200px;
right: -20px;
top: 35px;
z-index: 119;
}

.bb-media-privacy-wrap .activity-privacy:before {
content: " ";
position: absolute;
width: 0;
height: 0;
top: 0;
right: 20px;
border: 6px solid #000;
border-color: var(--bb-rl-background-color) transparent transparent var(--bb-rl-background-color);
-webkit-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
box-shadow: -2px -3px 3px 0 rgba(0, 0, 0, 0.02);
z-index: 1002;
}

.bb-media-privacy-wrap .activity-privacy li {
cursor: pointer;
line-height: 1;
margin: 0;
padding: 10px 14px;
position: relative;
display: flex;
align-items: center;
margin-bottom: 1px;
}

.bb-media-privacy-wrap .activity-privacy li:hover {
background: var(--bb-rl-background-secondary-color);
}

.bb-media-privacy-wrap .activity-privacy li:before {
content: "\e288";
font-family: bb-icons-rl;
font-size: 16px;
vertical-align: middle;
display: inline-block;
margin-left: 10px;
width: 20px;
text-align: center;
font-weight: 400;
}

.bb-media-privacy-wrap .activity-privacy li.public:before {
content: "\e288";
}

.bb-media-privacy-wrap .activity-privacy li.onlyme:before {
content: "\e2fa";
}

.bb-media-privacy-wrap .activity-privacy li.loggedin:before {
content: "\e68c";
}

.bb-media-privacy-wrap .activity-privacy li.friends:before {
content: "\e4d6";
}

.bb-media-privacy-wrap .activity-privacy .selected {
background: #f5f5f5;
}

.bb-media-privacy-wrap .activity-privacy.bb-open {
display: block;
}
2 changes: 1 addition & 1 deletion src/bp-templates/bp-nouveau/readylaunch/css/activity-rtl.min.css
View file

Large diffs are not rendered by default.

Loading

0 comments on commit 1257d3f

Please sign in to comment.