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

Fix UI issues when text is long

Browse source 
Fixes #914
This commit is contained in:
Ajay Ramachandran 2021-09-02 00:05:13 -04:00
parent 3774ef9756
commit 0fc9e9b2fb
3 changed files with 61 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
public/content.css
View file

@ -140,7 +140,6 @@
min-width: 350px;
max-width: 50%;
border-radius: 5px;
border-spacing: 5px 10px;
padding-left: 5px;
padding-right: 5px;
@ -148,9 +147,14 @@
border-collapse: unset;
}
.sponsorSkipNotice {
min-width: 350px;
.sponsorSkipNoticeTableContainer {
background-color: rgba(28, 28, 28, 0.9);
border-radius: 5px;
min-width: 100%;
}
.sponsorSkipNotice {
min-width: calc(100% - 50px);
transition: all 0.1s ease-out;
}
@ -311,7 +315,6 @@
.sponsorTimesInfoMessage {
font-size: 13.3333px;
color: rgb(235, 235, 235);
text-align: center;
}
.voteButton {

104
src/components/NoticeComponent.tsx
View file

@ -102,65 +102,67 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
onMouseEnter={(e) => this.onMouseEnter(e) }
onMouseLeave={() => this.timerMouseLeave()}
style={noticeStyle} >
<table className={"sponsorSkipObject sponsorSkipNotice"
<div className={"sponsorSkipNoticeTableContainer"
+ (this.props.fadeIn ? " sponsorSkipNoticeFadeIn" : "")
+ (this.state.startFaded ? " sponsorSkipNoticeFaded" : "") } >
<tbody>
+ (this.state.startFaded ? " sponsorSkipNoticeFaded" : "") }>
<table className="sponsorSkipObject sponsorSkipNotice">
<tbody>
{/* First row */}
<tr id={"sponsorSkipNoticeFirstRow" + this.idSuffix}>
{/* Left column */}
<td className="noticeLeftIcon">
{/* Logo */}
<img id={"sponsorSkipLogo" + this.idSuffix}
className="sponsorSkipLogo sponsorSkipObject"
src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
</img>
<span id={"sponsorSkipMessage" + this.idSuffix}
style={{float: "left"}}
className="sponsorSkipMessage sponsorSkipObject">
{this.state.noticeTitle}
</span>
{this.props.firstColumn}
</td>
{this.props.firstRow}
{/* Right column */}
<td className="sponsorSkipNoticeRightSection"
style={{top: "9.32px"}}>
{/* Time left */}
{this.props.timed ? (
<span id={"sponsorSkipNoticeTimeLeft" + this.idSuffix}
onClick={() => this.toggleManualPause()}
className="sponsorSkipObject sponsorSkipNoticeTimeLeft">
{this.getCountdownElements()}
{/* First row */}
<tr id={"sponsorSkipNoticeFirstRow" + this.idSuffix}>
{/* Left column */}
<td className="noticeLeftIcon">
{/* Logo */}
<img id={"sponsorSkipLogo" + this.idSuffix}
className="sponsorSkipLogo sponsorSkipObject"
src={chrome.extension.getURL("icons/IconSponsorBlocker256px.png")}>
</img>
<span id={"sponsorSkipMessage" + this.idSuffix}
style={{float: "left"}}
className="sponsorSkipMessage sponsorSkipObject">
{this.state.noticeTitle}
</span>
) : ""}
{/* Close button */}
<img src={chrome.extension.getURL("icons/close.png")}
className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeCloseButton sponsorSkipNoticeRightButton"
onClick={() => this.close()}>
</img>
</td>
</tr>
{this.props.firstColumn}
</td>
{this.props.children}
{this.props.firstRow}
{!this.props.smaller && this.props.bottomRow ?
this.props.bottomRow
: null}
{/* Right column */}
<td className="sponsorSkipNoticeRightSection"
style={{top: "9.32px"}}>
{/* Time left */}
{this.props.timed ? (
<span id={"sponsorSkipNoticeTimeLeft" + this.idSuffix}
onClick={() => this.toggleManualPause()}
className="sponsorSkipObject sponsorSkipNoticeTimeLeft">
</tbody>
</table>
{this.getCountdownElements()}
</span>
) : ""}
{/* Close button */}
<img src={chrome.extension.getURL("icons/close.png")}
className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeCloseButton sponsorSkipNoticeRightButton"
onClick={() => this.close()}>
</img>
</td>
</tr>
{this.props.children}
{!this.props.smaller && this.props.bottomRow ?
this.props.bottomRow
: null}
</tbody>
</table>
</div>
{/* Add as a hidden table to keep the height constant */}
{this.props.smaller && this.props.bottomRow ?

2
src/components/SkipNoticeComponent.tsx
View file

@ -82,7 +82,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
this.audio = null;
const noticeTitle = getSkippingText(this.segments, this.props.autoSkip);
const previousSkipNotices = document.getElementsByClassName("sponsorSkipNoticeParent");
this.amountOfPreviousNotices = previousSkipNotices.length;
// If there is at least one already in the first slot