From 8b9c73a0033ea33c8a20e354a0deb4527894891d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marko=20Mili=C4=87?= <marko@tesobe.com>
Date: Tue, 17 Sep 2019 14:32:09 +0200
Subject: [PATCH] Make GUI more user friendly at mobile devices - added
 screen.css

---
 src/main/webapp/media/css/screen.css          | 142 +++++++++++++++++
 src/main/webapp/media/css/style.css           | 149 +-----------------
 src/main/webapp/templates-hidden/default.html |   1 +
 3 files changed, 144 insertions(+), 148 deletions(-)
 create mode 100644 src/main/webapp/media/css/screen.css

diff --git a/src/main/webapp/media/css/screen.css b/src/main/webapp/media/css/screen.css
new file mode 100644
index 00000000..d02b8d96
--- /dev/null
+++ b/src/main/webapp/media/css/screen.css
@@ -0,0 +1,142 @@
+
+@media only screen and (max-width: 1081px) {
+  #left_side {visibility: collapse;}
+  .content-box__info-box {max-width: 1000px;}
+  .content-box__input-box {max-width: 1000px;}
+  .content-box__right-box {max-width: 1000px;}
+  .content-box__text-box {max-width: 1000px;}
+  .container {margin-left: 0px;}
+  .option-section {display: none;}
+  .default-button {left: 88%;}
+  .default-input {max-width: 82%;}
+  .version_path {visibility: hidden;}
+  .content-box__headline {padding: 50px 0 0 0;}
+  #logo-left {visibility: hidden;}
+  #logo-right {visibility: visible;}
+}  
+@media only screen and (max-width: 1000px) {
+  #left_side {visibility: collapse;}
+  .content-box__info-box {max-width: 900px;}
+  .content-box__input-box {max-width: 900px;}
+  .content-box__right-box {max-width: 900px;}
+  .content-box__text-box {max-width: 900px;}
+  .container {margin-left: 0px;}
+  .option-section {display: none;}
+  .default-button {left: 85%;}
+  .default-input {max-width: 75%;}
+  .version_path {visibility: hidden;}
+  .content-box__headline {padding: 50px 0 0 0;}
+  #logo-left {visibility: hidden;}
+  #logo-right {visibility: visible;}
+} 
+@media only screen and (max-width: 900px) {
+  #left_side {visibility: collapse;}
+  .content-box__info-box {max-width: 800px;}
+  .content-box__input-box {max-width: 800px;}
+  .content-box__right-box {max-width: 800px;}
+  .content-box__text-box {max-width: 800px;}
+  .container {margin-left: 0px;}
+  .option-section {display: none;}
+  .default-button {left: 85%;}
+  .default-input {max-width: 75%;}
+  .version_path {visibility: hidden;}
+  .content-box__headline {padding: 50px 0 0 0;}
+  #logo-left {visibility: visible;}
+  #logo-right {visibility: hidden;}
+} 
+@media only screen and (max-width: 800px) {
+  #left_side {visibility: collapse;}
+  .content-box__info-box {max-width: 700px;}
+  .content-box__input-box {max-width: 700px;}
+  .content-box__right-box {max-width: 700px;}
+  .content-box__text-box {max-width: 700px;}
+  .container {margin-left: 0px;}
+  .option-section {display: none;}
+  .default-button {left: 83%;}
+  .default-input {max-width: 75%;}
+  .version_path {visibility: hidden;}
+  .content-box__headline {padding: 50px 0 0 0;}
+  #logo-left {visibility: visible;}
+  #logo-right {visibility: hidden;}
+}  
+@media only screen and (max-width: 700px) {
+  #left_side {visibility: collapse;}
+  .content-box__info-box {max-width: 600px;}
+  .content-box__input-box {max-width: 600px;}
+  .content-box__right-box {max-width: 600px;}
+  .content-box__text-box {max-width: 600px;}
+  .container {margin-left: 0px;}
+  .option-section {display: none;}
+  .default-button {left: 83%;}
+  .default-input {max-width: 75%;}
+  .version_path {visibility: hidden;}
+  .content-box__headline {padding: 50px 0 0 0;}
+  #logo-left {visibility: visible;}
+  #logo-right {visibility: hidden;}
+} 
+@media only screen and (max-width: 600px) {
+  #left_side {visibility: collapse;}
+  .content-box__info-box {max-width: 500px;}
+  .content-box__input-box {max-width: 500px;}
+  .content-box__right-box {max-width: 500px;}
+  .content-box__text-box {max-width: 500px;}
+  .container {margin-left: 0px;}
+  .option-section {display: none;}
+  .default-button {left: 80%;}
+  .default-input {max-width: 70%;}
+  .version_path {visibility: hidden;}
+  .content-box__headline {padding: 50px 0 0 0;}
+  .header .site-title-box__text {visibility: hidden;}
+  #logo-left {visibility: visible;}
+  #logo-right {visibility: hidden;}
+} 
+@media only screen and (max-width: 500px) {
+  #left_side {visibility: collapse;}
+  .content-box__info-box {max-width: 450px;}
+  .content-box__input-box {max-width: 450px;}
+  .content-box__right-box {max-width: 450px;}
+  .content-box__text-box {max-width: 450px;}
+  .container {margin-left: 0px;}
+  .option-section {display: none;}
+  .default-button {left: 75%;}
+  .default-input {max-width: 65%;}
+  .version_path {visibility: hidden;}
+  .content-box__headline {padding: 50px 0 0 0;}
+  .header .site-title-box__text {visibility: hidden;}
+  #logo-left {visibility: visible;}
+  #logo-right {visibility: hidden;}
+}
+/*iPhone 6/7/8 Plus*/
+@media only screen and (max-width: 414px) {
+  #left_side {visibility: collapse;}
+  .content-box__info-box {max-width: 390px;}
+  .content-box__input-box {max-width: 390px;}
+  .content-box__right-box {max-width: 390px;}
+  .content-box__text-box {max-width: 390px;}
+  .container {margin-left: 0px;}
+  .option-section {display: none;}
+  .default-button {left: 75%;}
+  .default-input {max-width: 63%;}
+  .version_path {visibility: hidden;}
+  .content-box__headline {padding: 50px 0 0 0;}
+  .header .site-title-box__text {visibility: hidden;}
+  #logo-left {visibility: visible;}
+  #logo-right {visibility: hidden;}
+} 
+/*iPhone 6/7/8*/
+@media only screen and (max-width: 375px) {
+  #left_side {visibility: collapse;}
+  .content-box__info-box {max-width: 350px;}
+  .content-box__input-box {max-width: 350px;}
+  .content-box__right-box {max-width: 350px;}
+  .content-box__text-box {max-width: 350px;}
+  .container {margin-left: 0px;}
+  .option-section {display: none;}
+  .default-button {left: 70%;}
+  .default-input {max-width: 57%;}
+  .version_path {visibility: hidden;}
+  .content-box__headline {padding: 50px 0 0 0;}
+  .header .site-title-box__text {visibility: hidden;}
+  #logo-left {visibility: visible;}
+  #logo-right {visibility: hidden;}
+}
\ No newline at end of file
diff --git a/src/main/webapp/media/css/style.css b/src/main/webapp/media/css/style.css
index 32d24820..6ee9c1b8 100644
--- a/src/main/webapp/media/css/style.css
+++ b/src/main/webapp/media/css/style.css
@@ -1177,151 +1177,4 @@ a.end-point-anchor {
   font-size: 80%;
 }
 
