Fossil SCM

pikchrshow: discovered that Firefox cannot flexbox a LEGEND element properly, so worked around that.

stephan 2020-09-12 05:41 trunk
Commit c92ff2daef6fdbe1d89167755b885677115fadce6203a972096d045a91b820c9
Parent 3ffd3be3dc4b279…
2 files changed +5 -3 +26 -23
~ src/fossil.page.pikchrshow.js ~ src/pikchrshow.c
M src/fossil.page.pikchrshow.js
+5 -3
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -33,11 +33,11 @@
3333
 taPreviewText: D.attr(D.textarea(), 'rows', 20, 'cols', 60,
3434
 'readonly', true),
3535
 uiControls: E('#pikchrshow-controls'),
3636
 previewModeToggle: D.button("Preview mode"),
3737
 markupAlignCenter: D.attr(D.checkbox(), 'id','markup-align-center'),
38
- markupAlignWrapper: D.span()//D.addClass(D.span(), 'input-with-label')
38
+ markupAlignWrapper: D.span()
3939
 };
4040
4141
 ////////////////////////////////////////////////////////////
4242
 // Setup markup alignment selection...
4343
 P.e.markupAlignCenter.addEventListener('change', function(ev){
@@ -45,12 +45,14 @@
4545
 if(P.previewMode==1 || P.previewMode==2){
4646
 P.renderPreview();
4747
 }
4848
 }, false);
4949
 D.append(P.e.markupAlignWrapper,
50
- P.e.markupAlignCenter,
51
- D.label(P.e.markupAlignCenter, "Align center?"));
50
+ D.addClass([
51
+ P.e.markupAlignCenter,
52
+ D.label(P.e.markupAlignCenter, "Align center?")
53
+ ], 'v-align-middle') );
5254
5355
 ////////////////////////////////////////////////////////////
5456
 // Setup the preview fieldset's LEGEND element...
5557
 D.append( P.e.previewLegend,
5658
 P.e.previewModeToggle,
5759
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -33,11 +33,11 @@
33 taPreviewText: D.attr(D.textarea(), 'rows', 20, 'cols', 60,
34 'readonly', true),
35 uiControls: E('#pikchrshow-controls'),
36 previewModeToggle: D.button("Preview mode"),
37 markupAlignCenter: D.attr(D.checkbox(), 'id','markup-align-center'),
38 markupAlignWrapper: D.span()//D.addClass(D.span(), 'input-with-label')
39 };
40
41 ////////////////////////////////////////////////////////////
42 // Setup markup alignment selection...
43 P.e.markupAlignCenter.addEventListener('change', function(ev){
@@ -45,12 +45,14 @@
45 if(P.previewMode==1 || P.previewMode==2){
46 P.renderPreview();
47 }
48 }, false);
49 D.append(P.e.markupAlignWrapper,
50 P.e.markupAlignCenter,
51 D.label(P.e.markupAlignCenter, "Align center?"));
 
 
52
53 ////////////////////////////////////////////////////////////
54 // Setup the preview fieldset's LEGEND element...
55 D.append( P.e.previewLegend,
56 P.e.previewModeToggle,
57
--- src/fossil.page.pikchrshow.js
+++ src/fossil.page.pikchrshow.js
@@ -33,11 +33,11 @@
33 taPreviewText: D.attr(D.textarea(), 'rows', 20, 'cols', 60,
34 'readonly', true),
35 uiControls: E('#pikchrshow-controls'),
36 previewModeToggle: D.button("Preview mode"),
37 markupAlignCenter: D.attr(D.checkbox(), 'id','markup-align-center'),
38 markupAlignWrapper: D.span()
39 };
40
41 ////////////////////////////////////////////////////////////
42 // Setup markup alignment selection...
43 P.e.markupAlignCenter.addEventListener('change', function(ev){
@@ -45,12 +45,14 @@
45 if(P.previewMode==1 || P.previewMode==2){
46 P.renderPreview();
47 }
48 }, false);
49 D.append(P.e.markupAlignWrapper,
50 D.addClass([
51 P.e.markupAlignCenter,
52 D.label(P.e.markupAlignCenter, "Align center?")
53 ], 'v-align-middle') );
54
55 ////////////////////////////////////////////////////////////
56 // Setup the preview fieldset's LEGEND element...
57 D.append( P.e.previewLegend,
58 P.e.previewModeToggle,
59
M src/pikchrshow.c
+26 -23
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -68,60 +68,60 @@
6868
 "arrow <-> down from last box.s\n"
6969
 "box same \"Pikchr\" \"Formatter\" \"(pikchr.c)\" fit\n";
7070
 }
7171
 style_header("PikchrShow");
7272
 CX("<style>");
