This is an automated email from the ASF dual-hosted git repository. GitToTheHub pushed a commit to branch pr-improve-hello-world-template in repository https://gitbox.apache.org/repos/asf/cordova-app-hello-world.git
commit d975af871eebbb3c04049128839d35329b014925 Author: Manuel Beck <[email protected]> AuthorDate: Fri May 15 14:15:36 2026 +0200 feat: make hello world template easier to use and to expand - Before it was hard to add something when to test something. - The layout was broken on landscape - There were zoom and scroll issues with the template before - Added `user-scalable=no, maximum-scale=1, minimum-scale=1` so the app is not zoomable. Document the meta viewport attributes. Before the content was zoomed, when an input was clicked. - Improve documentation of Content Security Policy and format the content for readablility - Document CSS declarations - CSS: Changed height:100vh to min-height: 100vh, because the bottom safe area was otherwise not respected on iOS - Remove <meta name="msapplication-tap-highlight" content="no"> which was used Windows Phone (Internet Explorer) which is not supported anymore - Use modern JavaScript: Template litereals and const --- template_src/www/css/index.css | 131 ++++++++++++++++++----------------------- template_src/www/index.html | 64 ++++++++++++++------ template_src/www/js/index.js | 13 ++-- 3 files changed, 114 insertions(+), 94 deletions(-) diff --git a/template_src/www/css/index.css b/template_src/www/css/index.css index fd0ffe4..5d314fe 100644 --- a/template_src/www/css/index.css +++ b/template_src/www/css/index.css @@ -18,101 +18,86 @@ */ * { - -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */ + /* iOS Safari: disable the gray tap highlight flash when tapping elements. */ + -webkit-tap-highlight-color: transparent; + /* Keep element sizing predictable by including padding and border in width/height. */ box-sizing: border-box; } html { + /* Prevent pull-to-refresh and scroll chaining to keep app-like scrolling behavior. */ overscroll-behavior: none; } body { - -webkit-touch-callout: none; /* prevent callout to copy image, etc when tap to hold */ - -webkit-text-size-adjust: none; /* prevent webkit from resizing text to fit */ - -webkit-user-select: none; /* prevent copy paste, to allow, change 'none' to 'text' */ - background-color:#E4E4E4; - background-image:linear-gradient(to bottom, #A7A7A7 0%, #E4E4E4 51%); - font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif; - font-size:12px; - height:100vh; - margin:0px; - padding:0px; - /* Padding to avoid the "unsafe" areas behind notches in the screen */ - padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); + /* iOS Safari: disable text/image callout menu on long press. */ + -webkit-touch-callout: none; + /* iOS Safari: prevent automatic font inflation when device orientation changes. */ + -webkit-text-size-adjust: none; + /* Standard property for the same behavior in non-WebKit/modern engines. */ text-size-adjust: none; - text-transform:uppercase; + /* Legacy WebKit prefix for user-select, keeps behavior consistent on older iOS WebViews. */ + -webkit-user-select: none; + /* Disable long-press text selection/highlight for a more native app feel. */ user-select: none; - width:100%; -} - -/* Portrait layout (default) */ -.app { - background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */ - position:absolute; /* position in the center of the screen */ - left:50%; - top:50%; - height:50px; /* text area height */ - width:225px; /* text area width */ - text-align:center; - padding:180px 0px 0px 0px; /* image height is 200px (bottom 20px are overlapped with text) */ - margin:-115px 0px 0px -112px; /* offset vertical: half of image height and text area height */ - /* offset horizontal: half of text area width */ -} - -/* Landscape layout (with min-width) */ -@media screen and (min-aspect-ratio: 1/1) and (min-width:400px) { - .app { - background-position:left center; - padding:75px 0px 75px 170px; /* padding-top + padding-bottom + text area = image height */ - margin:-90px 0px 0px -198px; /* offset vertical: half of image height */ - /* offset horizontal: half of image width and text area width */ - } + background: linear-gradient(180deg, #f9fbff 0%, #eef4ff 100%); + color: #1f2937; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; + font-size: 16px; + line-height: 1.5; + margin: 0; + min-height: 100vh; + padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); + width: 100%; } -h1 { - font-size:24px; - font-weight:normal; - margin:0px; - overflow:visible; - padding:0px; - text-align:center; +main { + padding: 20px; } -.event { - border-radius:4px; - color:#FFFFFF; - font-size:12px; - margin:0px 30px; - padding:2px 0px; +section { + background: rgba(255, 255, 255, 0.78); + border: 1px solid #dbe3f1; + border-radius: 12px; + box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06); + margin-top: 14px; + padding: 16px; } -.event.listening { - background-color:#333333; - display:block; +#statusText { + background: rgba(239, 68, 68, 0.12); + border-radius: 8px; + color: #7f1d1d; + font-weight: 500; + margin: 0; + padding: 10px 12px; } -.event.received { - background-color:#4B946A; - display:none; +#statusText.ready { + background: rgba(34, 197, 94, 0.12); + color: #15803d; } -#deviceready.ready .event.listening { display: none; } -#deviceready.ready .event.received { display: block; } - -@keyframes fade { - from { opacity: 1.0; } - 50% { opacity: 0.4; } - to { opacity: 1.0; } -} +/* Apply dark theme colors when the OS or browser prefers dark appearance. */ +@media screen and (prefers-color-scheme: dark) { + body { + background: linear-gradient(180deg, #0f172a 0%, #111827 100%); + color: #e5e7eb; + } -.blink { - -webkit-animation:fade 3000ms infinite; - animation:fade 3000ms infinite; -} + section { + background: rgba(17, 24, 39, 0.75); + border-color: #334155; + box-shadow: none; + } + #statusText { + background: rgba(127, 29, 29, 0.3); + color: #fca5a5; + } -@media screen and (prefers-color-scheme: dark) { - body { - background-image:linear-gradient(to bottom, #585858 0%, #1B1B1B 51%); + #statusText.ready { + background: rgba(20, 83, 45, 0.3); + color: #86efac; } } diff --git a/template_src/www/index.html b/template_src/www/index.html index 716987c..62769b4 100644 --- a/template_src/www/index.html +++ b/template_src/www/index.html @@ -19,31 +19,61 @@ --> <html> <head> + <!-- Use UTF-8 so text and symbols render consistently across devices. --> <meta charset="utf-8"> <!-- - Customize this policy to fit your own app's needs. For more guidance, please refer to the docs: - https://cordova.apache.org/docs/en/latest/ - Some notes: - * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly - * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this: - * Enable inline JS: add 'unsafe-inline' to default-src + Content Security Policy (CSP) is an added layer of security that helps to detect + and mitigate certain types of attacks, including Cross Site Scripting (XSS) and + data injection attacks. Customize this policy to fit your own app's needs. + For more guidance, please refer to the docs: + https://cordova.apache.org/docs/en/latest/guide/appdev/allowlist/index.html#content-security-policy-csp + Some notes: + * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly + * Inline scripts are disabled by default, which means <script> tags and HTML event attributes + like onclick="" will not work, to mitigate risk of XSS vulnerabilities. + To change this add 'unsafe-inline' to default-src. + --> + <meta http-equiv="Content-Security-Policy" content=" + default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval'; + style-src 'self' 'unsafe-inline'; + media-src *; + img-src 'self' data: content:; + "> + <!-- + Turn off phone number detection to prevent automatic conversion of phone numbers + into tappable links. --> - <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;"> <meta name="format-detection" content="telephone=no"> - <meta name="msapplication-tap-highlight" content="no"> - <meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover"> + <!-- + Configure the app viewport for a native-app feel: + - width=device-width: match the layout viewport to the device width + - initial/minimum/maximum-scale=1: keep the page at 1x scale + - user-scalable=no: disable pinch zoom + - viewport-fit=cover: allow content to use the full screen on devices with notches + --> + <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover"> + <!-- + Advertise support for both light and dark color schemes so built-in UI + elements (like form controls and scrollbars) can match the active theme. + --> <meta name="color-scheme" content="light dark"> <link rel="stylesheet" href="css/index.css"> - <title>Hello World</title> + <title>Cordova Hello World Example</title> </head> <body> - <div class="app"> - <h1>Apache Cordova</h1> - <div id="deviceready" class="blink"> - <p class="event listening">Connecting to Device</p> - <p class="event received">Device is Ready</p> - </div> - </div> + <main> + <header> + <h1>Hello World!</h1> + <h2>Apache Cordova</h2> + <img src="img/logo.png" alt="Cordova logo" style="width: 80px;"> + <p>Mobile apps with HTML, CSS & JS</p> + </header> + + <section> + <h2>Runtime Status</h2> + <p id="statusText">Connecting to device...</p> + </section> + </main> <script src="cordova.js"></script> <script src="js/index.js"></script> </body> diff --git a/template_src/www/js/index.js b/template_src/www/js/index.js index eaa8198..13e46cc 100644 --- a/template_src/www/js/index.js +++ b/template_src/www/js/index.js @@ -22,8 +22,13 @@ document.addEventListener('deviceready', onDeviceReady, false); function onDeviceReady() { - // Cordova is now initialized. Have fun! - - console.log('Running cordova-' + cordova.platformId + '@' + cordova.version); - document.getElementById('deviceready').classList.add('ready'); + // Cordova is now initialized. Put plugin-dependent code here. + const runtimeInfo = `cordova-${cordova.platformId}@${cordova.version}`; + console.log(`Running ${runtimeInfo}`); + // Set the status text to show the Cordova runtime is ready, and include + // platform and version info. + const statusTextElement = document.getElementById('statusText'); + statusTextElement.innerHTML = `Device is ready:<br>${runtimeInfo}`; + // Add a CSS class to apply styles indicating the app is ready. + statusTextElement.classList.add('ready'); } --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
