mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-12 17:46:26 +02:00
Code Issues Releases Wiki Activity

Merge pull request #285 from chinchang/mobile-support

Browse Source 
Mobile support
This commit is contained in:
Kushagra Gour
2018-04-15 20:03:55 +05:30
committed by GitHub
parent 784c09e85e 1d4f172fc3
commit 8f29e5440a
8 changed files with 9251 additions and 8409 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.prettierignore Normal file
View File

@ -0,0 +1,2 @@
src/lib/
app/

4
.prettierrc Normal file
View File

@ -0,0 +1,4 @@
{
"singleQuote": true,
"useTabs": true
}

2
git-hooks/pre-commit
View File

@ -2,7 +2,7 @@
# RUN PRETTIER # RUN PRETTIER
filesToPrettify=$(git diff --staged --name-only | grep ".*\.\(js\|json\|css\|md\)") filesToPrettify=$(git diff --staged --name-only | grep ".*\.\(js\|json\|css\|md\)")
echo "$fileToPrettify" | xargs ./node_modules/.bin/prettier --single-quote --use-tabs --write echo "$fileToPrettify" | xargs ./node_modules/.bin/prettier --config ./prettierrc --write
echo "$fileToPrettify" | xargs git add echo "$fileToPrettify" | xargs git add
# Fetch .js or .json filed from staged files # Fetch .js or .json filed from staged files

65
src/index.html
View File

