fix comment area display (#7716)
This commit is contained in:
parent
35769dede6
commit
d3900e39b6
5 changed files with 16 additions and 34 deletions
|
@ -363,31 +363,6 @@ export function CommentCreate(props: Props) {
|
||||||
.catch(() => {});
|
.catch(() => {});
|
||||||
}, [canReceiveFiatTip, claim.claim_id, claim.name, claim.signing_channel, stickerSelector]);
|
}, [canReceiveFiatTip, claim.claim_id, claim.name, claim.signing_channel, stickerSelector]);
|
||||||
|
|
||||||
// LIVESTREAM ONLY - REMOVE
|
|
||||||
// Handle keyboard shortcut comment creation
|
|
||||||
// React.useEffect(() => {
|
|
||||||
// function altEnterListener(e: SyntheticKeyboardEvent<*>) {
|
|
||||||
// const inputRef = formFieldRef && formFieldRef.current && formFieldRef.current.input;
|
|
||||||
//
|
|
||||||
// if (inputRef && inputRef.current === document.activeElement) {
|
|
||||||
// // $FlowFixMe
|
|
||||||
// const isTyping = e.target.attributes['term'];
|
|
||||||
//
|
|
||||||
// if (((isLivestream && !isTyping) || e.ctrlKey || e.metaKey) && e.keyCode === KEYCODES.ENTER) {
|
|
||||||
// e.preventDefault();
|
|
||||||
// buttonRef.current.click();
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
//
|
|
||||||
// window.addEventListener('keydown', altEnterListener);
|
|
||||||
//
|
|
||||||
// // removes the listener so it doesn't cause problems elsewhere in the app
|
|
||||||
// return () => {
|
|
||||||
// window.removeEventListener('keydown', altEnterListener);
|
|
||||||
// };
|
|
||||||
// }, [isLivestream]);
|
|
||||||
|
|
||||||
// **************************************************************************
|
// **************************************************************************
|
||||||
// Render
|
// Render
|
||||||
// **************************************************************************
|
// **************************************************************************
|
||||||
|
|
|
@ -366,9 +366,9 @@ const CommentActionButtons = (actionButtonsProps: ActionButtonsProps) => {
|
||||||
const sortButtonProps = { activeSort: sort, changeSort };
|
const sortButtonProps = { activeSort: sort, changeSort };
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<div className={'comment__actions-row'}>
|
||||||
{totalComments > 1 && ENABLE_COMMENT_REACTIONS && (
|
{totalComments > 1 && ENABLE_COMMENT_REACTIONS && (
|
||||||
<span className="comment__sort">
|
<div className="comment__sort-group">
|
||||||
<SortButton {...sortButtonProps} label={__('Best')} icon={ICONS.BEST} sortOption={SORT_BY.POPULARITY} />
|
<SortButton {...sortButtonProps} label={__('Best')} icon={ICONS.BEST} sortOption={SORT_BY.POPULARITY} />
|
||||||
<SortButton
|
<SortButton
|
||||||
{...sortButtonProps}
|
{...sortButtonProps}
|
||||||
|
@ -377,11 +377,9 @@ const CommentActionButtons = (actionButtonsProps: ActionButtonsProps) => {
|
||||||
sortOption={SORT_BY.CONTROVERSY}
|
sortOption={SORT_BY.CONTROVERSY}
|
||||||
/>
|
/>
|
||||||
<SortButton {...sortButtonProps} label={__('New')} icon={ICONS.NEW} sortOption={SORT_BY.NEWEST} />
|
<SortButton {...sortButtonProps} label={__('New')} icon={ICONS.NEW} sortOption={SORT_BY.NEWEST} />
|
||||||
</span>
|
</div>
|
||||||
)}
|
)}
|
||||||
<div className="button_refresh">
|
|
||||||
<Button button="alt" icon={ICONS.REFRESH} title={__('Refresh')} onClick={() => setPage(0)} />
|
|
||||||
</div>
|
|
||||||
{allServers.length >= 2 && (
|
{allServers.length >= 2 && (
|
||||||
<div className="button__selected-server">
|
<div className="button__selected-server">
|
||||||
<FormField
|
<FormField
|
||||||
|
@ -408,7 +406,10 @@ const CommentActionButtons = (actionButtonsProps: ActionButtonsProps) => {
|
||||||
</FormField>
|
</FormField>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</>
|
<div className="button_refresh">
|
||||||
|
<Button button="alt" icon={ICONS.REFRESH} title={__('Refresh')} onClick={() => setPage(0)} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -13,7 +13,7 @@ const select = (state, props) => {
|
||||||
if (claimUriBeingPlayed) {
|
if (claimUriBeingPlayed) {
|
||||||
const claim = makeSelectClaimForUri(props.uri)(state);
|
const claim = makeSelectClaimForUri(props.uri)(state);
|
||||||
const claimBeingPlayed = makeSelectClaimForUri(claimUriBeingPlayed)(state);
|
const claimBeingPlayed = makeSelectClaimForUri(claimUriBeingPlayed)(state);
|
||||||
isBeingPlayed = claim.claim_id === claimBeingPlayed.claim_id;
|
isBeingPlayed = claim && claim.claim_id === claimBeingPlayed.claim_id;
|
||||||
}
|
}
|
||||||
|
|
||||||
return {
|
return {
|
||||||
|
|
|
@ -615,7 +615,7 @@
|
||||||
|
|
||||||
@media (max-width: $breakpoint-small) {
|
@media (max-width: $breakpoint-small) {
|
||||||
font-size: var(--font-small);
|
font-size: var(--font-small);
|
||||||
|
border-bottom: none;
|
||||||
.button--link {
|
.button--link {
|
||||||
font-size: var(--font-xsmall);
|
font-size: var(--font-xsmall);
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
|
|
|
@ -45,6 +45,12 @@ $thumbnailWidthSmall: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.comment__actions-row {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
.comment {
|
.comment {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
Loading…
Reference in a new issue