From 9a48aeef0ab3d0833f106ca363e0090ab743a133 Mon Sep 17 00:00:00 2001 From: chomik Date: Tue, 30 Apr 2019 13:24:59 +0200 Subject: [PATCH] alert fixes, carousel --- _config.yml | 22 +-- pages/_data/menu.yml | 50 +------ pages/_docs/alerts.md | 29 ++-- pages/_docs/cards.md | 84 ++++++++++++ pages/_docs/carousel.md | 2 +- pages/_includes/cards/blog-single.html | 34 +++++ pages/_includes/icons/x-octagon.svg | 1 + pages/_includes/layout/sidenav-content.html | 142 ++------------------ pages/_layouts/docs.html | 4 +- pages/changelog.html | 4 +- scss/tabler.scss | 1 - scss/ui/_tags.scss | 99 -------------- 12 files changed, 171 insertions(+), 301 deletions(-) create mode 100644 pages/_docs/cards.md create mode 100644 pages/_includes/cards/blog-single.html create mode 100644 pages/_includes/icons/x-octagon.svg delete mode 100644 scss/ui/_tags.scss diff --git a/_config.yml b/_config.yml index e0e577de8..24ea9d7fa 100644 --- a/_config.yml +++ b/_config.yml @@ -98,10 +98,14 @@ colors: name: Dark variants: - success: danger - info: danger - warning: danger - danger: danger + - name: success + icon: check + - name: info + icon: info + - name: warning + icon: alert-triangle + - name: danger + icon: x-octagon socials: [facebook, twitter, google, youtube, vimeo, dribbble, github, instagram, pinterest, vk, rss, flickr, bitbucket] @@ -110,9 +114,11 @@ months_long: ['January', 'Febuary', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'S docs-menu: -- title: Getting started - pages: [index] -- title: Components - pages: [alerts, avatars, badges, buttons, carousel, spinners, steps, tabs, toasts, tooltips, typography] + intro: + title: Getting started + pages: [index] + components: + title: Components + pages: [alerts, avatars, badges, buttons, cards, carousel, spinners, steps, tabs, toasts, tooltips, typography] diff --git a/pages/_data/menu.yml b/pages/_data/menu.yml index 29313c53f..c54a1d5f2 100644 --- a/pages/_data/menu.yml +++ b/pages/_data/menu.yml @@ -6,55 +6,7 @@ apps: docs: title: Documentation icon: file-text - children: - - title: Alerts - url: '#' - - title: Avatars - url: '#' - - title: Badges - url: '#' - - title: Breadcrumb - url: '#' - - title: Buttons - url: '#' - - title: Button group - url: '#' - - title: Cards - url: '#' - - title: Charts - url: '#' - - title: Dropdowns - url: '#' - - title: Forms - url: '#' - - title: Icons - url: '#' - - title: Lists - url: '#' - - title: Modal - url: '#' - - title: Navs - url: '#' - - title: Navbar - url: '#' - - title: Pagination - url: '#' - - title: Popovers - url: '#' - - title: Progress - url: '#' - - title: Spinners - url: '#' - - title: Tables - url: '#' - - title: Toasts - url: '#' - - title: Tooltips - url: '#' - - title: Typography - url: '#' - - title: Utilities - url: '#' + docs: components changelog: url: changelog.html active: true diff --git a/pages/_docs/alerts.md b/pages/_docs/alerts.md index 98086da32..6af70bfd7 100644 --- a/pages/_docs/alerts.md +++ b/pages/_docs/alerts.md @@ -8,10 +8,10 @@ Bootstrap provides an easy way to create predefined alert messages. {% example html %} {% for variant in site.variants %} - {% capture text_with_variant %} - This is a {{ variant }} alert — check it out! + {% capture variant-text %} + This is a {{ variant.name }} alert — check it out! {% endcapture %} - {% include ui/alert.html type=variant text=text_with_variant %} + {% include ui/alert.html type=variant.name text=variant-text %} {% endfor %} {% endexample %} @@ -22,10 +22,10 @@ Add the `alert-link` class to any links inside the alert box to create "matching {% example html %} {% for variant in site.variants %} - {% capture text_with_variant %} - This is a {{ variant }} alert — check it out! + {% capture variant-text %} + This is a {{ variant.name }} alert — check it out! {% endcapture %} - {% include ui/alert.html type=variant text=text_with_variant %} + {% include ui/alert.html type=variant.name text=variant-text %} {% endfor %} {% endexample %} @@ -34,9 +34,20 @@ Add the `alert-link` class to any links inside the alert box to create "matching {% example html %} {% for variant in site.variants %} - {% capture text_with_variant %} - This is a {{ variant }} alert — check it out! + {% capture variant-text %} + This is a {{ variant.name }} alert — check it out! {% endcapture %} - {% include ui/alert.html type=variant text=text_with_variant close=true %} + {% include ui/alert.html type=variant.name text=variant-text close=true %} +{% endfor %} +{% endexample %} + +## Alerts with icons + +{% example html %} +{% for variant in site.variants %} + {% capture variant-text %} + This is a {{ variant.name }} alert — check it out! + {% endcapture %} + {% include ui/alert.html type=variant.name icon=variant.icon text=variant-text close=true %} {% endfor %} {% endexample %} diff --git a/pages/_docs/cards.md b/pages/_docs/cards.md new file mode 100644 index 000000000..0c11711ba --- /dev/null +++ b/pages/_docs/cards.md @@ -0,0 +1,84 @@ +--- +title: Cards +description: A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. +--- + +The `.card` element is simply a container with a shadow, a border, a radius, and some padding. Built with flexbox, they offer easy alignment and mix well with other Bootstrap components. + +### Default card + +{% example html columns=1 %} +{% include cards/card.html hide-options=true %} +{% endexample %} + +### Advanced card + +{% example html columns=1 %} +{% include cards/card.html show-buttons=true show-footer=true %} +{% 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. + +{% example html columns=1 %} +{% include cards/blog-single.html type="image" %} +{% endexample %} + +### Row deck + +If you want to create a couple of posts next to each other, add the `.row-deck` class to `.row`—then they will all have the same height. + +{% example html columns=2 %} +
+
+
+
Short content
+
+
+
+
+
Extra long content of card. Lorem ipsum dolor sit amet, consetetur sadipscing elitr
+
+
+
+
+
Short content
+
+
+
+{% endexample %} + +### Post card with aside image + +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=2 %} +{% include cards/blog-single.html type="aside" liked=1 %} +{% endexample %} + +### Color variations + +{% example html columns=2 %} +
+
+ {% include cards/card.html title="Card status" hide-options=true status="purple" %} +
+
+ {% include cards/card.html title="Card status on left side" hide-options=true status-left="blue" %} +
+
+{% endexample %} + + +### Card with switch + +{% example html columns=1 %} +{% include cards/card.html title="Card with switch" show-switch=true %} +{% endexample %} + +### Card with loader + +{% example html columns=1 %} +{% include cards/card.html title="Card with loader" hide-options=true show-loader=true %} +{% endexample %} diff --git a/pages/_docs/carousel.md b/pages/_docs/carousel.md index bf33d2853..6ae42b690 100644 --- a/pages/_docs/carousel.md +++ b/pages/_docs/carousel.md @@ -4,6 +4,6 @@ title: Carousel The Carousel is a slideshow for cycling through elements. -{% example html %} +{% example html columns=1 %} {% include ui/carousel.html show-indicators=true show-controls=true id="carousel-sample" %} {% endexample %} diff --git a/pages/_includes/cards/blog-single.html b/pages/_includes/cards/blog-single.html new file mode 100644 index 000000000..e58fb130a --- /dev/null +++ b/pages/_includes/cards/blog-single.html @@ -0,0 +1,34 @@ +{% assign article = include.article | default: site.data.articles[0] %} +{% assign type = include.type | default: 'none' %} +{% assign author = site.data.users[article.author] %} +{% assign liked = include.liked | default: false %} +{% assign truncate = include.truncate | default: 100 %} + +
+ {% if type == 'image' %} + {{ article.title | escape}} + {% endif %} + + {% if type == 'aside' %} + + {% endif %} + + + +
+

{{ article.title }}

+ +
{{ article.description | truncate: truncate }}
+ +
+
+
+ {{ author.name }} {{ author.surname }} + 3 days ago +
+
+ +
+
+
+
diff --git a/pages/_includes/icons/x-octagon.svg b/pages/_includes/icons/x-octagon.svg new file mode 100644 index 000000000..85431985d --- /dev/null +++ b/pages/_includes/icons/x-octagon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pages/_includes/layout/sidenav-content.html b/pages/_includes/layout/sidenav-content.html index 09c33adc8..581a7ce5f 100644 --- a/pages/_includes/layout/sidenav-content.html +++ b/pages/_includes/layout/sidenav-content.html @@ -13,146 +13,28 @@ {% for item in site.data.menu %} {% assign icon = item[1].icon %}
  • - - {% if item[1].children %} - \ No newline at end of file + diff --git a/scss/tabler.scss b/scss/tabler.scss index 8b14247d0..3a9861083 100644 --- a/scss/tabler.scss +++ b/scss/tabler.scss @@ -29,7 +29,6 @@ @import "ui/buttons"; @import "ui/cards"; @import "ui/avatars"; -@import "ui/tags"; @import "ui/inputs"; @import "ui/inputs.custom"; @import "ui/media"; diff --git a/scss/ui/_tags.scss b/scss/ui/_tags.scss deleted file mode 100644 index 2354b23f6..000000000 --- a/scss/ui/_tags.scss +++ /dev/null @@ -1,99 +0,0 @@ - -.tag { - display: inline-flex; - padding: .25em .75em; - font-size: px2rem(12px); - font-weight: 400; - line-height: 1.5; - color: $text-muted; - cursor: default; - user-select: none; - background-color: $body-bg; - border-radius: 3px; - - @at-root a#{&} { - text-decoration: none; - cursor: pointer; - transition: .3s color, .3s background; - - &:hover { - color: inherit; - background-color: rgba($text-muted, .2); - } - } - -} - -.tag-addon { - display: inline-block; - min-width: 1.5rem; - padding: 0 .5rem; - margin: 0 -.5rem 0 .5rem; - color: inherit; - text-align: center; - text-decoration: none; - background: rgba(#000, .06); - - &:last-child { - border-top-right-radius: 3px; - border-bottom-right-radius: 3px; - } - - i { - margin: 0 -.25rem; - vertical-align: middle; - } - - @at-root a#{&} { - text-decoration: none; - cursor: pointer; - transition: .3s color, .3s background; - - &:hover { - color: inherit; - background: rgba(#000, .16); - } - } -} - -.tag-avatar { - width: 1.5rem; - height: 1.5rem; - margin: 0 .5rem 0 -.5rem; - border-radius: 3px 0 0 3px; -} - -@each $vendor, $color in $colors { - .tag-#{$vendor} { - color: #fff; - background-color: $color; - } -} - -@each $vendor, $color in $theme-colors { - .tag-#{$vendor} { - color: #fff; - background-color: $color; - } -} - -.tag-rounded { - border-radius: 50px; - - .tag-avatar { - border-radius: 50px; - } -} - -.tag-list { - margin-bottom: -.5rem; - font-size: 0; - - > .tag { - margin-bottom: .5rem; - - &:not(:last-child) { - margin-right: .5rem; - } - } -}