feat(layout): add new layout system

angular · Nov 18, 2014 · d51a44c · d51a44c
1 parent 8975ee8
commit d51a44c
Show file tree

Hide file tree

Showing 37 changed files with 246 additions and 250 deletions.
diff --git a/breaking.md b/breaking.md
@@ -0,0 +1,15 @@
+axe layout-padding
+
+{hide,show,block,inline-block}-{sm,md,lg} are gone
+
+All css problems with display: {block,inline-block} overriding are solved
+
+hide-phone hides only on phone (0 <= size <= sm)
+hide-tablet hides only on tablet (sm <= size <= md)
+hide-bigtablet hides only on monitor (md <= size <= lg)
+hide-desktop hides only on huge (lg <= size)
+
+deprecate layout-align?
+
+layout-vertical has been renamed to layout-column
+layout-horizontal has been renamed to layout-row
diff --git a/docs/app/css/layout-demo.css b/docs/app/css/layout-demo.css
@@ -21,26 +21,28 @@
 }
 
 .layout-demo [layout],
-.layout-demo [layout-sm],
-.layout-demo [layout-md],
-.layout-demo [layout-lg],
+.layout-demo [layout-phone],
+.layout-demo [layout-tablet],
+.layout-demo [layout-tablet-landscape],
+.layout-demo [layout-pc],
 .layout-guidelines [layout],
-.layout-guidelines [layout-sm],
-.layout-guidelines [layout-md],
-.layout-guidelines [layout-lg] {
+.layout-guidelines [layout-phone],
+.layout-guidelines [layout-tablet],
+.layout-guidelines [layout-tablet-landscape],
+.layout-guidelines [layout-pc] {
   background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAAAAAA6fptVAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAKSURBVAgdY2AAAAACAAHPyDXlAAAAAElFTkSuQmCC");
   background-position: -1px -1px;
   background-repeat: no-repeat;
 }
 
-.layout-demo [layout="horizontal"],
-.layout-guidelines [layout="horizontal"] {
+.layout-demo [layout="row"],
+.layout-guidelines [layout="row"] {
   background-position: 50% 50%;
   background-repeat: repeat-x;
 }
 
-.layout-demo [layout="vertical"],
-.layout-guidelines [layout="vertical"] {
+.layout-demo [layout="column"],
+.layout-guidelines [layout="column"] {
   background-position: 50% 50%;
   background-repeat: repeat-y;
 }

diff --git a/docs/app/demo/layout/flex-cell.html b/docs/app/demo/layout/flex-cell.html
@@ -7,7 +7,7 @@
 </head>
 <body class="layout-demo demo-no-padding">
 
-  <div layout="horizontal">
+  <div layout="row">
 
     <div>Uno</div>
 
@@ -17,7 +17,7 @@
 
   </div>
 
-  <div layout="vertical" style="height: 200px;">
+  <div layout="column" style="height: 200px;">
 
     <div>Uno</div>
 

diff --git a/docs/app/demo/layout/full-width-header-menu-footer.html b/docs/app/demo/layout/full-width-header-menu-footer.html
@@ -5,13 +5,13 @@
   <title>Full Width, Header, Menu, Footer</title>
   <link rel="stylesheet" href="../../docs.css">
 </head>
-<body layout="vertical" layout-fill class="layout-demo full-layout-demo">
+<body layout="column" layout-fill class="layout-demo full-layout-demo">
 
   <header>
     Header
   </header>
 
-  <div flex layout="vertical" layout-sm="horizontal">
+  <div flex layout="row" layout-phone="column">
 
     <aside flex-sm="33" flex-md="20">
       Menu<br>

diff --git a/docs/app/demo/layout/horizontal-vertical-layout.html b/docs/app/demo/layout/horizontal-vertical-layout.html
@@ -7,23 +7,23 @@
 </head>
 <body class="layout-demo demo-no-padding">
 
-  <div layout="horizontal">
+  <div layout="row">
 
     <div>Uno</div>
 
     <div>Dos</div>
 
   </div>
 
-  <div layout="vertical">
+  <div layout="row">
 
     <div>Uno</div>
 
     <div>Dos</div>
 
   </div>
 
-  <div layout="vertical" layout-md="horizontal">
+  <div layout="horizontal" layout-tablet="row" layout-phone="row">
 
     <div>Uno</div>
 

diff --git a/docs/app/demo/layout/keylines.html b/docs/app/demo/layout/keylines.html
@@ -33,13 +33,13 @@
     }
   </style>
 </head>
-<body layout="vertical" layout-fill>
+<body layout="column" layout-fill>
 
-  <div keylines="3" layout="horizontal" layout-align="end" class="status-bar">
+  <div keylines="3" layout="row" layout-align="end" class="status-bar">
     <span>12:30</span>
   </div>
 
-  <header keylines="7" layout="horizontal" layout-align="space-between">
+  <header keylines="7" layout="row" layout-align="space-between">
     <i>&#9776;</i>
     <i>&#9776;</i>
   </header>

diff --git a/docs/app/demo/layout/layout-order.html b/docs/app/demo/layout/layout-order.html
@@ -7,7 +7,7 @@
 </head>
 <body class="layout-demo demo-with-padding">
 
-  <div layout="vertical" layout-md="horizontal" layout-padding>
+  <div layout="row" layout-phone="column" layout-tablet="column" layout-padding>
 
     <div flex layout-order-sm="3">
       <div class="demo-color-a">Uno</div>

diff --git a/docs/app/partials/demo.tmpl.html b/docs/app/partials/demo.tmpl.html
@@ -1,5 +1,5 @@
-<div layout="vertical" layout-fill class="doc-content">
-  <div flex layout="vertical">
+<div layout="column" layout-fill class="doc-content">
+  <div flex layout="column">
 
     <section ng-repeat="demo in demos" 
       class="demo-container md-whiteframe-z1 {{currentComponent.componentId}}-{{demo.id}}"

diff --git a/docs/app/partials/home.tmpl.html b/docs/app/partials/home.tmpl.html
@@ -1,4 +1,4 @@
-<div ng-controller="HomeCtrl" layout="vertical">
+<div ng-controller="HomeCtrl" layout="column">
     <md-content flex>
         <p>
             <a href="http://www.google.com/design/spec/material-design/">Material Design</a> is a specification for a
@@ -8,7 +8,7 @@
             Below is a brief video that presents the Material Design system:
         </p>
 
-        <md-content layout="horizontal" layout-align="center center" style="padding-bottom: 25px;" >
+        <md-content layout="row" layout-align="center center" style="padding-bottom: 25px;" >
             <iframe width="560" height="315" title="Material Design" src="//www.youtube.com/embed/Q8TXgCzxEnw"
                     frameborder="0" allowfullscreen></iframe>
         </md-content>
@@ -20,7 +20,7 @@
             collection. Created to provide a set of AngularJS-native UI elements that implement the material design system,
             Angular Material is comprised of 3 distinct sets of features:
             </p>
-            <md-content layout="horizontal" layout-align="center center" style="padding-top:25px;padding-bottom:25px;">
+            <md-content layout="row" layout-align="center center" style="padding-top:25px;padding-bottom:25px;">
                 <img src="https://cloud.githubusercontent.com/assets/210413/5077572/30dfc2f0-6e6a-11e4-9723-07c918128f4f.png"
                      alt="Features of Angular Material"/>
             </md-content>
@@ -50,11 +50,7 @@ <h3>Useful Links:</h3>
                 </a>.
             </li>
         </ul>
-
         <br/>
         <br/>
-
     </md-content>
-
-
 </div>