mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2024-11-26 19:44:07 +03:00
Code Issues Packages Projects Releases Wiki Activity

drawer docs, refactoring and removing some unnecessary code

Browse Source
This commit is contained in:
Kevin Ross 2016-01-22 13:43:44 -06:00
parent f2bc1bc2b8
commit 6f78ca4bf7
9 changed files with 87 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/assets/js/src/index.js
View File

@ -27,7 +27,7 @@ class Application {
$('.bd-example-indeterminate [type="checkbox"]').prop('indeterminate', true)
// Disable empty links in docs examples
$('.bd-example [href=#]').click((e) => {
$('.bd-example [href="#"]').click((e) => {
e.preventDefault()
})

6
docs/examples/dashboard/example.scss
View File

@ -39,10 +39,11 @@ a, a:hover {
}
.mdb-layout-drawer {
background-color: $blue-grey-900;
background-color: $blue-grey-800;
color: $blue-grey-50;
> header {
background-color: $blue-grey-900;
height: 151px;
.avatar {
@ -73,8 +74,7 @@ a, a:hover {
}
> .list-group {
background-color: $blue-grey-800;
z-index: -2;
//z-index: -2;
.list-group-item {
color: rgba(255, 255, 255, 0.56);

2
docs/examples/dashboard/index.html
View File

@ -91,7 +91,7 @@ js: example.js
</div>
</div>
</header>
<ul class="mdb-nav-x list-group">
<ul class="list-group">
<a class="list-group-item">
<i class="material-icons" role="presentation">home</i>Home
</a>

4
docs/examples/drawer/index.html
View File

@ -45,7 +45,7 @@ group: material-design
<header>
<a class="navbar-brand">Title</a>
</header>
<ul class="mdb-nav-x list-group">
<ul class="list-group">
<a class="list-group-item">
<i class="material-icons" role="presentation">home</i>Home
</a>
@ -67,7 +67,7 @@ group: material-design
<div class="container">
<!-- main content -->
<h2>Responsive drawer template</h2>
<p class="lead">This template provides a push style drawer for large screens, but an overlay style drawer for smaller screens.</p>
<p class="lead">This template provides a push style drawer for large screens, but an overlay style drawer for smaller screens. For example, try viewing on an iPad in portrait vs. landscape.</p>
</div>
</main>
</div>

150
docs/material-design/drawers.md
View File

@ -20,6 +20,10 @@ The following examples provide a good starting point:
- [Drawer template]({{ site.baseurl }}/examples/dashboard/) is a basic fully responsive template.
- [Dashboard example]({{ site.baseurl }}/examples/dashboard/) is a comprehensive fully responsive demonstration.
### Behavior
The default behavior for any drawer is to be _out_ of the frame of view. It can be set _in_ the frame of view either by using using one or the gridpoint responsive classes such as `mdb-drawer-in-lg-up`, or by using `mdb-drawer-in`. Any drawer, be it responsive or statically set to _in_ can be _forced_ out by using `mdb-drawer-out`.
### Markup
In order to use the drawer component, MDB has created the following flex based layout structure:
@ -32,6 +36,74 @@ In order to use the drawer component, MDB has created the following flex based l
</div>
{% endhighlight %}
## Styles
### Push
The default behavior is for content to be pushed.
{% example html id=drawer-s1 %}
<div class="mdb-layout-container mdb-drawer-f-l">
<header class="mdb-layout-header">
<div class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s1">
<span class="sr-only">Toggle drawer</span>
<i class="material-icons">menu</i>
</button>
<ul class="nav navbar-nav">
<li class="nav-item">Title</li>
</ul>
</div>
</header>
<div id="dw-s1" class="mdb-layout-drawer">
<header>
<a class="navbar-brand">Title</a>
</header>
<ul class="list-group">
<a class="list-group-item">Link 1</a>
<a class="list-group-item">Link 2</a>
<a class="list-group-item">Link 3</a>
</ul>
</div>
<main class="mdb-layout-content">
<div class="container">
<p>Main content</p>
</div>
</main>
</div>
{% endexample %}
### Overlay
Optional behavior will overlay the drawer and provide a backdrop:
{% example html id=drawer-s2 %}
<div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay">
<header class="mdb-layout-header">
<div class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s2">
<span class="sr-only">Toggle drawer</span>
<i class="material-icons">menu</i>
</button>
<ul class="nav navbar-nav">
<li class="nav-item">Title</li>
</ul>
</div>
</header>
<div id="dw-s2" class="mdb-layout-drawer">
<header>
<a class="navbar-brand">Title</a>
</header>
<ul class="list-group">
<a class="list-group-item">Link 1</a>
<a class="list-group-item">Link 2</a>
<a class="list-group-item">Link 3</a>
</ul>
</div>
<main class="mdb-layout-content">
<div class="container">
<p>Main content</p>
</div>
</main>
</div>
{% endexample %}
## Positions
@ -101,7 +173,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
<header>
<a class="navbar-brand">Title</a>
</header>
<ul class="mdb-nav-x list-group">
<ul class="list-group">
<a class="list-group-item">Link 1</a>
<a class="list-group-item">Link 2</a>
<a class="list-group-item">Link 3</a>
@ -134,7 +206,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
<header>
<a class="navbar-brand">Title</a>
</header>
<ul class="mdb-nav-x list-group">
<ul class="list-group">
<a class="list-group-item">Link 1</a>
<a class="list-group-item">Link 2</a>
<a class="list-group-item">Link 3</a>
@ -167,7 +239,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
<header>
<a class="navbar-brand">Title</a>
</header>
<ul class="mdb-nav-x list-group">
<ul class="list-group">
<a class="list-group-item">Link 1</a>
<a class="list-group-item">Link 2</a>
<a class="list-group-item">Link 3</a>
@ -200,7 +272,7 @@ The following positioning marker classes should be placed on the `mdb-layout-con
<header>
<a class="navbar-brand">Title</a>
</header>
<ul class="mdb-nav-x list-group">
<ul class="list-group">
<a class="list-group-item">Link 1</a>
<a class="list-group-item">Link 2</a>
<a class="list-group-item">Link 3</a>
@ -214,76 +286,6 @@ The following positioning marker classes should be placed on the `mdb-layout-con
</div>
{% endexample %}
## Styles
### Push
The default behavior is for content to be pushed.
{% example html id=drawer-s1 %}
<div class="mdb-layout-container mdb-drawer-f-l">
<header class="mdb-layout-header">
<div class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s1">
<span class="sr-only">Toggle drawer</span>
<i class="material-icons">menu</i>
</button>
<ul class="nav navbar-nav">
<li class="nav-item">Title</li>
</ul>
</div>
</header>
<div id="dw-s1" class="mdb-layout-drawer">
<header>
<a class="navbar-brand">Title</a>
</header>
<ul class="mdb-nav-x list-group">
<a class="list-group-item">Link 1</a>
<a class="list-group-item">Link 2</a>
<a class="list-group-item">Link 3</a>
</ul>
</div>
<main class="mdb-layout-content">
<div class="container">
<p>Main content</p>
</div>
</main>
</div>
{% endexample %}
### Overlay
Optional behavior will overlay the drawer and provide a backdrop:
{% example html id=drawer-s2 %}
<div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay">
<header class="mdb-layout-header">
<div class="navbar navbar-light bg-faded">
<button class="navbar-toggler" type="button" data-toggle="drawer" data-target="#dw-s2">
<span class="sr-only">Toggle drawer</span>
<i class="material-icons">menu</i>
</button>
<ul class="nav navbar-nav">
<li class="nav-item">Title</li>
</ul>
</div>
</header>
<div id="dw-s2" class="mdb-layout-drawer">
<header>
<a class="navbar-brand">Title</a>
</header>
<ul class="mdb-nav-x list-group">
<a class="list-group-item">Link 1</a>
<a class="list-group-item">Link 2</a>
<a class="list-group-item">Link 3</a>
</ul>
</div>
<main class="mdb-layout-content">
<div class="container">
<p>Main content</p>
</div>
</main>
</div>
{% endexample %}
## Responsiveness vs Static
### Static

1
scss/.scss-lint.yml
View File

@ -122,6 +122,7 @@ linters:
"flex-pack",
"flex-align",
"flex-shrink",
"flex-grow",
"align-items",
"align-self",
"justify-content",

5
scss/_drawer.scss
View File

@ -30,7 +30,6 @@
// Placement of common components within the drawer
// You might say this is opinionated - feedback welcome.
> header {
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
@ -43,11 +42,7 @@
}
> .list-group {
flex-direction: column;
align-items: stretch;
padding-top: 1rem;
flex-grow: 1;
//z-index: -2;
.list-group-item {
padding-right: 2.5rem;

2
scss/_layout.scss
View File

@ -43,9 +43,9 @@
z-index: 1; // under a header
display: inline-block;
//-ms-flex: 0 1 auto; // Fix IE10 bug.
flex-grow: 1;
overflow-x: hidden;
overflow-y: auto; // mobile webkit smooth scrolling may need scroll, but auto seems to be working and omits the scroll border
flex-grow: 1;
-webkit-overflow-scrolling: touch; // mobile webkit smooth scrolling
@include material-animation-default();
}

2
scss/_list-group.scss
View File

@ -6,6 +6,8 @@
// - triple line 88dp
.list-group {
flex-grow: 1;
// Add 8dp of padding at the top and bottom of a list. One exception is at the top of a list with a subheader, because subheaders contain their own padding.
padding: .5rem 0;