diff --git a/dev/prod/src/index.ejs b/dev/prod/src/index.ejs index 9be9700f7d..3646d129fe 100644 --- a/dev/prod/src/index.ejs +++ b/dev/prod/src/index.ejs @@ -3,7 +3,6 @@ - Platform diff --git a/dev/prod/webpack.config.js b/dev/prod/webpack.config.js index 6b110e69a4..3649458834 100644 --- a/dev/prod/webpack.config.js +++ b/dev/prod/webpack.config.js @@ -168,7 +168,11 @@ module.exports = { }, mode, plugins: [ - new HtmlWebpackPlugin(), + new HtmlWebpackPlugin({ + meta: { + viewport: 'width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=1' + } + }), ...(prod ? [new CompressionPlugin()] : []), // new MiniCssExtractPlugin({ // filename: '[name].[id][contenthash].css' diff --git a/packages/theme/styles/global.scss b/packages/theme/styles/global.scss index 0473cc854c..776abe24f2 100644 --- a/packages/theme/styles/global.scss +++ b/packages/theme/styles/global.scss @@ -61,6 +61,7 @@ * { box-sizing: border-box; + touch-action: manipulation; scrollbar-color: var(--theme-menu-color) var(--theme-bg-color); scrollbar-width: thin; --font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto; @@ -119,4 +120,5 @@ body { height: var(--app-height); width: 100%; overflow: hidden; + touch-action: none; } diff --git a/packages/ui/src/components/TooltipInstance.svelte b/packages/ui/src/components/TooltipInstance.svelte index 633e13dd44..4b344e3062 100644 --- a/packages/ui/src/components/TooltipInstance.svelte +++ b/packages/ui/src/components/TooltipInstance.svelte @@ -193,9 +193,11 @@ }} bind:this={tooltipHTML} > - {#if $tooltip.label}
+ {#if $tooltip.label} +
{/if} +
+ {/if} {#if typeof $tooltip.component === 'string'} = docHeight ? docWidth : docHeight - let isPortrait: boolean - $: isPortrait = docWidth <= docHeight let isMobile: boolean let alwaysMobile: boolean = false $: isMobile = alwaysMobile || checkMobile() + let isPortrait: boolean + $: isPortrait = docWidth <= docHeight $: $deviceInfo.docWidth = docWidth $: $deviceInfo.docHeight = docHeight @@ -70,6 +72,18 @@ $: $deviceInfo.isMobile = isMobile $: document.documentElement.style.setProperty('--app-height', `${docHeight}px`) + + let doubleTouchStartTimestamp = 0 + document.addEventListener('touchstart', (event) => { + const now = +new Date() + if (doubleTouchStartTimestamp + 500 > now) { + event.preventDefault() + } + doubleTouchStartTimestamp = now + }) + document.addEventListener('dblclick', (event) => { + event.preventDefault() + }) @@ -99,13 +113,19 @@
{ alwaysMobile = !alwaysMobile document.documentElement.style.setProperty('--app-height', `${window.innerHeight}px`) }} > + +
+
@@ -158,13 +178,11 @@ height: 16px; font-size: 14px; color: var(--content-color); + transition: transform 0.15s ease-in-out; - &.on { - color: var(--caption-color); - - &.always { - color: var(--won-color); - } + &.rotated { + transform-origin: center center; + transform: rotate(90deg); } } } diff --git a/packages/ui/src/components/internal/icons/Computer.svelte b/packages/ui/src/components/internal/icons/Computer.svelte new file mode 100644 index 0000000000..61834c7f0b --- /dev/null +++ b/packages/ui/src/components/internal/icons/Computer.svelte @@ -0,0 +1,15 @@ + + + + + + + + diff --git a/packages/ui/src/components/internal/icons/Phone.svelte b/packages/ui/src/components/internal/icons/Phone.svelte new file mode 100644 index 0000000000..6393e2cd02 --- /dev/null +++ b/packages/ui/src/components/internal/icons/Phone.svelte @@ -0,0 +1,18 @@ + + + + + + + + + diff --git a/plugins/workbench-resources/src/components/Workbench.svelte b/plugins/workbench-resources/src/components/Workbench.svelte index 14cfaa1ad9..82341961a5 100644 --- a/plugins/workbench-resources/src/components/Workbench.svelte +++ b/plugins/workbench-resources/src/components/Workbench.svelte @@ -593,6 +593,7 @@ min-height: 0; width: 100%; height: 100%; + touch-action: none; } .hamburger-container { display: flex; @@ -605,7 +606,7 @@ margin-top: 0.25rem; } &.mini { - position: fixed; + position: absolute; top: 4px; left: 4px; }