Fossil SCM

Minor /pikchrshow CSS cleanups.

stephan 2022-06-10 14:12 trunk
Commit 864ed8d0a391b5b4ba7d485fd274e280437e3ce027940c3074e625898b01466a
Parent 17ebe42d6183ed6…
3 files changed +1 -1 +1 -2 +11 -24
~ src/fossil.page.pikchrshowasm.js ~ src/pikchrshow.c ~ src/style.pikchrshow.css
M src/fossil.page.pikchrshowasm.js
+1 -1
--- src/fossil.page.pikchrshowasm.js
+++ src/fossil.page.pikchrshowasm.js
@@ -420,11 +420,11 @@
420420
 });
421421
 r.readAsArrayBuffer(f);
422422
 });
423423
424424
 EAll('fieldset.collapsible').forEach(function(fs){
425
- const btnToggle = E(fs,'legend > #btn-options-toggle'),
425
+ const btnToggle = E(fs,'legend > .fieldset-toggle'),
426426
 content = EAll(fs,':scope > div');
427427
 btnToggle.addEventListener('click', function(){
428428
 fs.classList.toggle('collapsed');
429429
 content.forEach((d)=>d.classList.toggle('hidden'));
430430
 }, false);
431431
--- src/fossil.page.pikchrshowasm.js
+++ src/fossil.page.pikchrshowasm.js
@@ -420,11 +420,11 @@
420 });
421 r.readAsArrayBuffer(f);
422 });
423
424 EAll('fieldset.collapsible').forEach(function(fs){
425 const btnToggle = E(fs,'legend > #btn-options-toggle'),
426 content = EAll(fs,':scope > div');
427 btnToggle.addEventListener('click', function(){
428 fs.classList.toggle('collapsed');
429 content.forEach((d)=>d.classList.toggle('hidden'));
430 }, false);
431
--- src/fossil.page.pikchrshowasm.js
+++ src/fossil.page.pikchrshowasm.js
@@ -420,11 +420,11 @@
420 });
421 r.readAsArrayBuffer(f);
422 });
423
424 EAll('fieldset.collapsible').forEach(function(fs){
425 const btnToggle = E(fs,'legend > .fieldset-toggle'),
426 content = EAll(fs,':scope > div');
427 btnToggle.addEventListener('click', function(){
428 fs.classList.toggle('collapsed');
429 content.forEach((d)=>d.classList.toggle('hidden'));
430 }, false);
431
M src/pikchrshow.c
+1 -2
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -438,11 +438,11 @@
438438
 "</progress>");
439439
 } CX("</div><!-- .emscripten -->");
440440
 /* Main view... */
