fix: make undo button for custom CSS appear on the right instead of u…

…nderneath the caption
TheodoreChu · Dec 15, 2020 · 4dd2186 · 4dd2186
1 parent ccff746
commit 4dd2186
Show file tree

Hide file tree

Showing 10 changed files with 40 additions and 31 deletions.
diff --git a/build/asset-manifest.json b/build/asset-manifest.json
@@ -4,9 +4,9 @@
     "static/js/0.39eaacde.chunk.js.map": "./static/js/0.39eaacde.chunk.js.map",
     "static/js/1.94a8704a.chunk.js": "./static/js/1.94a8704a.chunk.js",
     "static/js/1.94a8704a.chunk.js.map": "./static/js/1.94a8704a.chunk.js.map",
-    "main.css": "./static/css/main.87879f01.chunk.css",
-    "main.js": "./static/js/main.2bb508a9.chunk.js",
-    "main.js.map": "./static/js/main.2bb508a9.chunk.js.map",
+    "main.css": "./static/css/main.4af3e47c.chunk.css",
+    "main.js": "./static/js/main.ff45c99b.chunk.js",
+    "main.js.map": "./static/js/main.ff45c99b.chunk.js.map",
     "runtime-main.js": "./static/js/runtime-main.4405e875.js",
     "runtime-main.js.map": "./static/js/runtime-main.4405e875.js.map",
     "static/css/4.7c0a8645.chunk.css": "./static/css/4.7c0a8645.chunk.css",
@@ -152,7 +152,7 @@
     "static/js/73.a6cb7cb2.chunk.js.map": "./static/js/73.a6cb7cb2.chunk.js.map",
     "index.html": "./index.html",
     "static/css/4.7c0a8645.chunk.css.map": "./static/css/4.7c0a8645.chunk.css.map",
-    "static/css/main.87879f01.chunk.css.map": "./static/css/main.87879f01.chunk.css.map",
+    "static/css/main.4af3e47c.chunk.css.map": "./static/css/main.4af3e47c.chunk.css.map",
     "static/js/4.8f86dee5.chunk.js.LICENSE.txt": "./static/js/4.8f86dee5.chunk.js.LICENSE.txt",
     "static/js/65.3aec7f39.chunk.js.LICENSE.txt": "./static/js/65.3aec7f39.chunk.js.LICENSE.txt",
     "static/media/codicon.css": "./static/media/codicon.b3726f01.ttf"
@@ -161,7 +161,7 @@
     "static/js/runtime-main.4405e875.js",
     "static/css/4.7c0a8645.chunk.css",
     "static/js/4.8f86dee5.chunk.js",
-    "static/css/main.87879f01.chunk.css",
-    "static/js/main.2bb508a9.chunk.js"
+    "static/css/main.4af3e47c.chunk.css",
+    "static/js/main.ff45c99b.chunk.js"
   ]
 }
