Skip to content
This repository has been archived by the owner on Aug 29, 2023. It is now read-only.

Commit

Permalink
Browse files Browse the repository at this point in the history
refactor(): add -gt- attrs, switch back to sm/md/lg
BREAKING CHANGE: the -phone, -tablet, -pc, and -tablet-landscape
attribute suffixes have been removed and replaced with -sm, -md, and -lg
attributes.

* hide-sm means hide only on small devices (phones).
* hide-md means hide only on medium devices (tablets)
* hide-lg means hide only on large devices (rotated tablets).

Additionally, three new attribute suffixes have been provided for more flexibility:

* hide-gt-sm means hide on devices with size greater than small
 (bigger than phones).
* hide-gt-md means hide on devices with size greater than medium
 (bigger than tablets)
* hide-gt-lg means hide on devices with size greater than large
 (bigger than rotated tablets).

See the [layout options
section](http://material.angularjs.org/#/layout/options)
of the website for more up-to-date information.
  • Loading branch information
ajoslin committed Nov 24, 2014
1 parent fca5376 commit a659c54
Show file tree
Hide file tree
Showing 31 changed files with 662 additions and 653 deletions.
16 changes: 8 additions & 8 deletions CHANGELOG.md
Expand Up @@ -57,31 +57,31 @@ $mdDialog.show(

| Label | Size (dp) | Attribute |
|--------|--------|--------|
| Phone | 0 <= size <= 600 | layout-phone |
| Tablet | 600 > size <= 960 | layout-tablet |
| Tablet-Landscape | 960 >= size <= 1200 | layout-tablet-landscape |
| PC | > 1200 | layout-pc |
| Phone | 0 <= size <= 600 | layout-sm |
| Tablet | 600 > size <= 960 | layout-md |
| Tablet-Landscape | 960 >= size <= 1200 | layout-lg |
| PC | > 1200 | layout-gt-lg |

> **<u>Example 1</u>**: To use a *horizontal* layout and responsively change to *vertical* for screen sizes < 600 dp:
>```html
<!-- original '<div layout="vertical" layout-sm="horizontal">' becomes -->
<div layout="row" layout-phone="column">
<div layout="row" layout-sm="column">
> ```
>
> **<u>Example 2</u>**: To use a *horizontal* layout and change to *vertical* for *phone* and *tablet* screen sizes:
>```html
<!-- original '<div layout="vertical" layout-md="horizontal">' becomes -->
<div layout="row" layout-phone="column" layout-tablet="column">
<div layout="row" layout-sm="column" layout-md="column">
```
> **<u>Example 3</u>**: To show an element except when on a *phone* (or smaller) screen size:
>```html
<!-- original '<div hide show-sm>' becomes -->
<div hide-phone>
<div hide-sm>
```
> **<u>Example 4</u>**: To always hide an element, but show it only on phone (or smaller) devices:
>```html
<!-- original '<div hide-sm>' becomes -->
<div hide show-phone>
<div hide show-sm>
```
* For performance, the *disabled* attribute is no longer supported; instead the *ng-disabled* attribute is now read to check if a component is disabled. ([2ece8cd7](https://github.com/angular/material/commit/2ece8cd794c4c28df4fb6a7683492da71aa2c382))
Expand Down
211 changes: 12 additions & 199 deletions docs/app/css/layout-demo.css
@@ -1,8 +1,4 @@

.code-view pre > code.highlight {
padding: 0;
}

.inline-demo {
margin: 0 0 25px 0;
padding: 5px;
Expand All @@ -12,203 +8,20 @@
text-align: center;
}

.inline-demo > div {
padding: 5px;
min-width: 130px;
border: 1px solid #004d40;
background: #00897b;
color: #e0f2f1;
}

.layout-demo [layout],
.layout-demo [layout-phone],
.layout-demo [layout-tablet],
.layout-demo [layout-tablet-landscape],
.layout-demo [layout-pc],
.layout-guidelines [layout],
.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="row"],
.layout-guidelines [layout="row"] {
background-position: 50% 50%;
background-repeat: repeat-x;
}

.layout-demo [layout="column"],
.layout-guidelines [layout="column"] {
background-position: 50% 50%;
background-repeat: repeat-y;
}

iframe-code-view iframe {
margin: 0;
width: 100%;
height: 300px;
border: 1px solid #ccc;
}
iframe-code-view p {
margin: 4px 0 40px 0;
}

body.layout-demo {
margin: 0;
padding: 0;
color: white;
}

.demo-no-padding [layout] > div {
padding: 10px;
min-width: 30px;
}

.demo-padding [layout-padding] > div > div,
.demo-with-padding [layout-padding] > div > div {
margin: 0;
padding: 10px;
}

.demo-no-padding [layout]:nth-child(1) > div,
.demo-padding [layout-padding]:nth-child(1) > div > div,
.demo-color-a {
border: 1px solid #0097a7;
background: #00BCD4;
}

.demo-no-padding [layout]:nth-child(2) > div,
.demo-padding [layout-padding]:nth-child(2) > div > div,
.demo-color-b {
border: 1px solid #689f38;
background: #8BC34A;
}

.demo-no-padding [layout]:nth-child(3) > div,
.demo-padding [layout-padding]:nth-child(3) > div > div,
.demo-color-c {
border: 1px solid #610C2D;
background: #C2185B;
}

.demo-no-padding [layout]:nth-child(4) > div,
.demo-padding [layout-padding]:nth-child(4) > div > div,
.demo-color-d {
border: 1px solid #ffa000;
background: #ffc107;
}

.demo-no-padding [layout]:nth-child(5) > div,
.demo-padding [layout-padding]:nth-child(5) > div > div,
.demo-color-e {
border: 1px solid #f50057;
background: #FF4081;
}

.demo-no-padding [layout]:nth-child(6) > div,
.demo-padding [layout-padding]:nth-child(6) > div > div,
.demo-color-f {
border: 1px solid #8e24aa;
background: #AB47BC;
}

.demo-padding span {
padding: 5px;
background: #AB47BC;
}

.demo-padding p {
padding: 5px 0;
color: #333;
}

.full-layout-demo header {
background: #AB47BC;
color: white;
}

.full-layout-demo aside {
background: #00BCD4;
color: white;
}

.full-layout-demo main {
background: white;
color: #333;
}

.full-layout-demo footer {
background: #8BC34A;
color: white;
}

body.layout-demo:before {
position: fixed;
top: 4px;
right: 4px;
display: block;
padding: 3px 4px;
width: 50px;
border-radius: 2px;
background: #b0120a;
color: white;
content: 'default';
text-align: center;
font-size: 10px;
opacity: .9;
}

@media (min-width: 600px) {
body.layout-demo:before {
background: #4a148c;
content: 'small';
}
.layout-demo [layout-phone="row"],
.layout-guidelines [layout-phone="row"] {
background-position: 50% 50%;
background-repeat: repeat-x;
}
.layout-demo [layout-phone="column"],
.layout-guidelines [layout-phone="column"] {
background-position: 50% 50%;
background-repeat: repeat-y;
}
.layout-guidelines demo-include [layout] > * {
padding: 8px;
min-width: 136px;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,0.26);
margin: 8px;
}

@media (min-width: 960px) {
body.layout-demo:before {
background: #0d5302;
content: 'medium';
}
.layout-demo [layout-tablet="row"][layout-phone="row"],
.layout-guidelines [layout-tablet="row"][layout-phone="row"] {
background-position: 50% 50%;
background-repeat: repeat-x;
}
.layout-demo [layout-tablet="column"][layout-phone="column"],
.layout-guidelines [layout-tablet="column"][layout-phone="column"] {
background-position: 50% 50%;
background-repeat: repeat-y;
}
.layout-demo :not([layout]) {
border: 1px solid #eee;
padding: 8px;
font-size: 16px;
}

@media (min-width: 1200px) {
body.layout-demo:before {
background: #01579b;
content: 'large';
}
.layout-demo [layout-tablet-landscape="row"][layout-pc="row"],
.layout-guidelines [layout-tablet-landscape="row"][layout-pc="row"] {
background-position: 50% 50%;
background-repeat: repeat-x;
}
.layout-demo [layout-tablet-landscape="column"][layout-pc="column"],
.layout-guidelines [layout-tablet-landscape="column"][layout-pc="column"] {
background-position: 50% 50%;
background-repeat: repeat-y;
}
.layout-content .demo-box {
box-shadow: 0px 1px 3px 0 rgba(0,0,0,0.26);
padding: 16px;
}
22 changes: 17 additions & 5 deletions docs/app/css/style.css
Expand Up @@ -159,7 +159,8 @@ code:not(.highlight) {
}

.demo-container {
margin-top: 30px;
border-radius: 4px;
margin-top: 16px;
-webkit-transition: 0.02s padding ease-in-out;
transition: 0.02s padding ease-in-out;
position: relative;
Expand Down Expand Up @@ -205,6 +206,13 @@ md-tabs.demo-source-tabs md-tab-label {
display: -ms-flexbox;
display: flex;
}
.small-demo .demo-source-tabs:not(.ng-hide) {
min-height: 224px;
max-height: 224px;
}
.small-demo .demo-content {
min-height: 128px;
}
.demo-content > * {
-webkit-box-flex: 1;
-webkit-flex: 1;
Expand All @@ -217,6 +225,14 @@ md-tabs.demo-source-tabs md-tab-label {
.demo-content > div[layout-fill] {
min-height: 448px;
}
.small-demo .demo-content > div[layout-fill] {
min-height: 224px;
}
.small-demo .demo-toolbar {
min-height: 48px;
max-height: 48px;
font-size: 20px;
}

.show-source md-toolbar.demo-toolbar {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.36);
Expand Down Expand Up @@ -372,15 +388,11 @@ ul.methods li h3 {
font-size: 0.95em;
}



.demo-source-container pre,
.demo-source-container code {
min-height: 100%;
}



md-content.demo-source-container > hljs > pre > code.highlight {
position : absolute;
top : 0px;
Expand Down
2 changes: 1 addition & 1 deletion docs/app/demo/layout/full-width-header-menu-footer.html
Expand Up @@ -11,7 +11,7 @@
Header
</header>

<div flex layout="row" layout-phone="column">
<div flex layout="row" layout-sm="column">

<aside flex-sm="33" flex-md="20">
Menu<br>
Expand Down
2 changes: 1 addition & 1 deletion docs/app/demo/layout/horizontal-vertical-layout.html
Expand Up @@ -23,7 +23,7 @@

</div>

<div layout="row" layout-tablet="row" layout-phone="row">
<div layout="row" layout-md="row" layout-sm="row">

<div>Uno</div>

Expand Down
2 changes: 1 addition & 1 deletion docs/app/demo/layout/layout-order.html
Expand Up @@ -7,7 +7,7 @@
</head>
<body class="layout-demo demo-with-padding">

<div layout="row" layout-phone="column" layout-tablet="column" layout-padding>
<div layout="row" layout-sm="column" layout-md="column" layout-margin>

<div flex layout-order-sm="3">
<div class="demo-color-a">Uno</div>
Expand Down

7 comments on commit a659c54

@ajoslin
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gkalpak thanks for the feedback. Most of it has been implemented in master.

Also, regarding your review of the coding guidelines docs earlier: I caught some of what you caught before merging it into master, but not all of it. If you opened a PR fixing the other doc problems, that'd be awesome!

@ajoslin
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gkalpak
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ajoslin: Sorry, to spam you with all the comments :)
So, it's not clear to me: Does 0412152 take care of everything, or are there still things I could fix and submit a PR ?

@ajoslin
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you submit a PR for things in docs/guides/ that you commented on earlier?

@ajoslin
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And don't be sorry. I greatly appreciate your feedback. So far, almost all of your comments have been logical and right.

@gkalpak
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Aha, I see. Sure, I will submit a PR for docs/guide/.

Actually, I wasn't done reviewing this one, so I will leave a couple more quick comments here as reminders for me to submit a PR later (or tomorrow). So, don't bother with my new comments (and sorry to polute your commit 😃).

@gkalpak
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@ajoslin: I submitted a PR with a couple more minor fixes (#765).

Regarding my comments on docs/guides/ (#750), I submitted a PR against the wip-guidelines branch (#768).

I didn't do anything about #750 (comment).
I don't any reason to call have the js folder (but it's up to you guys).

Please sign in to comment.