Mirrors/astuto
1
0
Fork 0
mirror of https://github.com/astuto/astuto.git synced 2025-12-15 19:27:52 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add comment icon

Browse Source
This commit is contained in:
riggraz
2019-09-02 20:26:09 +02:00
parent 66dde5ee91
commit 0618974543
3 changed files with 52 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/javascript/components/Board/PostListItem.tsx
View File

@@ -19,7 +19,10 @@ const PostListItem = ({ title, description, postStatus}: Props) => (
} }
</div> </div>
<div className="postDetails"> <div className="postDetails">
<div className="postDetailsComments">💬 0 comments</div> <div className="postDetailsComments">
<span className="comment icon"></span>
<span>0 comments</span>
</div>
<div className="postDetailsStatus" style={{color: postStatus.color}}> <div className="postDetailsStatus" style={{color: postStatus.color}}>
<div className="dot" style={{backgroundColor: postStatus.color}}></div> <div className="dot" style={{backgroundColor: postStatus.color}}></div>
<span className="postStatusName">{postStatus.name}</span> <span className="postStatusName">{postStatus.name}</span>

1
app/javascript/stylesheets/application.scss
View File

@@ -1,6 +1,7 @@
@import './bootstrap_custom.scss'; @import './bootstrap_custom.scss';
@import './navbar.scss'; @import './navbar.scss';
@import './forms.scss'; @import './forms.scss';
@import './icons.scss';
.container { .container {
max-width: 920px; max-width: 920px;

47
app/javascript/stylesheets/icons.scss Normal file
View File

@@ -0,0 +1,47 @@
/* General setup */
span.icon {
margin: 4px;
background-color: white;
border: 2px solid black;
display: inline-block;
position: relative;
vertical-align: top;
}
span.icon:after,
span.icon:before {
background: white;
border: 2px solid black;
content: '';
position: absolute;
}
/* Comment icon */
span.comment {
border-radius: 4px;
width: 22px;
height: 14px;
}
span.comment:after,
span.comment:before {
background: none;
border-bottom: 6px solid transparent;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 6px solid black;
bottom: -14px;
height: 0;
left: 4px;
width: 0;
}
span.comment:before {
border-top-color: white;
bottom: -11px;
z-index: 1;
}
span.comment:hover:after {
background: none;
}
span.comment:hover:before {
background: none;
border-top-color: #ffe;
}