From 3f87be3f46f73e5e5bfa9530c129f3be50a75fb7 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Wed, 2 Mar 2022 19:10:32 +0100
Subject: [PATCH] web: not supported message on mobile screens

---
 packages/web/src/Screen.svelte | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)

diff --git a/packages/web/src/Screen.svelte b/packages/web/src/Screen.svelte
index 931da812..7db86775 100644
--- a/packages/web/src/Screen.svelte
+++ b/packages/web/src/Screen.svelte
@@ -24,10 +24,14 @@
   import DragAndDropFileTarget from './DragAndDropFileTarget.svelte';
   import dragDropFileTarget from './utility/dragDropFileTarget';
   import TitleBar from './widgets/TitleBar.svelte';
+  import FontIcon from './icons/FontIcon.svelte';
+  import getElectron from './utility/getElectron';
 
   $: currentThemeType = $currentThemeDefinition?.themeType == 'dark' ? 'theme-type-dark' : 'theme-type-light';
 
   $: themeStyle = `<style id="themePlugin">${$currentThemeDefinition?.themeCss}</style>`;
+
+  const isElectron = !!getElectron();
 </script>
 
 <svelte:head>
@@ -36,8 +40,15 @@
   {/if}
 </svelte:head>
 
+<div class="not-supported" class:isElectron>
+  <div class="m-5 big-icon"><FontIcon icon="img warn" /></div>
+  <div class="m-3">Sorry, DbGate is not supported on mobile devices.</div>
+  <div class="m-3">Please visit <a href="https://dbgate.org">DbGate web</a> for more info.</div>
+</div>
+
 <div
   class={`${$currentTheme} ${currentThemeType} root dbgate-screen`}
+  class:isElectron
   use:dragDropFileTarget
   on:contextmenu={e => e.preventDefault()}
 >
@@ -174,4 +185,25 @@
     right: 0;
     height: var(--dim-titlebar-height);
   }
+
+  .not-supported {
+    display: none;
+  }
+
+  @media only screen and (max-width: 600px) {
+    .dbgate-screen:not(.isElectron) {
+      display: none;
+    }
+
+    .not-supported:not(.isElectron) {
+      display: block;
+    }
+  }
+
+  .not-supported {
+    text-align: center;
+  }
+  .big-icon {
+    font-size: 20pt;
+  }
 </style>