Use JQuery to add .table to every table element in order to use Bootstrap table style. Add doccumentation about this change
This commit is contained in:
parent
ca68c65f85
commit
e0ff0f5cdc
35
Vimwiki.wiki
35
Vimwiki.wiki
|
@ -1,10 +1,29 @@
|
|||
= Vimwiki =
|
||||
|
||||
== TODO ==
|
||||
* [ ] Commit to a repository
|
||||
* [X] Commit to a repository
|
||||
* [ ] Setup remote to host
|
||||
* [ ] Setup remote to automatically `:VimwikiAll2HTML` after it's been pushed to
|
||||
|
||||
== Table tweaks ==
|
||||
|
||||
Tables without any styles are gross, so let's use the styles from Bootstrap. Problem is that Vimwiki doesn't provide a way to add a class to a table element, so we'll do it with JQuery:
|
||||
|
||||
{{{class="prettyprint"
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$("table").addClass("table table-condensed table-hover");
|
||||
});
|
||||
</script>
|
||||
}}}
|
||||
|
||||
This adds `.table`, `.table-condensed`, and `.table-hover` classes to every table element in the whole document. Don't see why it should be any other way for the moment.
|
||||
|
||||
=== References ===
|
||||
|
||||
http://stackoverflow.com/a/39897883
|
||||
http://www.w3schools.com/jquery/jquery_syntax.asp
|
||||
|
||||
== HTML Checkboxes ==
|
||||
|
||||
By default, there is no difference between how a non-checkbox list item, unchecked list item, and a checked list item are displayed when exported to HTML.
|
||||
|
@ -13,13 +32,13 @@ There are 5 states of a checkbox, 0-4, and they each represent a different level
|
|||
|
||||
Checkbox states:
|
||||
|
||||
| # | % Complete | li class | Unicode character | Escape sequence | HTML code |
|
||||
|---|------------|----------|-------------------|-----------------|------------|
|
||||
| 0 | 0% | `done0` | ◯ | `\u25EF` | `◯` |
|
||||
| 1 | 1-33% | `done1` | ◔ | `\u25D4` | `◔` |
|
||||
| 2 | 34-66% | `done2` | ◑ | `\u25D1` | `◑` |
|
||||
| 3 | 67-99% | `done3` | ◕ | `\u25D5` | `◕` |
|
||||
| 4 | 100% | `done4` | ✔ | `\u2714` | `✔` |
|
||||
| State # | % Complete | li class | Unicode character | Escape sequence | HTML code |
|
||||
|---------|------------|----------|-------------------|-----------------|------------|
|
||||
| 0 | 0% | `done0` | ◯ | `\u25EF` | `◯` |
|
||||
| 1 | 1-33% | `done1` | ◔ | `\u25D4` | `◔` |
|
||||
| 2 | 34-66% | `done2` | ◑ | `\u25D1` | `◑` |
|
||||
| 3 | 67-99% | `done3` | ◕ | `\u25D5` | `◕` |
|
||||
| 4 | 100% | `done4` | ✔ | `\u2714` | `✔` |
|
||||
|
||||
Now, in order to use these in our HTML, we just have to write a style for `ul li.doneX:before` in our header like so:
|
||||
|
||||
|
|
|
@ -11,6 +11,8 @@
|
|||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
|
||||
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
|
||||
|
||||
<!--bootstrap stuff start-->
|
||||
<!-- Latest compiled and minified CSS -->
|
||||
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
|
||||
|
@ -25,6 +27,13 @@
|
|||
|
||||
<!--Google Syntax Highlighting-->
|
||||
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=sons-of-obsidian"></script>
|
||||
|
||||
|
||||
<script>
|
||||
$(document).ready(function(){
|
||||
$("table").addClass("table table-condensed table-hover");
|
||||
});
|
||||
</script>
|
||||
|
||||
<!--Checkbox list tweaks-->
|
||||
<style>
|
||||
|
@ -35,6 +44,8 @@
|
|||
ul li.done4:before {content: '\2714';}
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
|
|
Loading…
Reference in New Issue