From f0d78a146b84340e81df510bd4aa73fb9fce28da Mon Sep 17 00:00:00 2001
From: Florian <florian.heinrich@smail.th-koeln.de>
Date: Sun, 7 May 2023 19:23:20 +0200
Subject: [PATCH] fix mobile view

- add viewport to header (otherwise smartphones will render the desktop version)
- set focus to the code editor after loading the page
- fix some android dark mode theme issues by settings clear default for the light theme as well
---
 src/main/webapp/plantuml.css              | 34 +++++++++++++----------
 src/main/webapp/plantuml.js               |  1 +
 src/main/webapp/resource/htmlheadbase.jsp |  5 +---
 3 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/src/main/webapp/plantuml.css b/src/main/webapp/plantuml.css
index d329bbe..c0aa6eb 100644
--- a/src/main/webapp/plantuml.css
+++ b/src/main/webapp/plantuml.css
@@ -5,16 +5,20 @@
 /************* variables *************/
 :root {
   color-scheme: light dark;
+  --font-color: black;
+  --bg-color: white;
   --border-color: #ccc;
-  --bg-color: inherit;
-  --font-color: inherit;
+  --footer-font-color: #666;
+  --footer-bg-color: #eee;
   --settings-bg-color: #fefefe;
 }
 [data-theme="dark"] {
-  --border-color: #848484;
-  --bg-color: #212121;
-  --settings-bg-color: #424242;
   --font-color: #ccc;
+  --bg-color: #212121;
+  --border-color: #848484;
+  --footer-font-color: #ccc;
+  --footer-bg-color: black;
+  --settings-bg-color: #424242;
 }
 
 /************* default settings *************/
@@ -39,6 +43,14 @@ body {
     height: 100%;
   }
 }
+input:not([type=image]) {
+  background-color: var(--bg-color);
+  color: var(--font-color);
+}
+select {
+  background-color: var(--bg-color);
+  color: var(--font-color);
+}
 
 /************* ruler *************/
 .hr {
@@ -114,8 +126,8 @@ body {
   }
 }
 .footer p {
-  background-color: #eee;
-  color: #666;
+  background-color: var(--footer-bg-color);
+  color: var(--footer-font-color);
   font-size: 0.7em;
   margin: 0;
   padding: 0.5em;
@@ -382,14 +394,6 @@ body {
 [data-theme="dark"] input[type=image] {
   filter: invert() contrast(30%);
 }
-[data-theme="dark"] input:not([type=image]) {
-  background-color: var(--bg-color);
-  color: var(--font-color);
-}
-[data-theme="dark"] .footer p {
-  background-color: black;
-  color: var(--font-color);
-}
 [data-theme="dark"] a {
   color: white;
 }
diff --git a/src/main/webapp/plantuml.js b/src/main/webapp/plantuml.js
index 9553647..0eb68e4 100644
--- a/src/main/webapp/plantuml.js
+++ b/src/main/webapp/plantuml.js
@@ -503,6 +503,7 @@ async function initializeApp(view) {
     hidePreview();
   }
   document.appConfig.autoRefreshState = "complete";
+  document.editor?.focus();
 }
 
 function loadCodeEditor() {
diff --git a/src/main/webapp/resource/htmlheadbase.jsp b/src/main/webapp/resource/htmlheadbase.jsp
index e887ca9..cad24c0 100644
--- a/src/main/webapp/resource/htmlheadbase.jsp
+++ b/src/main/webapp/resource/htmlheadbase.jsp
@@ -3,6 +3,7 @@
 <meta http-equiv="expires" content="0" />
 <meta http-equiv="pragma" content="no-cache" />
 <meta http-equiv="cache-control" content="no-cache, must-revalidate" />
+<meta name="viewport" content="initial-scale=1.0, user-scalable=1" />
 <meta name="color-scheme" content="light dark" />
 <link rel="icon" href="favicon.ico" type="image/x-icon"/>
 <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
@@ -10,7 +11,3 @@
 <script src="webjars/monaco-editor/0.36.1/min/vs/loader.js"></script>
 <script src="plantumllanguage.js"></script>
 <script src="plantuml.js"></script>
-<script>
-  const VERSION = <%= net.sourceforge.plantuml.version.Version.version() %>;
-  const VERSION_STRING = "<%= net.sourceforge.plantuml.version.Version.versionString() %>";
-</script>