[vue.channel] message input div [scss.container] message input section
This commit is contained in:
parent
4d5aacb659
commit
bf9211346f
|
@ -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 ... ?" }
|
||||||
]
|
]
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue