yey grid works

Author: Kavelin

index.html

@@ -242,7 +242,7 @@ <h2>
 
     <template id="windowWrapperTemplate">
         <div class="window-wrapper">
-            <chat-window v-if="window.type == TYPE.CHAT" :chat="window.content"></chat-window>
+            <chat-window v-if="window.type == TYPE.CHAT" :chat="window.content" :window="window"></chat-window>
             <new-conversation-form v-if="window.type == TYPE.NEWCHAT" :window="window" :form="window.content.form">
             </new-conversation-form>
         </div>

scripts/ui.js

@@ -182,10 +182,19 @@ class UI {
                 template: '#contactItemTemplate',
                 methods: {
                     open(e) {
-                        if (e.shiftKey) { 
-                            this.$root.pushChat(this.contact) 
+                        if (e.shiftKey) {
+                            this.$root.pushChat(this.contact);
+                            var that = this;
+                            setTimeout(function() {
+                                var all = document.querySelectorAll('.window-wrapper');
+                                var length = that.$root.openedChats.length;
+                                for (var i = 0; i < all.length; i++) {
+                                    all[i].style.height = 'calc(' + (100 / Math.ceil(length / 2)) + 'vh - ' + (70 / Math.ceil(length / 2)) + 'px)';
+                                }
+                            }, 0);
+                        } else {
+                            this.$root.openChat(this.contact);
                         };
-                        this.$root.openChat(this.contact);
                     }
                 },
                 computed: {
@@ -250,6 +259,14 @@ class UI {
                     close() {
                         var index = that.vue.openedChats.indexOf(this.window);
                         that.vue.openedChats.splice(index, 1);
+                        setTimeout(function() {
+                            var all = document.querySelectorAll('.window-wrapper');
+                            var length = that.vue.openedChats.length;
+                            console.log('calc(' + (100 / Math.ceil(length / 2)) + 'vh - ' + (70 / Math.ceil(length / 2)) + 'px)');
+                            for (var i = 0; i < all.length; i++) {
+                                all[i].style.height = 'calc(' + (100 / Math.ceil(length / 2)) + 'vh - ' + (70 / Math.ceil(length / 2)) + 'px)';
+                            }
+                        }, 0);
                     },
                     focusHandler() {
                         that.vue.focusedChat = this;

styles/index.css

@@ -260,6 +260,8 @@ body {
     position: absolute;
     right: 16px;
     top: 52px;
+    display: grid;
+    grid-template-columns: auto auto;
 }
 
 .window {
@@ -457,7 +459,7 @@ body {
     background: transparent;
     margin-left: 4px;
     padding: 0;
-    color: #ffffff77;
+    color: #ffffff77; 
 }
 
 .window .header .actions .button:hover {
@@ -479,7 +481,7 @@ body {
 
 .window-wrapper {
     height: calc(100vh - 70px);
-    transition: left 300ms ease, width 300ms ease, height 300ms ease;
+    transition: left 300ms ease, top 300ms ease;
     animation: window-wrapper-open 400ms;
     z-index: 0;
 }