mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-02-09 08:10:39 +03:00
Code Issues Packages Projects Releases Wiki Activity

list-groups complete

Browse Source
This commit is contained in:
Kevin Ross 2015-12-23 10:31:49 -06:00
parent d6c33cae76
commit 0a47e82749
6 changed files with 76 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
CONTRIBUTING.md
View File

@ -1,12 +1,12 @@
# Contributing to bootsrap-material-design # Contributing to bootstrap-material-design
Looking to contribute something to bootsrap-material-design? **Here's how you can help.** Looking to contribute something to bootsrap-material-design? **Here's how you can help.**
Please take a moment to review this document in order to make the contribution Please take a moment to review this document in order to make the contribution
process easy and effective for everyone involved. process easy and effective for everyone involved.
Following these guidelines helps to communicate that you respect the time of Following these guidelines helps to communicate that you **respect the time of
the developers managing and developing this open source project. In return, the developers** managing and developing this open source project. In return,
they should reciprocate that respect in addressing your issue or assessing they should reciprocate that respect in addressing your issue or assessing
patches and features. patches and features.

23
docs/assets/js/src/application.js
View File

@ -5,6 +5,9 @@ class Application {
constructor() { constructor() {
}
initializeDemos() {
// Tooltip and popover demos // Tooltip and popover demos
$('.tooltip-demo').tooltip({ $('.tooltip-demo').tooltip({
selector: '[data-toggle="tooltip"]', selector: '[data-toggle="tooltip"]',
@ -26,8 +29,9 @@ class Application {
}) })
} }
// Add dynamic display of font properties to the existing documentation
displayTypographyProperties() { displayTypographyProperties() {
// headers // headings
Style.displayFontSizeWeightColor($('.bd-example-type td > *:not(.type-info)'), ($element, $text) => { Style.displayFontSizeWeightColor($('.bd-example-type td > *:not(.type-info)'), ($element, $text) => {
let $target = $element.closest('tr').find('td.type-info') let $target = $element.closest('tr').find('td.type-info')
$target.text('') $target.text('')
@ -61,11 +65,11 @@ class Application {
let $row = $(`<div class='row'></div>`) let $row = $(`<div class='row'></div>`)
$parent.append($row) $parent.append($row)
let $col = $(`<div class='col-sm-9'></div>`) let $col = $(`<div class='col-sm-8'></div>`)
$col.append($p) $col.append($p)
$row.append($col) $row.append($col)
$col = $(`<div class='col-sm-3'></div>`) $col = $(`<div class='col-sm-4'></div>`)
$col.append($text) $col.append($text)
$row.append($col) $row.append($col)
}, false, true) }, false, true)
@ -107,25 +111,18 @@ class Application {
.tooltip('_fixTitle') .tooltip('_fixTitle')
}) })
} }
manipulateSearchBox() {
//let $search = $('#search-input')
//$search.wrap(`<div class='mdb-form-group'></div>`)
//$search.before(`<label class='mdb-label-placeholder'>${$search.prop('placeholder')}</label>`)
//$search.removeAttr('placeholder')
}
} }
$(() => { $(() => {
let app = new Application() let app = new Application()
app.displayTypographyProperties() app.displayTypographyProperties()
app.initializeClipboard()
app.manipulateSearchBox()
$('.btn-clipboard').mdbRipples() $('.btn-clipboard').mdbRipples()
// FIXME: file inputs seems to be in flux, delete the offending one for now. // FIXME: file inputs seems to be in flux, delete the offending one for now.
$('#exampleInputFile').closest('.form-group').detach() $('#exampleInputFile').closest('.form-group').detach()
$('body').bootstrapMaterialDesign() $('body').bootstrapMaterialDesign()
app.initializeClipboard()
app.initializeDemos()
}) })

21
docs/assets/js/src/style.js
View File

