From bf9211346f2c08cb319a9f439c4be4275a1f130a Mon Sep 17 00:00:00 2001 From: xdrm-brackets Date: Thu, 22 Mar 2018 21:58:14 +0100 Subject: [PATCH] [vue.channel] message input div [scss.container] message input section --- webpack/mockup/api-channel-init.json | 5 +- webpack/scss/constants.scss | 1 + webpack/scss/container.scss | 156 ++++++++++++++++----------- webpack/vue/channel.vue | 23 ++-- 4 files changed, 115 insertions(+), 70 deletions(-) diff --git a/webpack/mockup/api-channel-init.json b/webpack/mockup/api-channel-init.json index e486585..a786fe5 100644 --- a/webpack/mockup/api-channel-init.json +++ b/webpack/mockup/api-channel-init.json @@ -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 ... ?" } ] }, diff --git a/webpack/scss/constants.scss b/webpack/scss/constants.scss index 8cde35b..41f34ae 100644 --- a/webpack/scss/constants.scss +++ b/webpack/scss/constants.scss @@ -3,6 +3,7 @@ $menu-width: 4.3em; $dialog-width: 15.2em; $header-height: 3em; +$input-height: 5em; /* (2) Main colors */ $menu-bg: #202225; diff --git a/webpack/scss/container.scss b/webpack/scss/container.scss index e9a8ef7..11f3290 100644 --- a/webpack/scss/container.scss +++ b/webpack/scss/container.scss @@ -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; } diff --git a/webpack/vue/channel.vue b/webpack/vue/channel.vue index 1df3158..9362a3d 100644 --- a/webpack/vue/channel.vue +++ b/webpack/vue/channel.vue @@ -7,14 +7,23 @@
-
-
- - {{ gs.content.user(m.uid).name || 'inconnu' }} - {{ new Date(m.ts*1000).toLocaleString('fr') || 'inconnu' }} - - {{ m.msg }} + +
+ +
+
+ + {{ gs.content.user(m.uid).name || 'inconnu' }} + {{ new Date(m.ts*1000).toLocaleString('fr') || 'inconnu' }} + + {{ m.msg }} +
+
+ +
+
+