73
- CX("div.content { padding-top: 0.5em }");
73
+ CX("div.content { padding-top: 0.5em }\n");
7474
 CX("#sbs-wrapper {"
7575
 "display: flex; flex-direction: column;"
76
- "}");
76
+ "}\n");
7777
 CX("#sbs-wrapper > * {"
7878
 "margin: 0 0.25em 0.5em 0; flex: 1 10 auto;"
7979
 "align-self: stretch;"
80
- "}");
80
+ "}\n");
8181
 CX("#sbs-wrapper textarea {"
8282
 "max-width: initial; flex: 1 1 auto;"
83
- "}");
83
+ "}\n");
8484
 CX("#pikchrshow-output, #pikchrshow-form"
8585
 "{display: flex; flex-direction: column; align-items: stretch;}");
86
- CX("#pikchrshow-form > * {margin: 0.25em 0}");
87
- CX("#pikchrshow-output {flex: 5 1 auto; padding: 0}");
86
+ CX("#pikchrshow-form > * {margin: 0.25em 0}\n");
87
+ CX("#pikchrshow-output {flex: 5 1 auto; padding: 0}\n");
8888
 CX("#pikchrshow-output > pre, "
8989
 "#pikchrshow-output > pre > div, "
9090
 "#pikchrshow-output > pre > div > pre "
91
- "{margin: 0; padding: 0}");
91
+ "{margin: 0; padding: 0}\n");
9292
 CX("#pikchrshow-output.error > pre "
9393
 /* Server-side error report */
94
- "{padding: 0.5em}");
94
+ "{padding: 0.5em}\n");
9595
 CX("#pikchrshow-controls {" /* where the buttons live */
9696
 "display: flex; flex-direction: row; "
9797
 "align-items: center; flex-wrap: wrap;"
98
- "}");
98
+ "}\n");
9999
 CX("#pikchrshow-controls > * {"
100100
 "display: inline; margin: 0 0.25em 0.5em 0;"
101
- "}");
101
+ "}\n");
102102
 CX("#pikchrshow-output-wrapper label {"
103103
 "cursor: pointer;"
104
- "}");
104
+ "}\n");
105105
 CX("body.pikchrshow .input-with-label > * {"
106106
 "margin: 0 0.2em; cursor: pointer;"
107
- "}");
107
+ "}\n");
108108
 CX("#pikchrshow-output.dark-mode svg {"
109109
 /* Flip the colors to approximate a dark theme look */
110110
 "filter: invert(1) hue-rotate(180deg);"
111
- "}");
111
+ "}\n");
112112
 CX("#pikchrshow-output-wrapper {"
113113
 "padding: 0.25em 0.5em; border-radius: 0.25em;"
114114
 "border-width: 1px;"/*some skins disable fieldset borders*/
115
- "}");
116
- CX("#pikchrshow-output-wrapper > legend {"
117
- "display: flex; flex-direction: row;"
118
- "align-items: center;"
119
- "}");
120
- CX("#pikchrshow-output-wrapper > legend > *:not(.copy-button)"
121
- "{margin-right: 0.5em}");
122
- CX(".dragover {border: 3px dotted rgba(0,255,0,0.6)}");
115
+ "}\n");
116
+ CX("#pikchrshow-output-wrapper > legend > *:not(.copy-button){"
117
+ "margin-right: 0.5em; vertical-align: middle;"
118
+ "}\n");
119
+ CX("body.pikchrshow .v-align-middle{"
120
+ "vertical-align: middle"
121
+ "}\n");
122
+ CX(".dragover {border: 3px dotted rgba(0,255,0,0.6)}\n");
123123
 CX("</style>");
124124
 CX("<div>Input pikchr code and tap Preview to render it:</div>");
125125
 CX("<div id='sbs-wrapper'>");
126126
 CX("<div id='pikchrshow-form'>");
127127
 CX("<textarea id='content' name='content' rows='15'>%s</textarea>",
@@ -132,11 +132,14 @@
132132
 "Dark mode?",
133133
 "1", flipColors, 0);
134134
 CX("</div>"/*#pikchrshow-controls*/);
135135
 CX("</div>"/*#pikchrshow-form*/);
136136
 CX("<fieldset id='pikchrshow-output-wrapper'>");
137
- CX("<legend></legend>");
137
+ CX("<legend></legend>"
138
+ /* Reminder: Firefox does not properly flexbox a LEGEND element,
139
+ always flowing it in column mode (at least when its fieldset
140
+ has a flexbox column layout). */);
138141
 CX("<div id='pikchrshow-output'>");
139142
 if(*zContent){
140143
 int w = 0, h = 0;
141144
 char *zOut = pikchr(zContent, "pikchr", 0, &w, &h);
142145
 if( w>0 && h>0 ){
@@ -147,15 +150,15 @@
147150
 CX("<pre>\n%s\n</pre>\n", zOut);
148151
 }
149152
 fossil_free(zOut);
150153
 }