441441
 CX("<div id='view-split' class='app-view initially-hidden'>"); {
442442
 CX("<fieldset class='options collapsible'>"); {
443
- CX("<legend><button id='btn-options-toggle'>Options</button></legend>");
443
+ CX("<legend><button class='fieldset-toggle'>Options</button></legend>");
444444
 CX("<div>");
445445
 CX("<span class='labeled-input'>");
446446
 CX("<input type='checkbox' id='opt-cb-sbs' ");
447447
 CX("data-csstgt='#main-wrapper' ");
448448
 CX("data-cssclass='side-by-side' ");
@@ -490,11 +490,10 @@
490490
 CX(" Use ctrl-enter or shift-enter to execute\n");
491491
 CX(" pikchr code. If only a subset is currently\n");
492492
 CX(" selected, only that part is evaluated.\n*/\n");
493493
 CX("%s</textarea></div>",zContent/*safe-for-%s*/);
494494
 } CX("</fieldset><!-- .zone-wrapper.input -->");
495
- /*CX("<div class='splitter-handle hidden'></div>");*/
496495
 CX("<fieldset class='zone-wrapper output'>"); {
497496
 CX("<legend><div class='button-bar'>");
498497
 CX("<button id='btn-render-mode'>Render Mode</button> ");
499498
 CX("<span style='white-space:nowrap'>"
500499
 "<span id='preview-copy-button' "
501500
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -438,11 +438,11 @@
438 "</progress>");
439 } CX("</div><!-- .emscripten -->");
440 /* Main view... */
441 CX("<div id='view-split' class='app-view initially-hidden'>"); {
442 CX("<fieldset class='options collapsible'>"); {
443 CX("<legend><button id='btn-options-toggle'>Options</button></legend>");
444 CX("<div>");
445 CX("<span class='labeled-input'>");
446 CX("<input type='checkbox' id='opt-cb-sbs' ");
447 CX("data-csstgt='#main-wrapper' ");
448 CX("data-cssclass='side-by-side' ");
@@ -490,11 +490,10 @@
490 CX(" Use ctrl-enter or shift-enter to execute\n");
491 CX(" pikchr code. If only a subset is currently\n");
492 CX(" selected, only that part is evaluated.\n*/\n");
493 CX("%s</textarea></div>",zContent/*safe-for-%s*/);
494 } CX("</fieldset><!-- .zone-wrapper.input -->");
495 /*CX("<div class='splitter-handle hidden'></div>");*/
496 CX("<fieldset class='zone-wrapper output'>"); {
497 CX("<legend><div class='button-bar'>");
498 CX("<button id='btn-render-mode'>Render Mode</button> ");
499 CX("<span style='white-space:nowrap'>"
500 "<span id='preview-copy-button' "
501
--- src/pikchrshow.c
+++ src/pikchrshow.c
@@ -438,11 +438,11 @@
438 "</progress>");
439 } CX("</div><!-- .emscripten -->");
440 /* Main view... */
441 CX("<div id='view-split' class='app-view initially-hidden'>"); {
442 CX("<fieldset class='options collapsible'>"); {
443 CX("<legend><button class='fieldset-toggle'>Options</button></legend>");
444 CX("<div>");
445 CX("<span class='labeled-input'>");
446 CX("<input type='checkbox' id='opt-cb-sbs' ");
447 CX("data-csstgt='#main-wrapper' ");
448 CX("data-cssclass='side-by-side' ");
@@ -490,11 +490,10 @@
490 CX(" Use ctrl-enter or shift-enter to execute\n");
491 CX(" pikchr code. If only a subset is currently\n");
492 CX(" selected, only that part is evaluated.\n*/\n");
493 CX("%s</textarea></div>",zContent/*safe-for-%s*/);
494 } CX("</fieldset><!-- .zone-wrapper.input -->");
 
495 CX("<fieldset class='zone-wrapper output'>"); {
496 CX("<legend><div class='button-bar'>");
497 CX("<button id='btn-render-mode'>Render Mode</button> ");
498 CX("<span style='white-space:nowrap'>"
499 "<span id='preview-copy-button' "
500
M src/style.pikchrshow.css
+11 -24
--- src/style.pikchrshow.css
+++ src/style.pikchrshow.css
@@ -24,11 +24,12 @@
2424
 to {transform: rotate(360deg);}
2525
 }
2626
2727
 /* The following styles are for app-level use. */
2828
 /* TODO: consolidate the WASM- and legacy-mode CSS into this file.
29
- Since they share a URI, they both load this file. */
29
+ Since both versions of /pikchrshow share a URI, they both load this
30
+ file. */
3031
 textarea {
3132
 font-family: monospace;
3233
 flex: 1 1 auto;
3334
 }
3435
 #main-wrapper {
@@ -52,21 +53,10 @@
5253
 flex-direction: column;
5354
 }
5455
 #main-wrapper.side-by-side.swapio {
5556
 flex-direction: row-reverse;
5657
 }
57
-#main-wrapper .splitter-handle {
58
- border: 1px outset;
59
- border-radius: 0.25em;
60
-}
61
-#main-wrapper.side-by-side .splitter-handle {
62
- width: 2px;
63
-}
64
-#main-wrapper:not(.side-by-side) .splitter-handle {
65
- width: 100%;
66
- height: 2px;
67
-}
6858
 .zone-wrapper{
6959
 display: flex;
7060
 margin: 0;
7161
 flex: 1 1 0%;
7262
 border-radius: 0.5em;
@@ -73,12 +63,10 @@
7363
 min-width: inherit/*important: resolves inability to scroll fieldset child element!*/;
7464
 padding: 0.35em 0 0 0;
7565
 }