@ -1,11 +1,14 @@
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>Web Maker</title> <title>Web Maker</title>
<link rel="icon" href="icon-128.png"> <link rel="icon" href="icon-128.png">
<meta name=viewport content="width=device-width, initial-scale=1">
<style> <style>
/* Critically acclaimed CSS */ /* Critically acclaimed CSS */
.saved-items-pane { .saved-items-pane {
position: fixed; position: fixed;
right: 0; right: 0;
@ -14,9 +17,11 @@
width: 450px; width: 450px;
transform: translateX(100%); transform: translateX(100%);
} }
.modal { .modal {
visibility: hidden; visibility: hidden;
} }
</style> </style>
<!-- build:css vendor.css --> <!-- build:css vendor.css -->
@ -195,57 +200,65 @@
<div class="global-console-container" id="globalConsoleContainerEl"></div> <div class="global-console-container" id="globalConsoleContainerEl"></div>
<div id="footer" class="footer"> <div id="footer" class="footer">
<div class="footer__right fr"> <div class="footer__right fr">
<a id="saveHtmlBtn" class="mode-btn hint--rounded hint--top-left" data-hint="Save as HTML file"> <a id="saveHtmlBtn" class="mode-btn hint--rounded hint--top-left hide-on-mobile" data-hint="Save as HTML file">
<svg viewBox="0 0 24 24"> <svg viewBox="0 0 24 24">
<path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" /> <path d="M5,20H19V18H5M19,9H15V3H9V9H5L12,16L19,9Z" />
</svg> </svg>
</a> </a>
<svg style="display: none;" xmlns="http://www.w3.org/2000/svg"> <svg style="display: none;" xmlns="http://www.w3.org/2000/svg">
<symbol id="codepen-logo" viewBox="0 0 120 120"><path class="outer-ring" d="M60.048 0C26.884 0 0 26.9 0 60.048s26.884 60 60 60.047c33.163 0 60.047-26.883 60.047-60.047 S93.211 0 60 0z M60.048 110.233c-27.673 0-50.186-22.514-50.186-50.186S32.375 9.9 60 9.9 c27.672 0 50.2 22.5 50.2 50.186S87.72 110.2 60 110.233z"/><path class="inner-box" d="M97.147 48.319c-0.007-0.047-0.019-0.092-0.026-0.139c-0.016-0.09-0.032-0.18-0.056-0.268 c-0.014-0.053-0.033-0.104-0.05-0.154c-0.025-0.078-0.051-0.156-0.082-0.232c-0.021-0.053-0.047-0.105-0.071-0.156 c-0.033-0.072-0.068-0.143-0.108-0.211c-0.029-0.051-0.061-0.1-0.091-0.148c-0.043-0.066-0.087-0.131-0.135-0.193 c-0.035-0.047-0.072-0.094-0.109-0.139c-0.051-0.059-0.104-0.117-0.159-0.172c-0.042-0.043-0.083-0.086-0.127-0.125 c-0.059-0.053-0.119-0.104-0.181-0.152c-0.048-0.037-0.095-0.074-0.145-0.109c-0.019-0.012-0.035-0.027-0.053-0.039L61.817 23.5 c-1.072-0.715-2.468-0.715-3.54 0L24.34 46.081c-0.018 0.012-0.034 0.027-0.053 0.039c-0.05 0.035-0.097 0.072-0.144 0.1 c-0.062 0.049-0.123 0.1-0.181 0.152c-0.045 0.039-0.086 0.082-0.128 0.125c-0.056 0.055-0.108 0.113-0.158 0.2 c-0.038 0.045-0.075 0.092-0.11 0.139c-0.047 0.062-0.092 0.127-0.134 0.193c-0.032 0.049-0.062 0.098-0.092 0.1 c-0.039 0.068-0.074 0.139-0.108 0.211c-0.024 0.051-0.05 0.104-0.071 0.156c-0.031 0.076-0.057 0.154-0.082 0.2 c-0.017 0.051-0.035 0.102-0.05 0.154c-0.023 0.088-0.039 0.178-0.056 0.268c-0.008 0.047-0.02 0.092-0.025 0.1 c-0.019 0.137-0.029 0.275-0.029 0.416V71.36c0 0.1 0 0.3 0 0.418c0.006 0 0 0.1 0 0.1 c0.017 0.1 0 0.2 0.1 0.268c0.015 0.1 0 0.1 0.1 0.154c0.025 0.1 0.1 0.2 0.1 0.2 c0.021 0.1 0 0.1 0.1 0.154c0.034 0.1 0.1 0.1 0.1 0.213c0.029 0 0.1 0.1 0.1 0.1 c0.042 0.1 0.1 0.1 0.1 0.193c0.035 0 0.1 0.1 0.1 0.139c0.05 0.1 0.1 0.1 0.2 0.2 c0.042 0 0.1 0.1 0.1 0.125c0.058 0.1 0.1 0.1 0.2 0.152c0.047 0 0.1 0.1 0.1 0.1 c0.019 0 0 0 0.1 0.039L58.277 96.64c0.536 0.4 1.2 0.5 1.8 0.537c0.616 0 1.233-0.18 1.77-0.537 l33.938-22.625c0.018-0.012 0.034-0.027 0.053-0.039c0.05-0.035 0.097-0.072 0.145-0.109c0.062-0.049 0.122-0.1 0.181-0.152 c0.044-0.039 0.085-0.082 0.127-0.125c0.056-0.055 0.108-0.113 0.159-0.172c0.037-0.045 0.074-0.09 0.109-0.139 c0.048-0.062 0.092-0.127 0.135-0.193c0.03-0.049 0.062-0.098 0.091-0.146c0.04-0.07 0.075-0.141 0.108-0.213 c0.024-0.051 0.05-0.102 0.071-0.154c0.031-0.078 0.057-0.156 0.082-0.234c0.017-0.051 0.036-0.102 0.05-0.154 c0.023-0.088 0.04-0.178 0.056-0.268c0.008-0.045 0.02-0.092 0.026-0.137c0.018-0.139 0.028-0.277 0.028-0.418V48.735 C97.176 48.6 97.2 48.5 97.1 48.319z M63.238 32.073l25.001 16.666L77.072 56.21l-13.834-9.254V32.073z M56.856 32.1 v14.883L43.023 56.21l-11.168-7.471L56.856 32.073z M29.301 54.708l7.983 5.34l-7.983 5.34V54.708z M56.856 88.022L31.855 71.4 l11.168-7.469l13.833 9.252V88.022z M60.048 67.597l-11.286-7.549l11.286-7.549l11.285 7.549L60.048 67.597z M63.238 88.022V73.14 l13.834-9.252l11.167 7.469L63.238 88.022z M90.794 65.388l-7.982-5.34l7.982-5.34V65.388z"/></symbol> <symbol id="codepen-logo" viewBox="0 0 120 120">
<path class="outer-ring" d="M60.048 0C26.884 0 0 26.9 0 60.048s26.884 60 60 60.047c33.163 0 60.047-26.883 60.047-60.047 S93.211 0 60 0z M60.048 110.233c-27.673 0-50.186-22.514-50.186-50.186S32.375 9.9 60 9.9 c27.672 0 50.2 22.5 50.2 50.186S87.72 110.2 60 110.233z"
/>
<path class="inner-box" d="M97.147 48.319c-0.007-0.047-0.019-0.092-0.026-0.139c-0.016-0.09-0.032-0.18-0.056-0.268 c-0.014-0.053-0.033-0.104-0.05-0.154c-0.025-0.078-0.051-0.156-0.082-0.232c-0.021-0.053-0.047-0.105-0.071-0.156 c-0.033-0.072-0.068-0.143-0.108-0.211c-0.029-0.051-0.061-0.1-0.091-0.148c-0.043-0.066-0.087-0.131-0.135-0.193 c-0.035-0.047-0.072-0.094-0.109-0.139c-0.051-0.059-0.104-0.117-0.159-0.172c-0.042-0.043-0.083-0.086-0.127-0.125 c-0.059-0.053-0.119-0.104-0.181-0.152c-0.048-0.037-0.095-0.074-0.145-0.109c-0.019-0.012-0.035-0.027-0.053-0.039L61.817 23.5 c-1.072-0.715-2.468-0.715-3.54 0L24.34 46.081c-0.018 0.012-0.034 0.027-0.053 0.039c-0.05 0.035-0.097 0.072-0.144 0.1 c-0.062 0.049-0.123 0.1-0.181 0.152c-0.045 0.039-0.086 0.082-0.128 0.125c-0.056 0.055-0.108 0.113-0.158 0.2 c-0.038 0.045-0.075 0.092-0.11 0.139c-0.047 0.062-0.092 0.127-0.134 0.193c-0.032 0.049-0.062 0.098-0.092 0.1 c-0.039 0.068-0.074 0.139-0.108 0.211c-0.024 0.051-0.05 0.104-0.071 0.156c-0.031 0.076-0.057 0.154-0.082 0.2 c-0.017 0.051-0.035 0.102-0.05 0.154c-0.023 0.088-0.039 0.178-0.056 0.268c-0.008 0.047-0.02 0.092-0.025 0.1 c-0.019 0.137-0.029 0.275-0.029 0.416V71.36c0 0.1 0 0.3 0 0.418c0.006 0 0 0.1 0 0.1 c0.017 0.1 0 0.2 0.1 0.268c0.015 0.1 0 0.1 0.1 0.154c0.025 0.1 0.1 0.2 0.1 0.2 c0.021 0.1 0 0.1 0.1 0.154c0.034 0.1 0.1 0.1 0.1 0.213c0.029 0 0.1 0.1 0.1 0.1 c0.042 0.1 0.1 0.1 0.1 0.193c0.035 0 0.1 0.1 0.1 0.139c0.05 0.1 0.1 0.1 0.2 0.2 c0.042 0 0.1 0.1 0.1 0.125c0.058 0.1 0.1 0.1 0.2 0.152c0.047 0 0.1 0.1 0.1 0.1 c0.019 0 0 0 0.1 0.039L58.277 96.64c0.536 0.4 1.2 0.5 1.8 0.537c0.616 0 1.233-0.18 1.77-0.537 l33.938-22.625c0.018-0.012 0.034-0.027 0.053-0.039c0.05-0.035 0.097-0.072 0.145-0.109c0.062-0.049 0.122-0.1 0.181-0.152 c0.044-0.039 0.085-0.082 0.127-0.125c0.056-0.055 0.108-0.113 0.159-0.172c0.037-0.045 0.074-0.09 0.109-0.139 c0.048-0.062 0.092-0.127 0.135-0.193c0.03-0.049 0.062-0.098 0.091-0.146c0.04-0.07 0.075-0.141 0.108-0.213 c0.024-0.051 0.05-0.102 0.071-0.154c0.031-0.078 0.057-0.156 0.082-0.234c0.017-0.051 0.036-0.102 0.05-0.154 c0.023-0.088 0.04-0.178 0.056-0.268c0.008-0.045 0.02-0.092 0.026-0.137c0.018-0.139 0.028-0.277 0.028-0.418V48.735 C97.176 48.6 97.2 48.5 97.1 48.319z M63.238 32.073l25.001 16.666L77.072 56.21l-13.834-9.254V32.073z M56.856 32.1 v14.883L43.023 56.21l-11.168-7.471L56.856 32.073z M29.301 54.708l7.983 5.34l-7.983 5.34V54.708z M56.856 88.022L31.855 71.4 l11.168-7.469l13.833 9.252V88.022z M60.048 67.597l-11.286-7.549l11.286-7.549l11.285 7.549L60.048 67.597z M63.238 88.022V73.14 l13.834-9.252l11.167 7.469L63.238 88.022z M90.794 65.388l-7.982-5.34l7.982-5.34V65.388z"
/>
</symbol>
</svg> </svg>
<a href="" id="codepenBtn" class="mode-btn hint--rounded hint--top-left" aria-label="Edit on CodePen"> <a href="" id="codepenBtn" class="mode-btn hint--rounded hint--top-left hide-on-mobile" aria-label="Edit on CodePen">
<svg> <svg>
<use xlink:href="#codepen-logo"></use> <use xlink:href="#codepen-logo"></use>
</svg> </svg>
</a> </a>
<a href="" id="screenshotBtn" class="mode-btn hint--rounded hint--top-left show-when-extension" d-click="takeScreenshot" aria-label="Take screenshot of preview"> <a href="" id="screenshotBtn" class="mode-btn hint--rounded hint--top-left show-when-extension" d-click="takeScreenshot"
aria-label="Take screenshot of preview">
<svg style="width:24px;height:24px" viewBox="0 0 24 24"> <svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z" /> <path d="M4,4H7L9,2H15L17,4H20A2,2 0 0,1 22,6V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7M12,9A3,3 0 0,1 15,12A3,3 0 0,1 12,15A3,3 0 0,1 9,12A3,3 0 0,1 12,9Z"
/>
</svg> </svg>
</a> </a>
<div class="footer__separator"></div> <div class="footer__separator hide-on-mobile"></div>
<a id="layoutBtn1" class="mode-btn"> <a id="layoutBtn1" class="mode-btn hide-on-mobile">
<svg viewBox="0 0 100 100" style="transform:rotate(-90deg)"> <svg viewBox="0 0 100 100" style="transform:rotate(-90deg)">
<use xlink:href="#mode-icon" /> <use xlink:href="#mode-icon" />
</svg> </svg>
</a> </a>
<a id="layoutBtn2" class="mode-btn"> <a id="layoutBtn2" class="mode-btn hide-on-mobile">
<svg viewBox="0 0 100 100"> <svg viewBox="0 0 100 100">
<use xlink:href="#mode-icon" /> <use xlink:href="#mode-icon" />
</svg> </svg>
</a> </a>
<a id="layoutBtn3" class="mode-btn"> <a id="layoutBtn3" class="mode-btn hide-on-mobile">
<svg viewBox="0 0 100 100" style="transform:rotate(90deg)"> <svg viewBox="0 0 100 100" style="transform:rotate(90deg)">
<use xlink:href="#mode-icon" /> <use xlink:href="#mode-icon" />
</svg> </svg>
</a> </a>
<a id="layoutBtn5" class="mode-btn"> <a id="layoutBtn5" class="mode-btn hide-on-mobile">
<svg viewBox="0 0 100 100"> <svg viewBox="0 0 100 100">
<use xlink:href="#vertical-mode-icon" /> <use xlink:href="#vertical-mode-icon" />
</svg> </svg>
</a> </a>
<a id="layoutBtn4" class="mode-btn hint--top-left hint--rounded" aria-label="Full Screen"> <a id="layoutBtn4" class="mode-btn hint--top-left hint--rounded hide-on-mobile" aria-label="Full Screen">
<svg viewBox="0 0 100 100"> <svg viewBox="0 0 100 100">
<rect x="0" y="0" width="100" height="100" /> <rect x="0" y="0" width="100" height="100" />
</svg> </svg>
</a> </a>
<a class="mode-btn hint--top-left hint--rounded" aria-label="Detach Preview" d-click="openDetachedPreview"> <a class="mode-btn hint--top-left hint--rounded hide-on-mobile" aria-label="Detach Preview" d-click="openDetachedPreview">
<svg viewBox="0 0 24 24"> <svg viewBox="0 0 24 24">
<path d="M22,17V7H6V17H22M22,5A2,2 0 0,1 24,7V17C24,18.11 23.1,19 22,19H16V21H18V23H10V21H12V19H6C4.89,19 4,18.11 4,17V7A2,2 0 0,1 6,5H22M2,3V15H0V3A2,2 0 0,1 2,1H20V3H2Z" /> <path d="M22,17V7H6V17H22M22,5A2,2 0 0,1 24,7V17C24,18.11 23.1,19 22,19H16V21H18V23H10V21H12V19H6C4.89,19 4,18.11 4,17V7A2,2 0 0,1 6,5H22M2,3V15H0V3A2,2 0 0,1 2,1H20V3H2Z"
/>
</svg> </svg>
</a> </a>
@ -266,26 +279,34 @@
</div> </div>
<a href="https://webmakerapp.com/" target="_blank"><div class="logo"></div></a> <a href="https://webmakerapp.com/" target="_blank">
&copy;<span class="web-maker-with-tag">Web Maker</span> &nbsp;&nbsp; <div class="logo"></div>
<a d-open-modal="helpModal" data-event-category="ui" data-event-action="helpButtonClick" class="footer__link hint--rounded hint--top-right" aria-label="Help"> </a>
&copy;
<span class="web-maker-with-tag">Web Maker</span> &nbsp;&nbsp;
<a d-open-modal="helpModal" data-event-category="ui" data-event-action="helpButtonClick" class="footer__link hint--rounded hint--top-right"
aria-label="Help">
<svg style="width:20px; height:20px; vertical-align:text-bottom" viewBox="0 0 24 24"> <svg style="width:20px; height:20px; vertical-align:text-bottom" viewBox="0 0 24 24">
<path d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" /> <path d="M15.07,11.25L14.17,12.17C13.45,12.89 13,13.5 13,15H11V14.5C11,13.39 11.45,12.39 12.17,11.67L13.41,10.41C13.78,10.05 14,9.55 14,9C14,7.89 13.1,7 12,7A2,2 0 0,0 10,9H8A4,4 0 0,1 12,5A4,4 0 0,1 16,9C16,9.88 15.64,10.67 15.07,11.25M13,19H11V17H13M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"
/>
</svg> </svg>
</a> </a>
<a d-open-modal="keyboardShortcutsModal" data-event-category="ui" data-event-action="keyboardShortcutButtonClick" class="footer__link hint--rounded hint--top-right" aria-label="Keyboard shortcuts"> <a d-open-modal="keyboardShortcutsModal" data-event-category="ui" data-event-action="keyboardShortcutButtonClick" class="footer__link hint--rounded hint--top-right hide-on-mobile"
aria-label="Keyboard shortcuts">
<svg style="width:20px; height:20px; vertical-align:text-bottom"> <svg style="width:20px; height:20px; vertical-align:text-bottom">
<use xlink:href="#keyboard-icon"></use> <use xlink:href="#keyboard-icon"></use>
</svg> </svg>
</a> </a>
<!-- #00ACED --> <!-- #00ACED -->
<a class="footer__link hint--rounded hint--top-right" aria-label="Tweet about 'Web Maker'" href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,frontend,playground,offline" target="_blank"> <a class="footer__link hint--rounded hint--top-right" aria-label="Tweet about 'Web Maker'" href="http://twitter.com/share?url=https://webmakerapp.com/&text=Web Maker - A blazing fast %26 offline web playground! via @webmakerApp&related=webmakerApp&hashtags=web,frontend,playground,offline"
target="_blank">
<svg style="width:20px; height:20px; vertical-align:text-bottom"> <svg style="width:20px; height:20px; vertical-align:text-bottom">
<use xlink:href="#twitter-icon"></use> <use xlink:href="#twitter-icon"></use>
</svg> </svg>
</a> </a>
<a d-click="openSupportDeveloperModal" data-event-action="supportDeveloperFooterBtnClick" class="footer__link ml-1 hint--rounded hint--top-right" aria-label="Support the developer by pledging some amount" target="_blank"> <a d-click="openSupportDeveloperModal" data-event-action="supportDeveloperFooterBtnClick" class="footer__link ml-1 hint--rounded hint--top-right hide-on-mobile"
aria-label="Support the developer by pledging some amount" target="_blank">
Support the developer Support the developer
</a> </a>
@ -418,7 +439,7 @@
<hr> <hr>
<h3>Editor</h3> <h3>Editor</h3>
<div class="flex"> <div class="flex block--mobile">
<div> <div>
<label class="line"> <label class="line">
@ -475,7 +496,7 @@
</label> </label>
</div> </div>
</div> </div>
<div class="ml-2"> <div class="ml-2 ml-0--mobile">
<label class="line" title="Toggle wrapping of long sentences onto new line"> <label class="line" title="Toggle wrapping of long sentences onto new line">
<input type="checkbox" d-change="updateSetting" data-setting="lineWrap"> Line wrap <input type="checkbox" d-change="updateSetting" data-setting="lineWrap"> Line wrap
</label> </label>

