Fix mobile action-popup (#886)

* Fix mobile action popup

* Fix toggle-handle

* Prevent action-popup looking wacky if it somehow gets rendered as a popup (desktop) instead of a full page (mobile)

* Replace chevron icons with action specific icons

3 files changed, 58 insertions, 24 deletions

diff --git a/ext/action-popup.html b/ext/action-popup.html
index d86fe2ac..bc5bdcb4 100644
--- a/ext/action-popup.html
+++ b/ext/action-popup.html
@@ -18,7 +18,7 @@
 
 <div id="mini">
     <label class="toggle">
-        <input type="checkbox" id="enable-search">
+        <input type="checkbox" class="enable-search">
         <div class="toggle-group">
             <span class="toggle-on">On</span>
             <span class="toggle-off">Off</span>
@@ -57,28 +57,33 @@
 
 <div id="full">
     <h3 id="extension-info">Yomitan</h3>
-    <label class="link-group">
-        <span class="link-group-icon"><input type="checkbox" id="enable-search2"></span><span class="link-group-label">Enable content scanning</span>
+    <label class="toggle">
+        <input type="checkbox" class="enable-search">
+        <div class="toggle-group">
+            <span class="toggle-on">On</span>
+            <span class="toggle-off">Off</span>
+            <span class="toggle-handle"></span>
+        </div>
     </label>
     <a tabindex="0" class="link-group action-open-settings">
-        <span class="link-group-icon" data-icon="chevron"></span>
+        <span class="link-group-icon" data-icon="cog"></span>
         <span class="link-group-label">Settings</span>
         <span class="link-group-badge">
             <div class="flex-margin-left warning-badge no-dictionaries-enabled-warning" hidden><span class="icon" data-icon="exclamation-point-short"></span></div>
         </span>
     </a>
     <a tabindex="0" class="link-group action-open-permissions" hidden>
-        <span class="link-group-icon" data-icon="chevron"></span>
+        <span class="link-group-icon" data-icon="key"></span>
         <span class="link-group-label">Permissions</span>
         <span class="link-group-badge">
             <div class="flex-margin-left warning-badge permissions-required-warning" hidden><span class="icon" data-icon="exclamation-point-short"></span></div>
         </span>
     </a>
     <a tabindex="0" class="link-group action-open-search">
-        <span class="link-group-icon" data-icon="chevron"></span><span class="link-group-label">Search</span>
+        <span class="link-group-icon" data-icon="magnifying-glass"></span><span class="link-group-label">Search</span>
     </a>
     <a tabindex="0" class="link-group action-open-info">
-        <span class="link-group-icon" data-icon="chevron"></span><span class="link-group-label">Information</span>
+        <span class="link-group-icon" data-icon="question-mark-circle"></span><span class="link-group-label">Information</span>
     </a>
 </div>
 
diff --git a/ext/css/action-popup.css b/ext/css/action-popup.css
index b3f7d5df..8abb23ef 100644
--- a/ext/css/action-popup.css
+++ b/ext/css/action-popup.css
@@ -35,6 +35,7 @@ body {
     font-family: 'Segoe UI', Tahoma, sans-serif;
     font-size: var(--font-size);
     width: max-content;
+    height: max-content;
 }
 
 h3 {
@@ -122,27 +123,25 @@ label {
     background-color: rgba(0, 0, 0, 0.1);
 }
 .link-group-icon {
-    width: 16px;
-    height: 16px;
+    width: 26px;
+    height: 26px;
     text-align: center;
     vertical-align: middle;
     display: inline-block;
     margin-right: 0.25em;
+    background-repeat: no-repeat;
+    background-size: contain;
 }
 .link-group-icon>input {
     margin: 0;
     padding: 0;
 }
-.link-group-icon[data-icon=chevron]::after {
-    content: '';
-    display: block;
-    width: 100%;
-    height: 100%;
-    background-image: url(/images/right-chevron.svg);
-    background-repeat: no-repeat;
-    background-position: center center;
-    background-size: contain;
-}
+.link-group-icon[data-icon=chevron] { background-image: url(/images/right-chevron.svg); }
+.link-group-icon[data-icon=cog] { background-image: url(/images/cog.svg); }
+.link-group-icon[data-icon=key] { background-image: url(/images/key.svg); }
+.link-group-icon[data-icon=magnifying-glass] { background-image: url(/images/magnifying-glass.svg); }
+.link-group-icon[data-icon=question-mark-circle] { background-image: url(/images/question-mark-circle.svg); }
+
 .link-group-label {
     vertical-align: middle;
 }
@@ -165,14 +164,13 @@ label {
 }
 .toggle {
     box-sizing: border-box;
-    width: 60px;
-    height: 34px;
+    width: 100%;
+    padding-top: 37.7%;
     position: relative;
     overflow: hidden;
     border: 1px solid #245580;
     border-radius: 4px;
     display: inline-block;
-    padding: 6px 12px;
 }
 .toggle-group {
     position: absolute;
@@ -189,7 +187,9 @@ body[data-loaded=true] .toggle-group {
 .toggle-on,
 .toggle-off,
 .toggle-handle {
-    display: block;
+    display: flex;
+    justify-content: center;
+    align-items: center;
     padding: 6px 12px;
     font-size: var(--font-size);
     font-weight: normal;
@@ -464,3 +464,32 @@ select.profile-select {
     bottom: 0;
     background-color: var(--warning-color);
 }
+
+/* Mobile overrides */
+
+/* Treat devices that can't hover as mobile devices */
+@media (hover: none) {
+    #full {
+        display: initial;
+    }
+    #mini {
+        display: none;
+    }
+    body {
+        min-width: 95%;
+        width: max-content;
+        font-size: calc(var(--font-size) * 2);
+        text-align: center;
+    }
+    h3 {
+        font-size: calc(var(--font-size) * 3.4);
+    }
+    .toggle-on, .toggle-off {
+        font-size: calc(var(--font-size) * 4);
+    }
+    .toggle-handle {
+        padding-left: 65px;
+        padding-right: 65px;
+        border-radius: 10px;
+    }
+}
diff --git a/ext/js/pages/action-popup-main.js b/ext/js/pages/action-popup-main.js
index 8dca8934..4125b2d1 100644
--- a/ext/js/pages/action-popup-main.js
+++ b/ext/js/pages/action-popup-main.js
@@ -187,7 +187,7 @@ class DisplayController {
     _setupOptions({options}) {
         const extensionEnabled = options.general.enable;
         const onToggleChanged = () => this._api.commandExec('toggleTextScanning');
-        for (const toggle of /** @type {NodeListOf<HTMLInputElement>} */ (document.querySelectorAll('#enable-search,#enable-search2'))) {
+        for (const toggle of /** @type {NodeListOf<HTMLInputElement>} */ (document.querySelectorAll('.enable-search,.enable-search2'))) {
             toggle.checked = extensionEnabled;
             toggle.addEventListener('change', onToggleChanged, false);
         }