7666
 .zone-wrapper > div {
7767
 display:flex;
78
- flex-direction: column;
79
- align-items: stretch;
8068
 flex: 1 1 0%;
8169
 }
8270
 .zone-wrapper.output {
8371
 }
8472
 #main-wrapper.side-by-side .zone-wrapper {
@@ -133,20 +121,20 @@
133121
 .zone-wrapper.output {
134122
 overflow: auto;
135123
 justify-content: space-between;
136124
 }
137125
 .button-bar {
138
- /*display: flex;
126
+ display: flex;
139127
 flex-wrap: wrap;
140
- align-items: center;*/
128
+ align-items: center;
129
+ align-content: space-between;
130
+ justify-content: flex-start;
141131
 }
142132
 .button-bar > * {
143
- margin-top: 0.1em/*avoid crowding if the controls wrap*/;
144
- vertical-align: middle;
145
-}
146
-.button-bar > * + * /*all children except the first*/ {
147
- margin-left: 0.65em;
133
+ margin: 0.05em 0.5em 0.05em 0;
134
+ flex: 0 1 auto;
135
+ align-self: auto;
148136
 }
149137
 fieldset.options {
150138
 border-radius: 0.5em;
151139
 border: 1px inset;
152140
 display: flex;
@@ -156,19 +144,18 @@
156144
 fieldset.options > div {
157145
 display: flex;
158146
 flex-wrap: wrap;
159147
 font-size: 85%;
160148
 }
161
-fieldset.options > legend > #btn-options-toggle::after {
149
+fieldset.collapsible.options > legend > .fieldset-toggle::after {
162150
 content: " [hide]";
163151
 position: relative;
164152
 }
165
-fieldset.options.collapsed > legend > #btn-options-toggle::after {
153
+fieldset.collapsible.collapsed > legend > .fieldset-toggle::after {
166154
 content: " [show]";
167155
 position: relative;
168156
 }
169
-
170157
 span.labeled-input {
171158
 padding: 0.25em;
172159
 margin: 0.25em 0.5em;
173160
 border-radius: 0.25em;
174161
 white-space: nowrap;
175162
--- src/style.pikchrshow.css
+++ src/style.pikchrshow.css
@@ -24,11 +24,12 @@
24 to {transform: rotate(360deg);}
25 }
26
27 /* The following styles are for app-level use. */
28 /* TODO: consolidate the WASM- and legacy-mode CSS into this file.
29 Since they share a URI, they both load this file. */
 
30 textarea {
31 font-family: monospace;
32 flex: 1 1 auto;
33 }
34 #main-wrapper {
@@ -52,21 +53,10 @@
52 flex-direction: column;
53 }
54 #main-wrapper.side-by-side.swapio {
55 flex-direction: row-reverse;
56 }
57 #main-wrapper .splitter-handle {
58 border: 1px outset;
59 border-radius: 0.25em;
60 }
61 #main-wrapper.side-by-side .splitter-handle {
62 width: 2px;
63 }
64 #main-wrapper:not(.side-by-side) .splitter-handle {
65 width: 100%;
66 height: 2px;
67 }
68 .zone-wrapper{
69 display: flex;
70 margin: 0;
71 flex: 1 1 0%;
72 border-radius: 0.5em;
@@ -73,12 +63,10 @@
73 min-width: inherit/*important: resolves inability to scroll fieldset child element!*/;
74 padding: 0.35em 0 0 0;
75 }
76 .zone-wrapper > div {
77 display:flex;
78 flex-direction: column;
79 align-items: stretch;
80 flex: 1 1 0%;
81 }
82 .zone-wrapper.output {
83 }
84 #main-wrapper.side-by-side .zone-wrapper {
@@ -133,20 +121,20 @@
133 .zone-wrapper.output {
134 overflow: auto;
135 justify-content: space-between;
136 }
137 .button-bar {
138 /*display: flex;
139 flex-wrap: wrap;
140 align-items: center;*/
 
 
141 }
142 .button-bar > * {
143 margin-top: 0.1em/*avoid crowding if the controls wrap*/;
144 vertical-align: middle;
145 }
146 .button-bar > * + * /*all children except the first*/ {
147 margin-left: 0.65em;
148 }
149 fieldset.options {
150 border-radius: 0.5em;
151 border: 1px inset;
152 display: flex;
@@ -156,19 +144,18 @@
156 fieldset.options > div {
157 display: flex;
158 flex-wrap: wrap;
159 font-size: 85%;
160 }
161 fieldset.options > legend > #btn-options-toggle::after {
162 content: " [hide]";
163 position: relative;
164 }
165 fieldset.options.collapsed > legend > #btn-options-toggle::after {
166 content: " [show]";
167 position: relative;
168 }
169
170 span.labeled-input {
171 padding: 0.25em;
172 margin: 0.25em 0.5em;
173 border-radius: 0.25em;
174 white-space: nowrap;
175
--- src/style.pikchrshow.css
+++ src/style.pikchrshow.css
@@ -24,11 +24,12 @@
24 to {transform: rotate(360deg);}
25 }
26
27 /* The following styles are for app-level use. */
28 /* TODO: consolidate the WASM- and legacy-mode CSS into this file.
29 Since both versions of /pikchrshow share a URI, they both load this
30 file. */
31 textarea {
32 font-family: monospace;
33 flex: 1 1 auto;
34 }
35 #main-wrapper {
@@ -52,21 +53,10 @@
53 flex-direction: column;
54 }
55 #main-wrapper.side-by-side.swapio {
56 flex-direction: row-reverse;
57 }
 
 
 
 
 
 
 
 
 
 
 
