diff options
| author | Mark Otto <markd.otto@gmail.com> | 2018-04-02 04:14:07 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2018-04-02 04:14:07 +0300 |
| commit | e47fb40ff250a82bcd24577e0073ce8aa147ef0f (patch) | |
| tree | e6ffcd42aa0a125a9ff16e155bc8ba78153f40d2 /docs | |
| parent | a0c7473a34082edcb9ca4097eccdf2f6c42af55e (diff) | |
Dashboard updates (#26179)
* Update Dashboard example
- Replaces .sticky-top on .navbar with .fixed-top
- Adjusts padding on main content area and sidebar to account for fixed navbar
- Move to padding in sidebar instead of top: 48px; fixes Firefox rendering issue
- Adds new .shadow utility for a little extra cherry on top
- Moves sticky styles to separate feature query ruleset to avoid IE rendering issues
* Add .w-100 to chart to fix IE horizontal scroll from label that extended past viewport
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/4.0/examples/dashboard/dashboard.css | 22 | ||||
| -rw-r--r-- | docs/4.0/examples/dashboard/index.html | 8 |
2 files changed, 22 insertions, 8 deletions
diff --git a/docs/4.0/examples/dashboard/dashboard.css b/docs/4.0/examples/dashboard/dashboard.css index ef40fe78ff..3918097399 100644 --- a/docs/4.0/examples/dashboard/dashboard.css +++ b/docs/4.0/examples/dashboard/dashboard.css @@ -18,20 +18,26 @@ body { bottom: 0; left: 0; z-index: 100; /* Behind the navbar */ - padding: 0; + padding: 48px 0 0; /* Height of navbar */ box-shadow: inset -1px 0 0 rgba(0, 0, 0, .1); } .sidebar-sticky { - position: -webkit-sticky; - position: sticky; - top: 48px; /* Height of navbar */ + position: relative; + top: 0; height: calc(100vh - 48px); padding-top: .5rem; overflow-x: hidden; overflow-y: auto; /* Scrollable contents if viewport is shorter than content. */ } +@supports ((position: -webkit-sticky) or (position: sticky)) { + .sidebar-sticky { + position: -webkit-sticky; + position: sticky; + } +} + .sidebar .nav-link { font-weight: 500; color: #333; @@ -57,6 +63,14 @@ body { } /* + * Content + */ + +[role="main"] { + padding-top: 48px; /* Space for fixed navbar */ +} + +/* * Navbar */ diff --git a/docs/4.0/examples/dashboard/index.html b/docs/4.0/examples/dashboard/index.html index d5df44f849..d96d2d8d9d 100644 --- a/docs/4.0/examples/dashboard/index.html +++ b/docs/4.0/examples/dashboard/index.html @@ -17,7 +17,7 @@ </head> <body> - <nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0"> + <nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow"> <a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#">Company name</a> <input class="form-control form-control-dark w-100" type="text" placeholder="Search" aria-label="Search"> <ul class="navbar-nav px-3"> @@ -105,8 +105,8 @@ </div> </nav> - <main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4"> - <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom"> + <main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4"> + <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom"> <h1 class="h2">Dashboard</h1> <div class="btn-toolbar mb-2 mb-md-0"> <div class="btn-group mr-2"> @@ -120,7 +120,7 @@ </div> </div> - <canvas class="my-4" id="myChart" width="900" height="380"></canvas> + <canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas> <h2>Section title</h2> <div class="table-responsive"> |