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 %}
+
+
+
+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
+
+
+
+ ID
+ Item Name
+ Item Price
+
+
+
+```
+{% endraw %}
+
+
+
+
+ ID
+ Item Name
+ Item 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
+
+
+
+ ID
+ Item Name
+ Item Price
+
+
+
+```
+{% endraw %}
+
+
+
+
+ ID
+ Item Name
+ Item 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