[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": 101, "uid": 3, "ts": 23894808330, "msg": "Fine n you ?" },
{ "mid": 102, "uid": 5, "ts": 23894808340, "msg": "fine too, what are you doin' ?" }, { "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": 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; $menu-width: 4.3em;
$dialog-width: 15.2em; $dialog-width: 15.2em;
$header-height: 3em; $header-height: 3em;
$input-height: 5em;
/* (2) Main colors */ /* (2) Main colors */
$menu-bg: #202225; $menu-bg: #202225;

View File

@ -71,17 +71,30 @@
align-items: stretch; align-items: stretch;
flex-wrap: nowrap; flex-wrap: nowrap;
overflow: hidden;
z-index: 100; z-index: 100;
div.message-stack{
display: flex;
height: calc( 100% - #{$input-height} );
flex-direction: column;
flex-wrap: nowrap;
overflow: auto;
// {1} Message Container // // {1} Message Container //
div.message{ div.message{
display: flex; display: flex;
position: relative;
margin: 0 1.3em; margin: 0 1.3em;
padding: 1em 0; padding: 1em 0;
border-bottom: 1px solid #474a4f; &:not(:last-child){ border-bottom: 1px solid #474a4f; }
flex-direction: row; flex-direction: row;
justify-content: stretch; justify-content: stretch;
@ -159,6 +172,25 @@
} }
}
div.message-input{
display: block;
height: $input-height;
margin: 0 1em;
border-top: 1px solid #474a4f;
box-shadow: -1em 1em 0 1em #36393f,
1em 1em 0 1em #36393f;
background-color: #36393f;
}
} }

View File

@ -7,6 +7,9 @@
</div> </div>
<div class='body'> <div class='body'>
<div class='message-stack'>
<div class='message' v-for='m in gs.content.messages'> <div class='message' v-for='m in gs.content.messages'>
<div class='icon'></div> <div class='icon'></div>
<span class='meta'> <span class='meta'>
@ -15,6 +18,12 @@
</span> </span>
<span class='text'>{{ m.msg }}</span> <span class='text'>{{ m.msg }}</span>
</div> </div>
</div>
<div class='message-input'>
</div>
</div> </div>
</div> </div>