Skip to content

Commit

Permalink
fix: styles for Settings: checkbox input, custom CSS buttons
Browse files Browse the repository at this point in the history
the previous commit did not work on desktop. also removed unused textarea CSS
  • Loading branch information
TheodoreChu committed Dec 15, 2020
1 parent 4dd2186 commit 9aec561
Show file tree
Hide file tree
Showing 15 changed files with 67 additions and 62 deletions.
20 changes: 10 additions & 10 deletions build/asset-manifest.json
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,14 @@
"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.4af3e47c.chunk.css",
"main.js": "./static/js/main.ff45c99b.chunk.js",
"main.js.map": "./static/js/main.ff45c99b.chunk.js.map",
"main.css": "./static/css/main.7af3225e.chunk.css",
"main.js": "./static/js/main.a39a299e.chunk.js",
"main.js.map": "./static/js/main.a39a299e.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",
"static/js/4.8f86dee5.chunk.js": "./static/js/4.8f86dee5.chunk.js",
"static/js/4.8f86dee5.chunk.js.map": "./static/js/4.8f86dee5.chunk.js.map",
"static/js/4.045e3eee.chunk.js": "./static/js/4.045e3eee.chunk.js",
"static/js/4.045e3eee.chunk.js.map": "./static/js/4.045e3eee.chunk.js.map",
"static/js/5.a177ed4b.chunk.js": "./static/js/5.a177ed4b.chunk.js",
"static/js/5.a177ed4b.chunk.js.map": "./static/js/5.a177ed4b.chunk.js.map",
"static/js/6.05c4187d.chunk.js": "./static/js/6.05c4187d.chunk.js",
Expand Down Expand Up @@ -152,16 +152,16 @@
"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.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/css/main.7af3225e.chunk.css.map": "./static/css/main.7af3225e.chunk.css.map",
"static/js/4.045e3eee.chunk.js.LICENSE.txt": "./static/js/4.045e3eee.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"
},
"entrypoints": [
"static/js/runtime-main.4405e875.js",
"static/css/4.7c0a8645.chunk.css",
"static/js/4.8f86dee5.chunk.js",
"static/css/main.4af3e47c.chunk.css",
"static/js/main.ff45c99b.chunk.js"
"static/js/4.045e3eee.chunk.js",
"static/css/main.7af3225e.chunk.css",
"static/js/main.a39a299e.chunk.js"
]
}
2 changes: 1 addition & 1 deletion build/index.html
Original file line number Diff line number Diff line change
@@ -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.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>
<!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.7af3225e.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.045e3eee.chunk.js"></script><script src="./static/js/main.a39a299e.chunk.js"></script></body></html>
1 change: 0 additions & 1 deletion build/static/css/main.4af3e47c.chunk.css.map

This file was deleted.

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions build/static/css/main.7af3225e.chunk.css.map

Large diffs are not rendered by default.

Large diffs are not rendered by default.

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions build/static/js/main.a39a299e.chunk.js

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions build/static/js/main.a39a299e.chunk.js.map

Large diffs are not rendered by default.

2 changes: 0 additions & 2 deletions build/static/js/main.ff45c99b.chunk.js

This file was deleted.

1 change: 0 additions & 1 deletion build/static/js/main.ff45c99b.chunk.js.map

This file was deleted.

3 changes: 2 additions & 1 deletion src/components/Buttons.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -99,12 +99,13 @@ export const PrintButton: React.FC<ActionButtonTypes> = ({
);

export const UndoButton: React.FC<ActionButtonTypes> = ({
className,
fill,
id,
onClick,
title,
}) => (
<button id={id} onClick={onClick} title={title}>
<button className={className} id={id} onClick={onClick} title={title}>
<UndoIcon fill={fill} role={'button'} />
</button>
);
33 changes: 15 additions & 18 deletions src/components/Settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -717,23 +717,20 @@ export default class Settings extends React.Component<
</section>,
]}
<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>
<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 && [
<UndoButton
className={'custom-css-undo-button'}
onClick={this.clearCustomStyles}
title="Reset custom styles (CSS)"
/>,
]}
</section>
{this.state.showCustomStyles && [
<section className="sk-panel-row settings">
Expand All @@ -752,7 +749,7 @@ export default class Settings extends React.Component<
Save these settings as your personal default:{' '}
</label>
<div className="input-and-undo-button">
<label>
<label className={'checkbox-input-label'}>
<input
id={saveAsDefaultID}
name={saveAsDefaultID}
Expand Down
51 changes: 29 additions & 22 deletions src/stylesheets/main.scss
Original file line number Diff line number Diff line change
Expand Up @@ -626,39 +626,45 @@ button:focus {
border-color: var(--sn-stylekit-border-color);
color: var(--sn-stylekit-foreground-color);
}
input[type='text'] {
min-width: 200px;
}
input[type='checkbox'] {
min-width: 210px;
.input-and-undo-button {
display: flex;
}
/* On screens with screens less than 360px
The inputs and buttons have width 217px*/
select {
min-width: 217px;
}
.input-and-undo-button {
display: flex;
input[type='text'] {
min-width: 200px;
}
// The checkbox is 19.8px wide.
// 98.6 + 98.6 + 18.8px is 217
// Use padding instead of width to center the checkbox
.checkbox-input-label {
padding-left: 98.6px;
padding-right: 98.6px;
}
@media screen and (min-width: 360px) {
/* On screens with screens greater than 360px
The inputs and buttons have width 267px*/
select {
min-width: 267px;
}
input[type='text'] {
min-width: 250px;
}
input[type='checkbox'] {
min-width: 260px;
.checkbox-input-label {
padding-left: 123.6px;
padding-right: 123.6px;
}
select {
.chevron-toggle-button {
min-width: 267px;
}
}
.radio {
margin-top: 3px;
margin-bottom: 3px;
}
textarea {
// This seems to make the textarea blurry on Firefox
white-space: pre;
overflow-x: auto;
font-family: var(--sn-stylekit-monospace-font);
}
// Collapse on mobile
@media screen and (max-width: 480px) {
flex-direction: column;
Expand All @@ -667,12 +673,13 @@ button:focus {
input {
margin-top: 1rem;
}
}
&.custom-css {
display: block;
.custom-css-and-undo-button {
display: flex;
justify-content: space-between;
&.custom-css {
flex-direction: row;
max-width: 299px;
.custom-css-undo-button {
margin-top: auto;
margin-bottom: auto;
}
}
}
}
Expand Down

0 comments on commit 9aec561

Please sign in to comment.