[scss.container] message layout [vue.channel] message display
This commit is contained in:
parent
67faf26824
commit
568a9fb16a
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
|
@ -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>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue