diff options
| author | Ajay Ramachandran <[email protected]> | 2021-09-02 00:05:13 -0400 |
|---|---|---|
| committer | Ajay Ramachandran <[email protected]> | 2021-09-02 00:05:13 -0400 |
| commit | 0fc9e9b2fba632d5b6e1edd5bd9e284ef58a1ad5 (patch) | |
| tree | 75b8d4a6f0146a112212197eac70f5493b03e6d9 /src/components/NoticeComponent.tsx | |
| parent | 3774ef975659ccc4ee90adf7af3291646fc8c5ba (diff) | |
| download | SponsorBlock-0fc9e9b2fba632d5b6e1edd5bd9e284ef58a1ad5.tar.gz SponsorBlock-0fc9e9b2fba632d5b6e1edd5bd9e284ef58a1ad5.zip | |
Fix UI issues when text is long
Fixes #914
Diffstat (limited to 'src/components/NoticeComponent.tsx')
| -rw-r--r-- | src/components/NoticeComponent.tsx | 100 |
1 files changed, 51 insertions, 49 deletions
diff --git a/src/components/NoticeComponent.tsx b/src/components/NoticeComponent.tsx index 4c088258..68c01d05 100644 --- a/src/components/NoticeComponent.tsx +++ b/src/components/NoticeComponent.tsx @@ -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> - - {/* 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.state.startFaded ? " sponsorSkipNoticeFaded" : "") }> + <table className="sponsorSkipObject sponsorSkipNotice"> + <tbody> - {this.props.firstColumn} - </td> + {/* 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.firstRow} + {this.props.firstColumn} + </td> - {/* 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.props.firstRow} - {this.getCountdownElements()} + {/* 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"> - </span> - ) : ""} - + {this.getCountdownElements()} + + </span> + ) : ""} + - {/* Close button */} - <img src={chrome.extension.getURL("icons/close.png")} - className="sponsorSkipObject sponsorSkipNoticeButton sponsorSkipNoticeCloseButton sponsorSkipNoticeRightButton" - onClick={() => this.close()}> - </img> - </td> - </tr> + {/* 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.children} - {!this.props.smaller && this.props.bottomRow ? - this.props.bottomRow - : null} + {!this.props.smaller && this.props.bottomRow ? + this.props.bottomRow + : null} - </tbody> - </table> + </tbody> + </table> + </div> {/* Add as a hidden table to keep the height constant */} {this.props.smaller && this.props.bottomRow ? |