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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: chrome/browser/resources/md_history/history.html

Issue 2073703002: MD History: Simplify flex layout in <history-list> (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Fix height of #main-container Created 4 years, 6 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
« no previous file with comments | « chrome/browser/resources/md_history/grouped_list.html ('k') | chrome/browser/resources/md_history/history_item.html » ('j') | chrome/browser/resources/md_history/shared_style.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!doctype html> 1 <!doctype html>
2 <html dir="$i18n{textdirection}" lang="$i18n{language}"> 2 <html dir="$i18n{textdirection}" lang="$i18n{language}">
3 <head> 3 <head>
4 <meta charset="utf8"> 4 <meta charset="utf8">
5 <title>$i18n{title}</title> 5 <title>$i18n{title}</title>
6 6
7 <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css"> 7 <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">
8 <link rel="stylesheet" href="chrome://resources/css/md_colors.css"> 8 <link rel="stylesheet" href="chrome://resources/css/md_colors.css">
9 9
10 <style> 10 <style>
11 html, 11 html,
12 body { 12 body {
13 height: 100%; 13 height: 100%;
14 margin: 0; 14 margin: 0;
15 } 15 }
16 16
17 body { 17 body {
18 background: var(--md-background-color); 18 background: var(--md-background-color);
19 display: flex;
20 flex-direction: column;
21 } 19 }
22 20
23 /* Minimal styling required to display app shim. */ 21 /* Minimal styling required to display app shim. */
24 .loading history-app, 22 .loading history-app {
25 .app-shim { 23 visibility: hidden;
24 }
25
26 #app-shim {
26 display: none; 27 display: none;
27 } 28 }
28 29
29 history-app { 30 .loading #app-shim {
30 flex: 1; 31 bottom: 0;
32 display: flex;
33 flex-direction: column;
34 font-size: 123%;
35 height: 100%;
36 left: 0;
37 position: absolute;
38 right: 0;
39 top: 0;
31 } 40 }
32 41
33 .loading .app-shim { 42 #app-shim span {
34 display: flex; 43 display: flex;
35 font-size: 123%;
36 } 44 }
37 45
38 .loading #loading-toolbar { 46 #loading-toolbar {
39 -webkit-padding-start: 24px; 47 -webkit-padding-start: 24px;
40 align-items: center; 48 align-items: center;
49 background: var(--md-toolbar-color);
41 color: #fff; 50 color: #fff;
42 flex-direction: row;
43 font-weight: 400;
44 height: 56px; 51 height: 56px;
45 } 52 }
46 53
47 .loading #loading-toolbar { 54 #loading-message {
48 background: var(--md-toolbar-color);
49 }
50
51 .loading #loading-message {
52 align-items: center; 55 align-items: center;
53 color: #b4b4b4; 56 color: #b4b4b4;
54 flex: 1; 57 flex: 1;
55 font-weight: 500; 58 font-weight: 500;
56 justify-content: center; 59 justify-content: center;
57 } 60 }
58 </style> 61 </style>
59 </head> 62 </head>
60 63
61 <body class="loading"> 64 <body class="loading">
62 <history-app id="history-app"></history-app> 65 <history-app id="history-app"></history-app>
63 <span class="app-shim" id="loading-toolbar">$i18n{title}</span> 66
64 <span class="app-shim" id="loading-message">$i18n{loading}</span> 67 <div id="app-shim">
68 <span id="loading-toolbar">$i18n{title}</span>
69 <span id="loading-message">$i18n{loading}</span>
70 </div>
65 71
66 <link rel="import" href="chrome://resources/html/cr.html"> 72 <link rel="import" href="chrome://resources/html/cr.html">
67 <link rel="import" href="chrome://resources/html/util.html"> 73 <link rel="import" href="chrome://resources/html/util.html">
68 <link rel="import" href="chrome://resources/html/load_time_data.html"> 74 <link rel="import" href="chrome://resources/html/load_time_data.html">
69 <link rel="import" href="chrome://history/constants.html"> 75 <link rel="import" href="chrome://history/constants.html">
70 <script src="strings.js"></script> 76 <script src="strings.js"></script>
71 <script src="history.js"></script> 77 <script src="history.js"></script>
72 78
73 <link rel="import" href="chrome://history/app.html" async id="bundle"> 79 <link rel="import" href="chrome://history/app.html" async id="bundle">
74 </body> 80 </body>
75 81
76 </html> 82 </html>
OLDNEW
« no previous file with comments | « chrome/browser/resources/md_history/grouped_list.html ('k') | chrome/browser/resources/md_history/history_item.html » ('j') | chrome/browser/resources/md_history/shared_style.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698