diff --git a/public_html/css/container.css b/public_html/css/container.css index 4790a49..17fe786 100644 --- a/public_html/css/container.css +++ b/public_html/css/container.css @@ -3,7 +3,6 @@ flex-direction: column; justify-content: flex-start; flex-wrap: nowrap; - } #CONTAINER.message div{ /* Message item */ @@ -26,6 +25,10 @@ color: #222; } + #CONTAINER.message > div:last-of-type{ /* Margin bottom to last */ + margin-bottom: 5em; + } + #CONTAINER.message div.me{ /* Message Item (self) */ background: #13d89d; align-self: flex-end; @@ -55,4 +58,57 @@ #CONTAINER.message div.me span.author{ /* Hide message author if self */ display: none; - } \ No newline at end of file + } + + + #CONTAINER.message form.msg-input{ /* Message Input */ + display: block; + position: fixed; + top: calc( 100% - 3em ); + left: 15em; + width: calc( 100% - 2*1px ); + height: 3em; + + border-top: 1px solid #ddd; + + background: #fff; + + overflow: hidden; + } + + #CONTAINER.message form.msg-input input{ /* form Input */ + display: inline-block; + position: absolute; + top: 0; + left: 0; + width: calc( 100vw - 15em - 2em - 3em ); + height: calc( 100% - 2*.5em ); + + padding: .5em 1em; + + border: none; + + font-size: inherit; + } + + #CONTAINER.message form.msg-input button{ /* form send button */ + display: inline-block; + position: absolute; + top: 0; + left: calc( 100vw - 15em - 3em ); + width: 3em; + height: 3em; + + background: url('/image/container/send-msg.svg@777777') center center no-repeat; + background-size: 50%; + + border: none; + + font-size: inherit; + + cursor: pointer; + } + + #CONTAINER.message form.msg-input button:hover{ + background-image: url('/image/container/send-msg.svg@000000'); + } \ No newline at end of file diff --git a/public_html/image/container/send-msg.svg b/public_html/image/container/send-msg.svg new file mode 100644 index 0000000..b380911 --- /dev/null +++ b/public_html/image/container/send-msg.svg @@ -0,0 +1,47 @@ + + \ No newline at end of file diff --git a/view/vue-config.js b/view/vue-config.js index 0117b5f..2eaf861 100644 --- a/view/vue-config.js +++ b/view/vue-config.js @@ -57,4 +57,8 @@ window.gstore.add('func', { /* (2) Add locally */ window.gstore.data.notif[1].data.push([ window.gstore.data.server.session.name, msg ]); } -}); \ No newline at end of file +}); + + +// new-message container +window.gstore.add('new_msg', ''); \ No newline at end of file diff --git a/view/vue/container/inbox.vue b/view/vue/container/inbox.vue index d2dda18..e7f0312 100644 --- a/view/vue/container/inbox.vue +++ b/view/vue/container/inbox.vue @@ -7,8 +7,13 @@ {{ msg[1] }} +
+