Fossil SCM

Consolidated some CSS. Minor pikchrshow layout tweaks.

stephan 2022-06-06 20:54 UTC pikchrshow-wasm
Commit ae8f2ebe4b61fb0e190de416aba03009bfbf397ad1e78d1e285d30d52db41425
Parent 32526f32e795846…
3 files changed +14 -6 +11 -7 +6 -19
~ src/default.css ~ src/pikchrshow.c ~ src/style.pikchrshow.css
M src/default.css
+14 -6
--- src/default.css
+++ src/default.css
@@ -1007,10 +1007,13 @@
10071007
 background-color: #ffb;
10081008
 }
10091009
 label {
10101010
 white-space: nowrap;
10111011
 }
1012
+label[for] {
1013
+ cursor: pointer;
1014
+}
10121015
 .copy-button {
10131016
 display: inline-block;
10141017
 width: 14px;
10151018
 height: 14px;
10161019
 /*Note: .24em is slightly smaller than the average width of a normal space.*/
@@ -1075,16 +1078,21 @@
10751078
 }
10761079
 .warning {
10771080
 color: black;
10781081
 background: yellow;
10791082
 }
1080
-.hidden {
1081
- /* The framework-wide way of hiding elements is to assign them this
1082
- CSS class. To make them visible again, remove it. The !important
1083
- qualifiers are unfortunate but sometimes necessary when hidden
1084
- element has other classes which specify visibility-related
1085
- options. */
1083
+.hidden, .initially-hidden {
1084
+ /* The framework-wide way of hiding elements is to assign them th
1085
+ .hidden class. To make them visible again, remove it. The
1086
+ !important qualifiers are unfortunate but sometimes necessary
1087
+ when hidden element has other classes which specify
1088
+ visibility-related options. The .initially-hidden class is for
1089
+ pages which need to show, e.g., a progress widget while a large
1090
+ WASM blob loads. Elements aside from that load-time widget can be
1091
+ made .initially-hidden and then have that class removed once the
1092
+ long-running startup process is done. See /pikchrshow for an
1093
+ example. */
10861094
 position: absolute !important;
10871095
 opacity: 0 !important;
10881096
 pointer-events: none !important;
10891097
 display: none !important;
10901098
 }
10911099
--- src/default.css
+++ src/default.css
@@ -1007,10 +1007,13 @@
1007 background-color: #ffb;
1008 }
1009 label {
1010 white-space: nowrap;
1011 }
 
 
 
1012 .copy-button {
1013 display: inline-block;
1014 width: 14px;
1015 height: 14px;
1016 /*Note: .24em is slightly smaller than the average width of a normal space.*/
@@ -1075,16 +1078,21 @@
1075 }
1076 .warning {
1077 color: black;
1078 background: yellow;
1079 }
1080 .hidden {
1081 /* The framework-wide way of hiding elements is to assign them this
1082 CSS class. To make them visible again, remove it. The !important
1083 qualifiers are unfortunate but sometimes necessary when hidden
1084 element has other classes which specify visibility-related
1085 options. */
 
 
 
 
 
1086 position: absolute !important;
1087 opacity: 0 !important;
1088 pointer-events: none !important;
1089 display: none !important;
1090 }
1091
--- src/default.css
+++ src/default.css
@@ -1007,10 +1007,13 @@
1007 background-color: #ffb;
1008 }
1009 label {
1010 white-space: nowrap;
1011 }
1012 label[for] {
1013 cursor: pointer;
1014 }
1015 .copy-button {
1016 display: inline-block;
1017 width: 14px;
1018 height: 14px;
1019 /*Note: .24em is slightly smaller than the average width of a normal space.*/
@@ -1075,16 +1078,21 @@
1078 }
1079 .warning {
1080 color: black;
1081 background: yellow;
1082 }
1083 .hidden, .initially-hidden {
1084 /* The framework-wide way of hiding elements is to assign them th
1085 .hidden class. To make them visible again, remove it. The
1086 !important qualifiers are unfortunate but sometimes necessary
1087 when hidden element has other classes which specify
1088 visibility-related options. The .initially-hidden class is for
1089 pages which need to show, e.g., a progress widget while a large
1090 WASM blob loads. Elements aside from that load-time widget can be
1091 made .initially-hidden and then have that class removed once the
1092 long-running startup process is done. See /pikchrshow for an
1093 example. */
1094 position: absolute !important;
1095 opacity: 0 !important;
1096 pointer-events: none !important;
1097 display: none !important;
1098 }
1099
M src/pikchrshow.c
+11 -7
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -230,22 +230,20 @@
230230
 blob_reset(&bIn);
