Fossil SCM

pikchrshow: place rendering to the right of the entry form if it will fit, else wrap it around to below the form.

stephan 2020-09-10 07:31 pikchrshow
Commit 91c13c34be853def2bcf8d659a840d76250dd2777ed9fbd8d6c48bb99c539ed5
Parent 627ffe3cd80fcb5…
1 file changed +16 -18
~ src/pikchrshow.c
M src/pikchrshow.c
+16 -18
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -46,14 +46,19 @@
4646
 "arrow <-> down from last box.s\n"
4747
 "box same \"Pikchr\" \"Formatter\" \"(pikchr.c)\" fit\n";
4848
 }
4949
 style_header("PikchrShow");
5050
 CX("<style>");
51
+ CX("#sbs-wrapper {"
52
+ "display: flex; flex-direction: row; flex-wrap: wrap;"
53
+ "}");
54
+ CX("#sbs-wrapper > * {margin: 0 0 1em 0}");
5155
 CX("#pikchrshow-output, #pikchrshow-form"
52
- "{display: flex; flex-direction: column;}");
53
- CX("#pikchrshow-form > * {margin: 0.25em 0;}");
54
- CX("#pikchrshow-output {margin-top: 1em;}");
56
+ "{display: flex; flex-direction: column}");
57
+ CX("#pikchrshow-form {flex: 2 1 auto}");
58
+ CX("#pikchrshow-form > * {margin: 0.25em 0}");
59
+ CX("#pikchrshow-output {flex: 1 1 auto}");
5560
 CX("#pikchrshow-controls {"
5661
 "display: flex; flex-direction: row; align-items: center;"
5762
 "}");
5863
 CX("#pikchrshow-controls > * {"
5964
 "display: inline; margin-left: 0.5em;"
@@ -66,27 +71,19 @@
6671
 /* Flip the colors to approximate a dark theme look */
6772
 CX("<style>#pikchrshow-output > svg {"
6873
 "filter: invert(1) hue-rotate(180deg);"
6974
 "}</style>");
7075
 }
71
- CX("<form method='POST' id='pikchrshow-form' action=''>");
7276
 CX("<div>Input pikchr code and tap SUBMIT to render it:</div>");
73
- CX("<textarea name='content' rows='10' cols='80'>");
74
- CX("%s", zContent/*safe-for-%s*/);
75
- CX("</textarea>");
77
+ CX("<div id='sbs-wrapper'>");
78
+ CX("<form method='POST' id='pikchrshow-form' action=''>");
79
+ CX("<textarea name='content' rows='15'>%s</textarea>",
80
+ zContent/*safe-for-%s*/);
7681
 CX("<div id='pikchrshow-controls'>");
7782
 CX("<input type='submit' value='Submit'></input>");
78
- CX("<span class='input-with-label'>"
79
- "<input id='flipcolors' type='checkbox' value='1' "
80
- "name='flipcolors'");
81
- if(flipColors){
82
- CX(" checked");
83
- }
84
- CX("/>");
85
- CX("<label for='flipcolors'>"
86
- "Simulate dark color theme?</label>");
87
- CX("</span>");
83
+ style_labeled_checkbox(0, "flipcolors", "Simulate dark color theme?",
84
+ "1", flipColors, 0);
8885
 CX("</div>"/*#pikchrshow-controls*/);
8986
 CX("</form>"/*#pikchrshow-form*/);
9087
 CX("<div id='pikchrshow-output'>");
9188
 if(*zContent){
9289
 int w = 0, h = 0;
@@ -97,9 +94,10 @@
9794
 }else{
9895
 CX("<pre>\n%s\n</pre>\n", zOut);
9996
 }
10097
 fossil_free(zOut);
10198
 }
102
- CX("</div>");
99
+ CX("</div>"/*#pikchrshow-output*/);
100
+ CX("</div>"/*sbs-wrapper*/);
103101
 style_footer();
104102
 }
105103
106104
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -46,14 +46,19 @@
46 "arrow <-> down from last box.s\n"
47 "box same \"Pikchr\" \"Formatter\" \"(pikchr.c)\" fit\n";
48 }
49 style_header("PikchrShow");
50 CX("<style>");
 
 
 
 
51 CX("#pikchrshow-output, #pikchrshow-form"
52 "{display: flex; flex-direction: column;}");
53 CX("#pikchrshow-form > * {margin: 0.25em 0;}");
54 CX("#pikchrshow-output {margin-top: 1em;}");
 