diff --git a/build/index.html b/build/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" type="image/png" href="./icon.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="The Append Editor is an unofficial editor for Standard Notes, a free, open-source, and end-to-end encrypted notes app. Try the demo at beta.appendeditor.com or learn more at appendeditor.com."/><link rel="apple-touch-icon" href="./icon192.png"/><link rel="manifest" href="./manifest.json"/><link rel="stylesheet" href="./katex/v0.12.0/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous"/><title>Append Editor</title><link href="./static/css/4.7c0a8645.chunk.css" rel="stylesheet"><link href="./static/css/main.87879f01.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="editor.worker.bundle.js"></script><script src="json.worker.bundle.js"></script><script src="css.worker.bundle.js"></script><script src="html.worker.bundle.js"></script><script src="ts.worker.bundle.js"></script><script>!function(e){function r(r){for(var a,o,f=r[0],d=r[1],u=r[2],i=0,l=[];i<f.length;i++)o=f[i],Object.prototype.hasOwnProperty.call(n,o)&&n[o]&&l.push(n[o][0]),n[o]=0;for(a in d)Object.prototype.hasOwnProperty.call(d,a)&&(e[a]=d[a]);for(b&&b(r);l.length;)l.shift()();return c.push.apply(c,u||[]),t()}function t(){for(var e,r=0;r<c.length;r++){for(var t=c[r],a=!0,f=1;f<t.length;f++){var d=t[f];0!==n[d]&&(a=!1)}a&&(c.splice(r--,1),e=o(o.s=t[0]))}return e}var a={},n={3:0},c=[];function o(r){if(a[r])return a[r].exports;var t=a[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.e=function(e){var r=[],t=n[e];if(0!==t)if(t)r.push(t[2]);else{var a=new Promise((function(r,a){t=n[e]=[r,a]}));r.push(t[2]=a);var c,f=document.createElement("script");f.charset="utf-8",f.timeout=120,o.nc&&f.setAttribute("nonce",o.nc),f.src=function(e){return o.p+"static/js/"+({}[e]||e)+"."+{0:"39eaacde",1:"94a8704a",5:"a177ed4b",6:"05c4187d",7:"ab471150",8:"d0b9a72a",9:"d1f41cce",10:"763c08cc",11:"ba4fa629",12:"5e807283",13:"5baa6acb",14:"54a7d892",15:"15fecc7f",16:"e01fb9b0",17:"b7185cca",18:"1097a363",19:"6f717f9b",20:"20fd559a",21:"f62af302",22:"a022f41f",23:"87d98a6c",24:"fac9919a",25:"1a023eec",26:"7650a72a",27:"d156e25b",28:"416d21dd",29:"1a796f6d",30:"7bc991c8",31:"5de30043",32:"b32b80ad",33:"5c73a938",34:"7cad957d",35:"5bd68534",36:"8d01591a",37:"69562bfd",38:"91bd981a",39:"ad84387b",40:"19160149",41:"065333df",42:"a2daad98",43:"7ee02558",44:"22493baf",45:"3076e21f",46:"acb07196",47:"e5856dcb",48:"c61dcccc",49:"74883327",50:"d55bc92d",51:"7a0e96e1",52:"b171d0b6",53:"89d043e5",54:"ca7cb7b9",55:"d7651d53",56:"96b2c909",57:"38c08e50",58:"06c76a6b",59:"7bfa8249",60:"5bbdd121",61:"fbf4f30e",62:"3b9e2cf8",63:"ab17e2bc",64:"e934aa47",65:"3aec7f39",66:"0a93a5fb",67:"a69f4bc4",68:"45463cfd",69:"34bff24b",70:"bd5b7f44",71:"8abfd081",72:"0093180a",73:"a6cb7cb2"}[e]+".chunk.js"}(e);var d=new Error;c=function(r){f.onerror=f.onload=null,clearTimeout(u);var t=n[e];if(0!==t){if(t){var a=r&&("load"===r.type?"missing":r.type),c=r&&r.target&&r.target.src;d.message="Loading chunk "+e+" failed.\n("+a+": "+c+")",d.name="ChunkLoadError",d.type=a,d.request=c,t[1](d)}n[e]=void 0}};var u=setTimeout((function(){c({type:"timeout",target:f})}),12e4);f.onerror=f.onload=c,document.head.appendChild(f)}return Promise.all(r)},o.m=e,o.c=a,o.d=function(e,r,t){o.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,r){if(1&r&&(e=o(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(o.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var a in e)o.d(t,a,function(r){return e[r]}.bind(null,a));return t},o.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(r,"a",r),r},o.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},o.p="./",o.oe=function(e){throw console.error(e),e};var f=this["webpackJsonpappend-editor"]=this["webpackJsonpappend-editor"]||[],d=f.push.bind(f);f.push=r,f=f.slice();for(var u=0;u<f.length;u++)r(f[u]);var b=d;t()}([])</script><script src="./static/js/4.8f86dee5.chunk.js"></script><script src="./static/js/main.2bb508a9.chunk.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" type="image/png" href="./icon.png"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="The Append Editor is an unofficial editor for Standard Notes, a free, open-source, and end-to-end encrypted notes app. Try the demo at beta.appendeditor.com or learn more at appendeditor.com."/><link rel="apple-touch-icon" href="./icon192.png"/><link rel="manifest" href="./manifest.json"/><link rel="stylesheet" href="./katex/v0.12.0/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous"/><title>Append Editor</title><link href="./static/css/4.7c0a8645.chunk.css" rel="stylesheet"><link href="./static/css/main.4af3e47c.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="editor.worker.bundle.js"></script><script src="json.worker.bundle.js"></script><script src="css.worker.bundle.js"></script><script src="html.worker.bundle.js"></script><script src="ts.worker.bundle.js"></script><script>!function(e){function r(r){for(var a,o,f=r[0],d=r[1],u=r[2],i=0,l=[];i<f.length;i++)o=f[i],Object.prototype.hasOwnProperty.call(n,o)&&n[o]&&l.push(n[o][0]),n[o]=0;for(a in d)Object.prototype.hasOwnProperty.call(d,a)&&(e[a]=d[a]);for(b&&b(r);l.length;)l.shift()();return c.push.apply(c,u||[]),t()}function t(){for(var e,r=0;r<c.length;r++){for(var t=c[r],a=!0,f=1;f<t.length;f++){var d=t[f];0!==n[d]&&(a=!1)}a&&(c.splice(r--,1),e=o(o.s=t[0]))}return e}var a={},n={3:0},c=[];function o(r){if(a[r])return a[r].exports;var t=a[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,o),t.l=!0,t.exports}o.e=function(e){var r=[],t=n[e];if(0!==t)if(t)r.push(t[2]);else{var a=new Promise((function(r,a){t=n[e]=[r,a]}));r.push(t[2]=a);var c,f=document.createElement("script");f.charset="utf-8",f.timeout=120,o.nc&&f.setAttribute("nonce",o.nc),f.src=function(e){return o.p+"static/js/"+({}[e]||e)+"."+{0:"39eaacde",1:"94a8704a",5:"a177ed4b",6:"05c4187d",7:"ab471150",8:"d0b9a72a",9:"d1f41cce",10:"763c08cc",11:"ba4fa629",12:"5e807283",13:"5baa6acb",14:"54a7d892",15:"15fecc7f",16:"e01fb9b0",17:"b7185cca",18:"1097a363",19:"6f717f9b",20:"20fd559a",21:"f62af302",22:"a022f41f",23:"87d98a6c",24:"fac9919a",25:"1a023eec",26:"7650a72a",27:"d156e25b",28:"416d21dd",29:"1a796f6d",30:"7bc991c8",31:"5de30043",32:"b32b80ad",33:"5c73a938",34:"7cad957d",35:"5bd68534",36:"8d01591a",37:"69562bfd",38:"91bd981a",39:"ad84387b",40:"19160149",41:"065333df",42:"a2daad98",43:"7ee02558",44:"22493baf",45:"3076e21f",46:"acb07196",47:"e5856dcb",48:"c61dcccc",49:"74883327",50:"d55bc92d",51:"7a0e96e1",52:"b171d0b6",53:"89d043e5",54:"ca7cb7b9",55:"d7651d53",56:"96b2c909",57:"38c08e50",58:"06c76a6b",59:"7bfa8249",60:"5bbdd121",61:"fbf4f30e",62:"3b9e2cf8",63:"ab17e2bc",64:"e934aa47",65:"3aec7f39",66:"0a93a5fb",67:"a69f4bc4",68:"45463cfd",69:"34bff24b",70:"bd5b7f44",71:"8abfd081",72:"0093180a",73:"a6cb7cb2"}[e]+".chunk.js"}(e);var d=new Error;c=function(r){f.onerror=f.onload=null,clearTimeout(u);var t=n[e];if(0!==t){if(t){var a=r&&("load"===r.type?"missing":r.type),c=r&&r.target&&r.target.src;d.message="Loading chunk "+e+" failed.\n("+a+": "+c+")",d.name="ChunkLoadError",d.type=a,d.request=c,t[1](d)}n[e]=void 0}};var u=setTimeout((function(){c({type:"timeout",target:f})}),12e4);f.onerror=f.onload=c,document.head.appendChild(f)}return Promise.all(r)},o.m=e,o.c=a,o.d=function(e,r,t){o.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},o.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},o.t=function(e,r){if(1&r&&(e=o(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(o.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var a in e)o.d(t,a,function(r){return e[r]}.bind(null,a));return t},o.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return o.d(r,"a",r),r},o.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},o.p="./",o.oe=function(e){throw console.error(e),e};var f=this["webpackJsonpappend-editor"]=this["webpackJsonpappend-editor"]||[],d=f.push.bind(f);f.push=r,f=f.slice();for(var u=0;u<f.length;u++)r(f[u]);var b=d;t()}([])</script><script src="./static/js/4.8f86dee5.chunk.js"></script><script src="./static/js/main.ff45c99b.chunk.js"></script></body></html>
diff --git a/build/static/css/main.87879f01.chunk.css → build/static/css/main.4af3e47c.chunk.css b/build/static/css/main.87879f01.chunk.css → build/static/css/main.4af3e47c.chunk.css
diff --git a/build/static/css/main.4af3e47c.chunk.css.map b/build/static/css/main.4af3e47c.chunk.css.map
diff --git a/build/static/css/main.87879f01.chunk.css.map b/build/static/css/main.87879f01.chunk.css.map
diff --git a/build/static/js/main.2bb508a9.chunk.js.map b/build/static/js/main.2bb508a9.chunk.js.map
diff --git a/build/static/js/main.2bb508a9.chunk.js → build/static/js/main.ff45c99b.chunk.js b/build/static/js/main.2bb508a9.chunk.js → build/static/js/main.ff45c99b.chunk.js
diff --git a/build/static/js/main.ff45c99b.chunk.js.map b/build/static/js/main.ff45c99b.chunk.js.map
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
@@ -716,22 +716,24 @@ export default class Settings extends React.Component<
                 </div>
               </section>,
             ]}
