From 8de7594804287154385e285147d2bbadcb0d3113 Mon Sep 17 00:00:00 2001
From: Ralph Amissah <ralph@amissah.com>
Date: Mon, 7 Aug 2017 07:58:02 -0400
Subject: html css using grid & flex (remove tables)
---
org/meta_abstraction.org | 2 +-
org/output_xmls.org | 230 +++++++++++++++++++++++++----------------------
org/output_xmls_css.org | 136 ++++++++++++++++++++++++----
3 files changed, 246 insertions(+), 122 deletions(-)
(limited to 'org')
diff --git a/org/meta_abstraction.org b/org/meta_abstraction.org
index 63ac9ba..f7291cf 100644
--- a/org/meta_abstraction.org
+++ b/org/meta_abstraction.org
@@ -4216,7 +4216,7 @@ auto _heading_matched_(L,C,O,K,Lv,Lc,T,Me)(
#+name: abs_functions_para
#+BEGIN_SRC d
void _para_match_(L,O,K,I,B,T,C)(
- L line, // watch
+ L line,
return ref O an_object,
return ref K an_object_key,
return ref I indent,
diff --git a/org/output_xmls.org b/org/output_xmls.org
index ffbd7ed..a89cc88 100644
--- a/org/output_xmls.org
+++ b/org/output_xmls.org
@@ -51,6 +51,47 @@ import
#+END_SRC
*** misc
+**** div delimiter
+
+#+name: xhtml_format_objects
+#+BEGIN_SRC d
+string div_delimit(
+ string part,
+ return ref string previous_part
+){
+ string delimit = "";
+ string delimit_ = "";
+ if (part != previous_part) {
+ switch (part) {
+ case "head":
+ delimit_ ~= "\n<div class=\"doc_title\">\n" ;
+ break;
+ case "toc_seg":
+ delimit_ ~= "\n<div class=\"doc_toc\">\n" ;
+ break;
+ case "toc_scroll":
+ delimit_ ~= "\n<div class=\"doc_toc\">\n" ;
+ break;
+ case "bookindex_seg":
+ delimit_ ~= "\n<div class=\"doc_bookindex\">\n" ;
+ break;
+ case "bookindex_scroll":
+ delimit_ ~= "\n<div class=\"doc_bookindex\">\n" ;
+ break;
+ default:
+ delimit_ ~= "\n<div class=\"doc_" ~ part ~ "\">\n" ;
+ break;
+ }
+ if (previous_part.length > 0) {
+ delimit ~= "\n</div>";
+ }
+ previous_part = part;
+ delimit ~= delimit_;
+ }
+ // you also need to close the last div, introduce a footer?
+ return delimit;
+}
+#+END_SRC
**** special characters
#+name: xhtml_format_objects
@@ -195,21 +236,17 @@ auto site_info_button(Dm)(
string _location_3_url ="http://www.sisudoc.org";
string _location_3_lnk ="sisu";
string o;
- o = format(q"¶<!-- Site info button close -->
- <table summary="home button / home information" border="0" cellpadding="3" cellspacing="0">
- <tr><td align="left" bgcolor="#ffffff">
- <p class="tiny_left"><a href="%s" target="_top">
- %s
- </a></p>
- <p class="tiny_left"><a href="%s" target="_top">
- %s
- </a></p>
- <p class="tiny_left"><a href="%s" target="_top">
- %s
- </a></p>
- </td></tr>
- </table>
- <!-- Site info button close -->¶",
+ o = format(q"¶<div class="flex-menu-option">
+ <p class="tiny_left"><a href="%s" target="_top">
+ %s
+ </a></p>
+ <p class="tiny_left"><a href="%s" target="_top">
+ %s
+ </a></p>
+ <p class="tiny_left"><a href="%s" target="_top">
+ %s
+ </a></p>
+ </div>¶",
_location_1_url,
_location_1_lnk,
_location_2_url,
@@ -231,19 +268,19 @@ auto inline_search_form(Dm)(
string _action="http://www.sisudoc.org/cgi-bin/search.cgi";
string _db="SiSU.7a.manual";
string o;
- o = format(q"¶<!-- SiSU Search open -->
-<a name="search"></a>
-<form method="get" action="%s" target="_top">
-<font size="2">
-<input type="text" name="s1" size="24" maxlength="255" />
-<input type="hidden" name="db" value="%s" />
-<input type="hidden" name="ltd" value="1000" />
-<input type="hidden" name="off" value="0" />
-<input type="hidden" name="doc" value="live-manual" /><br />
-<input type="submit" name="search" value="search doc" />
-<input type="submit" name="search" value="search db" />
-</font></form>
-<!-- SiSU Search close -->¶",
+ o = format(q"¶<div class="flex-menu-option">
+ <a name="search"></a>
+ <form method="get" action="%s" target="_top">
+ <font size="2">
+ <input type="text" name="s1" size="24" maxlength="255" />
+ <input type="hidden" name="db" value="%s" />
+ <input type="hidden" name="ltd" value="1000" />
+ <input type="hidden" name="off" value="0" />
+ <input type="hidden" name="doc" value="live-manual" /><br />
+ <input type="submit" name="search" value="search doc" />
+ <input type="submit" name="search" value="search db" />
+ </font></form>
+ </div>¶",
_action,
_db,
);
@@ -276,34 +313,17 @@ auto html_head(Dm)(
</head>
<body lang="%s">
<a name="top" id="top"></a>
-<div class="icon-bar">
-<div class="left-bar">
-<div class="table-bar">
-<table summary="table of contents segment navigation band" id="toc" width="85%%" bgcolor="#ffffff">
-<tr><td width="20%%">
- <!-- Site info button open -->
- %s
- <!-- Site info button close -->
-</td>
-<td width="75%%" align="center">
-<table summary="segment navigation available documents types: toc,doc,pdf,concordance" border="0" cellpadding="3" cellspacing="0">
-<tr>
-<td align="center" bgcolor="#ffffff">
- <td align="center" bgcolor="#ffffff">
- <a href="../../manifest/sisu.en.html" target="_top">
- <font face="verdana, arial, georgia, tahoma, sans-serif, helvetica, times, roman" size="2">
- [ document manifest ]
- </font>
- </a>
-</td>
- <!-- SiSU Search open -->
- %s
- <!-- SiSU Search close -->
-</tr></table>
-</td>
-</table>
-</div>
-</div>%s¶",
+<div class='delimit headband'>
+ <div class="flex-menu-bar">
+ %s
+ <div class="flex-menu-option">
+ <a href="../../manifest/sisu.en.html" target="_top">
+ <font face="verdana, arial, georgia, tahoma, sans-serif, helvetica, times, roman" size="2">
+ [ document manifest ]
+ </font>
+ </a>
+ </div>
+ %s%s¶",
doc_matters.dochead_meta["title"]["full"],
(doc_matters.dochead_meta["creator"]["author"].empty) ? ""
: ", " ~ doc_matters.dochead_meta["creator"]["author"],
@@ -389,7 +409,8 @@ auto epub3_seg_head(Dm)(
#+BEGIN_SRC d
auto tail() {
string o;
- o = format(q"¶ <a name="bottom" id="bottom"></a>
+ o = format(q"¶ </div>
+ <a name="bottom" id="bottom"></a>
<a name="end" id="end"></a>
</body>
</html>¶");
@@ -597,66 +618,62 @@ auto nav_pre_next_svg(O)(
toc = "";
prev = "";
} else {
- toc = format(q"¶
- <a href="toc.html" target="_top">
- <div class="toc-button menu">
- <svg viewbox="0 0 100 100">
- <path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/>
- </svg>
- </div>
- </a>
-¶",
+ toc = format(q"¶<a href="toc.html" target="_top">
+ <div class="toc-button menu">
+ <svg viewbox="0 0 100 100">
+ <path d="M4,10h24c1.104,0,2-0.896,2-2s-0.896-2-2-2H4C2.896,6,2,6.896,2,8S2.896,10,4,10z M28,14H4c-1.104,0-2,0.896-2,2 s0.896,2,2,2h24c1.104,0,2-0.896,2-2S29.104,14,28,14z M28,22H4c-1.104,0-2,0.896-2,2s0.896,2,2,2h24c1.104,0,2-0.896,2-2 S29.104,22,28,22z"/>
+ </svg>
+ </div>
+ </a>¶",
);
}
if (obj.segname_prev == "") {
prev = "";
- } else { // previous
- prev = format(q"¶
- <a href="%s.html" target="_top">
- <div class="prev-next-button previous">
- <svg viewbox="0 0 100 100">
- <path class="arrow" d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z" transform=" translate(15,0)">
- </svg>
- </div>
- </a>
-¶",
+ } else {
+ prev = format(q"¶<a href="%s.html" target="_top">
+ <div class="prev-next-button previous">
+ <svg viewbox="0 0 100 100">
+ <path class="arrow" d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z" transform=" translate(15,0)">
+ </svg>
+ </div>
+ </a>¶",
obj.segname_prev,
);
}
- if (obj.segname_next == "") { // next
+ if (obj.segname_next == "") {
next = "";
} else {
- next = format(q"¶
- <a href="%s.html" target="_top">
- <div class="prev-next-button next">
- <svg viewbox="0 0 100 100">
- <path class="arrow" d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z "transform="translate(85,100) rotate(180) ">
- </svg>
- </div>
- </a>
-¶",
+ next = format(q"¶<a href="%s.html" target="_top">
+ <div class="prev-next-button next">
+ <svg viewbox="0 0 100 100">
+ <path class="arrow" d="M 50,0 L 60,10 L 20,50 L 60,90 L 50,100 L 0,50 Z "transform="translate(85,100) rotate(180) ">
+ </svg>
+ </div>
+ </a>¶",
obj.segname_next,
);
}
- string _toc_pre_next = format(q"¶
- <!-- <div class="icon-bar"> -->
- <div class="nav-bar">
- %s
- %s
- %s
+ string _toc_pre_next = format(q"¶ <div class="flex-menu-option">
+ <div class="nav-bar">
+ %s
+ %s
+ %s
+ </div>
</div>
</div>
-¶",
+</div>¶",
toc,
prev,
next,
);
- string _pre_next = format(q"¶
- <div class="nav-bar">
- %s
- %s
+ string _pre_next = format(q"¶ <div class="flex-menu-option">
+ <div class="nav-bar">
+ %s
+ %s
+ </div>
</div>
-¶",
+ </div>
+</div>¶",
prev,
next,
);
@@ -1306,8 +1323,11 @@ void scroll(D,I)(
string[] doc_html;
string[] doc;
string suffix = ".html";
+ string previous_part = "";
+ string delimit = "";
foreach (part; doc_matters.keys_seq.scroll) {
foreach (obj; doc_abstraction[part]) {
+ delimit = xhtml_format.div_delimit(part, previous_part);
string _txt = xhtml_format.special_characters(obj, obj.text);
switch (obj.of_part) {
case "frontmatter": assert(part == "head" || "toc_scroll");
@@ -1315,7 +1335,7 @@ void scroll(D,I)(
case "para":
switch (obj.is_a) {
case "heading":
- doc_html ~= xhtml_format.heading_scroll(obj, _txt, suffix);
+ doc_html ~= delimit ~ xhtml_format.heading_scroll(obj, _txt, suffix);
break;
case "toc":
doc_html ~= xhtml_format.para_scroll(obj, _txt, suffix);
@@ -1339,7 +1359,7 @@ void scroll(D,I)(
case "para":
switch (obj.is_a) {
case "heading":
- doc_html ~= xhtml_format.heading_scroll(obj, _txt, suffix);
+ doc_html ~= delimit ~ xhtml_format.heading_scroll(obj, _txt, suffix);
break;
case "para":
doc_html ~= xhtml_format.para_scroll(obj, _txt, suffix);
@@ -1393,7 +1413,7 @@ void scroll(D,I)(
case "para":
switch (obj.is_a) {
case "heading":
- doc_html ~= xhtml_format.heading_scroll(obj, _txt, suffix);
+ doc_html ~= delimit ~ xhtml_format.heading_scroll(obj, _txt, suffix);
break;
case "endnote": assert(part == "endnotes");
doc_html ~= xhtml_format.para_scroll(obj, _txt, suffix);
@@ -1489,11 +1509,13 @@ void seg(D,I)(
string[] doc;
string segment_filename;
string[] top_level_headings = ["","","",""];
- string _bottom_bar ="";
string previous_seg_filename = "";
string suffix = ".html";
+ string previous_part = "";
+ string delimit = "";
foreach (part; doc_matters.keys_seq.seg) {
foreach (obj; doc_abstraction[part]) {
+ delimit = xhtml_format.div_delimit(part, previous_part);
string _txt = xhtml_format.special_characters(obj, obj.text);
if (obj.is_a == "heading") {
assert(part == "head" || "toc_seg" || "body" || "endnotes" || "glossary" || "bibliography" || "bookindex_seg" || "blurb" || "tail");
@@ -1528,10 +1550,8 @@ void seg(D,I)(
case 4:
segment_filename = obj.segment_anchor_tag;
doc_html[segment_filename] ~= xhtml_format.html_head(doc_matters, "seg");
- doc_html_endnotes[previous_seg_filename] ~= _bottom_bar; // places after segment text and endnotes
auto navigation_bar = xhtml_format.nav_pre_next_svg(obj);
- doc_html[segment_filename] ~= navigation_bar.toc_pre_next;
- _bottom_bar = navigation_bar.toc_pre_next;
+ doc_html[segment_filename] ~= navigation_bar.toc_pre_next; // navigation bar
previous_seg_filename = segment_filename;
foreach (top_level_heading; top_level_headings) {
// writeln(top_level_heading);
diff --git a/org/output_xmls_css.org b/org/output_xmls_css.org
index 1adb168..574d562 100644
--- a/org/output_xmls_css.org
+++ b/org/output_xmls_css.org
@@ -47,6 +47,124 @@ template SiSUcss() {
#+name: css_shared
#+BEGIN_SRC css
+ *{
+ padding: 0px;
+ margin: 0px;
+ }
+ body {
+ height: 100vh;
+ background-color: #ffffff;
+ }
+ /* flex */
+ .flex-menu-bar {
+ display: -webkit-flex;
+ display: flex;
+ -webkit-flex-wrap: wrap;
+ -webkit-align-items: center;
+ align-items: center;
+ width: 100%;
+ background-color: #ffffff;
+ }
+ .flex-menu-option {
+ background-color: white;
+ margin: 8px;
+ }
+ .flex-list {
+ display: -webkit-flex;
+ display: flex;
+ -webkit-align-items: center;
+ display: block;
+ align-items: center;
+ width: 100%;
+ background-color: #ffffff;
+ }
+ .flex-list-item {
+ background-color: white;
+ margin: 4px;
+ }
+ /* grid */
+ .wrapper {
+ display: grid;
+ grid-template-columns: 100%;
+ grid-template-areas:
+ \"headband\"
+ \"doc_header\"
+ \"doc_title\"
+ \"doc_toc\"
+ \"doc_prefix\"
+ \"doc_intro\"
+ \"doc_body\"
+ \"doc_endnotes\"
+ \"doc_glossary\"
+ \"doc_biblio\"
+ \"doc_bookindex\"
+ \"doc_blurb\"
+ \"doc_suffix\";
+ margin: 0px;
+ padding: 0px;
+ background-color: #ffffff;
+ }
+ .delimit {
+ border-style: none;
+ border-color: white;
+ padding: 10px;
+ }
+ .headband {
+ grid-area: headband;
+ background-color: #ffffff;
+ }
+ .doc_header {
+ grid-area: doc_header;
+ }
+ .doc_title {
+ grid-area: doc_title;
+ }
+ .doc_toc {
+ grid-area: doc_toc;
+ }
+ .doc_prefix {
+ grid-area: doc_prefix;
+ }
+ .doc_intro {
+ grid-area: doc_intro;
+ }
+ .doc_body {
+ grid-area: doc_body;
+ }
+ .doc_endnotes {
+ grid-area: doc_endnotes;
+ }
+ .doc_glossary {
+ grid-area: doc_glossary;
+ }
+ .doc_biblio {
+ grid-area: doc_biblio;
+ }
+ .doc_bookindex {
+ grid-area: doc_bookindex;
+ }
+ .doc_blurb {
+ grid-area: doc_blurb;
+ }
+ .doc_suffix {
+ grid-area: doc_suffix;
+ }
+ .nav-ul {
+ list-style: none;
+ float: left;
+ }
+ .nav-li {
+ float: left;
+ padding-right: 0.7em;
+ }
+ .nav-li a {
+ text-decoration: none;
+ color: white;
+ }
+ footer {
+ background-color: #00704e;
+ }
+ /* regular */
body {
color: black;
background: #ffffff;
@@ -906,23 +1024,9 @@ template SiSUcss() {
display: inline;
overflow: auto;
}
- .table-bar {
- float: left;
- overflow: auto;
- width: 100%;
- display: inline;
- }
- .nav-bar {
- width: 15%;
- float: right;
- display: inline;
- transition: all 0.3s ease;
- position: relative;
- padding-bottom: 3em;
- background: #ffffff;
- }
.toc-button {
position: absolute;
+ top: 8px;
width: 2em;
height: 2em;
border-radius: 50%;
@@ -941,7 +1045,7 @@ template SiSUcss() {
}
.prev-next-button {
position: absolute;
- top: 0em;
+ top: 8px;
width: 2em;
height: 2em;
border-radius: 50%;
--
cgit v1.2.3