[scss.container] message layout [vue.channel] message display

This commit is contained in:
xdrm-brackets 2018-03-22 16:01:41 +01:00
parent 67faf26824
commit 568a9fb16a
2 changed files with 97 additions and 2 deletions

View File

@ -60,7 +60,97 @@
background-color: $container-bg; background-color: $container-bg;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
z-index: 100; z-index: 100;
// {1} Message Container //
div.message{
display: flex;
margin: 0 1.3em;
padding: 1em 0;
border-bottom: 1px solid #474a4f;
flex-direction: row;
justify-content: stretch;
align-items: flex-start;
flex-wrap: wrap;
// {1} Meta Data //
& > span.meta{
flex: 1 1 90%;
display: inline-block;
position: relative;
margin: 0 4em;
margin-bottom: .5em;
// {2} Author //
& > span.author{
padding-right: .5em;
color: #fff;
font-size: .9em;
font-weight: bold;
cursor: pointer;
&:hover{ text-decoration: underline; }
}
// {3} Date //
& > span.date{
font-size: .8em;
color: #595d63;
}
}
// {2} Message Text //
& > span.text{
flex: 1 1 90%;
display: inline-block;
position: relative;
margin: 0 4em;
color: hsla(0,0%,100%,.7);
}
// {3} Icon circle //
& > div.icon{
display: block;
position: absolute;
width: 2.5em;
height: 2.5em;
border-radius: 50% / 50%;
background-color: #fff;
cursor: pointer;
transition: opacity .2s ease-in-out;
&:hover{
opacity: .8;
}
}
}
} }
} }

View File

@ -7,8 +7,13 @@
</div> </div>
<div class='body'> <div class='body'>
<div class='message' v-for='msg in gs.content.messages'> <div class='message' v-for='m in gs.content.messages'>
{{ msg.msg }} <div class='icon'></div>
<span class='meta'>
<span class='author'>{{ gs.content.user(m.uid).name || 'inconnu' }}</span>
<span class='date' >{{ new Date(m.ts*1000).toLocaleString('fr') || 'inconnu' }}</span>
</span>
<span class='text'>{{ m.msg }}</span>
</div> </div>
</div> </div>