-            <section className="sk-panel-row settings">
-              <ChevronToggleButton
-                caption={'Add custom styles (CSS):'}
-                className="chevron-toggle-button"
-                condition={this.state.showCustomStyles}
-                onClick={this.toggleShowCustomStyles}
-                title={'Toggle show add custom styles (CSS)'}
-              />
-              {this.state.showCustomStyles && [
-                <div className="text-and-undo-button">
-                  <UndoButton
-                    onClick={this.clearCustomStyles}
-                    title="Reset custom styles (CSS)"
-                  />
-                </div>,
-              ]}
+            <section className="sk-panel-row settings custom-css">
+              <div className="custom-css-and-undo-button">
+                <ChevronToggleButton
+                  caption={'Add custom styles (CSS):'}
+                  className="chevron-toggle-button"
+                  condition={this.state.showCustomStyles}
+                  onClick={this.toggleShowCustomStyles}
+                  title={'Toggle show add custom styles (CSS)'}
+                />
+                {this.state.showCustomStyles && [
+                  <div className="text-and-undo-button">
+                    <UndoButton
+                      onClick={this.clearCustomStyles}
+                      title="Reset custom styles (CSS)"
+                    />
+                  </div>,
+                ]}
+              </div>
             </section>
             {this.state.showCustomStyles && [
               <section className="sk-panel-row settings">

diff --git a/src/stylesheets/main.scss b/src/stylesheets/main.scss
@@ -661,13 +661,20 @@ button:focus {
     }
     // Collapse on mobile
     @media screen and (max-width: 480px) {
-      flex-direction: column !important;
-      align-items: flex-start !important;
+      flex-direction: column;
+      align-items: flex-start;
 
       input {
         margin-top: 1rem;
       }
     }
+    &.custom-css {
+      display: block;
+      .custom-css-and-undo-button {
+        display: flex;
+        justify-content: space-between;
+      }
+    }
   }
 }