Chromium Code Reviews Chromium Code Reviews
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| OLD | NEW |
|---|---|
| 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; | 19 display: flex; |
| 20 flex-direction: column; | 20 flex-direction: column; |
| 21 } | 21 } |
| 22 | 22 |
| 23 /* Minimal styling required to display app shim. */ | |
| 24 .loading history-app, | |
| 25 .app-shim { | |
| 26 display: none; | |
| 27 } | |
| 28 | |
| 29 history-app { | 23 history-app { |
| 30 flex: 1; | 24 flex: 1; |
| 31 } | 25 } |
| 32 | 26 |
| 27 /* Minimal styling required to display app shim. */ | |
| 28 .loading history-app { | |
| 29 visibility: hidden; | |
| 30 } | |
| 31 | |
| 32 .app-shim { | |
| 33 display: none; | |
| 34 } | |
| 35 | |
| 33 .loading .app-shim { | 36 .loading .app-shim { |
| 34 display: flex; | 37 display: flex; |
| 35 font-size: 123%; | 38 font-size: 123%; |
| 39 left: 0; | |
| 40 position: absolute; | |
| 41 right: 0; | |
|
calamity
2016/06/17 03:02:00
I had no idea you could do this.
tsergeant
2016/06/20 05:05:57
This whole layout was a bit weeiiiird, and has bee
| |
| 36 } | 42 } |
| 37 | 43 |
| 38 .loading #loading-toolbar { | 44 .loading #loading-toolbar { |
| 39 -webkit-padding-start: 24px; | 45 -webkit-padding-start: 24px; |
| 40 align-items: center; | 46 align-items: center; |
| 47 background: var(--md-toolbar-color); | |
| 41 color: #fff; | 48 color: #fff; |
| 42 flex-direction: row; | |
| 43 font-weight: 400; | 49 font-weight: 400; |
| 44 height: 56px; | 50 height: 56px; |
| 45 } | 51 } |
| 46 | 52 |
| 47 .loading #loading-toolbar { | |
| 48 background: var(--md-toolbar-color); | |
| 49 } | |
| 50 | |
| 51 .loading #loading-message { | 53 .loading #loading-message { |
| 52 align-items: center; | 54 align-items: center; |
| 55 bottom: 0; | |
| 53 color: #b4b4b4; | 56 color: #b4b4b4; |
| 54 flex: 1; | |
| 55 font-weight: 500; | 57 font-weight: 500; |
| 56 justify-content: center; | 58 justify-content: center; |
| 59 top: 0; | |
| 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 <span class="app-shim" id="loading-toolbar">$i18n{title}</span> |
| 64 <span class="app-shim" id="loading-message">$i18n{loading}</span> | 67 <span class="app-shim" id="loading-message">$i18n{loading}</span> |
| 65 | 68 |
| 66 <link rel="import" href="chrome://resources/html/cr.html"> | 69 <link rel="import" href="chrome://resources/html/cr.html"> |
| 67 <link rel="import" href="chrome://resources/html/util.html"> | 70 <link rel="import" href="chrome://resources/html/util.html"> |
| 68 <link rel="import" href="chrome://resources/html/load_time_data.html"> | 71 <link rel="import" href="chrome://resources/html/load_time_data.html"> |
| 69 <link rel="import" href="chrome://history/constants.html"> | 72 <link rel="import" href="chrome://history/constants.html"> |
| 70 <script src="strings.js"></script> | 73 <script src="strings.js"></script> |
| 71 <script src="history.js"></script> | 74 <script src="history.js"></script> |
| 72 | 75 |
| 73 <link rel="import" href="chrome://history/app.html" async id="bundle"> | 76 <link rel="import" href="chrome://history/app.html" async id="bundle"> |
| 74 </body> | 77 </body> |
| 75 | 78 |
| 76 </html> | 79 </html> |
| OLD | NEW |
