UI: adapt for mobile device

2025-12-12 15:49:18 -08:00 · 2024-01-12 17:52:53 +01:00
parent 8863ebb0d1
commit c43ca6faf1
32 changed files with 604 additions and 210 deletions
--- a/assets/icons/copy.svg
+++ b/assets/icons/copy.svg
@@ -1,4 +1,7 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<?xml version="1.0" encoding="utf-8"?>
+
 <!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5 16.5L19.5 4.5L18.75 3.75H9L8.25 4.5L8.25 7.5L5.25 7.5L4.5 8.25V20.25L5.25 21H15L15.75 20.25V17.25H18.75L19.5 16.5ZM15.75 15.75L15.75 8.25L15 7.5L9.75 7.5V5.25L18 5.25V15.75H15.75ZM6 9L14.25 9L14.25 19.5L6 19.5L6 9Z" fill="#080341"/>
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Edit / Copy">
+<path id="Vector" d="M9 9V6.2002C9 5.08009 9 4.51962 9.21799 4.0918C9.40973 3.71547 9.71547 3.40973 10.0918 3.21799C10.5196 3 11.0801 3 12.2002 3H17.8002C18.9203 3 19.4801 3 19.9079 3.21799C20.2842 3.40973 20.5905 3.71547 20.7822 4.0918C21.0002 4.51962 21.0002 5.07967 21.0002 6.19978V11.7998C21.0002 12.9199 21.0002 13.48 20.7822 13.9078C20.5905 14.2841 20.2839 14.5905 19.9076 14.7822C19.4802 15 18.921 15 17.8031 15H15M9 9H6.2002C5.08009 9 4.51962 9 4.0918 9.21799C3.71547 9.40973 3.40973 9.71547 3.21799 10.0918C3 10.5196 3 11.0801 3 12.2002V17.8002C3 18.9203 3 19.4801 3.21799 19.9079C3.40973 20.2842 3.71547 20.5905 4.0918 20.7822C4.5192 21 5.07899 21 6.19691 21H11.8036C12.9215 21 13.4805 21 13.9079 20.7822C14.2842 20.5905 14.5905 20.2839 14.7822 19.9076C15 19.4802 15 18.921 15 17.8031V15M9 9H11.8002C12.9203 9 13.4801 9 13.9079 9.21799C14.2842 9.40973 14.5905 9.71547 14.7822 10.0918C15 10.5192 15 11.079 15 12.1969L15 15" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 </g>
--- a/assets/icons/maximize.svg
+++ b/assets/icons/maximize.svg
@@ -1,6 +1,8 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M11.9425 1.25H12.0573C14.3657 1.24999 16.1747 1.24998 17.5862 1.43975C19.0309 1.63399 20.171 2.03933 21.0658 2.93414C21.9606 3.82895 22.3659 4.96897 22.5602 6.41371C22.7499 7.82519 22.7499 9.63423 22.7499 11.9426V12.0574C22.7499 14.3658 22.7499 16.1748 22.5602 17.5863C22.3659 19.031 21.9606 20.1711 21.0658 21.0659C20.2374 21.8943 19.198 22.3038 17.8993 22.514C16.6225 22.7207 15.0164 22.7458 13.0013 22.7494C12.5871 22.7502 12.2507 22.415 12.2499 22.0008C12.2492 21.5866 12.5843 21.2502 12.9986 21.2494C15.0385 21.2457 16.5216 21.2175 17.6596 21.0333C18.7756 20.8526 19.4765 20.5338 20.0051 20.0052C20.5748 19.4355 20.9017 18.6648 21.0735 17.3864C21.2483 16.0864 21.2499 14.3782 21.2499 12C21.2499 9.62178 21.2483 7.91356 21.0735 6.61358C20.9017 5.33517 20.5748 4.56445 20.0051 3.9948C19.4355 3.42514 18.6647 3.09825 17.3863 2.92637C16.0864 2.75159 14.3781 2.75 11.9999 2.75C9.62169 2.75 7.91347 2.75159 6.61349 2.92637C5.33509 3.09825 4.56437 3.42514 3.99471 3.9948C3.46609 4.52341 3.1473 5.22427 2.96665 6.34031C2.78246 7.47827 2.75416 8.96143 2.75049 11.0014C2.74974 11.4156 2.41335 11.7507 1.99914 11.75C1.58493 11.7493 1.24975 11.4129 1.25049 10.9986C1.25412 8.9835 1.27926 7.37741 1.48592 6.10063C1.69614 4.80193 2.10563 3.76255 2.93405 2.93414C3.82886 2.03933 4.96888 1.63399 6.41362 1.43975C7.82511 1.24998 9.63414 1.24999 11.9425 1.25Z" fill="#1C274C"/>
-<path d="M12.5 7C12.5 6.58579 12.8358 6.25 13.25 6.25H17C17.4142 6.25 17.75 6.58579 17.75 7V10.75C17.75 11.1642 17.4142 11.5 17 11.5C16.5858 11.5 16.25 11.1642 16.25 10.75V8.81066L12.5303 12.5303C12.2374 12.8232 11.7626 12.8232 11.4697 12.5303C11.1768 12.2374 11.1768 11.7626 11.4697 11.4697L15.1893 7.75H13.25C12.8358 7.75 12.5 7.41421 12.5 7Z" fill="#1C274C"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M5.948 13.25C5.04952 13.25 4.3003 13.2499 3.70552 13.3299C3.07773 13.4143 2.51093 13.6 2.05546 14.0555C1.59999 14.5109 1.41432 15.0777 1.32991 15.7055C1.24995 16.3003 1.24997 17.0495 1.25 17.948V18.052C1.24997 18.9505 1.24995 19.6997 1.32991 20.2945C1.41432 20.9223 1.59999 21.4891 2.05546 21.9445C2.51093 22.4 3.07773 22.5857 3.70552 22.6701C4.3003 22.7501 5.04951 22.75 5.94798 22.75H6.052C6.95047 22.75 7.69971 22.7501 8.29448 22.6701C8.92228 22.5857 9.48908 22.4 9.94455 21.9445C10.4 21.4891 10.5857 20.9223 10.6701 20.2945C10.7501 19.6997 10.75 18.9505 10.75 18.052V17.948C10.75 17.0495 10.7501 16.3003 10.6701 15.7055C10.5857 15.0777 10.4 14.5109 9.94455 14.0555C9.48908 13.6 8.92228 13.4143 8.29448 13.3299C7.6997 13.2499 6.95048 13.25 6.052 13.25H5.948ZM3.11612 15.1161C3.24644 14.9858 3.44393 14.8786 3.9054 14.8165C4.38843 14.7516 5.03599 14.75 6 14.75C6.96401 14.75 7.61157 14.7516 8.09461 14.8165C8.55607 14.8786 8.75357 14.9858 8.88389 15.1161C9.0142 15.2464 9.12143 15.4439 9.18347 15.9054C9.24841 16.3884 9.25 17.036 9.25 18C9.25 18.964 9.24841 19.6116 9.18347 20.0946C9.12143 20.5561 9.0142 20.7536 8.88389 20.8839C8.75357 21.0142 8.55607 21.1214 8.09461 21.1835C7.61157 21.2484 6.96401 21.25 6 21.25C5.03599 21.25 4.38843 21.2484 3.9054 21.1835C3.44393 21.1214 3.24644 21.0142 3.11612 20.8839C2.9858 20.7536 2.87858 20.5561 2.81654 20.0946C2.7516 19.6116 2.75 18.964 2.75 18C2.75 17.036 2.7516 16.3884 2.81654 15.9054C2.87858 15.4439 2.9858 15.2464 3.11612 15.1161Z" fill="#1C274C"/>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+
+<rect x="0" fill="none" width="20" height="20"/>
+
+<g>
--- a/assets/icons/restore.svg
+++ b/assets/icons/restore.svg
@@ -1,6 +1,8 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M17 7L12 12M12 12H15.75M12 12V8.25" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M2 18C2 16.1144 2 15.1716 2.58579 14.5858C3.17157 14 4.11438 14 6 14C7.88562 14 8.82843 14 9.41421 14.5858C10 15.1716 10 16.1144 10 18C10 19.8856 10 20.8284 9.41421 21.4142C8.82843 22 7.88562 22 6 22C4.11438 22 3.17157 22 2.58579 21.4142C2 20.8284 2 19.8856 2 18Z" stroke="#1C274C" stroke-width="1.5"/>
-<path d="M11.9999 2C16.714 2 19.071 2 20.5354 3.46447C21.9999 4.92893 21.9999 7.28595 21.9999 12C21.9999 16.714 21.9999 19.0711 20.5354 20.5355C19.1784 21.8926 17.055 21.9921 12.9999 21.9994M2.00049 11C2.00779 6.94493 2.10734 4.8215 3.46438 3.46447C4.43813 2.49071 5.8065 2.16443 8 2.0551" stroke="#1C274C" stroke-width="1.5" stroke-linecap="round"/>
-</svg>
+<?xml version="1.0" encoding="utf-8"?>
+
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+
+<rect x="0" fill="none" width="20" height="20"/>
+
+<g>
--- a/assets/icons/share.svg
+++ b/assets/icons/share.svg
@@ -1,4 +1,21 @@
-<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
-<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M13.803 5.33333C13.803 3.49238 15.3022 2 17.1515 2C19.0008 2 20.5 3.49238 20.5 5.33333C20.5 7.17428 19.0008 8.66667 17.1515 8.66667C16.2177 8.66667 15.3738 8.28596 14.7671 7.67347L10.1317 10.8295C10.1745 11.0425 10.197 11.2625 10.197 11.4872C10.197 11.9322 10.109 12.3576 9.94959 12.7464L15.0323 16.0858C15.6092 15.6161 16.3473 15.3333 17.1515 15.3333C19.0008 15.3333 20.5 16.8257 20.5 18.6667C20.5 20.5076 19.0008 22 17.1515 22C15.3022 22 13.803 20.5076 13.803 18.6667C13.803 18.1845 13.9062 17.7255 14.0917 17.3111L9.05007 13.9987C8.46196 14.5098 7.6916 14.8205 6.84848 14.8205C4.99917 14.8205 3.5 13.3281 3.5 11.4872C3.5 9.64623 4.99917 8.15385 6.84848 8.15385C7.9119 8.15385 8.85853 8.64725 9.47145 9.41518L13.9639 6.35642C13.8594 6.03359 13.803 5.6896 13.803 5.33333Z" fill="#1C274C"/>
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000"  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  width="800px"
+	 height="800px" viewBox="0 0 512 512" xml:space="preserve">
+
+<g id="7935ec95c421cee6d86eb22ecd12b5bb">
+
+<path style="display: inline;" d="M505.705,421.851c0,49.528-40.146,89.649-89.637,89.649c-49.527,0-89.662-40.121-89.662-89.649
+		c0-1.622,0.148-3.206,0.236-4.815l-177.464-90.474c-14.883,11.028-33.272,17.641-53.221,17.641
+		c-49.528,0-89.662-40.134-89.662-89.649s40.134-89.649,89.662-89.649c22.169,0,42.429,8.097,58.086,21.433l172.774-88.09
+		c-0.25-2.682-0.412-5.364-0.412-8.097c0-49.503,40.135-89.649,89.662-89.649c49.49,0,89.637,40.146,89.637,89.649
+		c0,49.516-40.146,89.65-89.637,89.65c-22.082,0-42.242-8.009-57.861-21.221l-172.999,88.215c0.224,2.558,0.387,5.14,0.387,7.76
+		c0,4.653-0.474,9.182-1.148,13.648l171.389,87.379c15.92-14.472,37.004-23.379,60.232-23.379
+		C465.559,332.201,505.705,372.348,505.705,421.851z">
+
+</path>
+
+</g>
+
 </svg>