151154
 CX("</div>"/*#pikchrshow-output*/);
152
- CX("</fieldset>");
155
+ CX("</fieldset>"/*#pikchrshow-output-wrapper*/);
153156
 CX("</div>"/*sbs-wrapper*/);
154157
 if(!builtin_bundle_all_fossil_js_apis()){
155158
 builtin_emit_fossil_js_apis("dom", "fetch", "copybutton",
156159
 "popupwidget", 0);
157160
 }
158161
 builtin_emit_fossil_js_apis("page.pikchrshow", 0);
159162
 builtin_fulfill_js_requests();
160163
 style_footer();
161164
 }
162165
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -68,60 +68,60 @@
68 "arrow <-> down from last box.s\n"
69 "box same \"Pikchr\" \"Formatter\" \"(pikchr.c)\" fit\n";
70 }
71 style_header("PikchrShow");
72 CX("<style>");
73 CX("div.content { padding-top: 0.5em }");
74 CX("#sbs-wrapper {"
75 "display: flex; flex-direction: column;"
76 "}");
77 CX("#sbs-wrapper > * {"
78 "margin: 0 0.25em 0.5em 0; flex: 1 10 auto;"
79 "align-self: stretch;"
80 "}");
81 CX("#sbs-wrapper textarea {"
82 "max-width: initial; flex: 1 1 auto;"
83 "}");
84 CX("#pikchrshow-output, #pikchrshow-form"
85 "{display: flex; flex-direction: column; align-items: stretch;}");
86 CX("#pikchrshow-form > * {margin: 0.25em 0}");
87 CX("#pikchrshow-output {flex: 5 1 auto; padding: 0}");
88 CX("#pikchrshow-output > pre, "
89 "#pikchrshow-output > pre > div, "
90 "#pikchrshow-output > pre > div > pre "
91 "{margin: 0; padding: 0}");
92 CX("#pikchrshow-output.error > pre "
93 /* Server-side error report */
94 "{padding: 0.5em}");
95 CX("#pikchrshow-controls {" /* where the buttons live */
96 "display: flex; flex-direction: row; "
97 "align-items: center; flex-wrap: wrap;"
98 "}");
99 CX("#pikchrshow-controls > * {"
100 "display: inline; margin: 0 0.25em 0.5em 0;"
101 "}");
102 CX("#pikchrshow-output-wrapper label {"
103 "cursor: pointer;"
104 "}");
105 CX("body.pikchrshow .input-with-label > * {"
106 "margin: 0 0.2em; cursor: pointer;"
107 "}");
108 CX("#pikchrshow-output.dark-mode svg {"
109 /* Flip the colors to approximate a dark theme look */
110 "filter: invert(1) hue-rotate(180deg);"
111 "}");
112 CX("#pikchrshow-output-wrapper {"
113 "padding: 0.25em 0.5em; border-radius: 0.25em;"
114 "border-width: 1px;"/*some skins disable fieldset borders*/
115 "}");
116 CX("#pikchrshow-output-wrapper > legend {"
117 "display: flex; flex-direction: row;"
118 "align-items: center;"
119 "}");
120 CX("#pikchrshow-output-wrapper > legend > *:not(.copy-button)"
121 "{margin-right: 0.5em}");
122 CX(".dragover {border: 3px dotted rgba(0,255,0,0.6)}");
123 CX("</style>");
124 CX("<div>Input pikchr code and tap Preview to render it:</div>");
125 CX("<div id='sbs-wrapper'>");
126 CX("<div id='pikchrshow-form'>");
127 CX("<textarea id='content' name='content' rows='15'>%s</textarea>",
@@ -132,11 +132,14 @@
132 "Dark mode?",
133 "1", flipColors, 0);
134 CX("</div>"/*#pikchrshow-controls*/);
135 CX("</div>"/*#pikchrshow-form*/);
136 CX("<fieldset id='pikchrshow-output-wrapper'>");
137 CX("<legend></legend>");
 
 
 