17801
src/lib/codemirror/lib/codemirror.js vendored
View File

File diff suppressed because it is too large Load Diff

10
src/script.js
View File

@ -286,6 +286,9 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
}); });
} }
function toggleLayout(mode) { function toggleLayout(mode) {
/* eslint-disable no-param-reassign */
mode = window.innerWidth < 500 ? 2 : mode;
if (currentLayoutMode === mode) { if (currentLayoutMode === mode) {
mainSplitInstance.setSizes(getMainSplitSizesToApply()); mainSplitInstance.setSizes(getMainSplitSizesToApply());
codeSplitInstance.setSizes(currentItem.sizes || [33.33, 33.33, 33.33]); codeSplitInstance.setSizes(currentItem.sizes || [33.33, 33.33, 33.33]);
@ -2190,6 +2193,8 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
} }
}); });
document.body.style.height = `${window.innerHeight}px`;
function getToggleLayoutButtonListener(mode) { function getToggleLayoutButtonListener(mode) {
return function() { return function() {
saveSetting('layoutMode', mode); saveSetting('layoutMode', mode);
@ -2411,7 +2416,10 @@ loginModal, profileModal, profileAvatarImg, profileUserName, openItemsBtn, askTo
if (typeof e.target.className !== 'string') { if (typeof e.target.className !== 'string') {
return; return;
} }
if (e.target.className.indexOf('modal-overlay') !== -1) { if (
e.target.classList.contains('modal-overlay') ||
e.target.classList.contains('modal')
) {
closeAllOverlays(); closeAllOverlays();
} }
}); });

