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

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

Issue 2165903003: MD History: Show sidebar next to content on wide screens (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@history_fix_footer_link
Patch Set: dpapad@ review Created 4 years, 4 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/polymer/v1_0/paper-icon-button/paper -icon-button.html">
4 <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">
5 5
6 <dom-module id="cr-toolbar"> 6 <dom-module id="cr-toolbar">
7 <template> 7 <template>
8 <style> 8 <style>
9 :host { 9 :host {
10 --cr-toolbar-field-width: 580px; 10 --cr-toolbar-field-width: 580px;
11 color: #fff; 11 color: #fff;
12 display: flex; 12 display: flex;
13 height: 56px; 13 height: 56px;
14 } 14 }
15 15
16 h1 { 16 h1 {
17 @apply(--layout-flex); 17 @apply(--layout-flex);
18 -webkit-margin-start: 6px;
18 font-size: 123%; 19 font-size: 123%;
19 font-weight: 400; 20 font-weight: 400;
20 text-overflow: ellipsis; 21 text-overflow: ellipsis;
21 overflow: hidden; 22 overflow: hidden;
22 white-space: nowrap; 23 white-space: nowrap;
23 } 24 }
24 25
25 #leftContent { 26 #leftContent {
27 -webkit-margin-start: 18px;
26 align-items: center; 28 align-items: center;
27 display: flex; 29 display: flex;
28 position: absolute; 30 position: absolute;
29 transition: opacity 100ms; 31 transition: opacity 100ms;
30 } 32 }
31 33
32 #leftContent paper-icon-button { 34 #menuButton {
33 -webkit-margin-end: 6px;
34 -webkit-margin-start: 18px;
35 height: 32px; 35 height: 32px;
36 margin-bottom: 6px; 36 margin-bottom: 6px;
37 margin-top: 6px; 37 margin-top: 6px;
38 min-width: 32px; 38 min-width: 32px;
39 padding: 6px; 39 padding: 6px;
40 width: 32px; 40 width: 32px;
41 } 41 }
42 42
43 :host(:not([show-menu])) #menuButton {
44 display: none;
45 }
46
43 #centeredContent { 47 #centeredContent {
48 -webkit-margin-start: var(--cr-toolbar-field-margin, 0);
44 -webkit-padding-end: 12px; 49 -webkit-padding-end: 12px;
45 display: flex; 50 display: flex;
46 flex: 1 1 0; 51 flex: 1 1 0;
47 justify-content: center; 52 justify-content: center;
48 } 53 }
49 54
50 :host(:not([narrow_])) #leftContent { 55 :host(:not([narrow_])) #leftContent {
51 max-width: calc((100% - var(--cr-toolbar-field-width) - 18px) / 2); 56 max-width: calc((100% - var(--cr-toolbar-field-width) - 18px) / 2);
52 } 57 }
53 58
54 :host([narrow_]) #centeredContent { 59 :host([narrow_]) #centeredContent {
55 justify-content: flex-end; 60 justify-content: flex-end;
56 } 61 }
57 62
58 :host([narrow_][showing-search_]) #leftContent { 63 :host([narrow_][showing-search_]) #leftContent {
59 opacity: 0; 64 opacity: 0;
60 } 65 }
61 </style> 66 </style>
62 <div id="leftContent"> 67 <div id="leftContent">
63 <paper-icon-button icon="cr:menu" on-tap="onMenuTap_"> 68 <paper-icon-button id="menuButton" icon="cr:menu" on-tap="onMenuTap_">
64 </paper-icon-button> 69 </paper-icon-button>
65 <h1>[[pageName]]</h1> 70 <h1>[[pageName]]</h1>
66 </div> 71 </div>
67 72
68 <div id="centeredContent"> 73 <div id="centeredContent">
69 <cr-toolbar-search-field id="search" narrow="[[narrow_]]" 74 <cr-toolbar-search-field id="search" narrow="[[narrow_]]"
70 label="[[searchPrompt]]" clear-label="[[clearLabel]]" 75 label="[[searchPrompt]]" clear-label="[[clearLabel]]"
71 spinner-active="[[spinnerActive]]" 76 spinner-active="[[spinnerActive]]"
72 showing-search="{{showingSearch_}}"> 77 showing-search="{{showingSearch_}}">
73 </cr-toolbar-search-field> 78 </cr-toolbar-search-field>
74 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}"> 79 <iron-media-query query="(max-width: 900px)" query-matches="{{narrow_}}">
75 </iron-media-query> 80 </iron-media-query>
76 </div> 81 </div>
77 </template> 82 </template>
78 <script src="cr_toolbar.js"></script> 83 <script src="cr_toolbar.js"></script>
79 </dom-module> 84 </dom-module>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698