diff options
| author | hshi@chromium.org <hshi@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> | 2012-08-09 15:10:13 +0000 |
|---|---|---|
| committer | hshi@chromium.org <hshi@chromium.org@0039d316-1c4b-4281-b951-d872f2087c98> | 2012-08-09 15:10:13 +0000 |
| commit | ee8ee54093f47b773eeb8195501a12af99a64288 (patch) | |
| tree | 272b6690496ed06cd8ecb96ca2f929d8169dfd75 | |
| parent | 46561b1bedb50f338098111d9183bd550d442c18 (diff) | |
| download | chromium_src-ee8ee54093f47b773eeb8195501a12af99a64288.zip chromium_src-ee8ee54093f47b773eeb8195501a12af99a64288.tar.gz chromium_src-ee8ee54093f47b773eeb8195501a12af99a64288.tar.bz2 | |
Diagnostics UI: apply UI styles.
Add a navigation pane on the left (similar to the uber frame for history/extensions/settings pages) and apply the same style settings.
Note: the navigation pane is non-functional at the moment. For Diagnostics V1 (1st milestone), we will only have a single page for connectivity, which is always selected as the current page.
BUG=139442
TEST=lumpy
Review URL: https://chromiumcodereview.appspot.com/10824223
git-svn-id: svn://svn.chromium.org/chrome/trunk/src@150793 0039d316-1c4b-4281-b951-d872f2087c98
| -rw-r--r-- | chrome/browser/resources/chromeos/diagnostics/main.css | 40 | ||||
| -rw-r--r-- | chrome/browser/resources/chromeos/diagnostics/main.html | 6 |
2 files changed, 43 insertions, 3 deletions
diff --git a/chrome/browser/resources/chromeos/diagnostics/main.css b/chrome/browser/resources/chromeos/diagnostics/main.css index d14852e..45b3701 100644 --- a/chrome/browser/resources/chromeos/diagnostics/main.css +++ b/chrome/browser/resources/chromeos/diagnostics/main.css @@ -6,17 +6,51 @@ body { font-family: 'Chrome Droid Sans', 'Droid Sans Fallback', sans-serif; font-size: 75%; - padding: 1em; + padding: 0; } -body header > h1 { +.navigation h1 { + margin: 0; + padding: 21px 23px 13px; +} + +.navigation ul { + list-style-type: none; + padding: 0; +} + +.navigation ul > li { + -webkit-border-start: 6px solid transparent; + -webkit-padding-start: 18px; + -webkit-user-select: none; + line-height: 29px; +} + +.navigation ul > li.selected { + -webkit-border-start-color: rgb(78, 87, 100); + cursor: default; + pointer-events: none; +} + +.page { + color: rgb(48, 57, 66); + left: 155px; + max-width: 738px; + min-width: 600px; + position: fixed; + right: 0; + top: 0; + z-index: 3; +} + +.page header > h1 { margin: 0; padding: 21px 0 13px; } /* Create a border under the h1 (but before anything that gets appended * to the end of the header, such as the managed prefs banner). */ -body header > h1::after { +.page header > h1::after { -webkit-margin-end: 20px; background-color: #eee; content: ''; diff --git a/chrome/browser/resources/chromeos/diagnostics/main.html b/chrome/browser/resources/chromeos/diagnostics/main.html index 60d5b65..b9c07cc 100644 --- a/chrome/browser/resources/chromeos/diagnostics/main.html +++ b/chrome/browser/resources/chromeos/diagnostics/main.html @@ -9,6 +9,12 @@ <script src="chrome://diagnostics/main.js"></script> </head> <body> + <div class="navigation"> + <h1>Diagnostics</h1> + <ul> + <li class="selected">Connectivity</li> + </ul> + </div> <div class="page"> <header> <h1>Connectivity</h1> |