4
src/service-worker-registration.js
View File

@ -19,7 +19,9 @@
if ( if (
'serviceWorker' in navigator && 'serviceWorker' in navigator &&
document.cookie.indexOf('wmdebug') === -1 && document.cookie.indexOf('wmdebug') === -1 &&
location.href.indexOf('chrome-extension://') === -1 location.href.indexOf('chrome-extension://') === -1 &&
location.href.indexOf('localhost') === -1 &&
location.href.indexOf('192.168') === -1
) { ) {
// Delay registration until after the page has loaded, to ensure that our // Delay registration until after the page has loaded, to ensure that our
// precaching requests don't degrade the first visit experience. // precaching requests don't degrade the first visit experience.

50
src/style.css
View File

@ -12,6 +12,10 @@ body {
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
min-height: 100vh; min-height: 100vh;
font-size: 87.5%; font-size: 87.5%;
/* speocifically for mobile when keyboard is open */
position: relative;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial,
sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'; sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol';
} }
@ -84,6 +88,18 @@ p {
.mb-2 { .mb-2 {
margin-bottom: 2rem; margin-bottom: 2rem;
} }
@media screen and (max-width: 500px) {
.block--mobile {
display: block;
}
.ml-0--mobile {
margin-left: 0rem;
}
.hide-on-mobile {
display: none !important;
}
}
hr { hr {
background: 0; background: 0;
border: 0; border: 0;
@ -332,6 +348,12 @@ body:not(.light-version).overlay-visible .main-container {
width: 18px; width: 18px;
height: 18px; height: 18px;
} }
.code-wrap__header-right-options {
position: relative;
/* bring over mode select boxes */
z-index: 1;
}
.code-wrap__collapse-btn:before { .code-wrap__collapse-btn:before {
/* maximize icon */ /* maximize icon */
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px" viewBox="0 0 24 24"><path fill="rgba(255,255,255,0.2)" d="M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z" /></svg>'); content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" style="width:18px;height:18px" viewBox="0 0 24 24"><path fill="rgba(255,255,255,0.2)" d="M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z" /></svg>');
@ -553,14 +575,11 @@ body > #demo-frame {
left: 0; left: 0;
width: 100vw; width: 100vw;
height: 100vh; height: 100vh;
display: flex; overflow-y: auto;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
z-index: 2000; z-index: 2000;
visibility: hidden; visibility: hidden;
/* So that modal overlay gets pointer events */
pointer-events: none;
} }
.modal__close-btn { .modal__close-btn {
position: absolute; position: absolute;
@ -587,13 +606,13 @@ body > #demo-frame {
font-size: 1.1em; font-size: 1.1em;
line-height: 1.4; line-height: 1.4;
max-width: 85vw; max-width: 85vw;
max-height: 90vh; margin: 2rem auto;
box-sizing: border-box; box-sizing: border-box;
overflow-y: auto; overflow-y: auto;
pointer-events: auto; pointer-events: auto;
transition-property: transform, opacity; transition-property: transform, opacity;
transition-duration: 0.19s; transition-duration: 0.19s;
transform: translateY(-50px) scale(0.7); transform: translateY(50px) scale(0.95);
} }
@media screen and (max-width: 900px) { @media screen and (max-width: 900px) {
.modal__content { .modal__content {
@ -1217,6 +1236,25 @@ body:not(.is-app) .show-when-app {
visibility: visible; visibility: visible;
} }
@media screen and (max-width: 500px) {
body {
font-size: 70%;
}
.main-header {
overflow-x: auto;
}
.main-header__btn-wrap {
flex-shrink: 0;
}
.modal__content {
padding: 1em;
}
.saved-items-pane {
width: 77vw;
padding: 10px 20px;
}
}
/* Codemirror themes basic bg styles. This is here so that there is no big FOUC /* Codemirror themes basic bg styles. This is here so that there is no big FOUC
while the theme CSS file is loading */ while the theme CSS file is loading */
.cm-s-paraiso-dark.CodeMirror { .cm-s-paraiso-dark.CodeMirror {