From 91f70c538a7d4f31f3d6a8529c3ebb53b8d6eb67 Mon Sep 17 00:00:00 2001 From: Bardi Harborow Date: Sat, 26 Nov 2016 15:23:11 +1100 Subject: [PATCH] Refactor Dashboard example. (#21140) --- docs/examples/dashboard/dashboard.css | 104 ++++++++--------------- docs/examples/dashboard/index.html | 117 ++++++++++++++++---------- 2 files changed, 109 insertions(+), 112 deletions(-) diff --git a/docs/examples/dashboard/dashboard.css b/docs/examples/dashboard/dashboard.css index e7c6a21dfd..99f2962b5d 100644 --- a/docs/examples/dashboard/dashboard.css +++ b/docs/examples/dashboard/dashboard.css @@ -7,96 +7,64 @@ body { padding-top: 50px; } - /* - * Global add-ons + * Typography */ -.sub-header { - padding-bottom: 10px; +h1 { + margin-bottom: 20px; + padding-bottom: 9px; border-bottom: 1px solid #eee; } -/* - * Top navigation - * Hide default border to remove 1px line. - */ -.navbar-fixed-top { - border: 0; -} - /* * Sidebar */ -/* Hide for mobile, show later */ .sidebar { - display: none; -} -@media (min-width: 768px) { - .sidebar { - position: fixed; - top: 51px; - bottom: 0; - left: 0; - z-index: 1000; - display: block; - padding: 20px; - overflow-x: hidden; - overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ - background-color: #f5f5f5; - border-right: 1px solid #eee; - } + position: fixed; + top: 51px; + bottom: 0; + left: 0; + z-index: 1000; + padding: 20px; + overflow-x: hidden; + overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ + border-right: 1px solid #eee; } /* Sidebar navigation */ -.nav-sidebar { - margin-right: -21px; /* 20px padding + 1px border */ +.sidebar { + padding-left: 0; + padding-right: 0; +} + +.sidebar .nav { margin-bottom: 20px; - margin-left: -20px; -} -.nav-sidebar > li > a { - padding-right: 20px; - padding-left: 20px; -} -.nav-sidebar > .active > a, -.nav-sidebar > .active > a:hover, -.nav-sidebar > .active > a:focus { - color: #fff; - background-color: #428bca; } +.sidebar .nav-item { + width: 100%; +} + +.sidebar .nav-item + .nav-item { + margin-left: 0; +} + +.sidebar .nav-link { + border-radius: 0; +} /* - * Main content - */ - -.main { - padding: 20px; -} -@media (min-width: 768px) { - .main { - padding-right: 40px; - padding-left: 40px; - } -} - - -/* - * Placeholder dashboard ideas + * Dashboard */ + /* Placeholders */ .placeholders { - margin-bottom: 30px; - text-align: center; -} -.placeholders h4 { - margin-bottom: 0; -} -.placeholder { - margin-bottom: 20px; + padding-bottom: 3rem; } + .placeholder img { - display: inline-block; - border-radius: 50%; + padding-top: 1.5rem; + padding-bottom: 1.5rem; } diff --git a/docs/examples/dashboard/index.html b/docs/examples/dashboard/index.html index b4bdcd3ac4..cb9d880ecb 100644 --- a/docs/examples/dashboard/index.html +++ b/docs/examples/dashboard/index.html @@ -19,70 +19,101 @@ - - + +

Dashboard

-
+
- Generic placeholder thumbnail + Generic placeholder thumbnail +

Label

+
Something else
+
+
+ Generic placeholder thumbnail

Label

Something else
- Generic placeholder thumbnail + Generic placeholder thumbnail

Label

Something else
- Generic placeholder thumbnail + Generic placeholder thumbnail

Label

Something else
-
- Generic placeholder thumbnail -

Label

- Something else -
-
+

Section title

@@ -212,7 +243,7 @@
- +
@@ -223,8 +254,6 @@ - -