feat: support mobile

closes #45
pionxzh · Feb 17, 2023 · d7f7d0a · d7f7d0a
1 parent e3570d2
commit d7f7d0a
Show file tree

Hide file tree

Showing 2 changed files with 96 additions and 6 deletions.
diff --git a/packages/userscript/src/menu.tsx b/packages/userscript/src/menu.tsx
@@ -27,9 +27,12 @@ const MenuItem: FC<MenuItemProps> = ({ children, onClick }) => {
 
 const Dropdown: FC = ({ children }) => {
     return (
-        <div className="dropdown-menu bg-gray-900">
-            {children}
-        </div>
+        <>
+            <div className="dropdown-backdrop"></div>
+            <div className="dropdown-menu bg-gray-900">
+                {children}
+            </div>
+        </>
     )
 }
 
@@ -51,8 +54,8 @@ export function Menu() {
                 Export
             </MenuItem>
             <Dropdown>
-            <fieldset className="inputFieldSet mb-2 rounded-md text-white border-white/20 hover:bg-gray-500/10 duration-200">
-                <legend className="inputLabel px-2 text-xs">File Name: {'{title}, {timestamp}' }</legend>
+                <fieldset className="inputFieldSet mb-2 rounded-md text-white border-white/20 hover:bg-gray-500/10 duration-200">
+                    <legend className="inputLabel px-2 text-xs">File Name: {'{title}, {timestamp}' }</legend>
                     <input
                         className="border-none text-sm w-full"
                         type="text"

diff --git a/packages/userscript/src/style.css b/packages/userscript/src/style.css
@@ -13,6 +13,19 @@
     box-shadow: none!important;
 }
 
+.dropdown-backdrop {
+    display: none;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background-color: rgba(0,0,0,.5);
+    z-index: 998;
+    animation-name: pointerFadeIn;
+    animation-duration: .3s;
+}
+
 .dropdown-menu {
     display: none;
     position: absolute;
@@ -23,6 +36,7 @@
     padding: .75rem .4rem 0 .4rem;
     border-radius: .375rem;
     box-shadow: 0 1px 3px 0 rgba(0,0,0,.1),0 1px 2px -1px rgba(0,0,0,.1);
+    animation: fadeIn .3s;
 }
 
 .dropdown-menu::before {
@@ -44,8 +58,81 @@
     border-top: .5rem solid transparent;
     border-bottom: .5rem solid transparent;
     border-right: .5rem solid #202123;
+    animation: fadeIn .3s;
 }
 
-#exporter-menu:hover .dropdown-menu {
+#exporter-menu:not(:has(.dropdown-backdrop:hover)):hover .dropdown-menu {
     display: flex;
 }
+
+@media screen and (hover: none) and (max-width: 768px) {
+    .dropdown-menu {
+        position: fixed;
+        left: 0;
+        top: unset;
+        bottom: 0;
+        width: 100%;
+        border-radius: 0;
+        box-shadow: none;
+        z-index: 999;
+        animation: slideUp .3s;
+    }
+
+    @supports selector(:has(.test:hover)) {
+        #exporter-menu:not(:has(.dropdown-backdrop:hover)):hover .dropdown-backdrop {
+            display: block;
+        }
+
+        #exporter-menu:has(.dropdown-backdrop:hover):hover .dropdown-backdrop {
+            display: block;
+            pointer-events: none;
+            opacity: 0;
+            animation-name: pointerFadeInReverse;
+        }
+    }
+
+    #exporter-menu:hover::after {
+        display: none;
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes slideUp {
+    from {
+        transform: translateY(100%);
+    }
+    to {
+        transform: translateY(0);
+    }
+}
+
+@keyframes pointerFadeIn {
+    from {
+        opacity: 0;
+        pointer-events: none;
+    }
+    to {
+        opacity: 1;
+        pointer-events: auto;
+    }
+}
+
+/* Using `animation-direction: reverse` is not working in our case */
+@keyframes pointerFadeInReverse {
+    from {
+        opacity: 1;
+        pointer-events: auto;
+    }
+    to {
+        opacity: 0;
+        pointer-events: none;
+    }
+}