@ -1,3 +1,6 @@
/**
* Dynamically display style properties i.e. font
*/
const Style = (($) => { const Style = (($) => {
/** /**
@ -27,7 +30,7 @@ const Style = (($) => {
} }
// Function to display font properties dynamically discovered // Function to display font properties dynamically discovered
static displayFontSizeWeightColor($elements, writeFn, bg = false, wrapWithMark = false) { static displayFontSizeWeightColor($elements, writeFn, bg = false, wrapWithCode = false) {
return $elements.each((index, element) => { return $elements.each((index, element) => {
let $element = $(element) let $element = $(element)
@ -39,8 +42,8 @@ const Style = (($) => {
let text = '' let text = ''
if (wrapWithMark) { if (wrapWithCode) {
text += `<mark style='font-size: 10px; font-weight: 500; letter-spacing: normal'>` text += `<code style='font-size: 10px; font-weight: 500; letter-spacing: normal'>`
} }
// text += `${$element.css('font-size')} ${$element.css('font-weight')} ${hexColor}` // text += `${$element.css('font-size')} ${$element.css('font-weight')} ${hexColor}`
@ -50,21 +53,13 @@ const Style = (($) => {
text += ` bg: ${rgbaBgColor} ` text += ` bg: ${rgbaBgColor} `
} }
if (wrapWithMark) { if (wrapWithCode) {
text += `</mark>` text += `</code>`
} }
writeFn($element, $(text)) writeFn($element, $(text))
}) })
} }
// ------------------------------------------------------------------------
// private
// ------------------------------------------------------------------------
// static
} }

4
docs/material-design/buttons.md
View File

@ -144,7 +144,3 @@ Using `btn-fab-sm` on the button, or using `btn-group-sm` on the enclosing eleme
<button type="button" class="btn btn-raised">Default button</button> <button type="button" class="btn btn-raised">Default button</button>
<button type="button" class="btn btn-raised btn-sm">Small button</button> <button type="button" class="btn btn-raised btn-sm">Small button</button>
{% endexample %} {% endexample %}
## x
{% example html %}
{% endexample %}

102
docs/material-design/list-group.md
View File

@ -20,10 +20,10 @@ The material classes introduced are:
<tbody> <tbody>
<tr> <tr>
<td> <td>
{% markdown %}`.mdb-list-group-item`{% endmarkdown %} <code>.mdb-list-group-item</code>
</td> </td>
<td class="text-nowrap"> <td class="text-nowrap">
{% markdown %}`.list-group-item`{% endmarkdown %} <code>.list-group-item</code>
</td> </td>
<td> <td>
{% markdown %}Flexbox layout, including conveniences for icon and label layout.{% endmarkdown %} {% markdown %}Flexbox layout, including conveniences for icon and label layout.{% endmarkdown %}
@ -31,18 +31,18 @@ The material classes introduced are:
</tr> </tr>
<tr> <tr>
<td> <td>
{% markdown %}`.mdb-list-group-col`{% endmarkdown %} <code>.mdb-list-group-col</code>
</td> </td>
<td class="text-nowrap"> <td class="text-nowrap">
{% markdown %}None{% endmarkdown %} {% markdown %}None{% endmarkdown %}
</td> </td>
<td> <td>
{% markdown %}Flexbox column - additional class to use within a `.list-group-item` for layout, such as a multi-line content section.{% endmarkdown %} {% markdown %}Flexbox column - additional class to use within an `.mdb-list-group-item` for layout, such as a multi-line content section.{% endmarkdown %}
</td> </td>
</tr> </tr>
<tr> <tr>
<td> <td>
{% markdown %}`.right`{% endmarkdown %} <code>.right</code>
</td> </td>
<td class="text-nowrap"> <td class="text-nowrap">
{% markdown %}None{% endmarkdown %} {% markdown %}None{% endmarkdown %}
@ -53,7 +53,7 @@ The material classes introduced are:
</tr> </tr>
<tr> <tr>
<td> <td>
{% markdown %}`.mdb-list-group-sm`{% endmarkdown %} <code>.mdb-list-group-sm</code>
</td> </td>
<td class="text-nowrap"> <td class="text-nowrap">
{% markdown %}None{% endmarkdown %} {% markdown %}None{% endmarkdown %}
@ -78,9 +78,10 @@ The material classes introduced are:
{% example html %} {% example html %}
<ul class="list-group"> <ul class="list-group">
<li class="mdb-list-group-item">Inbox</li> <li class="mdb-list-group-item">Text only</li>
<a href="#" class="mdb-list-group-item">Link item</a> <a href="#" class="mdb-list-group-item">Link item</a>
<button type="button" class="mdb-list-group-item">Button item</button> <button type="button" class="mdb-list-group-item">Button item</button>
<a href="#" class="mdb-list-group-item active">Active link item</a>
<a href="#" class="mdb-list-group-item disabled">Disabled item</a> <a href="#" class="mdb-list-group-item disabled">Disabled item</a>
</ul> </ul>
{% endexample %} {% endexample %}
@ -89,9 +90,10 @@ The material classes introduced are:
{% example html %} {% example html %}
<ul class="list-group mdb-list-group-sm"> <ul class="list-group mdb-list-group-sm">
<li class="mdb-list-group-item">Inbox</li> <li class="mdb-list-group-item">Text</li>
<a href="#" class="mdb-list-group-item">Link item</a> <a href="#" class="mdb-list-group-item">Link item</a>
<button type="button" class="mdb-list-group-item">Button item</button> <button type="button" class="mdb-list-group-item">Button item</button>
<a href="#" class="mdb-list-group-item active">Active link item</a>
<a href="#" class="mdb-list-group-item disabled">Disabled item</a> <a href="#" class="mdb-list-group-item disabled">Disabled item</a>
</ul> </ul>
{% endexample %} {% endexample %}
@ -100,45 +102,45 @@ The material classes introduced are:
{% example html %} {% example html %}
<ul class="list-group"> <ul class="list-group">
<li class="mdb-list-group-item"> <a class="mdb-list-group-item">
<i class="material-icons">inbox</i> <i class="material-icons">inbox</i>
Icon left Icon left
</li> </a>
<li class="mdb-list-group-item"> <a class="mdb-list-group-item">
<span class="label label-default label-pill">14</span> <span class="label label-default label-pill">14</span>
Label pill left Label pill left
</li> </a>
<li class="mdb-list-group-item"> <a class="mdb-list-group-item">
<i class="material-icons">inbox</i> <i class="material-icons">inbox</i>
Icons left and right Icons left and right
<i class="material-icons">face</i> <i class="material-icons">face</i>
</li> </a>
<li class="mdb-list-group-item"> <a class="mdb-list-group-item">
<span class="label label-default label-pill">14</span> <span class="label label-default label-pill">14</span>
Label pill left and right Label pill left and right
<span class="label label-default label-pill">14</span> <span class="label label-default label-pill">14</span>
</li> </a>
<li class="mdb-list-group-item"> <a class="mdb-list-group-item">
Icon <code>.right</code> Icon <code>.right</code>
<i class="material-icons right">face</i> <i class="material-icons right">face</i>
</li> </a>
<li class="mdb-list-group-item"> <a class="mdb-list-group-item">
Label pill <code>.right</code> Label pill <code>.right</code>
<span class="label label-default label-pill right">14</span> <span class="label label-default label-pill right">14</span>
</li> </a>
<li class="mdb-list-group-item"> <a class="mdb-list-group-item">
<span class="label label-default label-pill">14</span> <span class="label label-default label-pill">14</span>
Label pill and icon Label pill and icon
<i class="material-icons">inbox</i> <i class="material-icons">inbox</i>
</li> </a>
<li class="mdb-list-group-item"> <a class="mdb-list-group-item">
<i class="material-icons">inbox</i> <i class="material-icons">inbox</i>
Icon and label pill Icon and label pill
<span class="label label-default label-pill">14</span> <span class="label label-default label-pill">14</span>
</li> </a>
</ul> </ul>
{% endexample %} {% endexample %}
@ -150,24 +152,24 @@ The material classes introduced are:
{% example html %} {% example html %}
<ul class="list-group"> <ul class="list-group">
<li class="mdb-list-group-item"> <a class="mdb-list-group-item">
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Some text</p> <p class="list-group-item-text">Some text</p>
</div> </div>
</li> </a>
<li class="mdb-list-group-item"> <a class="mdb-list-group-item">
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Some text</p> <p class="list-group-item-text">Some text</p>
</div> </div>
</li> </a>
<li class="mdb-list-group-item"> <a class="mdb-list-group-item">
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Some text</p> <p class="list-group-item-text">Some text</p>
</div> </div>
</li> </a>
</ul> </ul>
{% endexample %} {% endexample %}
@ -175,24 +177,24 @@ The material classes introduced are:
{% example html %} {% example html %}
<ul class="list-group mdb-list-group-sm"> <ul class="list-group mdb-list-group-sm">
<li class="mdb-list-group-item"> <a class="mdb-list-group-item">
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Some text</p> <p class="list-group-item-text">Some text</p>
</div> </div>
</li> </a>
<li class="mdb-list-group-item"> <a class="mdb-list-group-item">
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Some text</p> <p class="list-group-item-text">Some text</p>
</div> </div>
</li> </a>
<li class="mdb-list-group-item"> <a class="mdb-list-group-item">
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Some text</p> <p class="list-group-item-text">Some text</p>
</div> </div>
</li> </a>
</ul> </ul>
{% endexample %} {% endexample %}
@ -200,46 +202,46 @@ The material classes introduced are:
{% example html %} {% example html %}
<ul class="list-group"> <ul class="list-group">
<li class="mdb-list-group-item"> <a class="mdb-list-group-item">
<i class="material-icons">inbox</i> <i class="material-icons">inbox</i>
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Icon left</p> <p class="list-group-item-text">Icon left</p>
</div> </div>
</li> </a>
<li class="mdb-list-group-item"> <a class="mdb-list-group-item">
<span class="label label-default label-pill">14</span> <span class="label label-default label-pill">14</span>
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Icon left</p> <p class="list-group-item-text">Icon left</p>
</div> </div>
</li> </a>
<li class="mdb-list-group-item"> <a class="mdb-list-group-item">
<i class="material-icons">inbox</i> <i class="material-icons">inbox</i>
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Icons left and right</p> <p class="list-group-item-text">Icons left and right</p>
</div> </div>
<i class="material-icons">face</i> <i class="material-icons">face</i>
</li> </a>
<li class="mdb-list-group-item"> <a class="mdb-list-group-item">
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Icon right</p> <p class="list-group-item-text">Icon right</p>
</div> </div>
<i class="material-icons right">face</i> <i class="material-icons right">face</i>
</li> </a>
<li class="mdb-list-group-item"> <a class="mdb-list-group-item">
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">List group item heading</p>
<p class="list-group-item-text">Label pill to the right</p> <p class="list-group-item-text">Label pill to the right</p>
</div> </div>
<span class="label label-default label-pill right">14</span> <span class="label label-default label-pill right">14</span>
</li> </a>
</ul> </ul>
{% endexample %} {% endexample %}
@ -249,15 +251,15 @@ The material classes introduced are:
{% example html %} {% example html %}
<ul class="list-group"> <ul class="list-group">
<li class="mdb-list-group-item"> <a class="mdb-list-group-item">
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">Linked list group item heading</p>
<p class="list-group-item-text">This disallows more than two lines. Hopefully an ellipsis ends this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.</p> <p class="list-group-item-text">This disallows more than two lines. Hopefully an ellipsis ends this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.</p>
</div> </div>
</li> </a>
<li class="mdb-list-group-item"> <li class="mdb-list-group-item">
<div class="mdb-list-group-col"> <div class="mdb-list-group-col">
<p class="list-group-item-heading">List group item heading</p> <p class="list-group-item-heading">Text list group item heading</p>
<p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.</p> <p class="list-group-item-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut malesuada elit. Proin tristique, lorem eu vehicula congue, lectus ipsum porta quam, eget rutrum sapien turpis et libero.</p>
</div> </div>
</li> </li>

5
scss/_list-group.scss
View File

@ -33,7 +33,7 @@
.mdb-list-group-item { .mdb-list-group-item {
@extend .list-group-item; @extend .list-group-item;
display: flex; display: flex;
flex-direction: row; //flex-direction: row;
flex-flow: row wrap; flex-flow: row wrap;
//flex-shrink: 0; //flex-shrink: 0;
//flex-shrink: 1; //flex-shrink: 1;
@ -45,7 +45,8 @@
//flex-flow: row wrap; //flex-flow: row wrap;
min-width: 0; min-width: 0;
max-height: 2.188rem; // 88dp tile total height max-height: 2.188rem; // 88dp tile total height
//flex: 0 1 auto; // important http://stackoverflow.com/questions/12022288/how-to-keep-a-flex-item-from-overflowing-due-to-its-text // FIXME: text overflow with ellipsis is not working
//flex: 0 1 auto; // http://stackoverflow.com/questions/12022288/how-to-keep-a-flex-item-from-overflowing-due-to-its-text
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }