feat: ultimate touch and phone support

package.json

@@ -60,6 +60,7 @@
     "es6-object-assign": "1.1.0",
     "get-float-time-domain-data": "0.1.0",
     "get-user-media-promise": "1.1.4",
+    "hammerjs": "2.0.8",
     "immutable": "3.8.2",
     "intl": "1.2.5",
     "intl-messageformat": "^2.2.0",

src/components/action-menu/action-menu.css

@@ -198,3 +198,20 @@ $arrow-rounding: 0.125rem;
     top: $arrow-inset !important;
     transform: rotate(-45deg) !important;
 }
+
+/* Larger add-buttons and their menus on touch screens */
+@media only screen and (pointer: coarse) {
+    .main-button {
+        min-height: 3.25rem;
+        min-width: 3.25rem;
+    }
+
+    .more-button {
+        min-height: 2.75rem;
+        min-width: 2.75rem;
+    }
+
+    .tooltip {
+        font-size: 0.75rem;
+    }
+}

src/components/asset-panel/selector.css

@@ -82,3 +82,15 @@ $fade-out-distance: 100px;
     background: white;
     filter: opacity(15%) brightness(0%);
 }
+
+@media only screen and (pointer: coarse) {
+    .list-item {
+        min-height: 4.5rem;
+        min-width: 4.5rem;
+    }
+
+    .new-buttons > * {
+        min-height: 3.5rem;
+        min-width: 3.5rem;
+    }
+}

src/components/backpack/backpack.css

@@ -99,3 +99,14 @@
     margin: 0.5rem;
     cursor: pointer;
 }
+
+@media only screen and (pointer: coarse) {
+    .backpack-header {
+        min-height: 2.75rem;
+    }
+
+    .backpack-item {
+        min-height: 3.25rem;
+        min-width: 5.5rem;
+    }
+}

src/components/close-button/close-button.css

@@ -79,3 +79,10 @@
     width: 2rem;
     height: 2rem;
 }
+
+@media only screen and (pointer: coarse) {
+    .close-button {
+        min-height: 2.75rem;
+        min-width: 2.75rem;
+    }
+}

src/components/context-menu/context-menu.css

@@ -36,3 +36,14 @@
 .menu-item-danger:hover {
     background: $error-primary;
 }
+
+/* Larger context menu items on touch screens */
+@media only screen and (pointer: coarse) {
+    .menu-item,
+    .menu-item-bordered,
+    .menu-item-danger {
+        min-height: 2.75rem;
+        padding: 0.75rem 1.25rem;
+        font-size: 0.95rem;
+    }
+}

src/components/dash-mobile-settings/dash-mobile-settings.css

@@ -0,0 +1,82 @@
+@import "../../css/colors.css";
+@import "../../css/units.css";
+@import "../../css/z-index.css";
+
+.wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+}
+
+.toggle {
+    padding: 0.25rem 0.5rem;
+    border: 1px solid $ui-black-transparent;
+    border-radius: 0.35rem;
+    background: $ui-primary;
+    font-size: 1.1rem;
+    line-height: 1.25;
+    cursor: pointer;
+    touch-action: manipulation;
+}
+
+.panel {
+    position: absolute;
+    top: calc(100% + 0.4rem);
+    right: 0;
+    z-index: $z-index-menu-bar;
+    display: flex;
+    flex-direction: column;
+    gap: 0.15rem;
+    width: 15rem;
+    padding: 0.5rem;
+    border: 1px solid $ui-black-transparent;
+    border-radius: $space;
+    background: $ui-white;
+    color: $text-primary;
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 0.8125rem;
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
+}
+
+.header {
+    padding: 0.25rem 0.35rem 0.45rem;
+    font-weight: bold;
+    border-bottom: 1px solid $ui-black-transparent;
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.55rem;
+    padding: 0.55rem 0.35rem;
+    border-radius: 0.35rem;
+    cursor: pointer;
+}
+
+.row:hover {
+    background: $ui-tertiary;
+}
+
+.row input {
+    flex: none;
+    width: 1.15rem;
+    height: 1.15rem;
+}
+
+.install-button {
+    margin-top: 0.35rem;
+    padding: 0.65rem 0.75rem;
+    border: 1px solid $looks-secondary;
+    border-radius: 0.45rem;
+    background: $looks-secondary;
+    color: #fff;
+    font-weight: bold;
+    font-size: 0.85rem;
+    cursor: pointer;
+    touch-action: manipulation;
+}
+
+.install-button:hover {
+    filter: brightness(1.08);
+}