From 6a02d62ccd8f0f15f098f9467e731e42de793dcf Mon Sep 17 00:00:00 2001 From: Ajay Ramachandran Date: Wed, 9 Jun 2021 16:53:32 -0400 Subject: [PATCH] Make options page work on mobile --- README.md | 2 +- public/options/options.css | 18 ++++-------------- public/options/options.html | 3 ++- src/components/CategoryChooserComponent.tsx | 9 ++++++--- .../CategorySkipOptionsComponent.tsx | 9 ++++++--- 5 files changed, 19 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index 48398c67..7260d31f 100644 --- a/README.md +++ b/README.md @@ -75,7 +75,7 @@ The result is in `dist`. This can be loaded as an unpacked extension Run `npm run dev` to run the extension using a clean browser profile with hot reloading. Use `npm run dev:firefox` for Firefox. This uses [`web-ext run`](https://extensionworkshop.com/documentation/develop/web-ext-command-reference/#commands). Known chromium bug: Extension is not loaded properly on first start. Visit `chrome://extensions/` and reload the extension. -For Firefox for Android, use `npm run dev:firefox-android --adb-device `. See the [Firefox documentation](https://extensionworkshop.com/documentation/develop/developing-extensions-for-firefox-for-android/#debug-your-extension) for more information. +For Firefox for Android, use `npm run dev:firefox-android -- --adb-device `. See the [Firefox documentation](https://extensionworkshop.com/documentation/develop/developing-extensions-for-firefox-for-android/#debug-your-extension) for more information. ### Attribution Generation diff --git a/public/options/options.css b/public/options/options.css index 971c6893..27cb1174 100644 --- a/public/options/options.css +++ b/public/options/options.css @@ -268,23 +268,13 @@ p,li { padding: 10px; } -p,li,code,a { - max-width: 60%; - text-align: left; - overflow-wrap: break-word; -} - @media screen and (orientation:portrait) { - p,li,code,a { + #options { max-width: 100%; } - - .projectPreviewImage { - position: unset; - width: 130px; - display: block; - margin: auto; - transform: none; + + .previewColorOption { + display: none; } } diff --git a/public/options/options.html b/public/options/options.html index 9daef3b3..5feb6ba9 100644 --- a/public/options/options.html +++ b/public/options/options.html @@ -3,7 +3,8 @@ Options - SponsorBlock - + + diff --git a/src/components/CategoryChooserComponent.tsx b/src/components/CategoryChooserComponent.tsx index bb86e10f..91a395a0 100644 --- a/src/components/CategoryChooserComponent.tsx +++ b/src/components/CategoryChooserComponent.tsx @@ -34,15 +34,18 @@ class CategoryChooserComponent extends React.Component - + {chrome.i18n.getMessage("skipOption")} - + {chrome.i18n.getMessage("seekBarColor")} - + {chrome.i18n.getMessage("previewColor")} diff --git a/src/components/CategorySkipOptionsComponent.tsx b/src/components/CategorySkipOptionsComponent.tsx index a59e3f54..cc68cd5a 100644 --- a/src/components/CategorySkipOptionsComponent.tsx +++ b/src/components/CategorySkipOptionsComponent.tsx @@ -56,7 +56,8 @@ class CategorySkipOptionsComponent extends React.Component - + - +