138 CX("<div id='pikchrshow-output'>");
139 if(*zContent){
140 int w = 0, h = 0;
141 char *zOut = pikchr(zContent, "pikchr", 0, &w, &h);
142 if( w>0 && h>0 ){
@@ -147,15 +150,15 @@
147 CX("<pre>\n%s\n</pre>\n", zOut);
148 }
149 fossil_free(zOut);
150 }
151 CX("</div>"/*#pikchrshow-output*/);
152 CX("</fieldset>");
153 CX("</div>"/*sbs-wrapper*/);
154 if(!builtin_bundle_all_fossil_js_apis()){
155 builtin_emit_fossil_js_apis("dom", "fetch", "copybutton",
156 "popupwidget", 0);
157 }
158 builtin_emit_fossil_js_apis("page.pikchrshow", 0);
159 builtin_fulfill_js_requests();
160 style_footer();
161 }
162
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -68,60 +68,60 @@
68 "arrow <-> down from last box.s\n"
69 "box same \"Pikchr\" \"Formatter\" \"(pikchr.c)\" fit\n";
70 }
71 style_header("PikchrShow");
72 CX("<style>");
73 CX("div.content { padding-top: 0.5em }\n");
74 CX("#sbs-wrapper {"
75 "display: flex; flex-direction: column;"
76 "}\n");
77 CX("#sbs-wrapper > * {"
78 "margin: 0 0.25em 0.5em 0; flex: 1 10 auto;"
79 "align-self: stretch;"
80 "}\n");
81 CX("#sbs-wrapper textarea {"
82 "max-width: initial; flex: 1 1 auto;"
83 "}\n");
84 CX("#pikchrshow-output, #pikchrshow-form"
85 "{display: flex; flex-direction: column; align-items: stretch;}");
86 CX("#pikchrshow-form > * {margin: 0.25em 0}\n");
87 CX("#pikchrshow-output {flex: 5 1 auto; padding: 0}\n");
88 CX("#pikchrshow-output > pre, "
89 "#pikchrshow-output > pre > div, "
90 "#pikchrshow-output > pre > div > pre "
91 "{margin: 0; padding: 0}\n");
92 CX("#pikchrshow-output.error > pre "
93 /* Server-side error report */
94 "{padding: 0.5em}\n");
95 CX("#pikchrshow-controls {" /* where the buttons live */
96 "display: flex; flex-direction: row; "
97 "align-items: center; flex-wrap: wrap;"
98 "}\n");
99 CX("#pikchrshow-controls > * {"
100 "display: inline; margin: 0 0.25em 0.5em 0;"
101 "}\n");
102 CX("#pikchrshow-output-wrapper label {"
103 "cursor: pointer;"
104 "}\n");
105 CX("body.pikchrshow .input-with-label > * {"
106 "margin: 0 0.2em; cursor: pointer;"
107 "}\n");
108 CX("#pikchrshow-output.dark-mode svg {"
109 /* Flip the colors to approximate a dark theme look */
110 "filter: invert(1) hue-rotate(180deg);"
111 "}\n");
112 CX("#pikchrshow-output-wrapper {"
113 "padding: 0.25em 0.5em; border-radius: 0.25em;"
114 "border-width: 1px;"/*some skins disable fieldset borders*/
115 "}\n");
116 CX("#pikchrshow-output-wrapper > legend > *:not(.copy-button){"
117 "margin-right: 0.5em; vertical-align: middle;"
118 "}\n");
119 CX("body.pikchrshow .v-align-middle{"
120 "vertical-align: middle"
121 "}\n");
122 CX(".dragover {border: 3px dotted rgba(0,255,0,0.6)}\n");
123 CX("</style>");
124 CX("<div>Input pikchr code and tap Preview to render it:</div>");
125 CX("<div id='sbs-wrapper'>");
126 CX("<div id='pikchrshow-form'>");
127 CX("<textarea id='content' name='content' rows='15'>%s</textarea>",
@@ -132,11 +132,14 @@
132 "Dark mode?",
133 "1", flipColors, 0);
134 CX("</div>"/*#pikchrshow-controls*/);
135 CX("</div>"/*#pikchrshow-form*/);
136 CX("<fieldset id='pikchrshow-output-wrapper'>");
137 CX("<legend></legend>"
138 /* Reminder: Firefox does not properly flexbox a LEGEND element,
139 always flowing it in column mode (at least when its fieldset
140 has a flexbox column layout). */);
141 CX("<div id='pikchrshow-output'>");
142 if(*zContent){
143 int w = 0, h = 0;
144 char *zOut = pikchr(zContent, "pikchr", 0, &w, &h);
145 if( w>0 && h>0 ){
@@ -147,15 +150,15 @@
150 CX("<pre>\n%s\n</pre>\n", zOut);
151 }
152 fossil_free(zOut);
153 }
154 CX("</div>"/*#pikchrshow-output*/);
155 CX("</fieldset>"/*#pikchrshow-output-wrapper*/);
156 CX("</div>"/*sbs-wrapper*/);
157 if(!builtin_bundle_all_fossil_js_apis()){
158 builtin_emit_fossil_js_apis("dom", "fetch", "copybutton",
159 "popupwidget", 0);
160 }
161 builtin_emit_fossil_js_apis("page.pikchrshow", 0);
162 builtin_fulfill_js_requests();
163 style_footer();
164 }
165

Keyboard Shortcuts

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