diff options
author | Feuerfuchs <git@feuerfuchs.dev> | 2019-06-26 09:37:39 +0200 |
---|---|---|
committer | Feuerfuchs <git@feuerfuchs.dev> | 2019-06-26 09:37:39 +0200 |
commit | a21a402d9aaaf4c2c7720da0f76b7311d3d64830 (patch) | |
tree | 932ec831065f9ce80b7d7e9182bca438e0c6d81a | |
parent | Improved wrapping behavior (diff) | |
download | gopherproxy-a21a402d9aaaf4c2c7720da0f76b7311d3d64830.tar.gz gopherproxy-a21a402d9aaaf4c2c7720da0f76b7311d3d64830.tar.bz2 gopherproxy-a21a402d9aaaf4c2c7720da0f76b7311d3d64830.zip |
Make word wrap optional, better mobile design
-rw-r--r-- | assets/main.js | 2 | ||||
-rw-r--r-- | assets/style.css | 2 | ||||
-rw-r--r-- | css/main.scss | 29 | ||||
-rw-r--r-- | js/main.ts | 34 | ||||
-rw-r--r-- | template.go | 10 |
5 files changed, 68 insertions, 9 deletions
diff --git a/assets/main.js b/assets/main.js index cbabeef..577a56e 100644 --- a/assets/main.js +++ b/assets/main.js | |||
@@ -1 +1 @@ | |||
"use strict";var KeyValueStore=function(){function e(e){this.data=e;for(var t=0,n=Object.keys(e);t<n.length;t++){var a=n[t],l=e[a];if(l.valueRange&&-1===l.valueRange.indexOf(l.value))throw new Error('Invalid value "'+l.value+'" for ID "'+a+'"')}}return e.prototype.getValue=function(e){return this.data[e].value},e.prototype.setValue=function(e,t){var n=this.data[e];if(n.valueRange&&-1===n.valueRange.indexOf(t))throw new Error('Invalid value "'+t+'" for ID "'+e+'"');n.value=t,n.callbacks&&n.callbacks.forEach(function(e){e(t)})},e.prototype.cycleValue=function(e,t){void 0===t&&(t=1);var n=this.data[e];if(!n)throw new Error('Invalid ID "'+e+'"');var a=n.value;if(n.valueRange){var l=n.valueRange.indexOf(a)+t;l>=n.valueRange.length?l=0:l<0&&(l=n.valueRange.length-1),a=n.value=n.valueRange[l]}else{if("number"!=typeof a)throw new Error("Can't cycle \""+e+'"');a+=t,n.value=a}return n.callbacks&&n.callbacks.forEach(function(e){e(a)}),a},e.prototype.addCallback=function(e,t){var n=this.data[e];n.callbacks||(n.callbacks=[]),n.callbacks.push(t)},e}();function ensureSetting(e,t){var n=localStorage.getItem(e);return null===n&&(n=t,localStorage.setItem(e,n)),n}var settings=new KeyValueStore({imagePreviews:{value:"1"===ensureSetting("image-previews","1"),valueRange:[!1,!0]}});function generateImageThumbnails(){for(var i=document.querySelectorAll(".link--IMG, .link--GIF"),s=i.length,e=function(){var e=i[s],t=e.href.replace(/^(.*?)\/I/,"$1/T"),n=document.createTextNode("\n"),a=document.createElement("span");a.classList.add("type-annotation"),a.textContent=" -> ";var l=document.createElement("img");l.src=t,l.addEventListener("load",function(e){l.classList.remove("faded")});var r=document.createElement("a");r.classList.add("img-preview"),r.href=e.href,r.addEventListener("click",function(e){return e.preventDefault(),l.classList.add("faded"),l.classList.contains("expanded")?(l.classList.remove("expanded"),l.src=t):(l.classList.add("expanded"),l.src=r.href),!1}),r.append(l),e.parentNode.insertBefore(r,e.nextSibling),e.parentNode.insertBefore(a,r),e.parentNode.insertBefore(n,a)};s--;)e()}function removeImageThumbnails(){for(var e=document.querySelectorAll(".link--IMG, .link--GIF"),t=e.length;t--;)for(var n=e[t],a=3;a--&&n.nextSibling;)n.nextSibling.remove()}!function(){for(var e=document.getElementsByClassName("link--QRY"),t=e.length;t--;)e[t].addEventListener("click",function(e){e.preventDefault();var t=prompt("Please enter required input: ","");return null!==t&&""!==t&&(window.location.href=e.target.href+"?"+t),!1})}(),document.getElementsByClassName("location__prefix")[0].addEventListener("click",function(e){e.preventDefault();var t=prompt("Please enter new location: ","");return null!==t&&""!==t&&(window.location.href=window.location.origin+"/"+t),!1}),function(){function e(e,t){void 0===t&&(t=!1),e?generateImageThumbnails():t||removeImageThumbnails(),localStorage.setItem("image-previews",e?"1":"0"),n.textContent=e?"[yes]":"[no]"}var n=document.getElementsByClassName("setting--image-previews")[0].getElementsByClassName("setting__value")[0];n.addEventListener("click",function(e){return e.preventDefault(),settings.cycleValue("imagePreviews"),!1}),e(settings.getValue("imagePreviews"),!0),settings.addCallback("imagePreviews",e)}(),function(){for(var a=document.getElementsByClassName("modal"),l=a.length,e=function(){var t=a[l],n=t.getElementsByClassName("modal__content")[0],e=t.getElementsByClassName("modal__close-btn")[0];document.addEventListener("click",function(e){t.classList.contains("modal--visible")&&(e.target===n||n.contains(e.target)||(t.classList.remove("modal--visible"),e.preventDefault(),e.stopPropagation()))},!0),document.addEventListener("keydown",function(e){t.classList.contains("modal--visible")&&27===e.keyCode&&t.classList.remove("modal--visible")}),e.addEventListener("click",function(e){return e.preventDefault(),t.classList.remove("modal--visible"),!1})};l--;)e();var t=document.getElementsByClassName("settings-btn")[0],n=document.getElementsByClassName("modal--settings")[0];t.addEventListener("click",function(e){return e.preventDefault(),n.classList.add("modal--visible"),!1})}(); \ No newline at end of file | "use strict";var KeyValueStore=function(){function e(e){this.data=e;for(var t=0,n=Object.keys(e);t<n.length;t++){var a=n[t],l=e[a];if(l.valueRange&&-1===l.valueRange.indexOf(l.value))throw new Error('Invalid value "'+l.value+'" for ID "'+a+'"')}}return e.prototype.getValue=function(e){return this.data[e].value},e.prototype.setValue=function(e,t){var n=this.data[e];if(n.valueRange&&-1===n.valueRange.indexOf(t))throw new Error('Invalid value "'+t+'" for ID "'+e+'"');n.value=t,n.callbacks&&n.callbacks.forEach(function(e){e(t)})},e.prototype.cycleValue=function(e,t){void 0===t&&(t=1);var n=this.data[e];if(!n)throw new Error('Invalid ID "'+e+'"');var a=n.value;if(n.valueRange){var l=n.valueRange.indexOf(a)+t;l>=n.valueRange.length?l=0:l<0&&(l=n.valueRange.length-1),a=n.value=n.valueRange[l]}else{if("number"!=typeof a)throw new Error("Can't cycle \""+e+'"');a+=t,n.value=a}return n.callbacks&&n.callbacks.forEach(function(e){e(a)}),a},e.prototype.addCallback=function(e,t){var n=this.data[e];n.callbacks||(n.callbacks=[]),n.callbacks.push(t)},e}();function ensureSetting(e,t){var n=localStorage.getItem(e);return null===n&&(n=t,localStorage.setItem(e,n)),n}var settings=new KeyValueStore({wordWrap:{value:"1"===ensureSetting("word-wrap","1"),valueRange:[!1,!0]},imagePreviews:{value:"1"===ensureSetting("image-previews","1"),valueRange:[!1,!0]}});function generateImageThumbnails(){for(var s=document.querySelectorAll(".link--IMG, .link--GIF"),i=s.length,e=function(){var e=s[i],t=e.href.replace(/^(.*?)\/I/,"$1/T"),n=document.createTextNode("\n"),a=document.createElement("span");a.classList.add("type-annotation"),a.textContent=" -> ";var l=document.createElement("img");l.src=t,l.addEventListener("load",function(e){l.classList.remove("faded")});var r=document.createElement("a");r.classList.add("img-preview"),r.href=e.href,r.addEventListener("click",function(e){return e.preventDefault(),l.classList.add("faded"),l.classList.contains("expanded")?(l.classList.remove("expanded"),l.src=t):(l.classList.add("expanded"),l.src=r.href),!1}),r.append(l),e.parentNode.insertBefore(r,e.nextSibling),e.parentNode.insertBefore(a,r),e.parentNode.insertBefore(n,a)};i--;)e()}function removeImageThumbnails(){for(var e=document.querySelectorAll(".link--IMG, .link--GIF"),t=e.length;t--;)for(var n=e[t],a=3;a--&&n.nextSibling;)n.nextSibling.remove()}!function(){for(var e=document.getElementsByClassName("link--QRY"),t=e.length;t--;)e[t].addEventListener("click",function(e){e.preventDefault();var t=prompt("Please enter required input: ","");return null!==t&&""!==t&&(window.location.href=e.target.href+"?"+t),!1})}(),document.getElementsByClassName("location__prefix")[0].addEventListener("click",function(e){e.preventDefault();var t=prompt("Please enter new location: ","");return null!==t&&""!==t&&(window.location.href=window.location.origin+"/"+t),!1}),function(){function e(e,t){void 0===t&&(t=!1),e?generateImageThumbnails():t||removeImageThumbnails(),localStorage.setItem("image-previews",e?"1":"0"),n.textContent=e?"[yes]":"[no]"}var t=document.getElementsByClassName("content")[0],n=document.getElementsByClassName("setting--image-previews")[0].getElementsByClassName("setting__value")[0];n.addEventListener("click",function(e){return e.preventDefault(),settings.cycleValue("imagePreviews"),!1}),e(settings.getValue("imagePreviews"),!0),settings.addCallback("imagePreviews",e);function a(e){e?t.classList.add("content--wrap"):t.classList.remove("content--wrap"),localStorage.setItem("image-previews",e?"1":"0"),l.textContent=e?"[yes]":"[no]"}var l=document.getElementsByClassName("setting--word-wrap")[0].getElementsByClassName("setting__value")[0];l.addEventListener("click",function(e){return e.preventDefault(),settings.cycleValue("wordWrap"),!1}),a(settings.getValue("wordWrap")),settings.addCallback("wordWrap",a)}(),function(){for(var a=document.getElementsByClassName("modal"),l=a.length,e=function(){var t=a[l],n=t.getElementsByClassName("modal__content")[0],e=t.getElementsByClassName("modal__close-btn")[0];document.addEventListener("click",function(e){t.classList.contains("modal--visible")&&(e.target===n||n.contains(e.target)||(t.classList.remove("modal--visible"),e.preventDefault(),e.stopPropagation()))},!0),document.addEventListener("keydown",function(e){t.classList.contains("modal--visible")&&27===e.keyCode&&t.classList.remove("modal--visible")}),e.addEventListener("click",function(e){return e.preventDefault(),t.classList.remove("modal--visible"),!1})};l--;)e();var t=document.getElementsByClassName("settings-btn")[0],n=document.getElementsByClassName("modal--settings")[0];t.addEventListener("click",function(e){return e.preventDefault(),n.classList.add("modal--visible"),!1})}(); \ No newline at end of file | ||
diff --git a/assets/style.css b/assets/style.css index beb888d..385e1ab 100644 --- a/assets/style.css +++ b/assets/style.css | |||
@@ -1 +1 @@ | |||
@font-face{font-family:'Iosevka Term SS03';font-style:normal;font-weight:normal;src:url("/iosevka-term-ss03-regular.woff2") format("woff2"),url("/iosevka-term-ss03-regular.woff") format("woff")}body{margin:0;padding:0;background-color:#14171a;color:#cad1d8;font-family:"Iosevka Term SS03","IBM Plex Mono","Fira Code","Fira Mono","Roboto Mono","Droid Sans Mono",Monaco,Consolas,Courier,monospace;font-size:1.0625em;line-height:1.5}h1,h2,h3,h4,h5,h6{font:inherit;color:#fff;margin:0}button{background:none;border:0;padding:0;color:#fff;font:inherit;text-decoration:underline;cursor:pointer}button:focus{outline:1px dotted currentColor}img{display:inline-block;vertical-align:top;max-width:8em;margin:.1em 0}img::selection{background-color:rgba(239,198,138,0.35)}img.expanded{max-width:40em;max-width:80ch}img.faded{opacity:.5}strong{font-weight:normal}::selection{color:#000;background-color:rgba(239,198,138,0.996)}:link{color:#fff}:visited{color:#cad1d8}:link:hover,:visited:hover{color:#fff}.novisit{color:#fff}.header-base{display:flex;flex-direction:row;align-items:center;justify-content:space-between;border-bottom:1px solid #353a3f}.header{padding:.9em 1em;color:#5d646a}.location{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:.5em;color:#5d646a}.location__prefix{margin-right:.3em;color:#5d646a}.location__prefix:hover{color:#fff}.location__slash{margin:0 .3em}.location__uripart{color:#fff}.location__uripart+.location__slash+.location__uripart{color:#cad1d8}.location__uripart:link:hover,.location__uripart:visited:hover{color:#fff}.actions{flex:0 0 auto}.actions :visited{color:#fff}.wrap{padding:2em 1em;text-align:center}.content{box-sizing:border-box;display:inline-block;min-width:0;max-width:100%;margin:0;padding:0;text-align:left;font:inherit;white-space:pre-wrap;word-wrap:break-word}.content--has-type-annotations{padding-left:3em;padding-left:5ch}.type-annotation{margin-left:-3em;margin-left:-5ch;color:#929ba3;white-space:pre}.modal{position:fixed;top:0;left:0;z-index:100;display:none;width:100%;height:100%;box-sizing:border-box;padding:2em;background-color:rgba(0,0,0,0.75)}.modal--visible{display:block}.modal__content{max-width:30em;padding:1.5em 1.8em;margin:0 auto;background-color:#14171a;box-shadow:0 .3em 2em #000;text-align:left}.modal__head{padding-bottom:.75em;margin-bottom:1.5em}.modal__title{padding-right:1em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-transform:uppercase}.setting{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between}.setting::after{order:2;flex:1 1 auto;display:block;height:0;margin:0 .5em;border-bottom:2px dotted #353a3f;content:''}.setting__label{order:1}.setting__value{order:3}#none{position:fixed;top:0;left:0;width:0;height:0}@media screen and (max-width: 800px){body{font-size:1em}.modal{padding:1em}.modal__content{padding:1em 1.3em}}@media screen and (max-width: 500px){.location__prefix{display:none}} | @font-face{font-family:'Iosevka Term SS03';font-style:normal;font-weight:normal;src:url("/iosevka-term-ss03-regular.woff2") format("woff2"),url("/iosevka-term-ss03-regular.woff") format("woff")}body{margin:0;padding:0;background-color:#14171a;color:#cad1d8;font-family:"Iosevka Term SS03","IBM Plex Mono","Fira Code","Fira Mono","Roboto Mono","Droid Sans Mono",Monaco,Consolas,Courier,monospace;font-size:1.0625em;line-height:1.5}h1,h2,h3,h4,h5,h6{font:inherit;color:#fff;margin:0}button{background:none;border:0;padding:0;color:#fff;font:inherit;text-decoration:underline;cursor:pointer}button:focus{outline:1px dotted currentColor}img{display:inline-block;vertical-align:top;max-width:8em;margin:.1em 0}img::selection{background-color:rgba(239,198,138,0.35)}img.expanded{max-width:40em;max-width:80ch}img.faded{opacity:.5}strong{font-weight:normal}::selection{color:#000;background-color:rgba(239,198,138,0.996)}:link{color:#fff}:visited{color:#cad1d8}:link:hover,:visited:hover{color:#fff}.novisit{color:#fff}.header-base{display:flex;flex-direction:row;align-items:center;justify-content:space-between;border-bottom:1px solid #353a3f}.header{padding:.9em 1em;color:#5d646a}.location{flex:0 1 auto;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:.5em;color:#5d646a}.location__prefix{margin-right:.3em;color:#5d646a}.location__prefix:hover{color:#fff}.location__slash{margin:0 .3em}.location__uripart{color:#fff}.location__uripart+.location__slash+.location__uripart{color:#cad1d8}.location__uripart:link:hover,.location__uripart:visited:hover{color:#fff}.actions{flex:0 0 auto}.actions :visited{color:#fff}.action{display:inline}.action+.action::before{content:' | '}.wrap{padding:2em 1em;text-align:center}.content{box-sizing:border-box;display:inline-block;min-width:0;max-width:100%;margin:0;padding:0;text-align:left;font:inherit}.content--wrap{white-space:pre-wrap;word-wrap:break-word}.content--has-type-annotations{padding-left:3em;padding-left:5ch}.type-annotation{margin-left:-3em;margin-left:-5ch;color:#929ba3;white-space:pre}.modal{position:fixed;top:0;left:0;z-index:100;display:none;width:100%;height:100%;box-sizing:border-box;padding:2em;background-color:rgba(0,0,0,0.75)}.modal--visible{display:block}.modal__content{max-width:30em;padding:1.5em 1.8em;margin:0 auto;background-color:#14171a;box-shadow:0 .3em 2em #000;text-align:left}.modal__head{padding-bottom:.75em;margin-bottom:1.5em}.modal__title{padding-right:1em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;text-transform:uppercase}.setting{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between}.setting::after{order:2;flex:1 1 auto;display:block;height:0;margin:0 .5em;border-bottom:2px dotted #353a3f;content:''}.setting__label{order:1}.setting__value{order:3}#none{position:fixed;top:0;left:0;width:0;height:0}@media screen and (max-width: 800px){body{font-size:1em}.modal{padding:1em}.modal__content{padding:1em 1.3em}}@media screen and (max-width: 500px){.location__prefix{display:none}.action{display:block}.action+.action::before{content:''}} | ||
diff --git a/css/main.scss b/css/main.scss index 4341ca3..f095179 100644 --- a/css/main.scss +++ b/css/main.scss | |||
@@ -174,6 +174,16 @@ strong { | |||
174 | } | 174 | } |
175 | } | 175 | } |
176 | 176 | ||
177 | .action { | ||
178 | display: inline; | ||
179 | |||
180 | & + & { | ||
181 | &::before { | ||
182 | content: ' | ' | ||
183 | } | ||
184 | } | ||
185 | } | ||
186 | |||
177 | // | 187 | // |
178 | 188 | ||
179 | .wrap { | 189 | .wrap { |
@@ -184,16 +194,17 @@ strong { | |||
184 | .content { | 194 | .content { |
185 | box-sizing: border-box; | 195 | box-sizing: border-box; |
186 | display: inline-block; | 196 | display: inline-block; |
187 | //min-width: 50em; | ||
188 | //min-width: 5ch + 80; | ||
189 | min-width: 0; | 197 | min-width: 0; |
190 | max-width: 100%; | 198 | max-width: 100%; |
191 | margin: 0; | 199 | margin: 0; |
192 | padding: 0; | 200 | padding: 0; |
193 | text-align: left; | 201 | text-align: left; |
194 | font: inherit; | 202 | font: inherit; |
195 | white-space: pre-wrap; | 203 | |
196 | word-wrap: break-word; | 204 | &--wrap { |
205 | white-space: pre-wrap; | ||
206 | word-wrap: break-word; | ||
207 | } | ||
197 | 208 | ||
198 | &--has-type-annotations { | 209 | &--has-type-annotations { |
199 | padding-left: 3em; | 210 | padding-left: 3em; |
@@ -308,4 +319,14 @@ strong { | |||
308 | .location__prefix { | 319 | .location__prefix { |
309 | display: none; | 320 | display: none; |
310 | } | 321 | } |
322 | |||
323 | .action { | ||
324 | display: block; | ||
325 | |||
326 | & + & { | ||
327 | &::before { | ||
328 | content: ''; | ||
329 | } | ||
330 | } | ||
331 | } | ||
311 | } | 332 | } |
@@ -12,10 +12,14 @@ function ensureSetting(key: string, defaultValue: string): string { | |||
12 | } | 12 | } |
13 | 13 | ||
14 | const settings = new KeyValueStore({ | 14 | const settings = new KeyValueStore({ |
15 | wordWrap: { | ||
16 | value: ensureSetting('word-wrap', '1') === '1', | ||
17 | valueRange: [false, true] | ||
18 | }, | ||
15 | imagePreviews: { | 19 | imagePreviews: { |
16 | value: ensureSetting('image-previews', '1') === '1', | 20 | value: ensureSetting('image-previews', '1') === '1', |
17 | valueRange: [false, true] | 21 | valueRange: [false, true] |
18 | } | 22 | }, |
19 | }); | 23 | }); |
20 | 24 | ||
21 | // | 25 | // |
@@ -52,6 +56,10 @@ const settings = new KeyValueStore({ | |||
52 | })(); | 56 | })(); |
53 | 57 | ||
54 | (() => { | 58 | (() => { |
59 | const contentEl = document.getElementsByClassName('content')[0]; | ||
60 | |||
61 | // | ||
62 | |||
55 | const settingImagePreviewEl = document.getElementsByClassName('setting--image-previews')[0]; | 63 | const settingImagePreviewEl = document.getElementsByClassName('setting--image-previews')[0]; |
56 | const settingImagePreviewValueEl = settingImagePreviewEl.getElementsByClassName('setting__value')[0]; | 64 | const settingImagePreviewValueEl = settingImagePreviewEl.getElementsByClassName('setting__value')[0]; |
57 | const settingImagePreviewCallback = (value: boolean, init = false) => { | 65 | const settingImagePreviewCallback = (value: boolean, init = false) => { |
@@ -73,6 +81,30 @@ const settings = new KeyValueStore({ | |||
73 | 81 | ||
74 | settingImagePreviewCallback(settings.getValue('imagePreviews'), true); | 82 | settingImagePreviewCallback(settings.getValue('imagePreviews'), true); |
75 | settings.addCallback('imagePreviews', settingImagePreviewCallback); | 83 | settings.addCallback('imagePreviews', settingImagePreviewCallback); |
84 | |||
85 | // | ||
86 | |||
87 | const settingWordWrapEl = document.getElementsByClassName('setting--word-wrap')[0]; | ||
88 | const settingWordWrapValueEl = settingWordWrapEl.getElementsByClassName('setting__value')[0]; | ||
89 | const settingWordWrapCallback = (value: boolean) => { | ||
90 | if (value) { | ||
91 | contentEl.classList.add("content--wrap"); | ||
92 | } else { | ||
93 | contentEl.classList.remove("content--wrap"); | ||
94 | } | ||
95 | |||
96 | localStorage.setItem('image-previews', value ? '1' : '0'); | ||
97 | settingWordWrapValueEl.textContent = value ? '[yes]' : '[no]'; | ||
98 | } | ||
99 | |||
100 | settingWordWrapValueEl.addEventListener('click', e => { | ||
101 | e.preventDefault(); | ||
102 | settings.cycleValue('wordWrap'); | ||
103 | return false; | ||
104 | }); | ||
105 | |||
106 | settingWordWrapCallback(settings.getValue('wordWrap')); | ||
107 | settings.addCallback('wordWrap', settingWordWrapCallback); | ||
76 | })(); | 108 | })(); |
77 | 109 | ||
78 | (() => { | 110 | (() => { |
diff --git a/template.go b/template.go index 93777b2..3d95838 100644 --- a/template.go +++ b/template.go | |||
@@ -45,8 +45,10 @@ var tpltext = `<!doctype html> | |||
45 | <span class="location__uripart">{{ $uriLast -}}</span> | 45 | <span class="location__uripart">{{ $uriLast -}}</span> |
46 | </div> | 46 | </div> |
47 | <div class="actions"> | 47 | <div class="actions"> |
48 | {{- if not .Lines }}<a href="/{{ .URI | replace "^(.*?)/0" "$1/9" }}">View raw</a> | {{ end -}} | 48 | {{- if not .Lines -}} |
49 | <button class="settings-btn">Settings</button> | 49 | <div class="action"><a href="/{{ .URI | replace "^(.*?)/0" "$1/9" }}">View raw</a></div> |
50 | {{- end -}} | ||
51 | <div class="action"><button class="settings-btn">Settings</button></div> | ||
50 | </div> | 52 | </div> |
51 | </header> | 53 | </header> |
52 | <main class="wrap"> | 54 | <main class="wrap"> |
@@ -75,6 +77,10 @@ var tpltext = `<!doctype html> | |||
75 | <h1 class="modal__title">Settings</h1> | 77 | <h1 class="modal__title">Settings</h1> |
76 | <button class="modal__close-btn">Close</button> | 78 | <button class="modal__close-btn">Close</button> |
77 | </header> | 79 | </header> |
80 | <div class="setting setting--word-wrap"> | ||
81 | <strong class="setting__label">Wrap wide content</strong> | ||
82 | <button class="setting__value">[N/A]</button> | ||
83 | </div> | ||
78 | <div class="setting setting--image-previews"> | 84 | <div class="setting setting--image-previews"> |
79 | <strong class="setting__label">Image thumbnails</strong> | 85 | <strong class="setting__label">Image thumbnails</strong> |
80 | <button class="setting__value">[N/A]</button> | 86 | <button class="setting__value">[N/A]</button> |