- .grid-header {grid-area: header}
- 
-/*
- * This section below must be copy pasted as a last segment to the css file defined over the props: webui_override_style_sheet
- * ========================================================================== START
- */
-@media only screen and (max-width: 1081px) {
-  #left_side {visibility: collapse;}
-  .content-box__info-box {max-width: 1000px;}
-  .content-box__input-box {max-width: 1000px;}
-  .content-box__right-box {max-width: 1000px;}
-  .content-box__text-box {max-width: 1000px;}
-  .container {margin-left: 0px;}
-  .option-section {display: none;}
-  .default-button {left: 88%;}
-  .default-input {max-width: 82%;}
-  .version_path {visibility: hidden;}
-  .content-box__headline {padding: 50px 0 0 0;}
-  #logo-left {visibility: hidden;}
-  #logo-right {visibility: visible;}
-}  
-@media only screen and (max-width: 1000px) {
-  #left_side {visibility: collapse;}
-  .content-box__info-box {max-width: 900px;}
-  .content-box__input-box {max-width: 900px;}
-  .content-box__right-box {max-width: 900px;}
-  .content-box__text-box {max-width: 900px;}
-  .container {margin-left: 0px;}
-  .option-section {display: none;}
-  .default-button {left: 85%;}
-  .default-input {max-width: 75%;}
-  .version_path {visibility: hidden;}
-  .content-box__headline {padding: 50px 0 0 0;}
-  #logo-left {visibility: hidden;}
-  #logo-right {visibility: visible;}
-} 
-@media only screen and (max-width: 900px) {
-  #left_side {visibility: collapse;}
-  .content-box__info-box {max-width: 800px;}
-  .content-box__input-box {max-width: 800px;}
-  .content-box__right-box {max-width: 800px;}
-  .content-box__text-box {max-width: 800px;}
-  .container {margin-left: 0px;}
-  .option-section {display: none;}
-  .default-button {left: 85%;}
-  .default-input {max-width: 75%;}
-  .version_path {visibility: hidden;}
-  .content-box__headline {padding: 50px 0 0 0;}
-  #logo-left {visibility: visible;}
-  #logo-right {visibility: hidden;}
-} 
-@media only screen and (max-width: 800px) {
-  #left_side {visibility: collapse;}
-  .content-box__info-box {max-width: 700px;}
-  .content-box__input-box {max-width: 700px;}
-  .content-box__right-box {max-width: 700px;}
-  .content-box__text-box {max-width: 700px;}
-  .container {margin-left: 0px;}
-  .option-section {display: none;}
-  .default-button {left: 83%;}
-  .default-input {max-width: 75%;}
-  .version_path {visibility: hidden;}
-  .content-box__headline {padding: 50px 0 0 0;}
-  #logo-left {visibility: visible;}
-  #logo-right {visibility: hidden;}
-}  
-@media only screen and (max-width: 700px) {
-  #left_side {visibility: collapse;}
-  .content-box__info-box {max-width: 600px;}
-  .content-box__input-box {max-width: 600px;}
-  .content-box__right-box {max-width: 600px;}
-  .content-box__text-box {max-width: 600px;}
-  .container {margin-left: 0px;}
-  .option-section {display: none;}
-  .default-button {left: 83%;}
-  .default-input {max-width: 75%;}
-  .version_path {visibility: hidden;}
-  .content-box__headline {padding: 50px 0 0 0;}
-  #logo-left {visibility: visible;}
-  #logo-right {visibility: hidden;}
-} 
-@media only screen and (max-width: 600px) {
-  #left_side {visibility: collapse;}
-  .content-box__info-box {max-width: 500px;}
-  .content-box__input-box {max-width: 500px;}
-  .content-box__right-box {max-width: 500px;}
-  .content-box__text-box {max-width: 500px;}
-  .container {margin-left: 0px;}
-  .option-section {display: none;}
-  .default-button {left: 80%;}
-  .default-input {max-width: 70%;}
-  .version_path {visibility: hidden;}
-  .content-box__headline {padding: 50px 0 0 0;}
-  .header .site-title-box__text {visibility: hidden;}
-  #logo-left {visibility: visible;}
-  #logo-right {visibility: hidden;}
-} 
-@media only screen and (max-width: 500px) {
-  #left_side {visibility: collapse;}
-  .content-box__info-box {max-width: 450px;}
-  .content-box__input-box {max-width: 450px;}
-  .content-box__right-box {max-width: 450px;}
-  .content-box__text-box {max-width: 450px;}
-  .container {margin-left: 0px;}
-  .option-section {display: none;}
-  .default-button {left: 75%;}
-  .default-input {max-width: 65%;}
-  .version_path {visibility: hidden;}
-  .content-box__headline {padding: 50px 0 0 0;}
-  .header .site-title-box__text {visibility: hidden;}
-  #logo-left {visibility: visible;}
-  #logo-right {visibility: hidden;}
-}
-/*iPhone 6/7/8 Plus*/
-@media only screen and (max-width: 414px) {
-  #left_side {visibility: collapse;}
-  .content-box__info-box {max-width: 390px;}
-  .content-box__input-box {max-width: 390px;}
-  .content-box__right-box {max-width: 390px;}
-  .content-box__text-box {max-width: 390px;}
-  .container {margin-left: 0px;}
-  .option-section {display: none;}
-  .default-button {left: 75%;}
-  .default-input {max-width: 63%;}
-  .version_path {visibility: hidden;}
-  .content-box__headline {padding: 50px 0 0 0;}
-  .header .site-title-box__text {visibility: hidden;}
-  #logo-left {visibility: visible;}
-  #logo-right {visibility: hidden;}
-} 
-/*iPhone 6/7/8*/
-@media only screen and (max-width: 375px) {
-  #left_side {visibility: collapse;}
-  .content-box__info-box {max-width: 350px;}
-  .content-box__input-box {max-width: 350px;}
-  .content-box__right-box {max-width: 350px;}
-  .content-box__text-box {max-width: 350px;}
-  .container {margin-left: 0px;}
-  .option-section {display: none;}
-  .default-button {left: 70%;}
-  .default-input {max-width: 57%;}
-  .version_path {visibility: hidden;}
-  .content-box__headline {padding: 50px 0 0 0;}
-  .header .site-title-box__text {visibility: hidden;}
-  #logo-left {visibility: visible;}
-  #logo-right {visibility: hidden;}
-}
-/*========================================================================== END*/
+ .grid-header {grid-area: header}
\ No newline at end of file
diff --git a/src/main/webapp/templates-hidden/default.html b/src/main/webapp/templates-hidden/default.html
index 2c68dd8d..a7b1134c 100755
--- a/src/main/webapp/templates-hidden/default.html
+++ b/src/main/webapp/templates-hidden/default.html
@@ -37,6 +37,7 @@ along with this program.  If not, see www.gnu.org/licenses/
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link id="main_style_sheet" data-lift="WebUI.mainStyleSheet" rel="stylesheet" href="./media/css/style.css" />
     <link id="override_style_sheet" data-lift="WebUI.overrideStyleSheet" href="" rel="stylesheet" type="text/css" />
+    <link id="screen_style_sheet" rel="stylesheet" media="screen and (min-width: 100px)" href="./media/css/screen.css" />