--- a/examples/al-displayFITS.html
+++ b/examples/al-displayFITS.html
@@ -22,13 +22,14 @@
            {
                minCut: 5000,
                maxCut: 17000,
+                colormap: 'viridis'
            }, // no optional params
            (ra, dec, fov, image) => {
                // ra, dec and fov are centered around the fits image
                image.setColormap("magma", {stretch: "asinh"});

                aladin.gotoRaDec(ra, dec);
-                aladin.setFoV(fov);
+                //aladin.setFoV(fov);
            },
        );
    });
--- a/examples/al-displayJPG.html
+++ b/examples/al-displayJPG.html
@@ -40,7 +40,7 @@ Image Opacity: <br/> <input id="slider" type="range" value=1 min=0 max=1 step=0.
            'https://noirlab.edu/public/media/archives/images/large/noirlab1912a.jpg',
            // no options
            {
-                transparency: 0.6
+                transparency: 0.6,
            },
            // A callback fn once the overlay is set
            callback
--- a/src/css/aladin.css
+++ b/src/css/aladin.css
@@ -329,6 +329,11 @@ word-wrap:break-word;
    max-width: fit-content;
 }

+.aladin-box-night {
+    padding: '2px';
+    background-color: #000;
+}
+
 .aladin-box::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
 }
@@ -594,13 +599,14 @@ canvas {
    margin-right: 10px;
 }

