Mirror/SponsorBlock
1
0
Fork 0
mirror of https://github.com/ajayyy/SponsorBlock.git synced 2025-12-12 06:27:14 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix help page on mobile

Browse Source
This commit is contained in:
Ajay Ramachandran
2021-10-22 01:29:46 -04:00
parent 628abd03f0
commit 23bebbca7c
2 changed files with 36 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
public/help/index.html
View File

@@ -3,6 +3,7 @@
<head> <head>
<title> SponsorBlock </title> <title> SponsorBlock </title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="styles.css" rel="stylesheet"/> <link href="styles.css" rel="stylesheet"/>
@@ -39,7 +40,7 @@
__MSG_helpPageFeatureDisclaimer__ __MSG_helpPageFeatureDisclaimer__
</p> </p>
<iframe src="../options/options.html#embed" width="100%" height="500px" style="border: none"></iframe> <iframe class="optionsFrame" src="../options/options.html#embed" style="border: none"></iframe>
<h1>__MSG_helpPageHowSkippingWorks__</h1> <h1>__MSG_helpPageHowSkippingWorks__</h1>
@@ -56,14 +57,12 @@
__MSG_helpPageHowSkippingWorks2__ __MSG_helpPageHowSkippingWorks2__
</p> </p>
<div class="center"><img height="120px" src="images/voting on notice.gif"></div> <div class="center"><img src="images/voting on notice.gif"></div>
<h1>__MSG_Submitting__</h1> <h1>__MSG_Submitting__</h1>
<p class="projectPreview"> <p class="projectPreview">
<span class="projectPreviewImageLargeRight"> <img class="projectPreviewImageLarge" src="https://i.imgur.com/A1ilk6x.gif">
<img src="https://i.imgur.com/A1ilk6x.gif">
</span>
__MSG_helpPageSubmitting1__ __MSG_helpPageSubmitting1__

52
public/help/styles.css
View File

@@ -40,14 +40,6 @@ body {
transform: translateY(-20%); transform: translateY(-20%);
} }
.projectPreviewImageLargeRight {
position: absolute;
right: -210px;
width: 200px;
top: 50%;
transform: translateY(-50%);
}
.createdBy { .createdBy {
font-size: 14px; font-size: 14px;
text-align: center; text-align: center;
@@ -142,18 +134,9 @@ p,li,code,a {
overflow-wrap: break-word; overflow-wrap: break-word;
} }
@media screen and (orientation:portrait) { .optionsFrame {
p,li,code,a { width: 100%;
max-width: 100%; height: 500px;
}
.projectPreviewImage {
position: unset;
width: 130px;
display: block;
margin: auto;
transform: none;
}
} }
.previewImage { .previewImage {
@@ -188,3 +171,32 @@ svg {
#sbDonate { #sbDonate {
font-size: 10px; font-size: 10px;
} }
@media screen and (orientation:portrait) {
.projectPreviewImage {
position: unset;
width: 50%;
display: block;
margin: auto;
transform: none;
}
.projectPreviewImageLarge {
position: unset;
left: 0;
width: 50%;
display: block;
margin: auto;
transform: unset;
}
.container {
max-width: 100%;
margin: 5px;
text-align: center;
}
p,li,code,a {
text-align: center;
}
}