From 3c39a724e4d5fafd1de385753746aa839c272441 Mon Sep 17 00:00:00 2001 From: kovacsv Date: Sun, 17 Feb 2019 08:48:27 +0100 Subject: [PATCH] Mobile view. --- website/include/floatingdialog.css | 8 ++++++++ website/include/importerapp.css | 31 ++++++++++++++++++++++++++---- website/include/importerapp.js | 6 +++++- website/include/importermenu.js | 6 +++--- website/index.html | 1 + 5 files changed, 44 insertions(+), 8 deletions(-) diff --git a/website/include/floatingdialog.css b/website/include/floatingdialog.css index fb26fbe..3b5da25 100644 --- a/website/include/floatingdialog.css +++ b/website/include/floatingdialog.css @@ -37,3 +37,11 @@ div.dialogbutton border-radius : 3px; float : right; } + +@media only screen and (max-device-width : 600px) +{ + div.dialog + { + width : 80%; + } +} diff --git a/website/include/importerapp.css b/website/include/importerapp.css index e53b262..bd27381 100644 --- a/website/include/importerapp.css +++ b/website/include/importerapp.css @@ -33,19 +33,19 @@ html, body overflow : auto; } -div.buttons +#buttons { overflow : auto; float : left; } -div.rightbuttons +#extbuttons { overflow : auto; float : right; } -div.logo +#logo { color : #ffffff; background : linear-gradient(#0095c6, #006d91) #008ab8; @@ -202,7 +202,7 @@ div.submenubuttons img.submenubutton div.importerdialog { - width : 450px; + width : 400px; } div.welcometitle @@ -241,3 +241,26 @@ a:hover { text-decoration : underline; } + +@media only screen and (max-device-width : 600px) +{ + #logo + { + display : none; + } + + #left + { + display : none; + } + + #extbuttons + { + display : none; + } + + div.importerdialog + { + width : 80%; + } +} diff --git a/website/include/importerapp.js b/website/include/importerapp.js index 6ae8f04..feabd72 100644 --- a/website/include/importerapp.js +++ b/website/include/importerapp.js @@ -25,6 +25,7 @@ ImporterApp = function () this.importerButtons = null; this.extensionButtons = null; this.aboutDialog = null; + this.isMobile = null; this.readyForTest = null; }; @@ -61,6 +62,9 @@ ImporterApp.prototype.Init = function () this.extensionButtons = new ExtensionButtons (top); this.aboutDialog = new FloatingDialog (); + + var match = window.matchMedia ("(max-device-width : 600px)"); + this.isMobile = match.matches; window.addEventListener ('resize', this.Resize.bind (this), false); this.Resize (); @@ -78,7 +82,7 @@ ImporterApp.prototype.Init = function () window.onhashchange = this.LoadFilesFromHash.bind (this); var hasHashModel = this.LoadFilesFromHash (); - if (!hasHashModel) { + if (!hasHashModel && !this.isMobile) { this.ShowAboutDialog (); } }; diff --git a/website/include/importermenu.js b/website/include/importermenu.js index 6d6b29d..5683013 100644 --- a/website/include/importermenu.js +++ b/website/include/importermenu.js @@ -159,12 +159,12 @@ ImporterMenu.prototype.AddGroup = function (name, parameters) ImporterButtons = function (parent) { - this.buttonsDiv = $('
').addClass ('buttons').appendTo (parent); + this.buttonsDiv = $('
').attr ('id', 'buttons').appendTo (parent); }; ImporterButtons.prototype.AddLogo = function (title, onClick) { - var logoDiv = $('
').addClass ('logo').html (title).appendTo (this.buttonsDiv); + var logoDiv = $('
').attr ('id', 'logo').html (title).appendTo (this.buttonsDiv); logoDiv.click (onClick); }; @@ -193,7 +193,7 @@ ImporterButtons.prototype.AddToggleButton = function (image, toggleImage, title, ExtensionButtons = function (parent) { - this.buttonsDiv = $('
').addClass ('rightbuttons').appendTo (parent); + this.buttonsDiv = $('
').attr ('id', 'extbuttons').appendTo (parent); }; ExtensionButtons.prototype.GetButtonsDiv = function () diff --git a/website/index.html b/website/index.html index 4c26d6c..c02ff74 100644 --- a/website/index.html +++ b/website/index.html @@ -6,6 +6,7 @@ +