html css using grid & flex (remove tables)

1 files changed, 110 insertions, 98 deletions

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<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;
+    }
     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"¶<!-- 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,
@@ -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"¶<!-- 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,
       );
@@ -192,34 +224,17 @@ template outputXHTMLs() {
     </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">
-          [&nbsp;document&nbsp;manifest&nbsp;]
-        </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">
+              [&nbsp;document&nbsp;manifest&nbsp;]
+            </font>
+          </a>
+        </div>
+        %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"¶  <a name="bottom" id="bottom"></a>
+      o = format(q"¶  </div>
+      <a name="bottom" id="bottom"></a>
       <a name="end" id="end"></a>
     </body>
     </html>¶");
@@ -457,66 +473,62 @@ template outputXHTMLs() {
         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,
       );