58 .zone-wrapper{
59 display: flex;
60 margin: 0;
61 flex: 1 1 0%;
62 border-radius: 0.5em;
@@ -73,12 +63,10 @@
63 min-width: inherit/*important: resolves inability to scroll fieldset child element!*/;
64 padding: 0.35em 0 0 0;
65 }
66 .zone-wrapper > div {
67 display:flex;
 
 
68 flex: 1 1 0%;
69 }
70 .zone-wrapper.output {
71 }
72 #main-wrapper.side-by-side .zone-wrapper {
@@ -133,20 +121,20 @@
121 .zone-wrapper.output {
122 overflow: auto;
123 justify-content: space-between;
124 }
125 .button-bar {
126 display: flex;
127 flex-wrap: wrap;
128 align-items: center;
129 align-content: space-between;
130 justify-content: flex-start;
131 }
132 .button-bar > * {
133 margin: 0.05em 0.5em 0.05em 0;
134 flex: 0 1 auto;
135 align-self: auto;
 
 
136 }
137 fieldset.options {
138 border-radius: 0.5em;
139 border: 1px inset;
140 display: flex;
@@ -156,19 +144,18 @@
144 fieldset.options > div {
145 display: flex;
146 flex-wrap: wrap;
147 font-size: 85%;
148 }
149 fieldset.collapsible.options > legend > .fieldset-toggle::after {
150 content: " [hide]";
151 position: relative;
152 }
153 fieldset.collapsible.collapsed > legend > .fieldset-toggle::after {
154 content: " [show]";
155 position: relative;
156 }
 
157 span.labeled-input {
158 padding: 0.25em;
159 margin: 0.25em 0.5em;
160 border-radius: 0.25em;
161 white-space: nowrap;
162

Keyboard Shortcuts

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