CSS Grid Implementation

.gitignore

@@ -1,2 +1,4 @@
 content/texts/*.*
-!content/texts/README.md
+!content/texts/README.md
+node_modules/
+app/content/texts/

src/css/core.css

@@ -31,21 +31,58 @@ body {
     display: flex;
     flex-direction: column;
 }
+@supports (display: grid) {
+    .sofia-container {
+        display: grid;
+        grid-template-rows: 60px 1fr;
+    }
 
+    @media (max-width: 600px) {
+        .sofia-container {
+            grid-template-rows: 60px auto 1fr;
+        }
+    }
+}
     .sofia-header {
         height: 60px;        
         background: var(--app-header-bg-color);
         padding: 15px;
         text-align: right;
     }
-    .sofia-main {        
+    .sofia-main {
         background: black;      
         display: flex;
         flex: 2;
         flex-wrap: nowrap;
         justify-content: space-between;
         overflow: hidden; /* needed so the windows have a fixed height */
     }
+    @supports (display: grid) {
+        .sofia-main {
+            background: var(--window-outline-color);
+            justify-content: start;
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(18.75rem, 1fr));
+            grid-auto-flow: column;
+            overflow-x: auto;
+            column-gap: 1px;
+            scroll-snap-type: x mandatory;
+        }
+    }
+
+    .sofia-windownav {
+        display: none;
+    }
+
+    @media (max-width: 600px) {
+        .sofia-windownav {
+            background-color: var(--gray-300);
+            display: grid;
+            gap: 1px;
+            grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+        }
+    }
+
         .close-container {
             position: absolute;
         }

src/css/windows.css

@@ -9,8 +9,16 @@
     display: flex;
     flex-direction: column;
     position: relative;
+    scroll-snap-align: start;
 }
-
+@supports (display: grid) {
+    .sofia-window {
+        border-right: 0;
+        display: unset;
+        min-width: 300px;
+    }
+}
+
 body.dragging, body.dragging * {
     cursor: move;
 }
@@ -28,6 +36,7 @@ body.dragging, body.dragging * {
         height: 50px;        
         padding: 10px;
         display: flex;
+        align-items: center;
 
         box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
         --box-shadow: 0 5px 10px rgba(0,0,0,0.2);        
@@ -46,27 +55,33 @@ body.dragging, body.dragging * {
         display: flex;
     }
     .sofia-window-close-container {
-        position: absolute;
+        margin-left: auto;
+        order: 1;
+        /* position: absolute;
         top: 0;
         right: 0;
-        height: 40px;
-        width: 40px;
-        z-index: 10;
+        z-index: 10; */        
     }
     .sofia-window-close-button {
         font-family: arial;
         font-size: 15px;
-        position: absolute;
+        /* position: absolute;
         z-index: 10;
         top: 15px;
-        right: 10px;
+        right: 10px; */
         cursor: pointer;
         color: #666;
-        width: 20px;
+        /* width: 20px;
         height: 20px;
-        border-radius: 10px;
+        border-radius: 10px; */
+        height: 40px;
+        width: 40px;
+        padding: 0;
         text-align: center; 
         font-size: 18px;
+        background: transparent;
+        border: 0;
+        border-radius: 0;
     }
     .sofia-window-close-button::after {
         content: '×';    
@@ -77,7 +92,13 @@ body.dragging, body.dragging * {
     }
 
 .sofia-window-tab {
-    display: none;
+    /* display: none; */
+    background-color: var(--grayblue-400);
+    border: 0;
+    padding: 0.625rem 1.25rem;
+}
+.sofia-window-tab.active {
+    background-color: var(--grayblue-600);
 }
 
 

src/js/core/app.js

@@ -30,6 +30,7 @@ class SofiaApp extends Dispatcher {
 
 		this.container = $(`<div class="sofia-container"></div>`).appendTo(this.root);
 		this.header = $(`<div class="sofia-header"></div>`).appendTo(this.container);
+		this.windownav = $(`<nav class="sofia-windownav"></div>`).appendTo(this.container);
 		this.main = $(`<div class="sofia-main"></div>`).appendTo(this.container);
 		this.footer = $(`<div class="sofia-footer"></div>`).appendTo(this.container);
     }

src/js/core/window.js

@@ -32,18 +32,18 @@ class Window extends Dispatcher {
         this.body = $(`<div class="sofia-window-body"></div>`).appendTo(this.node);
 
         // buttons
-        this.closeBtn = $(`<div class="sofia-window-close-container"><span class="sofia-window-close-button"></span></div>`)
-		 			.appendTo(this.node)
+        this.closeBtn = $(`<div class="sofia-window-close-container"><button class="sofia-window-close-button" type="button"></buton></div>`)
+		 			.appendTo(this.header)
 		 			.find('.sofia-window-close-button')
 					.on('click', (e) => {                        
                         this.manager.removeWindow(this.id);
                     });
 
-        this.tab = $(`<div class="sofia-window-tab active">
+        this.tab = $(`<button class="sofia-window-tab active" type="button">
                         <div class="sofia-window-tab-inner">
                             <span class="sofia-window-tab-label-tab">Tab</span>
                         </div>
-                    </div>`).appendTo( $('body') );
+                    </button>`).appendTo( $('.sofia-windownav') );
 
         // make sure this one is selected
         this.node.siblings('.sofia-window').removeClass('active');