[vue.channel] message input div [scss.container] message input section

This commit is contained in:
xdrm-brackets 2018-03-22 21:58:14 +01:00
parent 4d5aacb659
commit bf9211346f
4 changed files with 115 additions and 70 deletions

View File

@ -22,7 +22,10 @@
{ "mid": 101, "uid": 3, "ts": 23894808330, "msg": "Fine n you ?" },
{ "mid": 102, "uid": 5, "ts": 23894808340, "msg": "fine too, what are you doin' ?" },
{ "mid": 103, "uid": 1, "ts": 23894808350, "msg": "Yay guys i'm ok" },
{ "mid": 104, "uid": 1, "ts": 23894808360, "msg": "Do you have anything to say ... ?" }
{ "mid": 104, "uid": 1, "ts": 23894808360, "msg": "Do you have anything to say ... ?" },
{ "mid": 105, "uid": 3, "ts": 23894808360, "msg": "Do you have anything to say ... ?" },
{ "mid": 106, "uid": 3, "ts": 23894808360, "msg": "Do you have anything to say ... ?" },
{ "mid": 107, "uid": 1, "ts": 23894808360, "msg": "Do you have anything to say ... ?" }
]
},

View File

@ -3,6 +3,7 @@
$menu-width: 4.3em;
$dialog-width: 15.2em;
$header-height: 3em;
$input-height: 5em;
/* (2) Main colors */
$menu-bg: #202225;

View File

@ -66,95 +66,127 @@
background-color: $container-bg;
flex-direction: column;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
align-items: stretch;
flex-wrap: nowrap;
overflow: hidden;
z-index: 100;
// {1} Message Container //
div.message{
div.message-stack{
display: flex;
height: calc( 100% - #{$input-height} );
margin: 0 1.3em;
padding: 1em 0;
flex-direction: column;
flex-wrap: nowrap;
border-bottom: 1px solid #474a4f;
overflow: auto;
flex-direction: row;
justify-content: stretch;
align-items: flex-start;
flex-wrap: wrap;
// {1} Message Container //
div.message{
transition: transform .1s ease-in-out;
animation: slide-list .3s cubic-bezier(.49, .4, .26, 1.93);
// {1} Meta Data //
& > span.meta{
flex: 1 1 90%;
display: inline-block;
display: flex;
position: relative;
margin: 0 4em;
margin-bottom: .5em;
margin: 0 1.3em;
padding: 1em 0;
// {2} Author //
& > span.author{
padding-right: .5em;
&:not(:last-child){ border-bottom: 1px solid #474a4f; }
color: #fff;
font-size: .9em;
font-weight: bold;
flex-direction: row;
justify-content: stretch;
align-items: flex-start;
flex-wrap: wrap;
transition: transform .1s ease-in-out;
animation: slide-list .3s cubic-bezier(.49, .4, .26, 1.93);
// {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;
&:hover{ text-decoration: underline; }
transition: opacity .2s ease-in-out;
&:hover{
opacity: .8;
}
}
// {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;
div.message-input{
color: hsla(0,0%,100%,.7);
display: block;
height: $input-height;
}
margin: 0 1em;
// {3} Icon circle //
& > div.icon{
border-top: 1px solid #474a4f;
box-shadow: -1em 1em 0 1em #36393f,
1em 1em 0 1em #36393f;
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;
}
}
background-color: #36393f;
}

View File

@ -7,14 +7,23 @@
</div>
<div class='body'>
<div class='message' v-for='m in gs.content.messages'>
<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 class='message-stack'>
<div class='message' v-for='m in gs.content.messages'>
<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 class='message-input'>
</div>
</div>
</div>