[vue.channel] message input div [scss.container] message input section
This commit is contained in:
xdrm-brackets
parent
4d5aacb659
commit
bf9211346f
|
|
@ -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 ... ?" }
|
||||
]
|
||||
|
||||
},
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
$menu-width: 4.3em;
|
||||
$dialog-width: 15.2em;
|
||||
$header-height: 3em;
|
||||
$input-height: 5em;
|
||||
|
||||
/* (2) Main colors */
|
||||
$menu-bg: #202225;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue