Fix centering on submission notice

This commit is contained in:
Ajay Ramachandran
2021-09-02 11:44:25 -04:00
parent ccd8342ddb
commit 02360c1f3c
3 changed files with 10 additions and 4 deletions

View File

@@ -154,11 +154,13 @@
} }
.sponsorSkipNotice { .sponsorSkipNotice {
min-width: calc(100% - 50px);
transition: all 0.1s ease-out; transition: all 0.1s ease-out;
} }
.sponsorSkipNoticeLimitWidth {
min-width: calc(100% - 50px);
}
.sponsorSkipNotice .hidden { .sponsorSkipNotice .hidden {
display: none; display: none;
} }

View File

@@ -25,6 +25,7 @@ export interface NoticeProps {
bottomRow?: React.ReactElement[], bottomRow?: React.ReactElement[],
smaller?: boolean, smaller?: boolean,
limitWidth?: boolean,
// Callback for when this is closed // Callback for when this is closed
closeListener: () => void, closeListener: () => void,
@@ -105,11 +106,13 @@ class NoticeComponent extends React.Component<NoticeProps, NoticeState> {
<div className={"sponsorSkipNoticeTableContainer" <div className={"sponsorSkipNoticeTableContainer"
+ (this.props.fadeIn ? " sponsorSkipNoticeFadeIn" : "") + (this.props.fadeIn ? " sponsorSkipNoticeFadeIn" : "")
+ (this.state.startFaded ? " sponsorSkipNoticeFaded" : "") }> + (this.state.startFaded ? " sponsorSkipNoticeFaded" : "") }>
<table className="sponsorSkipObject sponsorSkipNotice"> <table className={"sponsorSkipObject sponsorSkipNotice"
+ (this.props.limitWidth ? " sponsorSkipNoticeLimitWidth" : "")}>
<tbody> <tbody>
{/* First row */} {/* First row */}
<tr id={"sponsorSkipNoticeFirstRow" + this.idSuffix}> <tr id={"sponsorSkipNoticeFirstRow" + this.idSuffix}
className="sponsorSkipNoticeFirstRow">
{/* Left column */} {/* Left column */}
<td className="noticeLeftIcon"> <td className="noticeLeftIcon">
{/* Logo */} {/* Logo */}

View File

@@ -165,6 +165,7 @@ class SkipNoticeComponent extends React.Component<SkipNoticeProps, SkipNoticeSta
ref={this.noticeRef} ref={this.noticeRef}
closeListener={() => this.closeListener()} closeListener={() => this.closeListener()}
smaller={this.state.smaller} smaller={this.state.smaller}
limitWidth={true}
firstColumn={firstColumn} firstColumn={firstColumn}
bottomRow={[...this.getMessageBoxes(), ...this.getBottomRow() ]} bottomRow={[...this.getMessageBoxes(), ...this.getBottomRow() ]}
onMouseEnter={() => this.onMouseEnter() } > onMouseEnter={() => this.onMouseEnter() } >