Fossil SCM
Moved SVG/pikchr mode buttons to the left of the SVG so that their positions remain stable when switching images in pikchrshow or resizing them via window-resize in other views. CSS-animated the mode-change button toggle.
Commit
b74d1a3fd1fcf0c929e3dfc2682d68338ec669da9ff4d0608538b93a1bed07d9
Parent
475b3a7fbb0ce33…
1 file changed
+7
-4
+7
-4
| --- src/fossil.pikchr-util.js | ||
| +++ src/fossil.pikchr-util.js | ||
| @@ -17,35 +17,38 @@ | ||
| 17 | 17 | .pikchr-src-button { |
| 18 | 18 | min-height: ${wh}; max-height: ${wh}; |
| 19 | 19 | min-width: ${wh}; max-width: ${wh}; |
| 20 | 20 | font-size: ${wh}; |
| 21 | 21 | position: absolute; |
| 22 | - top: calc(-${wh} / 2); | |
| 23 | - right: calc(-${wh} / 2); | |
| 22 | + top: 0; | |
| 23 | + left: calc(${wh} * 4 / 5 * -1); | |
| 24 | 24 | border: 1px solid black; |
| 25 | 25 | background-color: rgba(255,255,0,0.5); |
| 26 | 26 | border-radius: 0.25cm; |
| 27 | 27 | z-index: 50; |
| 28 | 28 | cursor: pointer; |
| 29 | 29 | text-align: center; |
| 30 | 30 | display: inline-flex; |
| 31 | 31 | align-items: center; |
| 32 | 32 | justify-content: center; |
| 33 | + transform-origin: center; | |
| 34 | + transition: transform 250ms linear; | |
| 33 | 35 | } |
| 34 | 36 | .pikchr-src-button.src-active { |
| 35 | 37 | background-color: rgba(0,255,0,0.5); |
| 38 | + transform: scaleX(-1); | |
| 36 | 39 | } |
| 37 | 40 | .pikchr-src-button > span { |
| 38 | 41 | vertical-align: middle; |
| 39 | 42 | } |
| 40 | 43 | .pikchr-copy-button { |
| 41 | 44 | min-width: ${wh}; max-width: ${wh}; |
| 42 | 45 | min-height: ${wh}; max-height: ${wh}; |
| 43 | 46 | display: inline-block; |
| 44 | 47 | position: absolute; |
| 45 | - top: calc(${wh} / 2 + ${wh} / 4); | |
| 46 | - right: calc(-${wh} / 2); | |
| 48 | + top: calc(${wh} * 1.25); | |
| 49 | + left: calc(${wh} * 4 / 5 * -1); | |
| 47 | 50 | z-index: 50; |
| 48 | 51 | margin-right: 0; |
| 49 | 52 | } |
| 50 | 53 | `; |
| 51 | 54 | head.appendChild(styleTag); |
| 52 | 55 |
| --- src/fossil.pikchr-util.js | |
| +++ src/fossil.pikchr-util.js | |
| @@ -17,35 +17,38 @@ | |
| 17 | .pikchr-src-button { |
| 18 | min-height: ${wh}; max-height: ${wh}; |
| 19 | min-width: ${wh}; max-width: ${wh}; |
| 20 | font-size: ${wh}; |
| 21 | position: absolute; |
| 22 | top: calc(-${wh} / 2); |
| 23 | right: calc(-${wh} / 2); |
| 24 | border: 1px solid black; |
| 25 | background-color: rgba(255,255,0,0.5); |
| 26 | border-radius: 0.25cm; |
| 27 | z-index: 50; |
| 28 | cursor: pointer; |
| 29 | text-align: center; |
| 30 | display: inline-flex; |
| 31 | align-items: center; |
| 32 | justify-content: center; |
| 33 | } |
| 34 | .pikchr-src-button.src-active { |
| 35 | background-color: rgba(0,255,0,0.5); |
| 36 | } |
| 37 | .pikchr-src-button > span { |
| 38 | vertical-align: middle; |
| 39 | } |
| 40 | .pikchr-copy-button { |
| 41 | min-width: ${wh}; max-width: ${wh}; |
| 42 | min-height: ${wh}; max-height: ${wh}; |
| 43 | display: inline-block; |
| 44 | position: absolute; |
| 45 | top: calc(${wh} / 2 + ${wh} / 4); |
| 46 | right: calc(-${wh} / 2); |
| 47 | z-index: 50; |
| 48 | margin-right: 0; |
| 49 | } |
| 50 | `; |
| 51 | head.appendChild(styleTag); |
| 52 |
| --- src/fossil.pikchr-util.js | |
| +++ src/fossil.pikchr-util.js | |
| @@ -17,35 +17,38 @@ | |
| 17 | .pikchr-src-button { |
| 18 | min-height: ${wh}; max-height: ${wh}; |
| 19 | min-width: ${wh}; max-width: ${wh}; |
| 20 | font-size: ${wh}; |
| 21 | position: absolute; |
| 22 | top: 0; |
| 23 | left: calc(${wh} * 4 / 5 * -1); |
| 24 | border: 1px solid black; |
| 25 | background-color: rgba(255,255,0,0.5); |
| 26 | border-radius: 0.25cm; |
| 27 | z-index: 50; |
| 28 | cursor: pointer; |
| 29 | text-align: center; |
| 30 | display: inline-flex; |
| 31 | align-items: center; |
| 32 | justify-content: center; |
| 33 | transform-origin: center; |
| 34 | transition: transform 250ms linear; |
| 35 | } |
| 36 | .pikchr-src-button.src-active { |
| 37 | background-color: rgba(0,255,0,0.5); |
| 38 | transform: scaleX(-1); |
| 39 | } |
| 40 | .pikchr-src-button > span { |
| 41 | vertical-align: middle; |
| 42 | } |
| 43 | .pikchr-copy-button { |
| 44 | min-width: ${wh}; max-width: ${wh}; |
| 45 | min-height: ${wh}; max-height: ${wh}; |
| 46 | display: inline-block; |
| 47 | position: absolute; |
| 48 | top: calc(${wh} * 1.25); |
| 49 | left: calc(${wh} * 4 / 5 * -1); |
| 50 | z-index: 50; |
| 51 | margin-right: 0; |
| 52 | } |
| 53 | `; |
| 54 | head.appendChild(styleTag); |
| 55 |