diff --git a/package.json b/package.json index ec75d0f54fe80df2064d82bd7f232ae075c76548..51b4fb91a06801ec4dee41188b8914cb0164929e 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "description": "Premium and Open Source dashboard template with responsive and high quality UI.", "scripts": { "start": "npm-run-all clean css-main js-compile-standalone --parallel browsersync watch", + "start-incremental": "npm-run-all clean css-main js-compile-standalone --parallel browsersync watch-incremental", "build": "npm-run-all clean html-build css js assets-copy", "bundlesize": "bundlesize", "browsersync": "node build/browsersync.js", @@ -19,10 +20,12 @@ "css-lint": "stylelint \"scss/**/*.scss\" --cache --cache-location .cache/.stylelintcache", "css-main": "npm-run-all css-compile css-prefix", "css-main-build": "npm-run-all css-lint css-compile css-prefix css-minify", - "watch": "npm-run-all --parallel watch-*", + "watch": "npm-run-all --parallel watch-css watch-js watch-html", + "watch-incremental": "npm-run-all --parallel watch-css watch-js watch-html-incremental", "watch-css": "nodemon --watch scss/ --ext scss --exec \"npm run css-main\"", "watch-js": "nodemon --watch js/ --ext js --exec \"npm run js-compile-standalone\"", "watch-html": "JEKYLL_ENV=development bundle exec jekyll build --watch", + "watch-html-incremental": "JEKYLL_ENV=development bundle exec jekyll build --watch --incremental", "js": "npm-run-all --sequential js-compile js-libs", "js-libs": "rm -rf dist/libs && mkdir dist/libs && node build/copy-libs.js", "js-lint": "eslint --cache --cache-location .cache/.eslintcache js build/", diff --git a/pages/_docs/breadcrumb.md b/pages/_docs/breadcrumb.md index b3152e4221905d908472c15036e44bec4dd96b80..cf72b9b6b85e439b8f1514e271fb9e54e655b92e 100644 --- a/pages/_docs/breadcrumb.md +++ b/pages/_docs/breadcrumb.md @@ -1,7 +1,7 @@ --- title: Breadcrumb menu: docs.breadcrumb -description: A breadcrumb navigation provide links back to each previous page the user navigated through, and shows the user's current location in a website. +description: Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS. done: true --- diff --git a/pages/_docs/cards.md b/pages/_docs/cards.md index e0f7526fe829c354bfa24524cb4d45bcc4b9181e..f7950149b1a91247c22c4e992ec04067b8ed0b9c 100644 --- a/pages/_docs/cards.md +++ b/pages/_docs/cards.md @@ -9,15 +9,14 @@ The `.card` element is simply a container with a shadow, a border, a radius, and ### Default card {% example html columns=1 %} -{% include cards/card.html hide-options=true %} +{% include cards/card.html body="This is some text within a card body." %} {% endexample %} -### Advanced card +### Card with title and image {% example html columns=1 %} -{% include cards/card.html show-buttons=true show-footer=true %} +{% include cards/card.html img-top=true title="Card with title and image" %} {% endexample %} - ### Blog post card The best way to make your post eye-catching is adding an image to it. To do so, just add the image with the `.card-img-top` class. We've added the `.d-flex .flex-column` classes to the `.card-body` to have the author details be on the bottom of the card. @@ -55,211 +54,31 @@ If you want to create a couple of posts next to each other, add the `.row-deck` You can also add the image on the left side of the card. All you need do to is: add the `.card-aside` class to the element with the `.card` class. Then add the image in the `.card-aside-column` element. No worries, tabler will automatically center it and scale to right size: {% example html columns=3 %} -{% include cards/blog-single.html type="aside" liked=1 %} +{% include cards/blog-single.html type="aside" liked=1 article-id=3 %} {% endexample %} ### Color variations {% example html columns=3 %}
-
- {% include cards/card.html title="Card status on top" hide-options=true status-position="top" status-color="red" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque" %} +
+ {% include cards/card.html status-top="danger" title="Card with top status" %}
-
- {% include cards/card.html title="Card status on left side" hide-options=true status-position="left" status-color="blue" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque" %} -
-
- {% include cards/card.html title="Card status on bottom" hide-options=true status-position="bottom" status-color="green" body="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam deleniti fugit incidunt, iste, itaque minima neque" %} +
+ {% include cards/card.html status-left="green" title="Card with side status" %}
{% endexample %} - -### Card with switch - -{% example html columns=1 %} -{% include cards/card.html title="Card with switch" show-switch=true %} -{% endexample %} - -### Card with loader +### Stacked card {% example html columns=1 %} -{% include cards/card.html title="Card with loader" hide-options=true show-loader=true %} -{% endexample %} - -### Card with badge on image - -{% example html columns=3 %} -
-
- - -
- NATURE -
-
-
-
-
-
- - It’s 2018, and the race is on between tech giants to decide who will control what you see every time you open your eyes - - What Not To Wear: The Hats, Scarves In History -
-
-
Feb 28, 10:54 am
-
-
-
+{% include cards/card.html class="card-stacked" title="Stacked card" %} {% endexample %} -### Card with badge - -{% example html columns=3 %} -
-
- - -
-
-
-
-
-
- - Fashion - -
- - What Not To Wear: The Hats, Scarves In History - -
-
-
Feb 26, 1:49 am
-
-
-
-{% endexample %} - - +## Tabbed card -### Card with aside image - -{% example html columns=3 %} -
-
- -
- MUSIC -
-
-
-
-
-
- - Radio Listeners Prepare For An Impending Alien Invasion In This Visually Stunning Short Film - - What Not To Wear: The Hats, Scarves In History -
-
Feb 22, 11:38 am
-
-
-{% endexample %} - -### Card with image -{% example html columns=1 %} -
- Card image cap -
-
Card title that wraps to a new line
-

This is a longer card with supporting text below as a natural lead-in to - additional content. This content is a little bit longer.

-
Feb 28, 10:54 am
-
-
+{% example html columns=2 %} +{% include cards/card-tabs.html count=4 %} {% endexample %} -### Quote card - -{% example html columns=1 %} -
- -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

-
- - Someone famous in Source Title - -
- -
-{% endexample %} - -### Another Card - -{% example html columns=3 %} -
-
-
-
-
Card title
-

This card has supporting text below as a natural lead-in to additional - content.

-

- Last updated 3 mins ago -

-
-
-
-
-
-
-
Card title
-

This card has supporting text below as a natural lead-in to additional - content.

-

- Last updated 3 mins ago -

-
-
-
-
-{% endexample %} - -### Image card - -{% example html columns=1 %} -
- Card image -
-{% endexample %} - -### Card with options -{% example html columns=1 %} - {% include cards/card.html title="This is a standard card" show-footer=true %} -{% endexample %} - -### Card with fullscreen -{% example html columns=1 %} - {% include cards/card.html title="With additional fullscreen button" show-fullscreen=true %} -{% endexample %} - -### Card with search -{% example html columns=1 %} - {% include cards/card.html title="Card with search form" show-form=true %} -{% endexample %} - -### Card with search -{% example html columns=3 %} -
-
- {% include cards/card.html title="Card with alert" alert="Adding action was successful" %} -
-
- {% include cards/card.html title="Card with alert" alert="Adding action failed" alert-type="danger" %} -
-
-{% endexample %} - - diff --git a/pages/_includes/cards/blog-single.html b/pages/_includes/cards/blog-single.html index a30074a87bff9fdd60ace3368b00e7d0fd069aee..1fa8bbee97cf800551909c02f7631256ea3179e2 100644 --- a/pages/_includes/cards/blog-single.html +++ b/pages/_includes/cards/blog-single.html @@ -1,4 +1,5 @@ -{% assign article = include.article | default: site.data.articles[0] %} +{% assign article-id = include.article-id | default: 2 %} +{% assign article = include.article | default: site.data.articles[article-id] %} {% assign type = include.type | default: 'none' %} {% assign author = site.data.people[article.author] %} {% assign liked = include.liked | default: false %} @@ -6,7 +7,7 @@ {% assign avatar = article.author %} {% capture card-content %} -

{{ article.title }}

+

{{ article.title }}

{{ article.description | truncate: truncate }}
diff --git a/scss/ui/_breadcrumbs.scss b/scss/ui/_breadcrumbs.scss index e7cbb32254b6f147dca3d48417918a1817523984..4260b436137abe3c4600b34eb76c41d931e55562 100644 --- a/scss/ui/_breadcrumbs.scss +++ b/scss/ui/_breadcrumbs.scss @@ -25,4 +25,8 @@ a { color: $text-muted; } + + .breadcrumb-item.active { + color: $body-color; + } } diff --git a/scss/ui/_cards.scss b/scss/ui/_cards.scss index 4ad672a649cea55a3889d96a33cffbebcb416ba4..12375da31eea645b491db5df0317cd365d43fed8 100644 --- a/scss/ui/_cards.scss +++ b/scss/ui/_cards.scss @@ -78,7 +78,6 @@ top: -5px; right: 5px; left: 5px; - z-index: -1; height: 5px; content: ""; background: $card-bg; diff --git a/scss/ui/_typo.scss b/scss/ui/_typo.scss index 5d191a585b95d851c55da496d6441fc86ea4719e..52d00a5e1f74eb59ff03eac3364a589b82053c63 100644 --- a/scss/ui/_typo.scss +++ b/scss/ui/_typo.scss @@ -125,8 +125,10 @@ Markdown margin-bottom: 0; } - h1, h2, h3, h4, h5, h6 { - margin-top: 2rem; + > { + h1, h2, h3, h4, h5, h6 { + margin-top: 2rem; + } } table {