fix comment area display (#7716)

This commit is contained in:
jessopb 2022-11-04 10:44:36 -04:00 committed by GitHub
parent 35769dede6
commit d3900e39b6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 16 additions and 34 deletions

View file

@ -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
// ************************************************************************** // **************************************************************************

View file

@ -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>
); );
}; };

View file

@ -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 {

View file

@ -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;

View file

@ -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;