From 641a36405f4c396af0b29bf4c647b7ae9ecc880a Mon Sep 17 00:00:00 2001 From: George <31376482+george-gca@users.noreply.github.com> Date: Mon, 1 May 2023 00:10:30 -0300 Subject: [PATCH] Added support for Bootstrap table (#1283) Added support for [Bootstrap Table](https://bootstrap-table.com/). Haven't checked the impact on website loading, but I believe [this kind of table](https://examples.bootstrap-table.com/#welcomes/from-data.html) is way more useful for blog posts and projects pages. --- _includes/scripts/misc.html | 6 ++ _posts/2023-03-21-tables.md | 103 +++++++++++++++++++++++++++++ _sass/_base.scss | 57 ++++++++++++++-- _sass/_themes.scss | 4 +- assets/js/common.js | 6 +- assets/js/no_defer.js | 22 +++++++ assets/js/theme.js | 13 +++- assets/json/table_data.json | 128 ++++++++++++++++++++++++++++++++++++ 8 files changed, 330 insertions(+), 9 deletions(-) create mode 100644 _posts/2023-03-21-tables.md create mode 100644 assets/js/no_defer.js create mode 100644 assets/json/table_data.json diff --git a/_includes/scripts/misc.html b/_includes/scripts/misc.html index 411b51d..305c062 100644 --- a/_includes/scripts/misc.html +++ b/_includes/scripts/misc.html @@ -4,6 +4,7 @@ $(function () {$('[data-toggle="tooltip"]').tooltip()}) {%- endif %} + {%- if site.enable_medium_zoom %} @@ -15,6 +16,11 @@ {% endif %} + + + + + diff --git a/_posts/2023-03-21-tables.md b/_posts/2023-03-21-tables.md new file mode 100644 index 0000000..cd56f71 --- /dev/null +++ b/_posts/2023-03-21-tables.md @@ -0,0 +1,103 @@ +--- +layout: post +title: displaying beatiful tables with Bootstrap Tables +date: 2023-03-20 14:37:00-0400 +description: an example of how to use Bootstrap Tables +categories: sample-posts +giscus_comments: true +related_posts: true +datatable: true +--- + +Using markdown to display tables is easy. Just use the following syntax: + +```markdown +| Left aligned | Center aligned | Right aligned | +| :----------- | :------------: | ------------: | +| Left 1 | center 1 | right 1 | +| Left 2 | center 2 | right 2 | +| Left 3 | center 3 | right 3 | +``` + +That will generate: + +| Left aligned | Center aligned | Right aligned | +| :----------- | :------------: | ------------: | +| Left 1 | center 1 | right 1 | +| Left 2 | center 2 | right 2 | +| Left 3 | center 3 | right 3 | + +

+ +It is also possible to use HTML to display tables. For example, the following HTML code will display a table with [Bootstrap Table](https://bootstrap-table.com/), loaded from a JSON file: + +{% raw %} +```html + + + + + + + + +
IDItem NameItem Price
+``` +{% endraw %} + + + + + + + + + +
IDItem NameItem Price
+ +

+ +By using [Bootstrap Table](https://bootstrap-table.com/) it is possible to create pretty complex tables, with pagination, search, and more. For example, the following HTML code will display a table, loaded from a JSON file, with pagination, search, checkboxes, and header/content alignment. For more information, check the [documentation](https://examples.bootstrap-table.com/index.html). + +{% raw %} +```html + + + + + + + + + +
IDItem NameItem Price
+``` +{% endraw %} + + + + + + + + + + +
IDItem NameItem Price
diff --git a/_sass/_base.scss b/_sass/_base.scss index 8c6f08c..5455dbe 100644 --- a/_sass/_base.scss +++ b/_sass/_base.scss @@ -24,7 +24,6 @@ hr { } table { - td, th { color: var(--global-text-color); @@ -849,8 +848,8 @@ progress::-moz-progress-bar { font-size: medium; opacity: 0; position: absolute; - right: .15rem; - top: .15rem; + right: .5rem; + top: .5rem; } &:active .copy, @@ -861,6 +860,55 @@ progress::-moz-progress-bar { } } +.btn-group.dropdown { + .btn { + box-shadow: none; + -webkit-box-shadow: none; + } + + .btn-secondary.dropdown-toggle { + border: 1px solid var(--global-divider-color); + + .page-size { + color: inherit; + } + + &:not(.active) { + background-color: var(--global-bg-color) !important; + color: var(--global-text-color); + } + + &:hover { + background-color: var(--global-hover-color) !important; + color: var(--global-hover-text-color) !important; + } + } + + .dropdown-menu { + background-color: var(--global-bg-color); + } + + .dropdown-item { + background-color: var(--global-bg-color); + color: var(--global-text-color); + + &:hover { + color: var(--global-hover-color); + } + } + + .dropdown-item.active, .dropdown-item:active { + background-color: var(--global-hover-color); + color: var(--global-hover-text-color) !important; + + &:hover { + color: var(--global-hover-text-color); + } + } +} + +// Table of Contents + nav[data-toggle="toc"] { top: 5rem; @@ -898,4 +946,5 @@ nav[data-toggle="toc"] { height: 0; top: 0; } -} \ No newline at end of file +} + diff --git a/_sass/_themes.scss b/_sass/_themes.scss index ddab07f..5370a8e 100644 --- a/_sass/_themes.scss +++ b/_sass/_themes.scss @@ -1,7 +1,7 @@ /******************************************************************************* * Themes ******************************************************************************/ - + :root { --global-bg-color: #{$white-color}; --global-code-bg-color: #{$code-bg-color-light}; @@ -9,6 +9,7 @@ --global-text-color-light: #{$grey-color}; --global-theme-color: #{$purple-color}; --global-hover-color: #{$purple-color}; + --global-hover-text-color: #{$white-color}; --global-footer-bg-color: #{$grey-color-dark}; --global-footer-text-color: #{$grey-color-light}; --global-footer-link-color: #{$white-color}; @@ -40,6 +41,7 @@ html[data-theme='dark'] { --global-text-color-light: #{$grey-color-light}; --global-theme-color: #{$cyan-color}; --global-hover-color: #{$cyan-color}; + --global-hover-text-color: #{$white-color}; --global-footer-bg-color: #{$grey-color-light}; --global-footer-text-color: #{$grey-color-dark}; --global-footer-link-color: #{$black-color}; diff --git a/assets/js/common.js b/assets/js/common.js index 0011963..c6d60d4 100644 --- a/assets/js/common.js +++ b/assets/js/common.js @@ -1,3 +1,4 @@ +// add toggle functionality to abstract and bibtex buttons $(document).ready(function() { $('a.abstract').click(function() { $(this).parent().parent().find(".abstract.hidden").toggleClass('open'); @@ -11,7 +12,7 @@ $(document).ready(function() { }); // bootstrap-toc -$(function () { +$(document).ready(function () { if($('#toc-sidebar').length){ var navSelector = "#toc-sidebar"; var $myNav = $(navSelector); @@ -20,4 +21,5 @@ $(function () { target: navSelector, }); } -}); \ No newline at end of file +}); + diff --git a/assets/js/no_defer.js b/assets/js/no_defer.js new file mode 100644 index 0000000..95e8b2e --- /dev/null +++ b/assets/js/no_defer.js @@ -0,0 +1,22 @@ +// add bootstrap classes to tables +$(document).ready(function() { + $('table').each(function() { + // only select tables that are not inside an element with "news" (about page) or "card" (cv page) class + if($(this).parents('[class*="news"]').length==0 && + $(this).parents('[class*="card"]').length==0 && + $(this).parents('code').length == 0) { + // make table use bootstrap-table + $(this).attr('data-toggle','table'); + // add some classes to make the table look better + // $(this).addClass('table-sm'); + $(this).addClass('table-hover'); + + if (document.documentElement.getAttribute("data-theme") == "dark") { + $(this).addClass('table-dark'); + } else { + $(this).removeClass('table-dark'); + } + } + }) +}); + diff --git a/assets/js/theme.js b/assets/js/theme.js index 8cd5151..d247e4a 100644 --- a/assets/js/theme.js +++ b/assets/js/theme.js @@ -16,8 +16,17 @@ let setTheme = (theme) => { if (theme) { document.documentElement.setAttribute("data-theme", theme); - } - else { + + // Add class to tables. + let tables = document.getElementsByTagName('table'); + for(let i = 0; i < tables.length; i++) { + if (theme == "dark") { + tables[i].classList.add('table-dark'); + } else { + tables[i].classList.remove('table-dark'); + } + } + } else { document.documentElement.removeAttribute("data-theme"); } localStorage.setItem("theme", theme); diff --git a/assets/json/table_data.json b/assets/json/table_data.json new file mode 100644 index 0000000..29369e8 --- /dev/null +++ b/assets/json/table_data.json @@ -0,0 +1,128 @@ +[ + { + "id": 0, + "name": "Item 0", + "price": "$0", + "amount": 3 + }, + { + "id": 1, + "name": "Item 1", + "price": "$1", + "amount": 4 + }, + { + "id": 2, + "name": "Item 2", + "price": "$2", + "amount": 8 + }, + { + "id": 3, + "name": "Item 3", + "price": "$3", + "amount": 2 + }, + { + "id": 4, + "name": "Item 4", + "price": "$4", + "amount": 90 + }, + { + "id": 5, + "name": "Item 5", + "price": "$5", + "amount": 2 + }, + { + "id": 6, + "name": "Item 6", + "price": "$6", + "amount": 3 + }, + { + "id": 7, + "name": "Item 7", + "price": "$7", + "amount": 7 + }, + { + "id": 8, + "name": "Item 8", + "price": "$8", + "amount": 39 + }, + { + "id": 9, + "name": "Item 9", + "price": "$9", + "amount": 78 + }, + { + "id": 10, + "name": "Item 10", + "price": "$10", + "amount": 30 + }, + { + "id": 11, + "name": "Item 11", + "price": "$11", + "amount": 32 + }, + { + "id": 12, + "name": "Item 12", + "price": "$12", + "amount": 12 + }, + { + "id": 13, + "name": "Item 13", + "price": "$13", + "amount": 76 + }, + { + "id": 14, + "name": "Item 14", + "price": "$14", + "amount": 10 + }, + { + "id": 15, + "name": "Item 15", + "price": "$15", + "amount": 9 + }, + { + "id": 16, + "name": "Item 16", + "price": "$16", + "amount": 8 + }, + { + "id": 17, + "name": "Item 17", + "price": "$17", + "amount": 1 + }, + { + "id": 18, + "name": "Item 18", + "price": "$18", + "amount": 99 + }, + { + "id": 19, + "name": "Item 19", + "price": "$19", + "amount": 100 + }, + { + "id": 20, + "name": "Item 20", + "price": "$20", + "amount": 109 + } +] \ No newline at end of file