55 CX("#pikchrshow-controls {"
56 "display: flex; flex-direction: row; align-items: center;"
57 "}");
58 CX("#pikchrshow-controls > * {"
59 "display: inline; margin-left: 0.5em;"
@@ -66,27 +71,19 @@
66 /* Flip the colors to approximate a dark theme look */
67 CX("<style>#pikchrshow-output > svg {"
68 "filter: invert(1) hue-rotate(180deg);"
69 "}</style>");
70 }
71 CX("<form method='POST' id='pikchrshow-form' action=''>");
72 CX("<div>Input pikchr code and tap SUBMIT to render it:</div>");
73 CX("<textarea name='content' rows='10' cols='80'>");
74 CX("%s", zContent/*safe-for-%s*/);
75 CX("</textarea>");
 
76 CX("<div id='pikchrshow-controls'>");
77 CX("<input type='submit' value='Submit'></input>");
78 CX("<span class='input-with-label'>"
79 "<input id='flipcolors' type='checkbox' value='1' "
80 "name='flipcolors'");
81 if(flipColors){
82 CX(" checked");
83 }
84 CX("/>");
85 CX("<label for='flipcolors'>"
86 "Simulate dark color theme?</label>");
87 CX("</span>");
88 CX("</div>"/*#pikchrshow-controls*/);
89 CX("</form>"/*#pikchrshow-form*/);
90 CX("<div id='pikchrshow-output'>");
91 if(*zContent){
92 int w = 0, h = 0;
@@ -97,9 +94,10 @@
97 }else{
98 CX("<pre>\n%s\n</pre>\n", zOut);
99 }
100 fossil_free(zOut);
101 }
102 CX("</div>");
 
103 style_footer();
104 }
105
106
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -46,14 +46,19 @@
46 "arrow <-> down from last box.s\n"
47 "box same \"Pikchr\" \"Formatter\" \"(pikchr.c)\" fit\n";
48 }
49 style_header("PikchrShow");
50 CX("<style>");
51 CX("#sbs-wrapper {"
52 "display: flex; flex-direction: row; flex-wrap: wrap;"
53 "}");
54 CX("#sbs-wrapper > * {margin: 0 0 1em 0}");
55 CX("#pikchrshow-output, #pikchrshow-form"
56 "{display: flex; flex-direction: column}");
57 CX("#pikchrshow-form {flex: 2 1 auto}");
58 CX("#pikchrshow-form > * {margin: 0.25em 0}");
59 CX("#pikchrshow-output {flex: 1 1 auto}");
60 CX("#pikchrshow-controls {"
61 "display: flex; flex-direction: row; align-items: center;"
62 "}");
63 CX("#pikchrshow-controls > * {"
64 "display: inline; margin-left: 0.5em;"
@@ -66,27 +71,19 @@
71 /* Flip the colors to approximate a dark theme look */
72 CX("<style>#pikchrshow-output > svg {"
73 "filter: invert(1) hue-rotate(180deg);"
74 "}</style>");
75 }
 
76 CX("<div>Input pikchr code and tap SUBMIT to render it:</div>");
77 CX("<div id='sbs-wrapper'>");
78 CX("<form method='POST' id='pikchrshow-form' action=''>");
79 CX("<textarea name='content' rows='15'>%s</textarea>",
80 zContent/*safe-for-%s*/);
81 CX("<div id='pikchrshow-controls'>");
82 CX("<input type='submit' value='Submit'></input>");
83 style_labeled_checkbox(0, "flipcolors", "Simulate dark color theme?",
84 "1", flipColors, 0);
 
 
 
 
 
 
 
 
85 CX("</div>"/*#pikchrshow-controls*/);
86 CX("</form>"/*#pikchrshow-form*/);
87 CX("<div id='pikchrshow-output'>");
88 if(*zContent){
89 int w = 0, h = 0;
@@ -97,9 +94,10 @@
94 }else{
95 CX("<pre>\n%s\n</pre>\n", zOut);
96 }
97 fossil_free(zOut);
98 }
99 CX("</div>"/*#pikchrshow-output*/);
100 CX("</div>"/*sbs-wrapper*/);
101 style_footer();
102 }
103
104

Keyboard Shortcuts

Open search /
Next entry (timeline) j
Previous entry (timeline) k
Open focused entry Enter
Show this help ?
Toggle theme Top nav button