cgi output, appearance, further adjustments

2 files changed, 504 insertions, 62 deletions

diff --git a/org/out_cgi_search_sqlite.org b/org/out_cgi_search_sqlite.org
index 9b0c092..ec1878f 100644
--- a/org/out_cgi_search_sqlite.org
+++ b/org/out_cgi_search_sqlite.org
@@ -885,6 +885,23 @@ string show_matched_objects (string fn) {
     color                    : #%s;
     text-decoration          : underline;
   }
+  .flex-container {
+    display                  : flex;
+  }
+  div.publication {
+    margin-top               : 2px;
+    margin-bottom            : 4px;
+    margin-left              : 0%%%%;
+    margin-right             : 0%%%%;
+  }
+  div.textview_ocn {
+    margin-left              : 0%%%%;
+    margin-right             : 1%%%%;
+  }
+  div.textview_found {
+    margin-left              : 1%%%%;
+    margin-right             : 1%%%%;
+  }
   textarea {
     color                    : #%s;
     background-color         : #%s;
@@ -1419,6 +1436,196 @@ string show_matched_objects (string fn) {
     background-color         : #555555;
     color                    : #DDDDDD;
   }
+  pre {
+    width                    : auto;
+    display                  : block;
+    clear                    : both;
+    color                    : #555555;
+  }
+  pre.codeline {
+    display                  : table;
+    clear                    : both;
+    table-layout             : fixed;
+    margin-left              : 5%%%%;
+    margin-right             : 5%%%%;
+    width                    : 90%%%%;
+    white-space              : pre-wrap;
+    border-style             : none;
+    border-radius            : 5px 5px 5px 5px;
+    box-shadow               : 0 2px 5px #AAAAAA inset;
+    margin-bottom            : 1em;
+    padding                  : 0.5em 1em;
+    page-break-inside        : avoid;
+    word-wrap                : break-word;
+    font-family              : inconsolata, "liberation mono", "bitstream vera mono", "dejavu mono", monaco, consolas, "andale mono", "courier new", "courier 10 pitch", courier, monospace;
+    white-space              : pre;
+    white-space              : pre-wrap;
+    white-space              : -moz-pre-wrap;
+    white-space              : -o-pre-wrap;
+    background-color         : #555555;
+    color                    : #DDDDDD;
+    font-size                : 95%%%%;
+    line-height              : 100%%%%;
+  }
+  pre.codeline::before {
+    counter-reset            : linenum;
+  }
+  pre.codeline span.tr {
+    display                  : table-row;
+    counter-increment        : linenum;
+  }
+  pre.codeline span.th {
+    display                  : table-cell;
+    user-select              : none;
+    -moz-user-select         : none;
+    -webkit-user-select      : none;
+    padding                  : 0.5em 0.5em;
+  }
+  pre.codeline span.th::before {
+    content                  : counter(linenum) ".";
+    color                    : #999999;
+    text-align               : right;
+    display                  : block;
+  }
+  pre.codeline span.th {
+    width                    : 4em;
+  }
+  pre.codeline code {
+    display                  : table-cell;
+  }
+  p.code {
+    border-style             : none;
+  }
+  note { white-space         : pre; }
+  em {
+    font-weight              : bold;
+    font-style               : italic;
+  }
+  p.left,th.left,td.left {
+    text-align               : left;
+  }
+  p.small_left,th.small_left,td.small_left {
+    text-align               : left;
+    font-size                : 80%%%%;
+  }
+  p.right,th.right,td.right {
+    text-align               : right;
+  }
+  ul, li {
+    list-style-type          : none;
+    list-style               : none;
+    padding-left             : 20px;
+    font-weight              : normal;
+    line-height              : 150%%%%;
+    text-align               : left;
+    text-indent              : 0mm;
+    margin-left              : 1em;
+    margin-right             : 2em;
+    margin-top               : 3px;
+    margin-bottom            : 3px;
+  }
+  li {
+    background               : (../image_sys/bullet_09.png) no-repeat 0px 6px;
+  }
+  ul { }
+  h0, h1, h2, h3, h4, h5, h6, h7 {
+    font-weight              : bold;
+    line-height              : 120%%%%;
+    text-align               : left;
+    margin-top               : 20px;
+    margin-bottom            : 10px;
+  }
+  h4.norm, h5.norm, h6.norm, h7.norm {
+    margin-top               : 10px;
+    margin-bottom            : 0px;
+  }
+  h0 { font-size             : 125%%%%; }
+  h1 { font-size             : 120%%%%; }
+  h2 { font-size             : 115%%%%; }
+  h3 { font-size             : 110%%%%; }
+  h4 { font-size             : 105%%%%; }
+  h5 { font-size             : 100%%%%; }
+  h6 { font-size             : 100%%%%; }
+  h7 { font-size             : 100%%%%; }
+  h0, h1, h2, h3, h4, h5, h6, h7 {
+    text-shadow              : .2em .2em .3em #999999;
+  }
+  h1.i { margin-left         : 2em; }
+  h2.i { margin-left         : 3em; }
+  h3.i { margin-left         : 4em; }
+  h4.i { margin-left         : 5em; }
+  h5.i { margin-left         : 6em; }
+  h6.i { margin-left         : 7em; }
+  h7.i { margin-left         : 8em; }
+  h8.i { margin-left         : 9em; }
+  h9.i { margin-left         : 10em; }
+  .toc {
+    font-weight              : normal;
+    margin-top               : 6px;
+    margin-bottom            : 6px;
+  }
+  h0.toc {
+    margin-left              : 1em;
+    font-size                : 120%%%%;
+    line-height              : 150%%%%;
+  }
+  h1.toc {
+    margin-left              : 1em;
+    font-size                : 115%%%%;
+    line-height              : 150%%%%;
+  }
+  h2.toc {
+    margin-left              : 2em;
+    font-size                : 110%%%%;
+    line-height              : 140%%%%;
+  }
+  h3.toc {
+    margin-left              : 3em;
+    font-size                : 105%%%%;
+    line-height              : 120%%%%;
+  }
+  h4.toc {
+    margin-left              : 4em;
+    font-size                : 100%%%%;
+    line-height              : 120%%%%;
+  }
+  h5.toc {
+    margin-left              : 5em;
+    font-size                : 95%%%%;
+    line-height              : 110%%%%;
+  }
+  h6.toc {
+    margin-left              : 6em;
+    font-size                : 90%%%%;
+    line-height              : 110%%%%;
+  }
+  h7.toc {
+    margin-left              : 7em;
+    font-size                : 85%%%%;
+    line-height              : 100%%%%;
+  }
+  .subtoc {
+    margin-right             : 34%%%%;
+    font-weight              : normal;
+  }
+  h5.subtoc {
+    margin-left              : 2em;
+    font-size                : 80%%%%;
+    margin-top               : 2px;
+    margin-bottom            : 2px;
+  }
+  h6.subtoc {
+    margin-left              : 3em;
+    font-size                : 75%%%%;
+    margin-top               : 0px;
+    margin-bottom            : 0px;
+  }
+  h7.subtoc {
+    margin-left              : 4em;
+    font-size                : 70%%%%;
+    margin-top               : 0px;
+    margin-bottom            : 0px;
+  }
   hr {
     display                  : block;
     height                   : 1px;
@@ -1876,20 +2083,22 @@ LIMIT %%s OFFSET %%s
             string _date = (m.hit == "0000") ? "(year?) " : "(" ~ m.hit ~ ") ";
             cgi.write(
               _close_para
-              ~ "<hr><p class=\"publication\"><a href=\""
-                ~ "http://" ~ conf.http_host ~ conf.doc_collection_sub_root ~ "/"
-                ~ row["language_document_char"].as!string ~ "/html/"
-                ~ row["src_filename_base"].as!string ~ "/"
-                ~ "toc.html"
-              ~ "\">\""
-                ~ row["title"].as!string ~ "\""
-              ~ "</a> "
-              ~ _date
-              ~ "[" ~ row["language_document_char"].as!string ~ "] "
-              ~ row["creator_author_last_first"].as!string
-              ~ " "
-              ~ show_matched_objects(row["src_filename_base"].as!string)
-              ~ "</p>"
+              ~ "<hr><div class=\"publication\">"
+                ~ "<p class=\"publication\"><a href=\""
+                  ~ "http://" ~ conf.http_host ~ conf.doc_collection_sub_root ~ "/"
+                  ~ row["language_document_char"].as!string ~ "/html/"
+                  ~ row["src_filename_base"].as!string ~ "/"
+                  ~ "toc.html"
+                ~ "\">\""
+                  ~ row["title"].as!string ~ "\""
+                ~ "</a> "
+                ~ _date
+                ~ "[" ~ row["language_document_char"].as!string ~ "] "
+                ~ row["creator_author_last_first"].as!string
+                ~ " "
+                ~ show_matched_objects(row["src_filename_base"].as!string)
+                ~ "</p>"
+              ~ "</div>"
             );
           }
 #+END_SRC
@@ -1901,26 +2110,38 @@ LIMIT %%s OFFSET %%s
           if (cv.results_type == "txt") {
             if (row["ocn"].as!string != "0") {
               cgi.write(
-                "<hr style=\"width:5%%; align:left\"><p class=\"ocn_is\"><a href=\""
-                  ~ "http://" ~ conf.http_host ~ conf.doc_collection_sub_root ~ "/"
-                  ~ row["language_document_char"].as!string ~ "/html/"
-                  ~ row["src_filename_base"].as!string ~ "/"
-                  ~ row["seg_name"].as!string ~ ".html#" ~ row["ocn"].as!string
-                ~ "\">"
-                  ~ row["ocn"].as!string
-                ~ "</a>:</p>"
-                ~ highlight_text_matched(row["body"].as!string, tf.text)
+                "<div class=\"flex-container\">"
+                ~ "<div class=\"textview_ocn\" style=\"flex: 0 0 1.2em\">"
+                  ~ "<p class=\"ocn_is\"><a href=\""
+                    ~ "http://" ~ conf.http_host ~ conf.doc_collection_sub_root ~ "/"
+                    ~ row["language_document_char"].as!string ~ "/html/"
+                    ~ row["src_filename_base"].as!string ~ "/"
+                    ~ row["seg_name"].as!string ~ ".html#" ~ row["ocn"].as!string
+                  ~ "\">"
+                    ~ row["ocn"].as!string
+                  ~ "</a>:</p>"
+                ~ "</div>"
+                ~ "<div class=\"textview_found\">"
+                  ~ highlight_text_matched(row["body"].as!string, tf.text)
+                ~ "</div>"
+                ~ "</div>"
               );
             } else {
               cgi.write(
-                "<hr style=\"width:5%%; align:left\"><p class=\"ocn_is\"><a href=\""
-                  ~ "http://" ~ conf.http_host ~ conf.doc_collection_sub_root ~ "/"
-                  ~ row["language_document_char"].as!string ~ "/html/"
-                  ~ row["src_filename_base"].as!string ~ "/toc.html"
-                ~ "\">"
-                  ~ row["ocn"].as!string
-                ~ "</a>:</p>"
-                ~ highlight_text_matched(row["body"].as!string, tf.text)
+                "<div class=\"flex-container\">"
+                ~ "<div class=\"textview_ocn\" style=\"flex: 0 0 1.2em\">"
+                  ~ "<p class=\"ocn_is\"><a href=\""
+                    ~ "http://" ~ conf.http_host ~ conf.doc_collection_sub_root ~ "/"
+                    ~ row["language_document_char"].as!string ~ "/html/"
+                    ~ row["src_filename_base"].as!string ~ "/toc.html"
+                  ~ "\">"
+                    ~ row["ocn"].as!string
+                  ~ "</a>:</p>"
+                ~ "</div>"
+                ~ "<div class=\"textview_found\">"
+                  ~ highlight_text_matched(row["body"].as!string, tf.text)
+                ~ "</div>"
+                ~ "</div>"
               );
             }
 #+END_SRC
diff --git a/src/doc_reform/io_out/cgi_sqlite_search_form.d b/src/doc_reform/io_out/cgi_sqlite_search_form.d
index d823e8c..9349096 100644
--- a/src/doc_reform/io_out/cgi_sqlite_search_form.d
+++ b/src/doc_reform/io_out/cgi_sqlite_search_form.d
@@ -566,6 +566,23 @@ void cgi_function_intro(Cgi cgi) {
     color                    : #%s;
     text-decoration          : underline;
   }
+  .flex-container {
+    display                  : flex;
+  }
+  div.publication {
+    margin-top               : 2px;
+    margin-bottom            : 4px;
+    margin-left              : 0%%%%;
+    margin-right             : 0%%%%;
+  }
+  div.textview_ocn {
+    margin-left              : 0%%%%;
+    margin-right             : 1%%%%;
+  }
+  div.textview_found {
+    margin-left              : 1%%%%;
+    margin-right             : 1%%%%;
+  }
   textarea {
     color                    : #%s;
     background-color         : #%s;
@@ -1100,6 +1117,196 @@ void cgi_function_intro(Cgi cgi) {
     background-color         : #555555;
     color                    : #DDDDDD;
   }
+  pre {
+    width                    : auto;
+    display                  : block;
+    clear                    : both;
+    color                    : #555555;
+  }
+  pre.codeline {
+    display                  : table;
+    clear                    : both;
+    table-layout             : fixed;
+    margin-left              : 5%%%%;
+    margin-right             : 5%%%%;
+    width                    : 90%%%%;
+    white-space              : pre-wrap;
+    border-style             : none;
+    border-radius            : 5px 5px 5px 5px;
+    box-shadow               : 0 2px 5px #AAAAAA inset;
+    margin-bottom            : 1em;
+    padding                  : 0.5em 1em;
+    page-break-inside        : avoid;
+    word-wrap                : break-word;
+    font-family              : inconsolata, "liberation mono", "bitstream vera mono", "dejavu mono", monaco, consolas, "andale mono", "courier new", "courier 10 pitch", courier, monospace;
+    white-space              : pre;
+    white-space              : pre-wrap;
+    white-space              : -moz-pre-wrap;
+    white-space              : -o-pre-wrap;
+    background-color         : #555555;
+    color                    : #DDDDDD;
+    font-size                : 95%%%%;
+    line-height              : 100%%%%;
+  }
+  pre.codeline::before {
+    counter-reset            : linenum;
+  }
+  pre.codeline span.tr {
+    display                  : table-row;
+    counter-increment        : linenum;
+  }
+  pre.codeline span.th {
+    display                  : table-cell;
+    user-select              : none;
+    -moz-user-select         : none;
+    -webkit-user-select      : none;
+    padding                  : 0.5em 0.5em;
+  }
+  pre.codeline span.th::before {
+    content                  : counter(linenum) ".";
+    color                    : #999999;
+    text-align               : right;
+    display                  : block;
+  }
+  pre.codeline span.th {
+    width                    : 4em;
+  }
+  pre.codeline code {
+    display                  : table-cell;
+  }
+  p.code {
+    border-style             : none;
+  }
+  note { white-space         : pre; }
+  em {
+    font-weight              : bold;
+    font-style               : italic;
+  }
+  p.left,th.left,td.left {
+    text-align               : left;
+  }
+  p.small_left,th.small_left,td.small_left {
+    text-align               : left;
+    font-size                : 80%%%%;
+  }
+  p.right,th.right,td.right {
+    text-align               : right;
+  }
+  ul, li {
+    list-style-type          : none;
+    list-style               : none;
+    padding-left             : 20px;
+    font-weight              : normal;
+    line-height              : 150%%%%;
+    text-align               : left;
+    text-indent              : 0mm;
+    margin-left              : 1em;
+    margin-right             : 2em;
+    margin-top               : 3px;
+    margin-bottom            : 3px;
+  }
+  li {
+    background               : (../image_sys/bullet_09.png) no-repeat 0px 6px;
+  }
+  ul { }
+  h0, h1, h2, h3, h4, h5, h6, h7 {
+    font-weight              : bold;
+    line-height              : 120%%%%;
+    text-align               : left;
+    margin-top               : 20px;
+    margin-bottom            : 10px;
+  }
+  h4.norm, h5.norm, h6.norm, h7.norm {
+    margin-top               : 10px;
+    margin-bottom            : 0px;
+  }
+  h0 { font-size             : 125%%%%; }
+  h1 { font-size             : 120%%%%; }
+  h2 { font-size             : 115%%%%; }
+  h3 { font-size             : 110%%%%; }
+  h4 { font-size             : 105%%%%; }
+  h5 { font-size             : 100%%%%; }
+  h6 { font-size             : 100%%%%; }
+  h7 { font-size             : 100%%%%; }
+  h0, h1, h2, h3, h4, h5, h6, h7 {
+    text-shadow              : .2em .2em .3em #999999;
+  }
+  h1.i { margin-left         : 2em; }
+  h2.i { margin-left         : 3em; }
+  h3.i { margin-left         : 4em; }
+  h4.i { margin-left         : 5em; }
+  h5.i { margin-left         : 6em; }
+  h6.i { margin-left         : 7em; }
+  h7.i { margin-left         : 8em; }
+  h8.i { margin-left         : 9em; }
+  h9.i { margin-left         : 10em; }
+  .toc {
+    font-weight              : normal;
+    margin-top               : 6px;
+    margin-bottom            : 6px;
+  }
+  h0.toc {
+    margin-left              : 1em;
+    font-size                : 120%%%%;
+    line-height              : 150%%%%;
+  }
+  h1.toc {
+    margin-left              : 1em;
+    font-size                : 115%%%%;
+    line-height              : 150%%%%;
+  }
+  h2.toc {
+    margin-left              : 2em;
+    font-size                : 110%%%%;
+    line-height              : 140%%%%;
+  }
+  h3.toc {
+    margin-left              : 3em;
+    font-size                : 105%%%%;
+    line-height              : 120%%%%;
+  }
+  h4.toc {
+    margin-left              : 4em;
+    font-size                : 100%%%%;
+    line-height              : 120%%%%;
+  }
+  h5.toc {
+    margin-left              : 5em;
+    font-size                : 95%%%%;
+    line-height              : 110%%%%;
+  }
+  h6.toc {
+    margin-left              : 6em;
+    font-size                : 90%%%%;
+    line-height              : 110%%%%;
+  }
+  h7.toc {
+    margin-left              : 7em;
+    font-size                : 85%%%%;
+    line-height              : 100%%%%;
+  }
+  .subtoc {
+    margin-right             : 34%%%%;
+    font-weight              : normal;
+  }
+  h5.subtoc {
+    margin-left              : 2em;
+    font-size                : 80%%%%;
+    margin-top               : 2px;
+    margin-bottom            : 2px;
+  }
+  h6.subtoc {
+    margin-left              : 3em;
+    font-size                : 75%%%%;
+    margin-top               : 0px;
+    margin-bottom            : 0px;
+  }
+  h7.subtoc {
+    margin-left              : 4em;
+    font-size                : 70%%%%;
+    margin-top               : 0px;
+    margin-bottom            : 0px;
+  }
   hr {
     display                  : block;
     height                   : 1px;
@@ -1482,45 +1689,59 @@ LIMIT %%s OFFSET %%s
             string _date = (m.hit == "0000") ? "(year?) " : "(" ~ m.hit ~ ") ";
             cgi.write(
               _close_para
-              ~ "<hr><p class=\"publication\"><a href=\""
-                ~ "http://" ~ conf.http_host ~ conf.doc_collection_sub_root ~ "/"
-                ~ row["language_document_char"].as!string ~ "/html/"
-                ~ row["src_filename_base"].as!string ~ "/"
-                ~ "toc.html"
-              ~ "\">\""
-                ~ row["title"].as!string ~ "\""
-              ~ "</a> "
-              ~ _date
-              ~ "[" ~ row["language_document_char"].as!string ~ "] "
-              ~ row["creator_author_last_first"].as!string
-              ~ " "
-              ~ show_matched_objects(row["src_filename_base"].as!string)
-              ~ "</p>"
+              ~ "<hr><div class=\"publication\">"
+                ~ "<p class=\"publication\"><a href=\""
+                  ~ "http://" ~ conf.http_host ~ conf.doc_collection_sub_root ~ "/"
+                  ~ row["language_document_char"].as!string ~ "/html/"
+                  ~ row["src_filename_base"].as!string ~ "/"
+                  ~ "toc.html"
+                ~ "\">\""
+                  ~ row["title"].as!string ~ "\""
+                ~ "</a> "
+                ~ _date
+                ~ "[" ~ row["language_document_char"].as!string ~ "] "
+                ~ row["creator_author_last_first"].as!string
+                ~ " "
+                ~ show_matched_objects(row["src_filename_base"].as!string)
+                ~ "</p>"
+              ~ "</div>"
             );
           }
           if (cv.results_type == "txt") {
             if (row["ocn"].as!string != "0") {
               cgi.write(
-                "<hr style=\"width:5%%; align:left\"><p class=\"ocn_is\"><a href=\""
-                  ~ "http://" ~ conf.http_host ~ conf.doc_collection_sub_root ~ "/"
-                  ~ row["language_document_char"].as!string ~ "/html/"
-                  ~ row["src_filename_base"].as!string ~ "/"
-                  ~ row["seg_name"].as!string ~ ".html#" ~ row["ocn"].as!string
-                ~ "\">"
-                  ~ row["ocn"].as!string
-                ~ "</a>:</p>"
-                ~ highlight_text_matched(row["body"].as!string, tf.text)
+                "<div class=\"flex-container\">"
+                ~ "<div class=\"textview_ocn\" style=\"flex: 0 0 1.2em\">"
+                  ~ "<p class=\"ocn_is\"><a href=\""
+                    ~ "http://" ~ conf.http_host ~ conf.doc_collection_sub_root ~ "/"
+                    ~ row["language_document_char"].as!string ~ "/html/"
+                    ~ row["src_filename_base"].as!string ~ "/"
+                    ~ row["seg_name"].as!string ~ ".html#" ~ row["ocn"].as!string
+                  ~ "\">"
+                    ~ row["ocn"].as!string
+                  ~ "</a>:</p>"
+                ~ "</div>"
+                ~ "<div class=\"textview_found\">"
+                  ~ highlight_text_matched(row["body"].as!string, tf.text)
+                ~ "</div>"
+                ~ "</div>"
               );
             } else {
               cgi.write(
-                "<hr style=\"width:5%%; align:left\"><p class=\"ocn_is\"><a href=\""
-                  ~ "http://" ~ conf.http_host ~ conf.doc_collection_sub_root ~ "/"
-                  ~ row["language_document_char"].as!string ~ "/html/"
-                  ~ row["src_filename_base"].as!string ~ "/toc.html"
-                ~ "\">"
-                  ~ row["ocn"].as!string
-                ~ "</a>:</p>"
-                ~ highlight_text_matched(row["body"].as!string, tf.text)
+                "<div class=\"flex-container\">"
+                ~ "<div class=\"textview_ocn\" style=\"flex: 0 0 1.2em\">"
+                  ~ "<p class=\"ocn_is\"><a href=\""
+                    ~ "http://" ~ conf.http_host ~ conf.doc_collection_sub_root ~ "/"
+                    ~ row["language_document_char"].as!string ~ "/html/"
+                    ~ row["src_filename_base"].as!string ~ "/toc.html"
+                  ~ "\">"
+                    ~ row["ocn"].as!string
+                  ~ "</a>:</p>"
+                ~ "</div>"
+                ~ "<div class=\"textview_found\">"
+                  ~ highlight_text_matched(row["body"].as!string, tf.text)
+                ~ "</div>"
+                ~ "</div>"
               );
             }
           } else {