+/* smartphones, iPhone, portrait 480x320 phones */
 .aladin-btn {
    all:unset;

 	display: inline-block;
    margin-bottom: 0;
    margin: 0;
-    padding: 8px;
+    padding: 4px;
    z-index: 30;

    font-size: 12px;
@@ -618,29 +624,48 @@ canvas {
 .aladin-btn.toggled {
    border: 2px solid greenyellow;
 }
+
 .aladin-btn.disabled {
    cursor: not-allowed;
    filter: brightness(70%);
 }
+
 .aladin-btn:not(.disabled):hover {
    filter: brightness(105%);
 }
+
 .aladin-btn.small-sized-icon {
-    padding: 0;
+    padding: 0px;
    width: 16px;
    height: 16px;
 }
+
 .aladin-btn.medium-sized-icon {
-    padding: 0;
+    padding: 0px;
    width: 24px;
    height: 24px;
 }
+
 .aladin-btn.svg-icon {
    background-repeat:  no-repeat;
    background-position:center center;
    display: inline-block;
 }
+/*
+@media only screen and (max-width:1025px)  {
+    .aladin-btn {
+        padding: 8px;
+    }

+    .aladin-btn.medium-sized-icon {
+        padding: 4px;
+    }
+
+    .aladin-btn.small-sized-icon {
+        padding: 4px;
+    }
+}
+*/
 .aladin-img {
    object-fit: 'contain';
    vertical-align: 'middle';
@@ -876,11 +901,12 @@ canvas {
 }

 .aladin-status-bar-message {
+    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

-    max-width: 40vw;
+    max-width: 300px;
 }

 .aladin-sp-title a {
@@ -1047,6 +1073,57 @@ canvas {

 /* *********************************************** */

+/* normalize here the inputs */
+
+/* Input text */
+.aladin-input-text {
+    appearance: none;
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    outline-style: none;
+    padding: 2px;
+    border: none;
+    border-radius: 5px;
+    background-color: white;
+}
+
+.aladin-input-text::placeholder {
+    font-style: italic;
+    font-family: monospace;
+}
+
+/* Input select */
+.aladin-input-select {
+    /* Reset */
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    border: 1px solid white;
+    outline: 0;
+    font: inherit;
+    /* Personalize */
+    padding: 2px;
+    background-color: black;
+    color: white;
+    border-radius: 0.25em;
+    box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.2);
+    cursor: pointer;
+    /* <option> colors */
+    /* Remove focus outline */
+    /* Remove IE arrow */
+}
+.aladin-input-select option {
+    color: inherit;
+    background-color: #320a28;
+}
+.aladin-input-select:focus {
+    outline: none;
+}
+.aladin-input-select::-ms-expand {
+    display: none;
+}
+
+
 /* Frames */
 .aladin-input-color {
    appearance: none;
@@ -1113,6 +1190,9 @@ canvas {
    filter: brightness(105%);
 }

+ /* aladin input text */
+
+
 
 /******** Firefox styles ********/
 /* slider track */
--- a/src/js/Aladin.js
+++ b/src/js/Aladin.js
@@ -40,6 +40,7 @@ import { MeasurementTable } from "./MeasurementTable.js";
 import { ImageSurvey } from "./ImageSurvey.js";
 import { Coo } from "./libs/astro/coo.js";
 import { CooConversion } from "./CooConversion.js";
+import { GotoBox } from "./gui/Box/GotoBox.js";

 import { ProjectionEnum } from "./ProjectionEnum.js";

@@ -59,6 +60,7 @@ import { Menu } from "./gui/Toolbar/Menu.js";
 import { ContextMenu } from "./gui/Widgets/ContextMenu.js";
 import { ProjectionActionButton } from "./gui/Button/Projection.js";
 import { Input } from "./gui/Widgets/Input.js";
+import { ConeSearchBox } from "./gui/Box/ConeSearchBox.js";

 import A from "./A.js";
 import { SnapshotActionButton } from "./gui/Button/Snapshot.js";
@@ -316,6 +318,56 @@ export let Aladin = (function () {
    Aladin.prototype._setupUI = function(options) {
        let self = this;

+        let textField = Input.text({
+            label: "Go to:",
+            name: "goto",
+            type: "text",
+            placeholder: 'Object name/position',
+            //autocapitalize: 'off',
+            autocomplete: 'off',
+            autofocus: true,
+            actions: {
+                change: (e, input) => {
+                    input.addEventListener('blur', (f) => {});
+                },
+                click: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+
+                    console.log("click")
+                }
+                /*focus: (e) => {
+                    //e.stopPropagation();
+                    //e.preventDefault();
+
+                    //textField.element().blur();
+
+                    console.log("focus")
+                },
+                input: (e) => {
+                    console.log("change")
+                }
+                keydown: (e) => {
+                    textField.removeClass('aladin-unknownObject'); // remove red border
+
+                    if (e.key === 'Enter') {
+                        let object = textField.get();
+                        textField.el.blur();
+
+                        aladin.gotoObject(
+                            object,
+                            {
+                                error: function () {
+                                    textField.addClass('aladin-unknownObject');
+                                }
+                            }
+                        );
+
+                    }
+                }*/
+            }
+        });
+
        let viewport = A.toolbar({
            direction: 'horizontal',
            position: {
@@ -331,14 +383,18 @@ export let Aladin = (function () {
        // Add the frame control
        if (options.showFrame) {
            let cooFrame = CooFrameEnum.fromString(options.cooFrame, CooFrameEnum.J2000);
-            let cooFrameControl = new Input({
-                layout: {
-                    name: 'frame',
-                    type: 'select',
-                    value: cooFrame.label,
-                    options: [CooFrameEnum.J2000.label, CooFrameEnum.J2000d.label, CooFrameEnum.GAL.label],
-                    change(e) {
-                        self.setFrame(e.target.value)
+            let cooFrameControl = Input.select({
+                name: 'frame',
+                type: 'select',
+                value: cooFrame.label,
+                options: [CooFrameEnum.J2000.label, CooFrameEnum.J2000d.label, CooFrameEnum.GAL.label],
+                change(e) {
+                    self.setFrame(e.target.value)
+                },
+                tooltip: {
+                    content: "Change the frame",
+                    position: {
+                        direction: 'bottom'
                    }
                }
            });
@@ -363,6 +419,16 @@ export let Aladin = (function () {
            }
        }, this);

+        /*let box = ConeSearchBox.getInstance(this);
+        box.attach({
+            callback: (cs) => {
+            },
+            position: {
+                anchor: 'center center',
+            }
+        })
+        box._show();*/
+
        // Add the layers control
        if (options.showLayersControl) {
            menu.enable('survey')
@@ -421,7 +487,7 @@ export let Aladin = (function () {
                tooltip: {
                    content: 'Zoom',
                    position: {
-                        direction: 'left'
+                        direction: 'right'
                    }
                },
                cssStyle: {
@@ -438,11 +504,11 @@ export let Aladin = (function () {
                tooltip: {
                    content: 'Unzoom',
                    position: {
-                        direction: 'left'
+                        direction: 'right'
                    }
                },
                cssStyle: {
-                    fontSize: 'x-large'
+                    fontSize: 'x-large',
                },
                action(o) {
                    self.decreaseZoom();
@@ -454,7 +520,7 @@ export let Aladin = (function () {
                layout: [plusZoomBtn, minusZoomBtn],
                direction: 'vertical',
                position: {
-                    anchor: 'right center',
+                    anchor: 'left center',
                }
            });
            zoomControlToolbar.addClass('aladin-zoom-controls');
@@ -510,7 +576,7 @@ export let Aladin = (function () {
        showCatalog: true, // TODO: still used ??

        fullScreen: false,
-        reticleColor: "rgb(178, 50, 178)",
+        reticleColor: "rgb(255, 200, 0)",
        reticleSize: 22,
        gridColor: "rgb(0, 255, 0)",
        gridOpacity: 0.5,
--- a/src/js/FiniteStateMachine/PolySelect.js
+++ b/src/js/FiniteStateMachine/PolySelect.js
@@ -21,6 +21,7 @@ import { FSM } from "../FiniteStateMachine";
 import { ActionButton } from "../gui/Widgets/ActionButton";
 import { View } from "../View";
 import finishIconUrl from '../../../assets/icons/finish.svg';
+import { Utils } from "../Utils";

 /******************************************************************************
 * Aladin Lite project
@@ -38,6 +39,8 @@ export class PolySelect extends FSM {
    constructor(options, view) {
        // Off initial state
        let off = () => {
+            console.log("off")
+
            view.aladin.showReticle(true)
            view.setMode(View.PAN)
            view.setCursor('default');
@@ -48,6 +51,8 @@ export class PolySelect extends FSM {
        }
        let btn;
        let mouseout = (params) => {
+            console.log("mouseout")
+
            let {e, coo} = params;

            if (btn.el.contains(e.relatedTarget) || e.relatedTarget.contains(btn.el)) {
@@ -61,6 +66,8 @@ export class PolySelect extends FSM {
        };

        let start = (params) => {
+            console.log("start")
+
            const {callback} = params;
            view.aladin.showReticle(false)
            view.setCursor('crosshair');
@@ -73,6 +80,8 @@ export class PolySelect extends FSM {
        }

        let click = (params) => {
+            console.log("click")
+
            const {coo} = params;

            const firstClick = this.coos.length === 0;
@@ -106,6 +115,9 @@ export class PolySelect extends FSM {
        };

        let mousemove = (params) => {
+
+            console.log("move")
+
            const {coo} = params;
            this.moveCoo = coo;

@@ -113,6 +125,9 @@ export class PolySelect extends FSM {
        };

        let draw = () => {
+
+            console.log("draw")
+
            let ctx = view.catalogCtx;

            if (!view.catalogCanvasCleared) {
@@ -143,6 +158,8 @@ export class PolySelect extends FSM {
        }

        let finish = () => {
+            console.log("finish")
+
            // finish the selection
            let xMin = this.coos[0].x
            let yMin = this.coos[0].y
@@ -176,40 +193,90 @@ export class PolySelect extends FSM {
            this.dispatch('off');
        };

-        super({
-            state: 'off',
-            transitions: {
-                off: {
-                    start,
-                },
-                start: {
-                    click
-                },
-                click: {
-                    //mouseout,
-                    mousemove,
-                    draw,
-                },
-                mouseout: {
-                    start,
-                    mousemove,
-                },
-                mousemove: {
-                    draw,
-                    click,
-                    finish
-                },
-                draw: {
-                    click,
-                    mouseout,
-                    mousemove,
-                    finish
-                },
-                finish: {
-                    off
+        let fsm;
+        if (Utils.hasTouchScreen()) {
+            let mousedown = click;
+            let mouseup = click;
+
+            // smartphone, tablet
+            fsm = {
+                state: 'off',
+                transitions: {
+                    off: {
+                        start,
+                    },
+                    start: {
+                        mousedown
+                    },
+                    mousedown: {
+                        //mouseout,
+                        mousemove,
+                        draw,
+                    },
+                    mouseout: {
+                        start,
+                        mousemove,
+                    },
+                    mousemove: {
+                        draw,
+                        mouseup,
+                        finish
+                    },
+                    mouseup: {
+                        mousedown,
+                        finish,
+                        draw,
+                    },
+                    draw: {
+                        mouseup,
+                        mouseout,
+                        mousemove,
+                        finish
+                    },
+                    finish: {
+                        off
+                    }
                }
            }
-        })
+        } else {
+            // desktop, laptops...
+            fsm = {
+                state: 'off',
+                transitions: {
+                    off: {
+                        start,
+                    },
+                    start: {
+                        click
+                    },
+                    click: {
+                        //mouseout,
+                        mousemove,
+                        draw,
+                    },
+                    mouseout: {
+                        start,
+                        mousemove,
+                    },
+                    mousemove: {
+                        draw,
+                        click,
+                        finish
+                    },
+                    draw: {
+                        click,
+                        mouseout,
+                        mousemove,
+                        finish
+                    },
+                    finish: {
+                        off
+                    }
+                }
+            }
+        }
+
+        super(fsm)
        let self = this;

        this.coos = [];
--- a/src/js/GenericPointer.js
+++ b/src/js/GenericPointer.js
@@ -11,7 +11,7 @@ import { Utils } from './Utils';

 // allow to call either Simbad or Planetary features Pointers
 export let GenericPointer = function (view, e) {
-    const xymouse = {x: e.clientX, y: e.clientY};
+    const xymouse = Utils.relMouseCoords(e);

    let radec = view.aladin.pix2world(xymouse.x, xymouse.y);
    if (radec) {
--- a/src/js/Reticle.js
+++ b/src/js/Reticle.js
@@ -35,10 +35,14 @@ import { ALEvent } from './events/ALEvent';
 export let Reticle = (function() {
     // constructor
    let Reticle = function(options, aladin) {
-        this.el = document.createElement('object');
+        this.el = document.createElement('div');
        this.el.className = 'aladin-reticle';
-        this.el.type = "image/svg+xml";
-        this.el.data = iconUrl;
+        this.el.innerHTML = '<svg id="reticle" viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg">' +
+        '   <path d="M 0 7 L 5 7 L 5 9 L 0 9 L 0 7 Z" fill-rule="evenodd"/>' +
+        '   <path d="M 11 7 L 16 7 L 16 9 L 11 9 L 11 7 Z" fill-rule="evenodd"/>' +
+        '   <path d="M 7 11 L 9 11 L 9 16 L 7 16 L 7 11 Z" fill-rule="evenodd" />' +
+        '   <path d="M 7 0 L 9 0 L 9 5 L 7 5 L 7 0 Z" fill-rule="evenodd"/>' +
+        '</svg>';
        this.aladin = aladin;

        this.color = null;
@@ -55,30 +59,11 @@ export let Reticle = (function() {
            show = options && options.showReticle;
        }

-        let self = this;
-        this.loaded = new Promise((resolve, reject) => {
-            function handleLoad(event) {
-                /* Removes the listeners */
-                self.el.removeEventListener('load', handleLoad);
-                resolve(event); // works just fine
-            }
-
-            function handleError(event) {
-                /* Removes the listeners */
-                self.el.removeEventListener('error', handleError);
-                reject(event); // works just fine
-            }
-
-            self.el.addEventListener('load', handleLoad);
-            self.el.addEventListener('error', handleError);
-        });
-
        this.update({color, size, show})
    };

    Reticle.prototype.update = async function(options) {
        options = options || {};
-        await this.loaded;

        if (options.size) {
            this._setSize(options.size)
@@ -104,18 +89,13 @@ export let Reticle = (function() {
            return;
        }

-        //await this.loaded;
-
        // 1. the user has maybe given some
        let reticleColor = new Color(color);
        // a dynamic way to set the color
        this.color = 'rgb(' + reticleColor.r + ', ' + reticleColor.g + ', ' + reticleColor.b + ')';

-        console.log(color, this.el)
-        this.el.contentDocument
-            .getElementById("reticle")
+        this.el.getElementsByTagName("svg")[0]
            .setAttribute('fill', this.color);
-
    }

    Reticle.prototype._setSize = function(size) {
@@ -124,8 +104,12 @@ export let Reticle = (function() {
        }

        this.size = size;
-        this.el.style.width = this.size + 'px';
-        this.el.style.height = this.size + 'px';
+        //this.el.style.width = this.size + 'px';
+        //this.el.style.height = this.size + 'px';
+
+        this.el.getElementsByTagName("svg")[0].setAttribute('width', size);
+        this.el.getElementsByTagName("svg")[0].setAttribute('height', size);
+
    }

    Reticle.prototype._show = function(show) {
--- a/src/js/Utils.ts
+++ b/src/js/Utils.ts
@@ -40,7 +40,7 @@ Utils.HTTPS_WHITELIST = ['alasky.u-strasbg.fr', 'alaskybis.u-strasbg.fr', 'alask

 Utils.cssScale = undefined

-Utils.relMouseCoords = function (event: MouseEvent) {
+Utils.relMouseCoords = function (event) {
    if (event.offsetX) {
        return {x: event.offsetX, y: event.offsetY}
    } else {
@@ -355,14 +355,42 @@ Utils.fetch = function(params) {
 Utils.on = function(element, events, callback) {
    events.split(' ')
        .forEach(e => {
-            if (e === "touchstart" || e === 'touchmove' || e === "wheel") {
-                element.addEventListener(e, callback, {passive: true})
-            } else {
-                element.addEventListener(e, callback)
-            }
+            element.addEventListener(e, callback)
        })
 }

+Utils.isTouchScreenDevice = undefined;
+
+Utils.hasTouchScreen = function() {
+    if (Utils.isTouchScreenDevice === undefined) {
+        let hasTouchScreen = false;
+        if ("maxTouchPoints" in navigator) {
+            hasTouchScreen = navigator.maxTouchPoints > 0;
+        } else if ("msMaxTouchPoints" in navigator) {
+            hasTouchScreen = navigator.msMaxTouchPoints > 0;
+        } else {
+            const mQ = matchMedia?.("(pointer:coarse)");
+            if (mQ?.media === "(pointer:coarse)") {
+                hasTouchScreen = !!mQ.matches;
+            } else if ("orientation" in window) {
+                hasTouchScreen = true; // deprecated, but good fallback
+            } else {
+                // Only as a last resort, fall back to user agent sniffing
+                const UA = navigator.userAgent;
+                hasTouchScreen =
+                /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
+                /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA);
+            }
+        }
+
+        Utils.isTouchScreenDevice = hasTouchScreen;
+    }
+
+    return Utils.isTouchScreenDevice;
+}
+
+
+
 Utils.openNewTab = function(url) {
    window.open(url, '_blank').focus();
 }
--- a/src/js/View.js
+++ b/src/js/View.js
@@ -223,10 +223,21 @@ export let View = (function () {
        init(this);
        // listen to window resize and reshape canvases
        this.resizeTimer = null;
-        let resizeObserver = new ResizeObserver(() => {
-            self.fixLayoutDimensions();
-            //self.requestRedraw();
-        });
+        /*if ('ontouchstart' in window) {
+            Utils.on(document, 'orientationchange', (e) => {
+                self.fixLayoutDimensions();
+            })
+        } else {*/
+            
+            this.resizeObserver = new ResizeObserver(() => {
+                self.fixLayoutDimensions();
+                //self.requestRedraw();
+            });
+
+            self.resizeObserver.observe(this.aladinDiv);
+        //}
+
+        /**/

        this.throttledPositionChanged = Utils.throttle(
            () => {
@@ -260,7 +271,6 @@ export let View = (function () {
            View.CALLBACKS_THROTTLE_TIME_MS,
        );

-        resizeObserver.observe(this.aladinDiv);
        self.fixLayoutDimensions();
        self.redraw()

@@ -472,9 +482,9 @@ export let View = (function () {
    };

    var createListeners = function (view) {
-        var hasTouchEvents = false;
-        if ('ontouchstart' in window) {
-            hasTouchEvents = true;
+        if ('virtualKeyboard' in navigator) {
+            // The VirtualKeyboard API is supported!
+            navigator.virtualKeyboard.overlaysContent = true;
        }

        // various listeners
@@ -495,7 +505,7 @@ export let View = (function () {

        };

-        if (!hasTouchEvents) {
+        if (!Utils.hasTouchScreen()) {
            Utils.on(view.catalogCanvas, 'dblclick', onDblClick);
        }

@@ -510,7 +520,7 @@ export let View = (function () {
        let cutMaxInit = null;

        Utils.on(view.catalogCanvas, "mousedown touchstart", function (e) {
-            //e.preventDefault();
+            e.preventDefault();
            e.stopPropagation();

            const xymouse = Utils.relMouseCoords(e);
@@ -573,7 +583,7 @@ export let View = (function () {
            view.dragging = true;
            view.aladin.contextMenu && view.aladin.contextMenu._hide()

-            if (view.mode == View.PAN) {
+            if (view.mode === View.PAN) {
                view.setCursor('move');
            }

@@ -625,6 +635,9 @@ export let View = (function () {
        
        // reacting on 'click' rather on 'mouseup' is more reliable when panning the view
        Utils.on(view.catalogCanvas, "click mouseout touchend touchcancel", function (e) {
+            //e.preventDefault();
+            //e.stopPropagation();
+
            const xymouse = Utils.relMouseCoords(e);

            ALEvent.CANVAS_EVENT.dispatchedTo(view.aladinDiv, {
@@ -666,15 +679,21 @@ export let View = (function () {
            view.dragCoo = null;

            if (e.type === "mouseout" || e.type === "touchend" || e.type === "touchcancel") {
-                if (e.type === "mouseout") {
-                    if (view.mode === View.TOOL_SIMBAD_POINTER) {
-                        view.setMode(View.PAN);
-                    } else if (view.mode === View.SELECT) {
+                if (e.type === "mouseout" || e.type === "touchcancel") {
+                    if (view.mode === View.SELECT) {
                        view.selector.dispatch('mouseout', {coo: xymouse, e})
                    }

                    return;
                }
+
+                if (e.type === "touchend") {
+                    if (view.mode === View.SELECT) {
+                        view.selector.dispatch('mouseup', {coo: xymouse})
+                        
+                        return;
+                    }
+                } 
            }

            if (view.mode == View.TOOL_SIMBAD_POINTER) {
@@ -772,7 +791,7 @@ export let View = (function () {
        var lastHoveredObject; // save last object hovered by mouse
        var lastMouseMovePos = null;
        Utils.on(view.catalogCanvas, "mousemove touchmove", function (e) {
-            //e.preventDefault();
+            e.preventDefault();
            e.stopPropagation();

            const xymouse = Utils.relMouseCoords(e);
@@ -854,7 +873,7 @@ export let View = (function () {
                view.updateObjectsLookup();
            }

-            /*if (!view.dragging || hasTouchEvents) {
+            /*if (!view.dragging || Utils.hasTouchScreen()) {
                // update location box
                view.updateLocation({mouseX: xymouse.x, mouseY: xymouse.y});
            }*/
@@ -958,7 +977,7 @@ export let View = (function () {
        var isTouchPad;
        var scale = 0.0;
        Utils.on(view.catalogCanvas, 'wheel', function (e) {
-            //e.preventDefault();
+            e.preventDefault();
            e.stopPropagation();

            const xymouse = Utils.relMouseCoords(e);
--- a/src/js/gui/Box/CatalogQueryBox.js
+++ b/src/js/gui/Box/CatalogQueryBox.js
@@ -106,6 +106,8 @@ import { ContextMenu } from "../Widgets/ContextMenu.js";
            })
        }, aladin.aladinDiv)

+        this.addClass('aladin-box-night')
+
        self = this;
        this.loadBtn = loadBtn;
        this.catNameTextInput = catNameTextInput;
--- a/src/js/gui/Box/GotoBox.js
+++ b/src/js/gui/Box/GotoBox.js
@@ -53,9 +53,10 @@ export class GotoBox extends Box {
            name: "goto",
            type: "text",
            placeholder: 'Object name/position',
+            //autocapitalize: 'off',
            autocomplete: 'off',
+            autofocus: true,
            actions: {
-                blur: () => {},
                keydown: (e) => {
                    textField.removeClass('aladin-unknownObject'); // remove red border

@@ -71,13 +72,14 @@ export class GotoBox extends Box {
                                }
                            }
                        );
-
                    }
                }
            }
        });

        super({content: textField}, aladin.aladinDiv)
+
+        this.addClass('aladin-box-night');
        this.textField = textField;
    }

--- a/src/js/gui/Box/GridBox.js
+++ b/src/js/gui/Box/GridBox.js
@@ -175,12 +175,10 @@ export class GridBox extends Box {

        super({
            content: layout,
-            cssStyle: {
-                padding: '2px',
-                'background-color': "#000",
-            },
        }, aladin.aladinDiv)

+        this.addClass("aladin-box-night")
+
        this.aladin = aladin;
    }

--- a/src/js/gui/Box/HiPSSelectorBox.js
+++ b/src/js/gui/Box/HiPSSelectorBox.js
@@ -59,11 +59,11 @@ import { Utils } from "../../Utils.ts";
            type: 'text',
            placeholder: "Type ID, title, keyword or URL",
            autocomplete: 'off',
-            change(e) {
+            /*change(e) {
                loadBtn.update({disable: true})
                // Unfocus the keyboard on android devices (maybe it concerns all smartphones) when the user click on enter
                //inputText.element().blur();
-            }
+            }*/
        });

        let self;
@@ -87,6 +87,9 @@ import { Utils } from "../../Utils.ts";
                ]
            })
        }, aladin.aladinDiv)
+
+        this.addClass('aladin-box-night')
+
        self = this;
        // Query the mocserver
        MocServer.getAllHiPSes();
--- a/src/js/gui/Box/StatusBarBox.js
+++ b/src/js/gui/Box/StatusBarBox.js
@@ -110,7 +110,7 @@ export class StatusBarBox extends Box {

        // create message div
        let message = Layout.horizontal({
-            layout: [task.message],
+            layout: task.message,
            tooltip: {
                content: task.message,
                position: {
@@ -128,6 +128,8 @@ export class StatusBarBox extends Box {

        message.addClass("aladin-status-bar-message")

+        console.log(message)
+
        this._show({
            content: [StatusBarBox.icons[task.type], message],
            position: {
--- a/src/js/gui/Button/ShareView.js
+++ b/src/js/gui/Button/ShareView.js
@@ -55,11 +55,13 @@ import shareIconUrl from '../../../../assets/icons/share.svg';
                    var url = aladin.getShareURL();
                    navigator.clipboard.writeText(url);

-                    aladin.statusBar.appendMessage({
-                        message: 'View URL saved into your clipboard!',
-                        duration: 2000,
-                        type: 'info'
-                    })
+                    if (aladin.statusBar) {
+                        aladin.statusBar.appendMessage({
+                            message: 'View URL saved into your clipboard!',
+                            duration: 2000,
+                            type: 'info'
+                        })
+                    }
                }
            },
            {
@@ -92,11 +94,13 @@ import shareIconUrl from '../../../../assets/icons/share.svg';
                    let wcs = aladin.getViewWCS()
                    navigator.clipboard.writeText(JSON.stringify(wcs));

-                    aladin.statusBar.appendMessage({
-                        message: 'WCS saved into your clipboard!',
-                        duration: 2000,
-                        type: 'info'
-                    })
+                    if (aladin.statusBar) {
+                        aladin.statusBar.appendMessage({
+                            message: 'WCS saved into your clipboard!',
+                            duration: 2000,
+                            type: 'info'
+                        })
+                    }
                }
            },
        ];
--- a/src/js/gui/CtxMenu/OverlayStack.js
+++ b/src/js/gui/CtxMenu/OverlayStack.js
@@ -37,6 +37,7 @@ import { CatalogQueryBox } from "../Box/CatalogQueryBox.js";
 import removeIconUrl from '../../../../assets/icons/remove.svg';
 import { AladinUtils } from "../../AladinUtils.js";
 import A from "../../A.js";
+import { Utils } from "../../../js/Utils";
 
 export class OverlayStack extends ContextMenu {
    // Constructor
@@ -117,8 +118,8 @@ export class OverlayStack extends ContextMenu {
                        {
                            label: 'Find in our databases...',
                            action(o) {
-                                o.stopPropagation();
-                                o.preventDefault();
+                                //o.stopPropagation();
+                                //o.preventDefault();
                                
                                self._hide();

@@ -131,7 +132,7 @@ export class OverlayStack extends ContextMenu {
                    ]
                },
                {
-                    label: 'Multi-Order Coverage',
+                    label: 'MOC',
                    subMenu: [
                        ContextMenu.fileLoaderItem({
                            label: 'FITS File',
@@ -241,7 +242,7 @@ export class OverlayStack extends ContextMenu {
                    backgroundColor: '#bababa',
                    borderColor: '#484848',
                    color: 'black',
-                    visibility: 'hidden',
+                    visibility: Utils.hasTouchScreen() ? 'visible' : 'hidden',
                    width: '18px',
                    height: '18px',
                    verticalAlign: 'middle',
@@ -265,7 +266,7 @@ export class OverlayStack extends ContextMenu {
                    backgroundColor: '#bababa',
                    borderColor: '#484848',
                    color: 'black',
-                    visibility: 'hidden',
+                    visibility: Utils.hasTouchScreen() ? 'visible' : 'hidden',
                    width: '18px',
                    height: '18px',
                    verticalAlign: 'middle'
@@ -289,18 +290,26 @@ export class OverlayStack extends ContextMenu {
                    textAlign: 'center',
                }
            });
-            layout.push({
-                label: item,
-                cssStyle: cssStyle,
-                hover(e) {
-                    showBtn.el.style.visibility = 'visible'
-                    deleteBtn.el.style.visibility = 'visible'
-                },
-                unhover(e) {
-                    showBtn.el.style.visibility = 'hidden'
-                    deleteBtn.el.style.visibility = 'hidden'
-                },
-            })
+
+            if(!Utils.hasTouchScreen()) {
+                layout.push({
+                    label: item,
+                    cssStyle,
+                    hover(e) {
+                        showBtn.el.style.visibility = 'visible'
+                        deleteBtn.el.style.visibility = 'visible'
+                    },
+                    unhover(e) {
+                        showBtn.el.style.visibility = 'hidden'
+                        deleteBtn.el.style.visibility = 'hidden'
+                    },
+                })
+            } else {
+                layout.push({
+                    label: item,
+                    cssStyle
+                })
+            }
        }

        super.attach(layout);
--- a/src/js/gui/CtxMenu/Settings.js
+++ b/src/js/gui/CtxMenu/Settings.js
@@ -53,7 +53,9 @@ export class SettingsCtxMenu extends ContextMenu {
                aladin.setBackgroundColor(hex)
            }
        });
+        let reticleColor = new Color(aladin.getReticle().getColor())
        self.reticleColorInput = Input.color({
+            value: reticleColor.toHex(),
            name: 'reticleColor',
            change(e) {
                let hex = e.target.value;
--- a/src/js/gui/CtxMenu/SurveyCtxMenu.js
+++ b/src/js/gui/CtxMenu/SurveyCtxMenu.js
@@ -1,5 +1,3 @@
-import { Layout } from "../Layout";
-import { ActionButton } from "../Widgets/ActionButton";
 import { ImageLayer } from "../../ImageLayer.js";
 import searchIconImg from '../../../../assets/icons/search.svg';

@@ -64,8 +62,7 @@ export class SurveyCtxMenu extends ContextMenu {
                label: '<div style="background-color: rgba(0, 0, 0, 0.6); padding: 3px; border-radius: 3px">' + layer.name + '</div>',
                cssStyle: cssStyle,
                action(e) {
-                    let name = e.srcElement.innerText;
-                    let cfg = ImageLayer.LAYERS.find((layer) => layer.name === name);
+                    let cfg = ImageLayer.LAYERS.find((l) => l.name === layer.name);
                    let newLayer;
                    
                    // Max order is specific for surveys
@@ -108,12 +105,14 @@ export class SurveyCtxMenu extends ContextMenu {
            this.position = options.position;
        }

+        console.log(this.aladin.aladinDiv.offsetHeight)
+        let maxHeight = Math.min(this.aladin.aladinDiv.offsetHeight, 500);
        super.show({
            position: this.position,
            cssStyle: {
                width: '20em',
                overflowY: 'scroll',
-                maxHeight: '500px',
+                maxHeight: maxHeight + 'px',
                color: 'white',
                backgroundColor: 'black',
            }
--- a/src/js/gui/CtxMenu/SurveyStack.js
+++ b/src/js/gui/CtxMenu/SurveyStack.js
@@ -77,7 +77,7 @@ export class Stack extends ContextMenu {
        })*/

        let self = this;
-        document.addEventListener('click', (e) => {
+        document.addEventListener('click', e => {
            if (!self.el.contains(e.target) && this.mode === 'stack') {
                this._hide()
            }
@@ -140,11 +140,13 @@ export class Stack extends ContextMenu {
                                cursor: 'help',
                            },
                        },
-                        content: 'Search for a progressive survey'
+                        content: 'Search a survey'
                    },
                    action(e) {
-                        e.stopPropagation();
-                        e.preventDefault();
+                        /*if (e) {
+                            e.stopPropagation();
+                            e.preventDefault();
+                        }*/

                        self._hide();

@@ -205,7 +207,7 @@ export class Stack extends ContextMenu {
                    backgroundColor: '#bababa',
                    borderColor: '#484848',
                    color: 'black',
-                    visibility: 'hidden',
+                    visibility: Utils.hasTouchScreen() ? 'visible' : 'hidden',
                    width: '18px',
                    height: '18px',
                    verticalAlign: 'middle',
@@ -230,7 +232,7 @@ export class Stack extends ContextMenu {
                    backgroundColor: '#bababa',
                    borderColor: '#484848',
                    color: 'black',
-                    visibility: 'hidden',
+                    visibility: Utils.hasTouchScreen() ? 'visible' : 'hidden',
                    width: '18px',
                    height: '18px',
                    verticalAlign: 'middle'
@@ -247,7 +249,7 @@ export class Stack extends ContextMenu {
                    backgroundColor: '#bababa',
                    borderColor: '#484848',
                    color: 'black',
-                    visibility: 'hidden',
+                    visibility: Utils.hasTouchScreen() ? 'visible' : 'hidden',
                    width: '18px',
                    height: '18px',
                    verticalAlign: 'middle',
@@ -285,26 +287,32 @@ export class Stack extends ContextMenu {
                }
            });

-            layout.push({
+            let l = {
                label: item,
-                cssStyle: cssStyle,
-                hover(e) {
-                    showBtn.el.style.visibility = 'visible'
-                    editBtn.el.style.visibility = 'visible'
-                    deleteBtn.el.style.visibility = 'visible'
-                },
-                unhover(e) {
-                    showBtn.el.style.visibility = 'hidden'
-                    editBtn.el.style.visibility = 'hidden'
-                    deleteBtn.el.style.visibility = 'hidden'
-                },
+                cssStyle,
                action(o) {
                    self.aladin.selectLayer(layer.layer);
                    // recompute the stack
                    self.attach({layers})
                    self._show()
                }
-            })
+            };
+
+            if (!Utils.hasTouchScreen()) {
+                l.hover = (e) => {
+                    showBtn.el.style.visibility = 'visible'
+                    editBtn.el.style.visibility = 'visible'
+                    deleteBtn.el.style.visibility = 'visible'
+                }
+
+                l.unhover = (e) => {
+                    showBtn.el.style.visibility = 'hidden'
+                    editBtn.el.style.visibility = 'hidden'
+                    deleteBtn.el.style.visibility = 'hidden'
+                }
+            }
+
+            layout.push(l);
        }

        super.attach(layout);
--- a/src/js/gui/Layout.js
+++ b/src/js/gui/Layout.js
@@ -59,8 +59,13 @@ export class Layout extends DOMElement {

        // 2. Once self is attached, attach the children
        if (options.layout) {
-            for (const item of options.layout) {
-                this.appendContent(item)
+            if (typeof options.layout === 'string' || options.layout instanceof String) {
+                this.el.innerHTML = options.layout;
+            } else {
+                // treat it as an array
+                for (const item of options.layout) {
+                    this.appendContent(item)
+                }
            }
        }

--- a/src/js/gui/Location.js
+++ b/src/js/gui/Location.js
@@ -152,11 +152,13 @@ export class Location extends DOMElement {
        navigator.clipboard.writeText(copyTextEl.innerText)
            .then(() => {
                msg = 'successful'
-                this.aladin.statusBar.appendMessage({
-                    message: 'Reticle location saved!',
-                    duration: 2000,
-                    type: 'info'
-                })
+                if (this.aladin.statusBar) {
+                    this.aladin.statusBar.appendMessage({
+                        message: 'Reticle location saved!',
+                        duration: 2000,
+                        type: 'info'
+                    })
+                }
            })
            .catch((e) => {
                msg = 'unsuccessful'
--- a/src/js/gui/Toolbar/Menu.js
+++ b/src/js/gui/Toolbar/Menu.js
@@ -36,6 +36,7 @@ import searchIcon from './../../../../assets/icons/search.svg';
 import restoreIcon from './../../../../assets/icons/restore.svg';
 import maximizeIcon from './../../../../assets/icons/maximize.svg';

+import { Utils as UtilsExt } from "../../Utils";
 import { Utils } from "../Utils";

 /******************************************************************************
@@ -63,13 +64,27 @@ import { MainSurveyActionButton } from "../Button/MainSurvey";
     */
    constructor(options, aladin) {
        super(options, aladin.aladinDiv)
+        let self = this;

-        window.addEventListener('resize', () => {
-            self.closeAll()
-        })
+        // When the menu resize we close it.
+        // For smarthphone, we only make the menu close when the orientation is changing
+        if (UtilsExt.hasTouchScreen()) {
+            if (screen && 'orientation' in screen) {
+                screen.orientation.addEventListener("change", (e) => {
+                    self.closeAll()
+                });
+            } else {
+                window.addEventListener('orientationchange', (e) => {
+                    self.closeAll()
+                })
+            }
+        } else {
+            window.addEventListener('resize', () => {
+                self.closeAll()
+            })
+        }

        // Add the fullscreen control
-        let self = this;

        this.controls = {
            survey: new MainSurveyActionButton(
--- a/src/js/gui/widgets/ActionButton.js
+++ b/src/js/gui/widgets/ActionButton.js
@@ -19,6 +19,7 @@

 import { DOMElement } from "./Widget";
 import { Tooltip } from "./Tooltip";
+import { Utils } from "../../Utils";
 /******************************************************************************
 * Aladin Lite project
 *
@@ -78,6 +79,11 @@ export class ActionButton extends DOMElement {
        let el = document.createElement('button');
        el.classList.add('aladin-btn');

+        if (Utils.hasTouchScreen()) {
+            // Add a little padding 
+            el.style.padding = "0.3em";
+        }
+
        // add it to the dom
        super(el, opt);
        this._show();
--- a/src/js/gui/widgets/ContextMenu.js
+++ b/src/js/gui/widgets/ContextMenu.js
@@ -51,7 +51,7 @@ export class ContextMenu extends DOMElement {
        this.cssStyleDefault = el.style;

        if (!options || options.hideOnClick === undefined || options.hideOnClick === true) {
-            document.addEventListener('click', (e) => {
+            this.aladin.aladinDiv.addEventListener('click', (e) => {
                if (!el.contains(e.target)) {
                    this._hide()
                }
@@ -59,15 +59,24 @@ export class ContextMenu extends DOMElement {
        }

        if (!options || options.hideOnResize === undefined || options.hideOnResize === true) {
-            window.addEventListener('resize', () => this._hide());
+            if (Utils.hasTouchScreen()) {
+                if (screen && 'orientation' in screen) {
+                    screen.orientation.addEventListener("change", (e) => {
+                        this._hide()
+                    });
+                } else {
+                    window.addEventListener('orientationchange', (e) => {
+                        this._hide()
+                    })
+                }
+            } else {
+                window.addEventListener('resize', () => {
+                    this._hide()
+                })
+            }
        }
    }

-    _hide() {
-        super._hide()
-        //super.remove()
-    }
-
    _attachOption(target, opt, e, cssStyle) {
        let item = document.createElement('li');
        item.classList.add('aladin-context-menu-item');
@@ -179,6 +188,17 @@ export class ContextMenu extends DOMElement {
            });
        } else if (opt.subMenu) {
            item.addEventListener('click', e => {
+                console.log("click on item")
+                e.preventDefault();
+                e.stopPropagation();
+
+                if (item.parentNode) {
+                    let subMenus = item.parentNode.querySelectorAll(".aladin-context-sub-menu")
+                    for (let subMenuChild of subMenus) {
+                        subMenuChild.style.display = 'none';
+                    }  
+                }
+                
                item.querySelector(".aladin-context-sub-menu")
                    .style.display = 'block';
            });
--- a/src/js/gui/widgets/Form.js
+++ b/src/js/gui/widgets/Form.js
@@ -93,6 +93,10 @@ export class Form extends DOMElement {

            inputEl.autocomplete = layout.autocomplete || 'off';

+            if (layout.type === "text") {
+                inputEl.enterkeyhint = "send";
+            }
+
            if (layout.type === "number") {
                inputEl.step = layout.step || "any";
            }
--- a/src/js/gui/widgets/Input.js
+++ b/src/js/gui/widgets/Input.js
@@ -101,6 +101,10 @@ export class Input extends DOMElement {
                this.el.step = "any";
            }

+            if (layout.type === "text") {
+                this.el.enterkeyhint = "send";
+            }
+
            if (layout.autocomplete) {
                this.el.autocomplete = layout.autocomplete;
            }
@@ -136,6 +140,10 @@ export class Input extends DOMElement {
                    this.el.addEventListener('change', this.action);
                }
            }
+
+            /*if (layout.autofocus) {
+                this.el.autofocus = true;
+            }*/
        }

        if (layout.actions) {
@@ -266,4 +274,19 @@ export class Input extends DOMElement {

        return el;
    }
+
+    static select(options) {
+        let el = new Input({
+            cssStyle: options.cssStyle,
+            tooltip: options.tooltip,
+            layout: {
+                name: options.name || 'select',
+                type: 'select',
+                ...options
+            }
+        });
+        el.addClass("aladin-input-select");
+
+        return el;
+    }
 }
--- a/src/js/gui/widgets/Widget.js
+++ b/src/js/gui/widgets/Widget.js
@@ -131,7 +131,8 @@ export class DOMElement {
            return;
        }

-        let left = 0, top = 0, x = 0, y = 0;
+        let left = 0, top = 0, bottom, right;
+        let x = 0, y = 0;

        // handle the anchor/dir case with higher priority
        const {offsetWidth, offsetHeight} = el;
@@ -141,12 +142,21 @@ export class DOMElement {
        const innerHeight = aladinDiv.offsetHeight;

        // take on less priority the left and top
-        if (options && options.left && options.top) {
+        if (options && (options.left || options.top || options.right || options.bottom)) {
            el.style.position = 'absolute';

-            top = options.top;
-            left = options.left;
-
+            if (options.top) {
+                top = options.top;
+            }
+            if (options.left) {
+                left = options.left;
+            }
+            if (options.bottom) {
+                bottom = options.bottom;
+            }
+            if (options.right) {
+                right = options.right;
+            }
        } else if (options && options.nextTo && options.direction) {
            let dir = options.direction || 'right';
            let nextTo = options.nextTo;
@@ -202,8 +212,19 @@ export class DOMElement {
            y = Math.abs(top) + 'px';
        }

-        el.style.left = left + 'px';
-        el.style.top = top + 'px';
+        if (top !== undefined) {
+            el.style.top = top + 'px';
+        }
+        if (left !== undefined) {
+            el.style.left = left + 'px';
+        }
+        if (bottom !== undefined) {
+            el.style.bottom = bottom + 'px';
+        }
+        if (right !== undefined) {
+            el.style.right = right + 'px';
+        }
+
        el.style.transform = `translate(${x}, ${y})`;
    }

--- a/src/js/vo/VOTable.js
+++ b/src/js/vo/VOTable.js
@@ -250,7 +250,7 @@ export class VOTable {
    constructor(url, successCallback, errorCallback, useProxy) {
        Utils.fetch({
            url,
-            desc: 'Loading VOTable located at: ' + url,
+            desc: 'Downloading VOTable: ' + url,
            useProxy,
            success: data => {
                try {