diff --git a/public_html/css/container.css b/public_html/css/container.css new file mode 100644 index 0000000..4790a49 --- /dev/null +++ b/public_html/css/container.css @@ -0,0 +1,58 @@ +/* Card container */ +#CONTAINER.message{ + flex-direction: column; + justify-content: flex-start; + flex-wrap: nowrap; + +} + + #CONTAINER.message div{ /* Message item */ + display: inline-block; + position: relative; + top: 0; + left: 0; + height: auto; + + margin: 1em; + padding: 1em; + + flex: 1 1 1; + align-self: flex-start; + + border-radius: 3px; + + background-color: #fff; + + color: #222; + } + + #CONTAINER.message div.me{ /* Message Item (self) */ + background: #13d89d; + align-self: flex-end; + } + + #CONTAINER.message div span.author{ /* Message author */ + display: inline-block; + position: relative; + + padding: .2em .4em; + margin-right: 1em; + + border: 1px solid #ddd; + + border-radius: 3px; + + background: #eee; + + color: #666; + } + + #CONTAINER.message div span.author:after{ /* Add 'dit' */ + content: ' dit'; + + color: #333; + } + + #CONTAINER.message div.me span.author{ /* Hide message author if self */ + display: none; + } \ No newline at end of file diff --git a/public_html/css/layout.css b/public_html/css/layout.css index 9260a01..8e21df4 100644 --- a/public_html/css/layout.css +++ b/public_html/css/layout.css @@ -70,4 +70,25 @@ body{ flex-wrap: nowrap; transition: width .2s ease-in-out; +} + +/* Page container */ +#CONTAINER{ + display: flex; + position: absolute; + top: 3.5em; + left: 15em; + width: calc( 100% - 15em ); + height: calc( 100% - 3.5em ); + + overflow: hidden; + overflow-y: auto; + + transition: left .2s ease-in-out, + width .2s ease-in-out; +} + +#WRAPPER.min #CONTAINER{ + left: 3.5em; + width: calc( 100% - 3.5em ); } \ No newline at end of file diff --git a/view/home.php b/view/home.php index 1b534cd..0565d56 100755 --- a/view/home.php +++ b/view/home.php @@ -17,6 +17,7 @@ + diff --git a/view/vue-config.js b/view/vue-config.js index 44ac5bd..3bb1534 100644 --- a/view/vue-config.js +++ b/view/vue-config.js @@ -10,10 +10,10 @@ window.gstore.add('info', { message: 'Warning! blabla' }); window.gstore.add('notif', [ - { class: 'bell', data: [] }, - { class: 'message', data: [] }, - { class: 'search', data: [] }, - { class: 'menu', data: [] } + { class: 'bell', link: 'notifications', data: [] }, + { class: 'message', link: 'inbox', data: [] }, + { class: 'search', link: 'search', data: [] }, + { class: 'menu', link: 'menu', data: [] } ]) // Menu diff --git a/view/vue/container/message.vue b/view/vue/container/message.vue new file mode 100644 index 0000000..9dab11f --- /dev/null +++ b/view/vue/container/message.vue @@ -0,0 +1,20 @@ + + + + \ No newline at end of file diff --git a/view/vue/wrapper.vue b/view/vue/wrapper.vue index 93b98c8..6988fc8 100755 --- a/view/vue/wrapper.vue +++ b/view/vue/wrapper.vue @@ -7,7 +7,8 @@ - message: {{ msg }} + + @@ -18,19 +19,20 @@ \ No newline at end of file