Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(79)

Side by Side Diff: ui/webui/resources/cr_elements/cr_toolbar/cr_toolbar.html

Issue 2020963002: MD History: Add responsive layout which hides the sidebar in thin windows (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix review comments and RTL Created 4 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <link rel="import" href="chrome://resources/html/polymer.html"> 1 <link rel="import" href="chrome://resources/html/polymer.html">
2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-media-query/iron-m edia-query.html"> 2 <link rel="import" href="chrome://resources/polymer/v1_0/iron-media-query/iron-m edia-query.html">
3 <link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper -icon-button.html">
3 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar_se arch_field.html"> 4 <link rel="import" href="chrome://resources/cr_elements/cr_toolbar/cr_toolbar_se arch_field.html">
4 5
5 <dom-module id="cr-toolbar"> 6 <dom-module id="cr-toolbar">
6 <template> 7 <template>
7 <style> 8 <style>
8 :host { 9 :host {
9 color: #fff; 10 color: #fff;
10 display: flex; 11 display: flex;
11 height: 56px; 12 height: 56px;
12 } 13 }
13 14
15 #menuButton {
16 -webkit-margin-end: 6px;
17 -webkit-margin-start: 18px;
18 height: 32px;
19 margin-bottom: 6px;
20 margin-top: 6px;
21 min-width: 32px;
22 padding: 6px;
23 width: 32px;
24 }
25
14 h1 { 26 h1 {
15 @apply(--layout-flex); 27 @apply(--layout-flex);
16 font-size: 123%; 28 font-size: 123%;
17 font-weight: 400; 29 font-weight: 400;
18 } 30 }
19 31
20 #leftContent { 32 #leftContent {
21 -webkit-padding-start: 24px;
22 align-items: center; 33 align-items: center;
23 display: flex; 34 display: flex;
24 width: var(--side-bar-width, 0);
25 } 35 }
26 36
27 #centeredContent { 37 #centeredContent {
28 -webkit-padding-end: 12px; 38 -webkit-padding-end: 12px;
29 display: flex; 39 display: flex;
30 flex: 1 1 0; 40 flex: 1 1 0;
31 justify-content: center; 41 justify-content: center;
32 } 42 }
33 43
34 :host([narrow_]) #centeredContent { 44 :host([narrow_]) #centeredContent {
35 justify-content: flex-end; 45 justify-content: flex-end;
36 } 46 }
37 47
38 :host([narrow_][showing-search_]) #leftContent { 48 :host([narrow_][showing-search_]) #leftContent {
39 display: none; 49 display: none;
40 } 50 }
41 </style> 51 </style>
42 <div id="leftContent"> 52 <div id="leftContent">
43 <content select="paper-icon-button"></content> 53 <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_">
dpapad 2016/06/27 22:32:19 Nit (optional): You can avoid the menuButton ID si
tsergeant 2016/06/30 05:09:05 Done.
54 </paper-icon-button>
44 <h1>[[pageName]]</h1> 55 <h1>[[pageName]]</h1>
45 </div> 56 </div>
46 57
47 <div id="centeredContent"> 58 <div id="centeredContent">
48 <cr-toolbar-search-field id="search" narrow="[[narrow_]]" 59 <cr-toolbar-search-field id="search" narrow="[[narrow_]]"
49 label="[[searchPrompt]]" clear-label="[[clearLabel]]" 60 label="[[searchPrompt]]" clear-label="[[clearLabel]]"
50 spinner-active="[[spinnerActive]]" 61 spinner-active="[[spinnerActive]]"
51 showing-search="{{showingSearch_}}"> 62 showing-search="{{showingSearch_}}">
52 </cr-toolbar-search-field> 63 </cr-toolbar-search-field>
53 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}"> 64 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}">
54 </iron-media-query> 65 </iron-media-query>
55 </div> 66 </div>
56 </template> 67 </template>
57 <script src="cr_toolbar.js"></script> 68 <script src="cr_toolbar.js"></script>
58 </dom-module> 69 </dom-module>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698