external/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2024-09-19 20:51:28 +02: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).
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

18
public/options/options.css
View file

@ -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;
}
}

3
public/options/options.html
View file

@ -3,7 +3,8 @@
<head>
<title>Options - SponsorBlock</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="options.css" rel="stylesheet"/>
<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")}
</td>
<td id={"CategorySkipOption"}>
<td id={"CategorySkipOption"}
className="skipOption">
{chrome.i18n.getMessage("skipOption")}
</td>
<td id={"CategoryColorOption"}>
<td id={"CategoryColorOption"}
className="colorOption">
{chrome.i18n.getMessage("seekBarColor")}
</td>
<td id={"CategoryPreviewColorOption"}>
<td id={"CategoryPreviewColorOption"}
className="previewColorOption">
{chrome.i18n.getMessage("previewColor")}
</td>
</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)}
</td>
<td id={this.props.category + "SkipOption"}>
<td id={this.props.category + "SkipOption"}
className="skipOption">
<select
className="categoryOptionsSelector"
defaultValue={defaultOption}
@ -65,7 +66,8 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
</select>
</td>
<td id={this.props.category + "ColorOption"}>
<td id={this.props.category + "ColorOption"}
className="colorOption">
<input
className="categoryColorTextBox option-text-box"
type="color"
@ -73,7 +75,8 @@ class CategorySkipOptionsComponent extends React.Component<CategorySkipOptionsPr
value={this.state.color} />
</td>
<td id={this.props.category + "PreviewColorOption"}>
<td id={this.props.category + "PreviewColorOption"}
className="previewColorOption">
<input
className="categoryColorTextBox option-text-box"
type="color"