external/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2024-11-10 01:01:55 +01:00
Code Issues Projects Releases Packages Wiki Activity

Make options page work on mobile

Browse source
This commit is contained in:
Ajay Ramachandran 2021-06-09 16:53:32 -04:00
parent 315901f69b
commit 6a02d62ccd
5 changed files with 19 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -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). 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. 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 <ip-address of the 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 <ip-address of the device>`. See the [Firefox documentation](https://extensionworkshop.com/documentation/develop/developing-extensions-for-firefox-for-android/#debug-your-extension) for more information.
### Attribution Generation ### Attribution Generation

18
public/options/options.css
View file

@ -268,23 +268,13 @@ p,li {
padding: 10px; padding: 10px;
} }
p,li,code,a {
max-width: 60%;
text-align: left;
overflow-wrap: break-word;
}
@media screen and (orientation:portrait) { @media screen and (orientation:portrait) {
p,li,code,a { #options {
max-width: 100%; max-width: 100%;
} }
.projectPreviewImage { .previewColorOption {
position: unset; display: none;
width: 130px;
display: block;
margin: auto;
transform: none;
} }
} }

3
public/options/options.html
View file

@ -3,7 +3,8 @@
<head> <head>
<title>Options - SponsorBlock</title> <title>Options - SponsorBlock</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="options.css" rel="stylesheet"/> <link href="options.css" rel="stylesheet"/>
<script src="../js/vendor.js"></script> <script src="../js/vendor.js"></script>

9
src/components/CategoryChooserComponent.tsx
View file

@ -34,15 +34,18 @@ class CategoryChooserComponent extends React.Component<CategoryChooserProps, Cat
{chrome.i18n.getMessage("category")} {chrome.i18n.getMessage("category")}
</td> </td>
<td id={"CategorySkipOption"}> <td id={"CategorySkipOption"}
className="skipOption">
{chrome.i18n.getMessage("skipOption")} {chrome.i18n.getMessage("skipOption")}
</td> </td>
<td id={"CategoryColorOption"}> <td id={"CategoryColorOption"}
className="colorOption">
{chrome.i18n.getMessage("seekBarColor")} {chrome.i18n.getMessage("seekBarColor")}
</td> </td>
<td id={"CategoryPreviewColorOption"}> <td id={"CategoryPreviewColorOption"}
className="previewColorOption">
{chrome.i18n.getMessage("previewColor")} {chrome.i18n.getMessage("previewColor")}
</td> </td>
</tr> </tr>

9
src/components/CategorySkipOptionsComponent.tsx
View file

@ -56,7 +56,8 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
{chrome.i18n.getMessage("category_" + this.props.category)} {chrome.i18n.getMessage("category_" + this.props.category)}
</td> </td>
<td id={this.props.category + "SkipOption"}> <td id={this.props.category + "SkipOption"}
className="skipOption">
<select <select
className="categoryOptionsSelector" className="categoryOptionsSelector"
defaultValue={defaultOption} defaultValue={defaultOption}
@ -65,7 +66,8 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
</select> </select>
</td> </td>
<td id={this.props.category + "ColorOption"}> <td id={this.props.category + "ColorOption"}
className="colorOption">
<input <input
className="categoryColorTextBox option-text-box" className="categoryColorTextBox option-text-box"
type="color" type="color"
@ -73,7 +75,8 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
value={this.state.color} /> value={this.state.color} />
</td> </td>
<td id={this.props.category + "PreviewColorOption"}> <td id={this.props.category + "PreviewColorOption"}
className="previewColorOption">
<input <input
className="categoryColorTextBox option-text-box" className="categoryColorTextBox option-text-box"
type="color" type="color"