neo.mjs 6.36.0 → 6.38.0

package/apps/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.36.0'
+         * @member {String} version='6.38.0'
          */
-        version: '6.36.0'
+        version: '6.38.0'
     }
 
     /**

package/examples/ServiceWorker.mjs

@@ -20,9 +20,9 @@ class ServiceWorker extends ServiceBase {
          */
         singleton: true,
         /**
-         * @member {String} version='6.36.0'
+         * @member {String} version='6.38.0'
          */
-        version: '6.36.0'
+        version: '6.38.0'
     }
 
     /**

package/examples/videoMove/MainContainer.mjs

@@ -9,11 +9,12 @@ import Viewport from '../../src/container/Viewport.mjs';
 class MainContainer extends Viewport {
     static config = {
         className: 'Neo.examples.videoMove.MainContainer',
+        cls      : ['examples-videomove-maincontainer'],
         layout   : {ntype: 'vbox', align: 'stretch'},
-        style    : {padding: '50px'},
 
         items: [{
             ntype : 'container',
+            cls   : ['video-wrapper'],
             layout: {ntype: 'hbox', align: 'stretch'},
 
             itemDefaults: {
@@ -23,7 +24,6 @@ class MainContainer extends Viewport {
 
             items: [{
                 reference: 'container-1',
-                style    : {backgroundColor: 'rgb(139,166,255)', padding: '50px'},
 
                 items: [{
                     module : Video,
@@ -31,8 +31,7 @@ class MainContainer extends Viewport {
                     url    : 'https://video-ssl.itunes.apple.com/itunes-assets/Video125/v4/a0/57/54/a0575426-dd8e-2d25-bdf3-139702870b50/mzvf_786190431362224858.640x464.h264lc.U.p.m4v'
                 }]
             }, {
-                reference: 'container-2',
-                style    : {backgroundColor: 'rgb(139,166,255)', marginLeft: '50px', padding: '50px'}
+                reference: 'container-2'
             }]
         }, {
             ntype : 'container',

package/examples/videoMove/neo-config.json

@@ -2,5 +2,6 @@
     "appPath"    : "examples/videoMove/app.mjs",
     "basePath"   : "../../",
     "environment": "development",
-    "mainPath"   : "./Main.mjs"
+    "mainPath"   : "./Main.mjs",
+    "themes"     : ["neo-theme-neo-light"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "neo.mjs",
-    "version": "6.36.0",
+    "version": "6.38.0",
     "description": "The webworkers driven UI framework",
     "type": "module",
     "repository": {

package/resources/data/deck/learnneo/pages/benefits/Multi-Threading.md

@@ -23,7 +23,9 @@ On its own, a Browser will just use ***one*** core per tab / window.
 
 Meaning: your Angular or React apps look like this:
 
-![Current State of Apps](https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/images/apps-today.png)
+<p style="overflow-x: auto;">
+    <img alt="Current State of Apps" src="https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/images/apps-today.png">
+</p>
 
 The more JavaScript tasks are running inside your app, the slower it will get.
 The worst scenario is a complete UI freeze where your one core is at 100%
@@ -79,7 +81,9 @@ In case you are not familiar with what an "actor" means, definitely read it firs
 To resolve this performance bottleneck, we want to get main threads as idle as possible, so that they can fully focus on
 rendering / dynamically manipulating the DOM:
 
-![App Worker Concept](https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/images/app-worker.png)
+<p style="overflow-x: auto;">
+    <img alt="App Worker Concept" src="https://raw.githubusercontent.com/neomjs/pages/main/resources_pub/images/app-worker.png">
+</p>
 
 The worst case that could happen now is that your app worker will slow down and this core runs at 100%. However,
 this will not affect your UI (rendering thread → main).

package/resources/scss/src/apps/portal/learn/ContentView.scss

@@ -9,28 +9,22 @@
     width           : -webkit-fill-available;
 
     @media (max-width: 600px) {
-        padding: 1rem 1rem 0;
+        overflow-x: hidden;
+        padding   : 1rem 1rem 0;
     }
 
-    pre[data-javascript] {
-        border       : thin solid lightgray;
-        border-radius: 4px;
-        overflow-x   : scroll;
-        padding      : 12px;
+    a {
+        color: #3E63DD;;
     }
 
     blockquote {
-        background-color: var(--sem-color-bg-neutral-default);;
-        border-left     : 4px solid var(--sem-color-border-default);
+        background-color: var(--gray-100);
+        border-left     : 4px solid var(--sem-color-surface-primary-background);
         font-style      : italic;
         margin-left     : 0;
         padding         : 5px 5px 5px 15px;
     }
 
-    p {
-        margin: 0.5em 0 0.7em 0;
-    }
-
     details {
         margin: 1em 0 1em 0;
     }
@@ -80,11 +74,22 @@
         padding      : 2px 16px;
         font-size    : 1em;
         margin-bottom: 1em;
+
+        &:hover {
+            /* On mouse-over, add a deeper shadow */
+            box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+        }
     }
 
-    /* On mouse-over, add a deeper shadow */
-    .lab:hover {
-        box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+    p {
+        margin: 0.5em 0 0.7em 0;
+    }
+
+    pre[data-javascript] {
+        border       : thin solid lightgray;
+        border-radius: 4px;
+        overflow-x   : scroll;
+        padding      : 12px;
     }
 }
 

package/resources/scss/src/examples/videoMove/MainContainer.scss

@@ -0,0 +1,31 @@
+.examples-videomove-maincontainer.neo-viewport {
+    padding: 50px;
+
+    .video-wrapper {
+        .neo-container {
+            background-color: rgb(139,166,255);
+            padding         : 50px;
+
+            &:last-child {
+                margin-left: 50px;
+            }
+        }
+    }
+
+    @media (max-width: 840px) {
+        padding: 1em;
+
+        .video-wrapper {
+            flex-direction: column;
+
+            .neo-container {
+                padding: 1em;
+
+                &:last-child {
+                    margin-left: 0;
+                    margin-top : 1em;
+                }
+            }
+        }
+    }
+}

package/resources/scss/theme-neo-light/design-tokens/Core.scss

@@ -9,6 +9,7 @@
     --core-fontsize-body           : 16px;
     --core-fontsize-h1             : 2.5rem;
     --core-fontsize-h2             : 1.75rem;
+    --core-fontsize-h3             : 1.25rem;
     --core-fontsize-label          : 1rem;
     --core-fontweight-bold         : 700;
     --core-fontweight-medium       : 500;

package/src/DefaultConfig.mjs

@@ -260,12 +260,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '6.36.0'
+     * @default '6.38.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.36.0'
+    version: '6.38.0'
 };
 
 Object.assign(DefaultConfig, {