Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
fix(mdToolbar): Toolbar flow on medium screens
Browse files Browse the repository at this point in the history
  • Loading branch information
Marcy Sutton committed Jan 7, 2015
1 parent 78ba497 commit bfc947f
Show file tree
Hide file tree
Showing 3 changed files with 72 additions and 69 deletions.
1 change: 1 addition & 0 deletions docs/app/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,7 @@ code:not(.highlight) {
.menu-icon {
background: none;
border: none;
margin-right: 16px;
}
.app-toolbar .md-toolbar-tools h3 {
-webkit-margin-before: 0;
Expand Down
117 changes: 60 additions & 57 deletions docs/config/template/index.template.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
md-component-id="left"
md-is-locked-open="$media('gt-sm')">

<md-toolbar style="min-height: 64px; max-height:64px;" layout="column">
<h1 class="md-toolbar-tools" flex layout="column">
<md-toolbar>
<h1 class="md-toolbar-tools">
<a href="" ng-click="goHome()" layout="row" flex>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve" style="
width: 40px; height: 40px;">
Expand All @@ -32,7 +32,7 @@ <h1 class="md-toolbar-tools" flex layout="column">
<path d="M 50 7 L 83 75 L 72 75 L 65 59 L 50 59 L 50 50 L 61 50 L 50 26 Z" fill="#b2b2b2"></path>
<path d="M 50 7 L 17 75 L 28 75 L 35 59 L 50 59 L 50 50 L 39 50 L 50 26 Z" fill="#fff"></path>
</svg>
<div flex style="line-height:40px; text-indent: 15px;">Material Design</div>
<div style="line-height:40px; text-indent: 15px;">Material Design</div>
</a>
</h1>
</md-toolbar>
Expand Down Expand Up @@ -62,62 +62,65 @@ <h1 class="md-toolbar-tools" flex layout="column">
</md-sidenav>

<div layout="column" layout-fill tabIndex="-1" role="main">
<md-toolbar layout="column">
<div class="md-toolbar-tools" ng-click="openMenu()" flex layout="column">

<div layout="row" flex>
<button class="menu-icon" hide-gt-sm aria-label="Toggle Menu" style="position: relative; top: -2px;">
<md-icon icon="img/icons/ic_menu_24px.svg"></md-icon>
</button>
<div style="line-height: 36px;" hide-sm ng-if="menu.currentSection.name">{{menu.currentSection.name}}</div>
<span layout="column" layout-align="center center" class="menu-separator-icon" ng-if="menu.currentPage" style="padding: 0 10px;">
<img style="height: 16px;" src="img/docArrow.png" alt="" aria-hidden="true" hide-sm>
</span>
<div style="line-height: 36px;" ng-bind="(menu.currentPage | humanizeDoc) || 'Angular Material'"></div>
<div flex></div>

<div ng-repeat="doc in currentComponent.docs">
<md-button ng-href="#{{doc.url}}"
ng-class="{hide: path().indexOf('demo') == -1}"
aria-label="{{ doc | humanizeDoc }}">
{{doc | humanizeDoc | directiveBrackets}}
</md-button>
<md-toolbar>

<div class="md-toolbar-tools" ng-click="openMenu()">
<button class="menu-icon" hide-gt-sm aria-label="Toggle Menu">
<md-icon icon="img/icons/ic_menu_24px.svg"></md-icon>
</button>

<div layout="row" flex class="fill-height">
<div class="md-toolbar-item md-breadcrumb">
<span hide-sm hide-md ng-if="menu.currentSection.name">{{menu.currentSection.name}}</span>
<span class="menu-separator-icon" ng-if="menu.currentPage" style="padding: 0 10px;" hide-sm hide-md>
<img style="height: 16px;" src="img/docArrow.png" alt="" aria-hidden="true">
</span>
<span style="display: inline-block;" ng-bind="(menu.currentPage | humanizeDoc) || 'Angular Material'"></span>
</div>

<md-button ng-class="{hide: !currentDoc}"
ng-href="#/demo/{{currentComponent.name}}"
style="position: relative; padding-left: 30px; margin-right: 15px;">
<md-icon icon="/img/icons/ic_play_arrow_24px.svg" style="
height: 36px;
position: absolute;
left: 0px;
top: -3px;"></md-icon>
<span>View Demo</span>
</md-button>

<md-button ng-class="{hide: !currentDoc}"
ng-href="{{currentDoc.githubUrl}}"
style="position: relative; padding-left: 30px; margin-right: 15px;">
<md-icon icon="/img/icons/ic_launch_24px.svg" style="
height: 36px;
position: absolute;
left: 0px;
top: -3px;"></md-icon>
<span hide-sm>View on Github</span>
<span hide-gt-sm>Source</span>
</md-button>

<md-button ng-class="{hide: !currentDoc}"
ng-href="{{currentDoc.githubEditUrl}}"
hide-sm
style="position: relative; padding-left: 30px;">
<md-icon icon="/img/icons/ic_launch_24px.svg" style="
height: 36px;
position: absolute;
left: 0px;
top: -3px;"></md-icon>
<span>Improve This Doc</span>
</md-button>
<div class="md-toolbar-item md-tools">
<div ng-repeat="doc in currentComponent.docs">
<md-button ng-href="#{{doc.url}}"
ng-class="{hide: path().indexOf('demo') == -1}"
aria-label="{{ doc | humanizeDoc }}">
{{doc | humanizeDoc | directiveBrackets}}
</md-button>
</div>

<md-button ng-class="{hide: !currentDoc}"
ng-href="#/demo/{{currentComponent.name}}"
style="position: relative; padding-left: 30px; margin-right: 15px;">
<md-icon icon="/img/icons/ic_play_arrow_24px.svg" style="
height: 36px;
position: absolute;
left: 0px;
top: -3px;"></md-icon>
<span hide-sm hide-md>View Demo</span>
</md-button>

<md-button ng-class="{hide: !currentDoc}"
ng-href="{{currentDoc.githubUrl}}"
style="position: relative; padding-left: 30px; margin-right: 15px;">
<md-icon icon="/img/icons/ic_launch_24px.svg" style="
height: 36px;
position: absolute;
left: 0px;
top: -3px;"></md-icon>
<span hide-sm hide-md>View on Github</span>
</md-button>

<md-button ng-class="{hide: !currentDoc}"
ng-href="{{currentDoc.githubEditUrl}}"
hide-sm hide-md
style="position: relative; padding-left: 30px;">
<md-icon icon="/img/icons/ic_launch_24px.svg" style="
height: 36px;
position: absolute;
left: 0px;
top: -3px;"></md-icon>
<span>Improve This Doc</span>
</md-button>
</div>
</div>
</div>

Expand Down
23 changes: 11 additions & 12 deletions src/components/toolbar/toolbar.scss
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
$toolbar-tools-height: 64px !default;
$toolbar-height: 64px !default;
$toolbar-medium-tall-height: 88px !default;
$toolbar-tall-height: 192px !default;
$toolbar-tall-height: 128px !default;

This comment has been minimized.

Sign in to view

Copy link
@sstorie

sstorie Jan 9, 2015

Is there any context available to why the height of the tall toolbar was dropped from 192px to 128px?
$toolbar-indent-margin: 64px !default;
$toolbar-padding: 16px !default;

md-toolbar {
display: flex;
Expand Down Expand Up @@ -45,16 +46,15 @@ md-toolbar {

width: 100%;
height: $toolbar-tools-height;
min-height: $toolbar-tools-height;
min-height: 100%;
max-height: $toolbar-tools-height;
font-size: inherit;
font-weight: normal;
padding: 0 10px;
padding: 0 $toolbar-padding;
margin: 0;

> * {
font-size: inherit;
margin: 0 8px;
}
h2, h3 {
font-weight: normal;
Expand All @@ -63,15 +63,14 @@ md-toolbar {
color: inherit;
text-decoration: none;
}

.fill-height {
display: flex;
align-items: center;
}
.md-tools {
margin-left: auto;
}
.md-button {
font-size: 14px;
}
}

// .md-toolbar-tools-middle {
// position: absolute;
// top: calc(33.3333333333336%);
// left: 0;
// right: 0;
// }

4 comments on commit bfc947f

@sstorie
Copy link

@sstorie sstorie commented on bfc947f Jan 9, 2015

Choose a reason for hiding this comment

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

Is there some context to why the height of the tall toolbar was dropped to 128px in this commit?

Sorry I also added a note, but I'm a bit new to GitHub, so my apologies if this creates any confusion...

@marcysutton
Copy link
Contributor

Choose a reason for hiding this comment

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

Hi! It was to make the height of the toolbar match the design spec (56 + 72 = 128). https://www.google.com/design/spec/layout/structure.html#structure-app-bar

@sstorie
Copy link

@sstorie sstorie commented on bfc947f Jan 9, 2015

Choose a reason for hiding this comment

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

OK thank you for clarifying.

@sammy8806
Copy link

Choose a reason for hiding this comment

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

min-height: $toolbar-tools-height;

This seems to produce some bugs with Safari and Chrome here (Firefox Dev works fine)

Please sign in to comment.