231231
 return isErr;
232232
 }
233233
234234
 /*
235
-** WEBPAGE: pikchrshowcs*
235
+** Legacy impl of /pikchrshow. pikchrshow_page() will delegate to
236
+** this one if the "legacy" or "ajax" request arguments are set.
236237
 **
237238
 ** A pikchr code editor and previewer, allowing users to experiment
238239
 ** with pikchr code or prototype it for use in copy/pasting into forum
239240
 ** posts, wiki pages, or embedded docs. This version of pikchrshow
240241
 ** uses JavaScript to send pikchr code to the server for
241242
 ** processing. The newer /pikchrshow applications runs pikchr on the
242243
 ** client machine, without the need for back-and-forth network
243244
 ** traffic.
244
-**
245
-** It optionally accepts a p=pikchr-script-code URL parameter or POST
246
-** value to pre-populate the editor with that code.
247245
 */
248246
 void pikchrshowcs_page(void){
249247
 const char *zContent = 0;
250248
 int isDark; /* true if the current skin is "dark" */
251249
 int pikFlags =
@@ -393,12 +391,16 @@
393391
 ** A pikchr code editor and previewer, allowing users to experiment
394392
 ** with pikchr code or prototype it for use in copy/pasting into forum
395393
 ** posts, wiki pages, or embedded docs. This version of pikchrshow
396394
 ** uses WebAssembly to run entirely in the client browser, without a
397395
 ** need for back-and-forth client/server traffic to perform the
398
-** rendering. The "legacy" version of this application can be found at
399
-** /pikchrshowcs.
396
+** rendering. The "legacy" version of this application, which sends
397
+** all input to the server for rendering, can be accessed by adding
398
+** the "legacy" URL argument.
399
+**
400
+** It optionally accepts a p=pikchr-script-code URL parameter or POST
401
+** value to pre-populate the editor with that code.
400402
 */
401403
 void pikchrshow_page(void){
402404
 const char *zContent = 0;
403405
404406
 if(P("legacy") || P("ajax")){
@@ -417,10 +419,11 @@
417419
 "box rad 10px \"Markdown\" \"Formatter\" \"(markdown.c)\" fit\n"
418420
 "arrow right 200% \"HTML+SVG\" \"Output\"\n"
419421
 "arrow <-> down from last box.s\n"
420422
 "box same \"Pikchr\" \"Formatter\" \"(pikchr.c)\" fit\n";
421423
 }
424
+ /* Wasm load/init progress widget... */
422425
 CX("<div class='emscripten'>"); {
423426
 CX("<figure id='module-spinner'>");
424427
 CX("<div class='spinner'></div>");
425428
 CX("<div class='center'><strong>Initializing app...</strong></div>");
426429
 CX("<div class='center'>");
@@ -432,10 +435,11 @@
432435
 CX("</figure>");
433436
 CX("<div class='emscripten' id='module-status'>Downloading...</div>");
434437
 CX("<progress value='0' max='100' id='module-progress' hidden='1'>"
435438
 "</progress>");
436439
 } CX("</div><!-- .emscripten -->");
440
+ /* Main view... */
437441
 CX("<div id='view-split' class='app-view initially-hidden'>"); {
438442
 CX("<div class='fieldset options collapsible'>"); {
439443
 CX("<span class='legend'><span>Options</span></span>");
440444
 CX("<div>");
441445
 CX("<span class='labeled-input'>");
@@ -470,11 +474,11 @@
470474
 CX("</div><!-- options wrapper -->");
471475
 } CX("</div><!-- .fieldset -->");
472476
 CX("<div id='main-wrapper' class=''>"); {
473477
 CX("<div class='zone-wrapper input'>"); {
474478
 CX("<textarea id='input'");
475
- CX("placeholder='Shell input. Ctrl-enter/shift-enter runs it.'>");
479
+ CX("placeholder='Pikchr input. Ctrl-enter/shift-enter runs it.'>");
476480
 CX("/**\n");
477481
 CX(" Use ctrl-enter or shift-enter to execute\n");
478482
 CX(" pikchr code. If only a subset is currently\n");
479483
 CX(" selected, only that part is evaluated.\n*/\n");
480484
 CX("%s</textarea>",zContent/*safe-for-%s*/);
481485
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -230,22 +230,20 @@
230 blob_reset(&bIn);
231 return isErr;
232 }
233
234 /*
235 ** WEBPAGE: pikchrshowcs*
 
236 **
237 ** A pikchr code editor and previewer, allowing users to experiment
238 ** with pikchr code or prototype it for use in copy/pasting into forum
239 ** posts, wiki pages, or embedded docs. This version of pikchrshow
240 ** uses JavaScript to send pikchr code to the server for
241 ** processing. The newer /pikchrshow applications runs pikchr on the
242 ** client machine, without the need for back-and-forth network
243 ** traffic.
244 **
245 ** It optionally accepts a p=pikchr-script-code URL parameter or POST
246 ** value to pre-populate the editor with that code.
247 */
248 void pikchrshowcs_page(void){
249 const char *zContent = 0;
250 int isDark; /* true if the current skin is "dark" */
251 int pikFlags =
@@ -393,12 +391,16 @@
393 ** A pikchr code editor and previewer, allowing users to experiment
394 ** with pikchr code or prototype it for use in copy/pasting into forum
395 ** posts, wiki pages, or embedded docs. This version of pikchrshow
396 ** uses WebAssembly to run entirely in the client browser, without a
397 ** need for back-and-forth client/server traffic to perform the
398 ** rendering. The "legacy" version of this application can be found at
399 ** /pikchrshowcs.
 
 
 
 
400 */
401 void pikchrshow_page(void){
402 const char *zContent = 0;
403
404 if(P("legacy") || P("ajax")){
@@ -417,10 +419,11 @@
417 "box rad 10px \"Markdown\" \"Formatter\" \"(markdown.c)\" fit\n"
418 "arrow right 200% \"HTML+SVG\" \"Output\"\n"
419 "arrow <-> down from last box.s\n"
420 "box same \"Pikchr\" \"Formatter\" \"(pikchr.c)\" fit\n";
421 }
 
422 CX("<div class='emscripten'>"); {
423 CX("<figure id='module-spinner'>");
424 CX("<div class='spinner'></div>");
425 CX("<div class='center'><strong>Initializing app...</strong></div>");
426 CX("<div class='center'>");
@@ -432,10 +435,11 @@
432 CX("</figure>");
433 CX("<div class='emscripten' id='module-status'>Downloading...</div>");
434 CX("<progress value='0' max='100' id='module-progress' hidden='1'>"
435 "</progress>");
436 } CX("</div><!-- .emscripten -->");
 
437 CX("<div id='view-split' class='app-view initially-hidden'>"); {
438 CX("<div class='fieldset options collapsible'>"); {
439 CX("<span class='legend'><span>Options</span></span>");
440 CX("<div>");
441 CX("<span class='labeled-input'>");
@@ -470,11 +474,11 @@
470 CX("</div><!-- options wrapper -->");
471 } CX("</div><!-- .fieldset -->");
472 CX("<div id='main-wrapper' class=''>"); {
473 CX("<div class='zone-wrapper input'>"); {
474 CX("<textarea id='input'");
475 CX("placeholder='Shell input. Ctrl-enter/shift-enter runs it.'>");
476 CX("/**\n");
477 CX(" Use ctrl-enter or shift-enter to execute\n");
478 CX(" pikchr code. If only a subset is currently\n");
479 CX(" selected, only that part is evaluated.\n*/\n");
480 CX("%s</textarea>",zContent/*safe-for-%s*/);
481
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -230,22 +230,20 @@
230 blob_reset(&bIn);
231 return isErr;
232 }
233
234 /*
235 ** Legacy impl of /pikchrshow. pikchrshow_page() will delegate to
236 ** this one if the "legacy" or "ajax" request arguments are set.
237 **
238 ** A pikchr code editor and previewer, allowing users to experiment
239 ** with pikchr code or prototype it for use in copy/pasting into forum
240 ** posts, wiki pages, or embedded docs. This version of pikchrshow
241 ** uses JavaScript to send pikchr code to the server for
242 ** processing. The newer /pikchrshow applications runs pikchr on the
243 ** client machine, without the need for back-and-forth network
244 ** traffic.
 
 
 
245 */
246 void pikchrshowcs_page(void){
247 const char *zContent = 0;
248 int isDark; /* true if the current skin is "dark" */
249 int pikFlags =
@@ -393,12 +391,16 @@
391 ** A pikchr code editor and previewer, allowing users to experiment
392 ** with pikchr code or prototype it for use in copy/pasting into forum
393 ** posts, wiki pages, or embedded docs. This version of pikchrshow
394 ** uses WebAssembly to run entirely in the client browser, without a
395 ** need for back-and-forth client/server traffic to perform the
396 ** rendering. The "legacy" version of this application, which sends
397 ** all input to the server for rendering, can be accessed by adding
398 ** the "legacy" URL argument.
399 **
400 ** It optionally accepts a p=pikchr-script-code URL parameter or POST
401 ** value to pre-populate the editor with that code.
402 */
403 void pikchrshow_page(void){
404 const char *zContent = 0;
405
406 if(P("legacy") || P("ajax")){
@@ -417,10 +419,11 @@
419 "box rad 10px \"Markdown\" \"Formatter\" \"(markdown.c)\" fit\n"
420 "arrow right 200% \"HTML+SVG\" \"Output\"\n"
421 "arrow <-> down from last box.s\n"
422 "box same \"Pikchr\" \"Formatter\" \"(pikchr.c)\" fit\n";
423 }
424 /* Wasm load/init progress widget... */
425 CX("<div class='emscripten'>"); {
426 CX("<figure id='module-spinner'>");
427 CX("<div class='spinner'></div>");
428 CX("<div class='center'><strong>Initializing app...</strong></div>");
429 CX("<div class='center'>");
@@ -432,10 +435,11 @@
435 CX("</figure>");
436 CX("<div class='emscripten' id='module-status'>Downloading...</div>");
437 CX("<progress value='0' max='100' id='module-progress' hidden='1'>"
438 "</progress>");
439 } CX("</div><!-- .emscripten -->");
440 /* Main view... */
441 CX("<div id='view-split' class='app-view initially-hidden'>"); {
442 CX("<div class='fieldset options collapsible'>"); {
443 CX("<span class='legend'><span>Options</span></span>");
444 CX("<div>");
445 CX("<span class='labeled-input'>");
@@ -470,11 +474,11 @@
474 CX("</div><!-- options wrapper -->");
475 } CX("</div><!-- .fieldset -->");
476 CX("<div id='main-wrapper' class=''>"); {
477 CX("<div class='zone-wrapper input'>"); {
478 CX("<textarea id='input'");
479 CX("placeholder='Pikchr input. Ctrl-enter/shift-enter runs it.'>");
480 CX("/**\n");
481 CX(" Use ctrl-enter or shift-enter to execute\n");
482 CX(" pikchr code. If only a subset is currently\n");
483 CX(" selected, only that part is evaluated.\n*/\n");
484 CX("%s</textarea>",zContent/*safe-for-%s*/);
485
M src/style.pikchrshow.css
+6 -19
--- src/style.pikchrshow.css
+++ src/style.pikchrshow.css
@@ -37,17 +37,17 @@
3737
 flex: 1 1 auto;
3838
 margin: 0.5em 0;
3939
 overflow: hidden;
4040
 }
4141
 #main-wrapper.side-by-side {
42
- flex-direction: row-reverse;
42
+ flex-direction: row;
4343
 }
4444
 #main-wrapper.swapio {
4545
 flex-direction: column;
4646
 }
4747
 #main-wrapper.side-by-side.swapio {
48
- flex-direction: row;
48
+ flex-direction: row-reverse;
4949
 }
5050
 #main-wrapper .splitter-handle {
5151
 border: 1px outset;
5252
 border-radius: 0.25em;
5353
 }
@@ -92,14 +92,14 @@
9292
 }
9393
 #pikchr-output-wrapper.text > #pikchr-output > textarea {
9494
 flex: 1 1 auto;
9595
 }
9696
 .zone-wrapper textarea {
97
- flex: 10 1 auto;
97
+ flex: 1 1 auto;
9898
 }
9999
 .zone-wrapper.input {
100
- /*min-height: 10em;*/
100
+ min-height: 10em;
101101
 /*width: 50%;*/
102102
 min-width: 20em;
103103
 }
104104
 .zone-wrapper.output {
105105
 overflow: auto;
@@ -112,25 +112,12 @@
112112
 flex-wrap: wrap;
113113
 }
114114
 .button-bar button {
115115
 margin: 0.25em 1em;
116116
 }
117
-label[for] {
118
- cursor: pointer;
119
-}
120
-.error {
121
- color: red;
122
- background-color: yellow;
123
-}
124
-.hidden, .initially-hidden {
125
- position: absolute !important;
126
- opacity: 0 !important;
127
- pointer-events: none !important;
128
- display: none !important;
129
-}
130117
 /* Safari supports neither styling of nor event handling on a
131
- fieldset legend, so we emulate a fieldset-like widget. */
118
+ fieldset legend, so we emulate a fieldset-like widget. */
132119
 .fieldset {
133120
 border-radius: 0.5em;
134121
 border: 1px inset;
135122
 border-top: none;
136123
 display: flex;
@@ -182,11 +169,11 @@
182169
 background: #0002;
183170
 display: flex;
184171
 align-items: center;
185172
 }
186173
 span.labeled-input > *:nth-child(2) {
187
- margin-left: 0.5em;
174
+ margin-left: 0.3em;
188175
 }
189176
 .center { text-align: center; }
190177
 .app-view {
191178
 flex: 20 1 auto;
192179
 }
193180
--- src/style.pikchrshow.css
+++ src/style.pikchrshow.css
@@ -37,17 +37,17 @@
37 flex: 1 1 auto;
38 margin: 0.5em 0;
39 overflow: hidden;
40 }
41 #main-wrapper.side-by-side {
42 flex-direction: row-reverse;
43 }
44 #main-wrapper.swapio {
45 flex-direction: column;
46 }
47 #main-wrapper.side-by-side.swapio {
48 flex-direction: row;
49 }
50 #main-wrapper .splitter-handle {
51 border: 1px outset;
52 border-radius: 0.25em;
53 }
@@ -92,14 +92,14 @@
92 }
93 #pikchr-output-wrapper.text > #pikchr-output > textarea {
94 flex: 1 1 auto;
95 }
96 .zone-wrapper textarea {
97 flex: 10 1 auto;
98 }
99 .zone-wrapper.input {
100 /*min-height: 10em;*/
101 /*width: 50%;*/
102 min-width: 20em;
103 }
104 .zone-wrapper.output {
105 overflow: auto;
@@ -112,25 +112,12 @@
112 flex-wrap: wrap;
113 }
114 .button-bar button {
115 margin: 0.25em 1em;
116 }
117 label[for] {
118 cursor: pointer;
119 }
120 .error {
121 color: red;
122 background-color: yellow;
123 }
124 .hidden, .initially-hidden {
125 position: absolute !important;
126 opacity: 0 !important;
127 pointer-events: none !important;
128 display: none !important;
129 }
130 /* Safari supports neither styling of nor event handling on a
131 fieldset legend, so we emulate a fieldset-like widget. */
132 .fieldset {
133 border-radius: 0.5em;
134 border: 1px inset;
135 border-top: none;
136 display: flex;
@@ -182,11 +169,11 @@
182 background: #0002;
183 display: flex;
184 align-items: center;
185 }
186 span.labeled-input > *:nth-child(2) {
187 margin-left: 0.5em;
188 }
189 .center { text-align: center; }
190 .app-view {
191 flex: 20 1 auto;
192 }
193
--- src/style.pikchrshow.css
+++ src/style.pikchrshow.css
@@ -37,17 +37,17 @@
37 flex: 1 1 auto;
38 margin: 0.5em 0;
39 overflow: hidden;
40 }
41 #main-wrapper.side-by-side {
42 flex-direction: row;
43 }
44 #main-wrapper.swapio {
45 flex-direction: column;
46 }
47 #main-wrapper.side-by-side.swapio {
48 flex-direction: row-reverse;
49 }
50 #main-wrapper .splitter-handle {
51 border: 1px outset;
52 border-radius: 0.25em;
53 }
@@ -92,14 +92,14 @@
92 }
93 #pikchr-output-wrapper.text > #pikchr-output > textarea {
94 flex: 1 1 auto;
95 }
96 .zone-wrapper textarea {
97 flex: 1 1 auto;
98 }
99 .zone-wrapper.input {
100 min-height: 10em;
101 /*width: 50%;*/
102 min-width: 20em;
103 }
104 .zone-wrapper.output {
105 overflow: auto;
@@ -112,25 +112,12 @@
112 flex-wrap: wrap;
113 }
114 .button-bar button {
115 margin: 0.25em 1em;
116 }
 
 
 
 
 
 
 
 
 
 
 
 
 
117 /* Safari supports neither styling of nor event handling on a
118 fieldset legend, so we emulate a fieldset-like widget. */
119 .fieldset {
120 border-radius: 0.5em;
121 border: 1px inset;
122 border-top: none;
123 display: flex;
@@ -182,11 +169,11 @@
169 background: #0002;
170 display: flex;
171 align-items: center;
172 }
173 span.labeled-input > *:nth-child(2) {
174 margin-left: 0.3em;
175 }
176 .center { text-align: center; }
177 .app-view {
178 flex: 20 1 auto;
179 }
180

Keyboard Shortcuts

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