]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
projects / thirdparty / bootstrap.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: a0c7473)
Dashboard updates (#26179)
authorMark Otto <markd.otto@gmail.com>
Mon, 2 Apr 2018 01:14:07 +0000 (18:14 -0700)
committerGitHub <noreply@github.com>
Mon, 2 Apr 2018 01:14:07 +0000 (18:14 -0700)
* 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

docs/4.0/examples/dashboard/dashboard.css patch | blob | blame | history
docs/4.0/examples/dashboard/index.html patch | blob | blame | history

diff --git a/docs/4.0/examples/dashboard/dashboard.css b/docs/4.0/examples/dashboard/dashboard.css
index ef40fe78ffbe817e581954a81bc30c825c0f08cc..39180973996cb2ec6790b6e12849a16d324035da 100644 (file)
--- 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;
@@ -56,6 +62,14 @@ body {
   text-transform: uppercase;
 }
 
+/*
+ * 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 d5df44f8490498e0d9f6bed7ea83f0aa3dbdfd36..d96d2d8d9ded8dd508c323fba34859837f798d93 100644 (file)
--- 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">
Mirror of https://github.com/twbs/bootstrap.git