RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

added actions indicator notch

Browse Source
This commit is contained in:
srgooglo 2022-03-02 21:53:49 +01:00
parent b52dd47375
commit 6a3e0658e5
2 changed files with 46 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/app/src/components/PostCard/index.jsx
View File

@ -169,8 +169,10 @@ export default class PostCard extends React.Component {
message={this.props.data.message}
/>
</div>
<div className="actionsIndicator">
<Icons.MoreHorizontal />
<div className="actionsIndicatorWrapper">
<div className="actionsIndicator">
<Icons.MoreHorizontal />
</div>
</div>
<div className="actionsWrapper">
<PostActions

58
packages/app/src/components/PostCard/index.less
View File

@ -17,7 +17,7 @@
outline-color: transparent;
&.liked {
filter: drop-shadow(0px 0px 2px var(--primaryColor));
filter : drop-shadow(0px 0px 2px var(--primaryColor));
outline-color: var(--primaryColor);
}
@ -77,16 +77,16 @@
flex-direction: column;
font-size : 16px;
color: var(--background-color-contrast);
color : var(--background-color-contrast);
height: fit-content;
.item {
display: inline-flex;
align-items: center;
display : inline-flex;
align-items : center;
justify-content: flex-end;
height: fit-content;
height : fit-content;
margin-left: 20px;
margin-left : 20px;
margin-bottom: 5px;
.icon {
@ -98,7 +98,7 @@
.value {
font-family: "DM Mono", monospace;
font-size: 14px;
font-size : 14px;
}
}
}
@ -129,19 +129,35 @@
}
}
.actionsIndicatorWrapper {
display : flex;
flex-direction : row;
align-items : center;
justify-content: center;
transition: all 0.2s ease-in-out;
}
.actionsIndicator {
display : flex;
flex-direction : row;
align-items : center;
justify-content: center;
width : 100%;
margin-bottom: 5px;
width : 10vw;
padding: 2px;
border-radius : 8px 8px 0 0;
background-color: var(--background-color-primary);
color : var(--background-color-contrast);
font-size: 18px;
color : var(--background-color-contrast);
transition : all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
svg {
margin: 0 !important;
}
}
.actionsWrapper {
@ -245,12 +261,12 @@
}
.actionsWrapper {
animation: fadeActionsIn 0.1s 0.1s linear forwards;
opacity: 1;
}
.actionsIndicator {
opacity: 0;
}
// .actionsIndicator {
// opacity: 0;
// }
}
@keyframes fadeActionsIn {
@ -261,4 +277,14 @@
to {
opacity: 1;
}
}
@keyframes fadeActionOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}