Re-arranged story viewer components to render meta above arrow-buttons

This commit is contained in:
Alvaro 2022-09-26 18:49:18 -06:00 committed by GitHub
parent 5baf3a7feb
commit cfe66a2c0b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 24 additions and 21 deletions

View File

@ -550,6 +550,30 @@ export const StoryViewer = ({
/>
)}
</div>
<div className="StoryViewer__protection StoryViewer__protection--bottom" />
{canNavigateRight && (
<button
aria-label={i18n('forward')}
className={classNames(
'StoryViewer__arrow StoryViewer__arrow--right',
{
'StoryViewer__arrow--visible': arrowToShow === Arrow.Right,
}
)}
onClick={() =>
viewStory({
storyId: story.messageId,
storyViewMode,
viewDirection: StoryViewDirectionType.Next,
})
}
onMouseMove={() => setArrowToShow(Arrow.Right)}
type="button"
/>
)}
<div className="StoryViewer__meta">
{caption && (
<div className="StoryViewer__caption">
@ -740,27 +764,6 @@ export const StoryViewer = ({
)}
</div>
</div>
{canNavigateRight && (
<button
aria-label={i18n('forward')}
className={classNames(
'StoryViewer__arrow StoryViewer__arrow--right',
{
'StoryViewer__arrow--visible': arrowToShow === Arrow.Right,
}
)}
onClick={() =>
viewStory({
storyId: story.messageId,
storyViewMode,
viewDirection: StoryViewDirectionType.Next,
})
}
onMouseMove={() => setArrowToShow(Arrow.Right)}
type="button"
/>
)}
<div className="StoryViewer__protection StoryViewer__protection--bottom" />
<button
aria-label={i18n('close')}
className="StoryViewer__close-button"