Rename CSS classes, add subtags, style links, implement hyperlink option

This commit is contained in:
Tim Van Baak 2021-02-11 00:56:12 -08:00
parent 8dda38ef52
commit c43053f345
3 changed files with 60 additions and 41 deletions

View File

@ -130,9 +130,6 @@ class DocumentTab:
self.tags: List[DocumentTag] = tags
self.options: TabOptions = options
def __iter__(self):
return self.tags.__iter__()
class Document:
"""

View File

@ -11,12 +11,12 @@
<style>
/* Page structure */
body {
background-color: #000000;
background-color: #000;
margin: 0px;
}
div#wrapper {
background-color: #303030;
color: #ffffff;
background-color: #333;
color: #fff;
max-width: 700px;
margin-left: auto;
margin-right: auto;
@ -27,22 +27,22 @@
div.tab {
display: inline-block;
padding: 5px;
background-color: #303030;
background-color: #333;
border-style: solid;
border-color: #808080;
border-color: #888;
border-width: 2px 2px 0 2px;
border-radius: 10px 10px 0px 0px;
margin: 0 0 0 4px;
font-family: monospace;
font-weight: bold;
color: #808080;
color: #888;
cursor: pointer;
user-select: none
}
div.tab-selected {
background-color: #303030;
border-color: #b0b0b0;
color: #b0b0b0;
div.tab-down {
background-color: #333;
border-color: #bbb;
color: #bbb;
position: relative;
top: 2px;
}
@ -50,20 +50,20 @@
float: right;
margin: 0 4px 0 0;
}
div.tab-content {
div.tab-page {
width: 100%;
border-top: 2px solid #b0b0b0;
border-top: 2px solid #bbb;
display: none;
}
div.tab-selected-content {
div.tab-page-selected {
display: block;
-padding: 5px;
}
/* Content tables */
table.content-table {
table.page-table {
width: 100%;
color: #ffffff;
color: #fff;
font-family: serif;
white-space: pre-wrap;
border-collapse: collapse;
@ -76,23 +76,29 @@
-webkit-hyphens: auto;
hyphens: auto;
}
table.content-table tr {
border-bottom: 1px solid #808080;
table.page-table tr {
border-bottom: 1px solid #888;
}
table.content-table td {
table.page-table tr.hide-tag-name td:nth-child(1) {
display: none;
}
table.page-table td {
padding: 5px;
}
table.content-table td:nth-child(1) {
table.page-table td:nth-child(1) {
width: 150px;
font-weight: bold;
vertical-align:top
}
table.content-table tr.hide-tag-name td:nth-child(1) {
display: none;
}
table.content-table td:nth-child(2) {
table.page-table td:nth-child(2) {
white-space: pre-wrap;
}
table.page-table td:nth-child(2) a {
color: #8af;
}
table.page-table td:nth-child(2) a:visited {
color: #88f;
}
</style>
{% block page_scripts %}{% endblock %}
</head>

View File

@ -10,14 +10,14 @@ function selectTab(name) {
if (tab)
{
// Unselect all tabs and content
Array.from(document.getElementsByClassName("tab"))
.forEach(e => e.classList.remove("tab-selected"));
Array.from(document.getElementsByClassName("tab-content"))
.forEach(e => e.classList.remove("tab-selected-content"));
.forEach(e => e.classList.remove("tab-down"));
Array.from(document.getElementsByClassName("tab-page"))
.forEach(e => e.classList.remove("tab-page-selected"));
// Select the new tab and content
tab.classList.add("tab-selected");
let content = document.getElementById(name + "-content");
content.classList.add("tab-selected-content");
tab.classList.add("tab-down");
let content = document.getElementById(name + "-page");
content.classList.add("tab-page-selected");
}
}
@ -30,24 +30,40 @@ window.onload = function () {
</script>
{% endblock page_scripts %}
{% macro make_tab(tab, selected) -%}
<div id="{{ tab.name }}" class="tab{% if selected %} tab-selected{% endif %}" onclick="javascript:selectTab('{{ tab.name }}')">{{ tab.name }}</div>
{% macro make_content_tab(tab, selected) -%}
<div id="{{ tab.name }}" class="tab tab-content{% if selected %} tab-down{% endif %}" onclick="javascript:selectTab('{{ tab.name }}')">{{ tab.name }}</div>
{%- endmacro %}
{% macro make_tab_content(tab, selected) %}
<div id="{{ tab.name }}-content" class="tab-content{% if selected %} tab-selected-content{% endif %}">
<table id="{{ tab.name }}-content-table" class="content-table">
{% for tag in tab %}
{% macro make_tab_page(tab, selected) %}
<div id="{{ tab.name }}-page" class="tab-page{% if selected %} tab-page-selected{% endif %}">
<table id="{{ tab.name }}-page-table" class="page-table">
{% for tag in tab.tags %}
<tr {% if tab.options.hide_names %}class="hide-tag-name"{% endif %}>
<td>{{ tag.name }}</td>
<td>{{ tag.value }}</td>
<td>{{ make_tag_value(tag) }}</td>
</tr>
{% for subtag in tag.subtags %}
<tr {% if tab.options.hide_names %}class="hide-tag-name"{% endif %}>
<td>{% if loop.last %}&#9492;{% else %}&#9500;{% endif %} {{ subtag.name }}</td>
<td>{{ make_tag_value(subtag) }}</td>
</tr>
{% endfor %}
{% endfor %}
</table>
</div>
{% endmacro %}
{# TODO: tag.interlink and tag.private support #}
{% macro make_tag_value(tag) -%}
{%- if tag.options.hyperlink -%}
<a href="{{ tag.value }}">{{ tag.value }}</a>
{%- else -%}
{{ tag.value }}
{%- endif -%}
{%- endmacro %}
{# TODO: tab.priority and tab.private support #}
{% block page_content %}
{% for tab in document %}{{ make_tab(tab, loop.first) }}{% endfor %}<a href="/index/"><div id="index" class="tab tab-right">index</div></a>
{% for tab in document %}{{ make_tab_content(tab, loop.first) }}{% endfor %}
{% for tab in document %}{{ make_content_tab(tab, loop.first) }}{% endfor %}<a href="/index/"><div id="index" class="tab tab-right">index</div></a>
{% for tab in document %}{{ make_tab_page(tab, loop.first) }}{% endfor %}
{% endblock page_content %}