From 8de7594804287154385e285147d2bbadcb0d3113 Mon Sep 17 00:00:00 2001 From: Ralph Amissah Date: Mon, 7 Aug 2017 07:58:02 -0400 Subject: html css using grid & flex (remove tables) --- src/sdp/meta/metadoc_from_src.d | 2 +- src/sdp/output/html.d | 17 ++-- src/sdp/output/xmls.d | 208 +++++++++++++++++++++------------------- src/sdp/output/xmls_css.d | 136 ++++++++++++++++++++++---- 4 files changed, 241 insertions(+), 122 deletions(-) (limited to 'src/sdp') diff --git a/src/sdp/meta/metadoc_from_src.d b/src/sdp/meta/metadoc_from_src.d index 5445333..732dbd0 100644 --- a/src/sdp/meta/metadoc_from_src.d +++ b/src/sdp/meta/metadoc_from_src.d @@ -3358,7 +3358,7 @@ template SiSUdocAbstraction() { } } 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/src/sdp/output/html.d b/src/sdp/output/html.d index b961d4c..8145417 100644 --- a/src/sdp/output/html.d +++ b/src/sdp/output/html.d @@ -22,8 +22,11 @@ template outputHTML() { 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"); @@ -31,7 +34,7 @@ template outputHTML() { 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); @@ -55,7 +58,7 @@ template outputHTML() { 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); @@ -109,7 +112,7 @@ template outputHTML() { 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); @@ -192,11 +195,13 @@ template outputHTML() { 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"); @@ -231,10 +236,8 @@ template outputHTML() { 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/src/sdp/output/xmls.d b/src/sdp/output/xmls.d index c100bbc..57056de 100644 --- a/src/sdp/output/xmls.d +++ b/src/sdp/output/xmls.d @@ -14,6 +14,42 @@ template outputXHTMLs() { mixin SiSUoutputRgxInit; struct outputXHTMLs { static auto rgx = Rgx(); + string div_delimit( + string part, + return ref string previous_part + ){ + string delimit = ""; + string delimit_ = ""; + if (part != previous_part) { + switch (part) { + case "head": + delimit_ ~= "\n
\n" ; + break; + case "toc_seg": + delimit_ ~= "\n
\n" ; + break; + case "toc_scroll": + delimit_ ~= "\n
\n" ; + break; + case "bookindex_seg": + delimit_ ~= "\n
\n" ; + break; + case "bookindex_scroll": + delimit_ ~= "\n
\n" ; + break; + default: + delimit_ ~= "\n
\n" ; + break; + } + if (previous_part.length > 0) { + delimit ~= "\n
"; + } + previous_part = part; + delimit ~= delimit_; + } + // you also need to close the last div, introduce a footer? + return delimit; + } string special_characters(O)( auto return ref const O obj, string _txt @@ -123,21 +159,17 @@ template outputXHTMLs() { string _location_3_url ="http://www.sisudoc.org"; string _location_3_lnk ="sisu"; string o; - o = format(q"¶ - - -
-

- %s -

-

- %s -

-

- %s -

-
- ¶", + o = format(q"¶¶", _location_1_url, _location_1_lnk, _location_2_url, @@ -153,19 +185,19 @@ template outputXHTMLs() { string _action="http://www.sisudoc.org/cgi-bin/search.cgi"; string _db="SiSU.7a.manual"; string o; - o = format(q"¶ - -
- - - - - -
- - -
- ¶", + o = format(q"¶
+ +
+ + + + + +
+ + +
+
¶", _action, _db, ); @@ -192,34 +224,17 @@ template outputXHTMLs() { -
-
-
- - - -
- - %s - - - - - - - %s - -
- - - - [ document manifest ] - - -
-
-
-
%s¶", +
+
+ %s + + %s%s¶", doc_matters.dochead_meta["title"]["full"], (doc_matters.dochead_meta["creator"]["author"].empty) ? "" : ", " ~ doc_matters.dochead_meta["creator"]["author"], @@ -293,7 +308,8 @@ template outputXHTMLs() { } auto tail() { string o; - o = format(q"¶ + o = format(q"¶
+ ¶"); @@ -457,66 +473,62 @@ template outputXHTMLs() { toc = ""; prev = ""; } else { - toc = format(q"¶ - - - - ¶", + toc = format(q"¶ + + ¶", ); } if (obj.segname_prev == "") { prev = ""; - } else { // previous - prev = format(q"¶ - - - - ¶", + } else { + prev = format(q"¶ + + ¶", obj.segname_prev, ); } - if (obj.segname_next == "") { // next + if (obj.segname_next == "") { next = ""; } else { - next = format(q"¶ - - - - ¶", + next = format(q"¶ + + ¶", obj.segname_next, ); } - string _toc_pre_next = format(q"¶ - - - ¶", +
¶", toc, prev, next, ); - string _pre_next = format(q"¶ - +
¶", prev, next, ); diff --git a/src/sdp/output/xmls_css.d b/src/sdp/output/xmls_css.d index 637bca9..0165e56 100644 --- a/src/sdp/output/xmls_css.d +++ b/src/sdp/output/xmls_css.d @@ -5,6 +5,124 @@ module sdp.output.xmls_css; template SiSUcss() { auto SiSUcss() { string css_shared=" + *{ + 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; @@ -864,23 +982,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%; @@ -899,7 +1003,7 @@ template SiSUcss() { } .prev-next-button { position: absolute; - top: 0em; + top: 8px; width: 2em; height: 2em; border-radius: 50%; -- cgit v1.2.3