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) --- 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
\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; +} +#+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"¶ - - -
-

- %s -

-

- %s -

-

- %s -

-
- ¶", + o = format(q"¶¶", _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"¶ - -
- - - - - -
- - -
-¶", + o = format(q"¶
+ +
+ + + + + +
+ + +
+
¶", _action, _db, ); @@ -276,34 +313,17 @@ auto html_head(Dm)( -
-
-
- - - -
- - %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"], @@ -389,7 +409,8 @@ auto epub3_seg_head(Dm)( #+BEGIN_SRC d auto tail() { string o; - o = format(q"¶ + o = format(q"¶
+ ¶"); @@ -597,66 +618,62 @@ auto nav_pre_next_svg(O)( 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, ); @@ -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