New frontend See merge request studieverenigingvia/ict/centurion!1master
commit
835a05fec1
@ -0,0 +1,29 @@ |
||||
import React from 'react'; |
||||
import {TimestampEvent} from "../types/types"; |
||||
import '../css/feeditem.sass' |
||||
import shot from "../img/shot.png"; |
||||
import song from "../img/song.png"; |
||||
import talk from "../img/talk.png"; |
||||
import time from "../img/time.png"; |
||||
|
||||
const images = { |
||||
shot, song, talk, time |
||||
}; |
||||
|
||||
const FeedItem = (item: TimestampEvent) => { |
||||
return ( |
||||
<div className="feed-item"> |
||||
<div className="feed-item__title"> |
||||
{item.text[0]} |
||||
</div> |
||||
<div className="feed-item__emoji"> |
||||
<img src={images[item.type]}/> |
||||
</div> |
||||
<div className="feed-item__desc"> |
||||
{item.text[1]} |
||||
</div> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default FeedItem; |
@ -0,0 +1,50 @@ |
||||
.feed-item |
||||
display: flex |
||||
border: 1px solid #efefef |
||||
border-radius: 4px |
||||
padding: 10px |
||||
margin: 10px |
||||
text-align: center |
||||
font-size: 18pt |
||||
font-weight: bold |
||||
color: rgba(0, 0, 0, 0.85); |
||||
box-shadow: 0px 0px 20px -8px rgba(48,75,163, 0.5) |
||||
|
||||
.feed-item__title |
||||
width: 45% |
||||
|
||||
.feed-item__desc |
||||
width: 45% |
||||
|
||||
.feed-item__emoji |
||||
width: 10% |
||||
|
||||
img |
||||
width: 60% |
||||
max-width: 100% |
||||
max-height: 100% |
||||
|
||||
.feed-reverse |
||||
display: flex |
||||
flex-direction: column-reverse |
||||
|
||||
|
||||
// Animations |
||||
.fade-enter |
||||
opacity: 0.01 |
||||
max-height: 0 |
||||
|
||||
.fade-enter.fade-enter-active |
||||
opacity: 1 |
||||
max-height: 1000px |
||||
transition: opacity 500ms ease-in, max-height 500ms ease-in |
||||
|
||||
.fade-leave |
||||
opacity: 1 |
||||
max-height: 1000px |
||||
|
||||
.fade-leave.fade-leave-active |
||||
opacity: 0.01; |
||||
max-height: 0 |
||||
transition: opacity 300ms ease-in, max-height 300ms ease-in |
||||
|
Loading…
Reference in new issue