chat-fe: fix unreadnotice position on mobile

This commit is contained in:
Liam Fitzgerald 2020-04-21 16:54:56 +10:00
parent 0fc12b1456
commit 2cec3c4e90
2 changed files with 10 additions and 3 deletions

View File

@ -173,6 +173,10 @@ h2 {
color: #7ea899; color: #7ea899;
} }
.unread-notice {
top: 48px;
}
/* responsive */ /* responsive */
@media all and (max-width: 34.375em) { @media all and (max-width: 34.375em) {
@ -191,6 +195,9 @@ h2 {
.embed-container { .embed-container {
padding-bottom: 56.25%; padding-bottom: 56.25%;
} }
.unread-notice {
top: 96px;
}
} }
@media all and (min-width: 34.375em) and (max-width: 46.875em) { @media all and (min-width: 34.375em) and (max-width: 46.875em) {

View File

@ -17,8 +17,8 @@ export class UnreadNotice extends Component {
return ( return (
<div <div
style={{ left: "0px", top: "48px" }} style={{ left: "0px" }}
className="pa4 w-100 absolute z-1" className="pa4 w-100 absolute z-1 unread-notice"
> >
<div className="ba b--green2 green2 bg-white bg-gray0-d flex items-center pa2 f9 justify-between br1"> <div className="ba b--green2 green2 bg-white bg-gray0-d flex items-center pa2 f9 justify-between br1">
<p className="lh-copy db"> <p className="lh-copy db">
@ -30,7 +30,7 @@ export class UnreadNotice extends Component {
)} )}
<span className="green3">{timestamp}</span> <span className="green3">{timestamp}</span>
</p> </p>
<div onClick={onRead} className="inter b--green2 pointer"> <div onClick={onRead} className="ml4 inter b--green2 pointer tr lh-copy">
Mark as Read Mark as Read
</div> </div>
</div> </div>