Fossil

Check-in [2dd0a40e]
Login

Check-in [2dd0a40e]

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview
Comment:Fixed /pikchrshow layout at top/bottom, moved the UI controls to sit between the two main elements, and fixed the dark mode CSS selector broken by updates to pikchr's output.
Downloads: Tarball | ZIP archive | SQL archive
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: 2dd0a40e599676c4ee822b313dd79564ec710317369e2396fd0b12032f0e8375
User & Date: stephan 2020-09-11 18:40:50
Context
2020-09-11
19:45
New version of pikchr.c that support "thick" and "thin" attributes (which is just a convenience for "thickness 125%" and "thickness 66%" and new text attributes "big" and "small" (which is a new capability). All can be uttered twice for enhanced effect. ... (check-in: 75d45175 user: drh tags: trunk)
18:40
Fixed /pikchrshow layout at top/bottom, moved the UI controls to sit between the two main elements, and fixed the dark mode CSS selector broken by updates to pikchr's output. ... (check-in: 2dd0a40e user: stephan tags: trunk)
17:43
Pikchr-generated SVG uses "viewbox" instead of "width" and "height" in an effort to be more mobile-friendly. ... (check-in: 2defbdb3 user: drh tags: trunk)
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to src/pikchrshow.c.

︙︙
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

      "arrow <-> down from last box.s\n"
      "box same \"Pikchr\" \"Formatter\" \"(pikchr.c)\" fit\n";
  }
  style_header("PikchrShow");
  CX("<style>");
  CX("div.content { padding-top: 0.5em }");
  CX("#sbs-wrapper {"
     "display: flex; flex-direction: row; flex-wrap: wrap;"
     "}");
  CX("#sbs-wrapper > * {"
     "margin: 0 0.25em 0.5em 0; flex: 1 10 auto;"
     "align-self: stretch;"
     "}");
  CX("#sbs-wrapper textarea {"
     "max-width: initial; flex: 1 1 auto;"








|








67
68
69
70
71
72
73
74
75
76
77
78
79
80
81

      "arrow <-> down from last box.s\n"
      "box same \"Pikchr\" \"Formatter\" \"(pikchr.c)\" fit\n";
  }
  style_header("PikchrShow");
  CX("<style>");
  CX("div.content { padding-top: 0.5em }");
  CX("#sbs-wrapper {"
     "display: flex; flex-direction: column;"
     "}");
  CX("#sbs-wrapper > * {"
     "margin: 0 0.25em 0.5em 0; flex: 1 10 auto;"
     "align-self: stretch;"
     "}");
  CX("#sbs-wrapper textarea {"
     "max-width: initial; flex: 1 1 auto;"
︙︙
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115


116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

     "}");
  CX("#pikchrshow-controls > * {"
     "display: inline; margin: 0 0.25em 0.5em 0;"
     "}");
  CX("#pikchrshow-controls > .input-with-label > * {"
     "cursor: pointer;"
     "}");
  CX("#pikchrshow-output.dark-mode > svg {"
     /* Flip the colors to approximate a dark theme look */
     "filter: invert(1) hue-rotate(180deg);"
     "}");
  CX("#sbs-wrapper > fieldset {"
     "padding: 0.25em 0.5em; border-radius: 0.25em;"
     "}");
  CX("fieldset > legend > .copy-button {margin-left: 0.25em}");
  CX("</style>");
  CX("<div>Input pikchr code and tap Preview to render it:</div>");
  CX("<div id='sbs-wrapper'>");
  CX("<div id='pikchrshow-form'>");


  CX("<div id='pikchrshow-controls'>");
  CX("<button id='pikchr-submit-preview'>Preview</button>");
  style_labeled_checkbox("flipcolors-wrapper", "flipcolors",
                         "Simulate dark theme?",
                         "1", flipColors, 0);
  CX("</div>"/*#pikchrshow-controls*/);
  CX("<textarea id='content' name='content' rows='15'>%s</textarea>",
     zContent/*safe-for-%s*/);
  CX("</div>"/*#pikchrshow-form*/);
  CX("<fieldset id='pikchrshow-output-wrapper'>");
  CX("<legend>Preview <span class='copy-button'></span></legend>");
  CX("<div id='pikchrshow-output'>");
  if(*zContent){
    int w = 0, h = 0;
    char *zOut = pikchr(zContent, "pikchr", 0, &w, &h);








|











>
>






<
<








97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123


124
125
126
127
128
129
130

     "}");
  CX("#pikchrshow-controls > * {"
     "display: inline; margin: 0 0.25em 0.5em 0;"
     "}");
  CX("#pikchrshow-controls > .input-with-label > * {"
     "cursor: pointer;"
     "}");
  CX("#pikchrshow-output.dark-mode svg {"
     /* Flip the colors to approximate a dark theme look */
     "filter: invert(1) hue-rotate(180deg);"
     "}");
  CX("#sbs-wrapper > fieldset {"
     "padding: 0.25em 0.5em; border-radius: 0.25em;"
     "}");
  CX("fieldset > legend > .copy-button {margin-left: 0.25em}");
  CX("</style>");
  CX("<div>Input pikchr code and tap Preview to render it:</div>");
  CX("<div id='sbs-wrapper'>");
  CX("<div id='pikchrshow-form'>");
  CX("<textarea id='content' name='content' rows='15'>%s</textarea>",
     zContent/*safe-for-%s*/);
  CX("<div id='pikchrshow-controls'>");
  CX("<button id='pikchr-submit-preview'>Preview</button>");
  style_labeled_checkbox("flipcolors-wrapper", "flipcolors",
                         "Simulate dark theme?",
                         "1", flipColors, 0);
  CX("</div>"/*#pikchrshow-controls*/);


  CX("</div>"/*#pikchrshow-form*/);
  CX("<fieldset id='pikchrshow-output-wrapper'>");
  CX("<legend>Preview <span class='copy-button'></span></legend>");
  CX("<div id='pikchrshow-output'>");
  if(*zContent){
    int w = 0, h = 0;
    char *zOut = pikchr(zContent, "pikchr", 0, &w, &h);
︙︙