Flexible box used on window layout. Cross-browser via LESS preprocessor

tayan-serna · Dec 7, 2012 · 389bfc9 · 389bfc9
1 parent 6d32e1e
commit 389bfc9
Show file tree

Hide file tree

Showing 5 changed files with 149 additions and 36 deletions.
diff --git a/example/index.html b/example/index.html
@@ -6,7 +6,7 @@
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-        <title>Ventus: The Window Manager Experiment</title>
+        <title>Ventus: The CSS3 Window Manager Experiment</title>
         <meta name="viewport" content="width=device-width">
 
         <link href='css/normalize.css' rel='stylesheet' type='text/css' />
@@ -67,13 +67,25 @@
             }
 
             #loading-screen .content h1 {
+                display: inline;
+
                 font-size: 80px;
                 font-weight: 300;
 
                 padding: 0;
                 margin: 0;
             }
 
+            #loading-screen .content h2 {
+                display: inline;
+
+                font-size: 18px;
+                font-weight: 300;
+
+                padding: 0;
+                color: rgba(255,255,255,.7);
+            }
+
             #loading-screen .content p {                
                 font-size: 20px;
                 font-weight: 300;
@@ -116,7 +128,10 @@
         <div id="loading-screen">
             <section>
                 <div class="content">
-                    <h1>Ventus</h1>
+                    <header>
+                        <h1>Ventus</h1>
+                        <!--<h2>The CSS3 Window Manager Experiment</h2>-->
+                    </header>
                     <p><img src="img/loader.gif" /> Loading...</p>
                 </div>
             </section>

diff --git a/src/css/flex.prefix.less b/src/css/flex.prefix.less
@@ -0,0 +1,124 @@
+
+//  Flex.prefix.less (part of Prefix.less)
+//  Copyright (c) 2012 Ramón Lamana
+//
+//  MIT Licensed:
+//  http://www.opensource.org/licenses/mit-license.php
+
+// Support for the new 2012 CSS Flexible Box Layout Module in all
+// browsers supporting at least the 2009 specs draft too.
+
+// W3C Candidate Recommendation, 18 September 2012
+// http://www.w3.org/TR/css3-flexbox/#flex-wrap
+
+
+// 'display' property new values
+
+.display(@value) {
+  display: @value;
+}
+
+.display(@value) when (@value = flex) {
+  // Old 2009 specs
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-box;
+  display: -o-box;
+
+  // New specs
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flex;
+  display: -o-flex;
+  display: flex;
+}
+
+
+// 'flex-flow' property
+
+.flex-flow(@value) {
+  -webkit-flex-flow: @value;
+  -moz-flex-flow: @value;
+  -ms-flex-flow: @value;
+  -o-flex-flow: @value;
+  flex-flow: @value;
+}
+
+.flex-flow(@value) when (@value = column) {
+  // Old 2009 specs
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  -ms-box-orient: vertical;
+  -o-box-orient: vertical;
+}
+
+.flex-flow(@value) when (@value = row) {
+  // Old 2009 specs
+  -webkit-box-orient: horizontal;
+  -moz-box-orient: horizontal;
+  -ms-box-orient: horizontal;
+  -o-box-orient: horizontal;
+}
+
+
+// 'flex-direction' property
+
+.flex-direction(@value) {
+  -webkit-flex-flow: @value;
+  -moz-flex-flow: @value;
+  -ms-flex-flow: @value;
+  -o-flex-flow: @value;
+  flex-flow: @value;
+}
+
+.flex-direction(@value) when (@value = column) {
+  // Old 2009 specs
+  -webkit-box-orient: vertical;
+  -moz-box-orient: vertical;
+  -ms-box-orient: vertical;
+  -o-box-orient: vertical;
+}
+
+.flex-direction(@value) when (@value = row) {
+  // Old 2009 specs
+  -webkit-box-orient: horizontal;
+  -moz-box-orient: horizontal;
+  -ms-box-orient: horizontal;
+  -o-box-orient: horizontal;
+}
+
+
+// 'flex-wrap' property
+
+.flex-wrap(@value) {
+  -webkit-flex-wrap: @value;
+  -moz-flex-wrap: @value;
+  -ms-flex-wrap: @value;
+  -o-flex-wrap: @value;
+  flex-wrap: @value;
+}
+
+// 'flex' property
+
+.flex(@values) {
+  -webkit-flex: @values;
+  -moz-flex: @values;
+  -ms-flex: @values;
+  -o-flex: @values;
+  flex: @values;
+}
+
+.flex(@value) when (@value = 1) {
+  -webkit-box-flex: @value;
+  -moz-box-flex: @value;
+  -ms-box-flex: @value;
+  -o-box-flex: @value;
+}
+
+.flex(@value) when (@value = 0) {
+  -webkit-box-flex: @value;
+  -moz-box-flex: @value;
+  -ms-box-flex: @value;
+  -o-box-flex: @value;
+}
+
diff --git a/src/css/prefix.less b/src/css/prefix.less
@@ -5,36 +5,8 @@
 //  MIT Licensed:
 //  http://www.opensource.org/licenses/mit-license.php
 
-
-// Outdated 2009 W3C Draft Flexible Box Model
-
-.box-orient(@value) {
-  box-orient: @value;
-  -webkit-box-orient: @value;
-  -moz-box-orient: @value;
-  -ms-box-orient: @value;
-  -o-box-orient: @value;
-}
-
-.box-flex(@value) {
-  box-flex: @value;
-  -webkit-box-flex: @value;
-  -moz-box-flex: @value;
-  -ms-box-flex: @value;
-  -o-box-flex: @value;
-}
-
-.display(@value) {
-  display: @value;
-}
-
-.display(@value) when (@value = box) {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-box;
-  display: -o-box;
-  display: box;
-}
+// Flexible Box Layout
+@import "flex.prefix.less";
 
 
 // User Select

diff --git a/src/css/window.less b/src/css/window.less
@@ -90,19 +90,20 @@
 	.box-shadow(0 0px 20px rgba(0, 0, 0, 0.6));
 
 	.wm-window-box {
+		.display(flex);
+		.flex-flow(column);
+
 		height: 100%;
 		min-height: @minheight;
 		width: 100%;
 
 		header.wm-window-title {
-			min-height: 17px;
-			height: 17px;
 			padding: 4px 0;
+			height: 17px;
 
 			background-color: @bgdisabled;
 			border: 0;
 
-
 			overflow: hidden;
 
 			h1 {
@@ -158,6 +159,7 @@
 
 		section.wm-content {
 			display: block;
+			.flex(1);
 
 			min-height: @minheight;
 

diff --git a/src/js/wm/window.js b/src/js/wm/window.js
@@ -279,7 +279,7 @@ function(Emitter, View, WindowView) {
 		set height(value) {
 			// This shouldn't be done if flexible box model
 			// worked properly with overflow-y: auto
-			this.$content.height(value - this.$header.outerHeight());
+			//this.$content.height(value - this.$header.outerHeight());
 
 			this.el.height(value);
 		},