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

redstring/parser.py

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

redstring/templates/base.jinja

@@ -11,12 +11,12 @@
 <style>
 	/* Page structure */
 	body {
-		background-color: #000000;
+		background-color: #000;
 		margin: 0px;
 	}
 	div#wrapper {
-		background-color: #303030;
+		background-color: #333;
-		color: #ffffff;
+		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 {
+	div.tab-down {
-		background-color: #303030;
+		background-color: #333;
-		border-color: #b0b0b0;
+		border-color: #bbb;
-		color: #b0b0b0;
+		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 {
+	table.page-table tr {
-		border-bottom: 1px solid #808080;
+		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) {
+	table.page-table td:nth-child(2) {
-		display: none;
-	}
-	table.content-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>

redstring/templates/doc.jinja

@@ -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");
+		tab.classList.add("tab-down");
-		let content = document.getElementById(name + "-content");
+		let content = document.getElementById(name + "-page");
-		content.classList.add("tab-selected-content");
+		content.classList.add("tab-page-selected");
 	}
 }
 
@@ -30,24 +30,40 @@ window.onload = function () {
 </script>
 {% endblock page_scripts %}
 
-{% macro make_tab(tab, selected) -%}
+{% macro make_content_tab(tab, selected) -%}
-<div id="{{ tab.name }}" class="tab{% if selected %} tab-selected{% endif %}" onclick="javascript:selectTab('{{ tab.name }}')">{{ tab.name }}</div>
+<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) %}
+{% macro make_tab_page(tab, selected) %}
-<div id="{{ tab.name }}-content" class="tab-content{% if selected %} tab-selected-content{% endif %}">
+<div id="{{ tab.name }}-page" class="tab-page{% if selected %} tab-page-selected{% endif %}">
-<table id="{{ tab.name }}-content-table" class="content-table">
+<table id="{{ tab.name }}-page-table" class="page-table">
-{% for tag in tab %}
+{% 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_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_content(tab, loop.first) }}{% endfor %}
+{% for tab in document %}{{ make_tab_page(tab, loop.first) }}{% endfor %}
 {% endblock page_content %}