Fossil SCM
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.
Commit
2dd0a40e599676c4ee822b313dd79564ec710317369e2396fd0b12032f0e8375
Parent
2defbdb3f47ba33…
1 file changed
+4
-4
+4
-4
| --- src/pikchrshow.c | ||
| +++ src/pikchrshow.c | ||
| @@ -69,11 +69,11 @@ | ||
| 69 | 69 | } |
| 70 | 70 | style_header("PikchrShow"); |
| 71 | 71 | CX("<style>"); |
| 72 | 72 | CX("div.content { padding-top: 0.5em }"); |
| 73 | 73 | CX("#sbs-wrapper {" |
| 74 | - "display: flex; flex-direction: row; flex-wrap: wrap;" | |
| 74 | + "display: flex; flex-direction: column;" | |
| 75 | 75 | "}"); |
| 76 | 76 | CX("#sbs-wrapper > * {" |
| 77 | 77 | "margin: 0 0.25em 0.5em 0; flex: 1 10 auto;" |
| 78 | 78 | "align-self: stretch;" |
| 79 | 79 | "}"); |
| @@ -99,11 +99,11 @@ | ||
| 99 | 99 | "display: inline; margin: 0 0.25em 0.5em 0;" |
| 100 | 100 | "}"); |
| 101 | 101 | CX("#pikchrshow-controls > .input-with-label > * {" |
| 102 | 102 | "cursor: pointer;" |
| 103 | 103 | "}"); |
| 104 | - CX("#pikchrshow-output.dark-mode > svg {" | |
| 104 | + CX("#pikchrshow-output.dark-mode svg {" | |
| 105 | 105 | /* Flip the colors to approximate a dark theme look */ |
| 106 | 106 | "filter: invert(1) hue-rotate(180deg);" |
| 107 | 107 | "}"); |
| 108 | 108 | CX("#sbs-wrapper > fieldset {" |
| 109 | 109 | "padding: 0.25em 0.5em; border-radius: 0.25em;" |
| @@ -111,18 +111,18 @@ | ||
| 111 | 111 | CX("fieldset > legend > .copy-button {margin-left: 0.25em}"); |
| 112 | 112 | CX("</style>"); |
| 113 | 113 | CX("<div>Input pikchr code and tap Preview to render it:</div>"); |
| 114 | 114 | CX("<div id='sbs-wrapper'>"); |
| 115 | 115 | CX("<div id='pikchrshow-form'>"); |
| 116 | + CX("<textarea id='content' name='content' rows='15'>%s</textarea>", | |
| 117 | + zContent/*safe-for-%s*/); | |
| 116 | 118 | CX("<div id='pikchrshow-controls'>"); |
| 117 | 119 | CX("<button id='pikchr-submit-preview'>Preview</button>"); |
| 118 | 120 | style_labeled_checkbox("flipcolors-wrapper", "flipcolors", |
| 119 | 121 | "Simulate dark theme?", |
| 120 | 122 | "1", flipColors, 0); |
| 121 | 123 | CX("</div>"/*#pikchrshow-controls*/); |
| 122 | - CX("<textarea id='content' name='content' rows='15'>%s</textarea>", | |
| 123 | - zContent/*safe-for-%s*/); | |
| 124 | 124 | CX("</div>"/*#pikchrshow-form*/); |
| 125 | 125 | CX("<fieldset id='pikchrshow-output-wrapper'>"); |
| 126 | 126 | CX("<legend>Preview <span class='copy-button'></span></legend>"); |
| 127 | 127 | CX("<div id='pikchrshow-output'>"); |
| 128 | 128 | if(*zContent){ |
| 129 | 129 |
| --- src/pikchrshow.c | |
| +++ src/pikchrshow.c | |
| @@ -69,11 +69,11 @@ | |
| 69 | } |
| 70 | style_header("PikchrShow"); |
| 71 | CX("<style>"); |
| 72 | CX("div.content { padding-top: 0.5em }"); |
| 73 | CX("#sbs-wrapper {" |
| 74 | "display: flex; flex-direction: row; flex-wrap: wrap;" |
| 75 | "}"); |
| 76 | CX("#sbs-wrapper > * {" |
| 77 | "margin: 0 0.25em 0.5em 0; flex: 1 10 auto;" |
| 78 | "align-self: stretch;" |
| 79 | "}"); |
| @@ -99,11 +99,11 @@ | |
| 99 | "display: inline; margin: 0 0.25em 0.5em 0;" |
| 100 | "}"); |
| 101 | CX("#pikchrshow-controls > .input-with-label > * {" |
| 102 | "cursor: pointer;" |
| 103 | "}"); |
| 104 | CX("#pikchrshow-output.dark-mode > svg {" |
| 105 | /* Flip the colors to approximate a dark theme look */ |
| 106 | "filter: invert(1) hue-rotate(180deg);" |
| 107 | "}"); |
| 108 | CX("#sbs-wrapper > fieldset {" |
| 109 | "padding: 0.25em 0.5em; border-radius: 0.25em;" |
| @@ -111,18 +111,18 @@ | |
| 111 | CX("fieldset > legend > .copy-button {margin-left: 0.25em}"); |
| 112 | CX("</style>"); |
| 113 | CX("<div>Input pikchr code and tap Preview to render it:</div>"); |
| 114 | CX("<div id='sbs-wrapper'>"); |
| 115 | CX("<div id='pikchrshow-form'>"); |
| 116 | CX("<div id='pikchrshow-controls'>"); |
| 117 | CX("<button id='pikchr-submit-preview'>Preview</button>"); |
| 118 | style_labeled_checkbox("flipcolors-wrapper", "flipcolors", |
| 119 | "Simulate dark theme?", |
| 120 | "1", flipColors, 0); |
| 121 | CX("</div>"/*#pikchrshow-controls*/); |
| 122 | CX("<textarea id='content' name='content' rows='15'>%s</textarea>", |
| 123 | zContent/*safe-for-%s*/); |
| 124 | CX("</div>"/*#pikchrshow-form*/); |
| 125 | CX("<fieldset id='pikchrshow-output-wrapper'>"); |
| 126 | CX("<legend>Preview <span class='copy-button'></span></legend>"); |
| 127 | CX("<div id='pikchrshow-output'>"); |
| 128 | if(*zContent){ |
| 129 |
| --- src/pikchrshow.c | |
| +++ src/pikchrshow.c | |
| @@ -69,11 +69,11 @@ | |
| 69 | } |
| 70 | style_header("PikchrShow"); |
| 71 | CX("<style>"); |
| 72 | CX("div.content { padding-top: 0.5em }"); |
| 73 | CX("#sbs-wrapper {" |
| 74 | "display: flex; flex-direction: column;" |
| 75 | "}"); |
| 76 | CX("#sbs-wrapper > * {" |
| 77 | "margin: 0 0.25em 0.5em 0; flex: 1 10 auto;" |
| 78 | "align-self: stretch;" |
| 79 | "}"); |
| @@ -99,11 +99,11 @@ | |
| 99 | "display: inline; margin: 0 0.25em 0.5em 0;" |
| 100 | "}"); |
| 101 | CX("#pikchrshow-controls > .input-with-label > * {" |
| 102 | "cursor: pointer;" |
| 103 | "}"); |
| 104 | CX("#pikchrshow-output.dark-mode svg {" |
| 105 | /* Flip the colors to approximate a dark theme look */ |
| 106 | "filter: invert(1) hue-rotate(180deg);" |
| 107 | "}"); |
| 108 | CX("#sbs-wrapper > fieldset {" |
| 109 | "padding: 0.25em 0.5em; border-radius: 0.25em;" |
| @@ -111,18 +111,18 @@ | |
| 111 | CX("fieldset > legend > .copy-button {margin-left: 0.25em}"); |
| 112 | CX("</style>"); |
| 113 | CX("<div>Input pikchr code and tap Preview to render it:</div>"); |
| 114 | CX("<div id='sbs-wrapper'>"); |
| 115 | CX("<div id='pikchrshow-form'>"); |
| 116 | CX("<textarea id='content' name='content' rows='15'>%s</textarea>", |
| 117 | zContent/*safe-for-%s*/); |
| 118 | CX("<div id='pikchrshow-controls'>"); |
| 119 | CX("<button id='pikchr-submit-preview'>Preview</button>"); |
| 120 | style_labeled_checkbox("flipcolors-wrapper", "flipcolors", |
| 121 | "Simulate dark theme?", |
| 122 | "1", flipColors, 0); |
| 123 | CX("</div>"/*#pikchrshow-controls*/); |
| 124 | CX("</div>"/*#pikchrshow-form*/); |
| 125 | CX("<fieldset id='pikchrshow-output-wrapper'>"); |
| 126 | CX("<legend>Preview <span class='copy-button'></span></legend>"); |
| 127 | CX("<div id='pikchrshow-output'>"); |
| 128 | if(*zContent){ |
| 129 |