diff options
Diffstat (limited to 'FrontEnd/src')
4 files changed, 17 insertions, 12 deletions
diff --git a/FrontEnd/src/app/views/timeline-common/Timeline.tsx b/FrontEnd/src/app/views/timeline-common/Timeline.tsx index 6bd1b96d..9047919c 100644 --- a/FrontEnd/src/app/views/timeline-common/Timeline.tsx +++ b/FrontEnd/src/app/views/timeline-common/Timeline.tsx @@ -14,6 +14,7 @@ export type TimelineDeleteCallback = (index: number, id: number) => void; export interface TimelineProps { className?: string; + style?: React.CSSProperties; posts: TimelinePostInfoEx[]; onDelete: TimelineDeleteCallback; onResize?: () => void; @@ -52,7 +53,11 @@ const Timeline: React.FC<TimelineProps> = (props) => { }, [posts, onDelete]); return ( - <div ref={props.containerRef} className={clsx("timeline", props.className)}> + <div + ref={props.containerRef} + style={props.style} + className={clsx("timeline", props.className)} + > <TimelineTop height="56px" /> {(() => { const length = posts.length; diff --git a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx index 35c1a65d..036577b1 100644 --- a/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx +++ b/FrontEnd/src/app/views/timeline-common/TimelinePageTemplateUI.tsx @@ -47,13 +47,10 @@ export default function TimelinePageTemplateUI<TManageItems>( const { t } = useTranslation(); - const bottomSpaceRef = React.useRef<HTMLDivElement | null>(null); + const [bottomSpaceHeight, setBottomSpaceHeight] = React.useState<number>(0); const onPostEditHeightChange = React.useCallback((height: number): void => { - const { current: bottomSpaceDiv } = bottomSpaceRef; - if (bottomSpaceDiv != null) { - bottomSpaceDiv.style.height = `${height}px`; - } + setBottomSpaceHeight(height); if (height === 0) { const alertHost = getAlertHost(); if (alertHost != null) { @@ -177,6 +174,9 @@ export default function TimelinePageTemplateUI<TManageItems>( timelineBody = ( <Timeline + style={{ + minHeight: `calc(100vh - 56px - ${bottomSpaceHeight}px)`, + }} containerRef={timelineRef} posts={posts} onDelete={props.onDelete} @@ -187,7 +187,10 @@ export default function TimelinePageTemplateUI<TManageItems>( timelineBody = ( <> {timelineBody} - <div ref={bottomSpaceRef} className="flex-fix-length" /> + <div + style={{ height: bottomSpaceHeight }} + className="flex-fix-length" + /> <TimelinePostEdit className="fixed-bottom" onPost={props.onPost} diff --git a/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx b/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx index abc3d0c9..1070c6d7 100644 --- a/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx +++ b/FrontEnd/src/app/views/timeline/TimelineInfoCard.tsx @@ -36,7 +36,7 @@ const TimelineInfoCard: React.FC<TimelineInfoCardProps> = (props) => { collapse={collapse} toggleCollapse={toggleCollapse} > - <h3 className="text-primary mx-3 d-inline-block align-middle"> + <h3 className="text-primary d-inline-block align-middle"> {timeline.title} <small className="ml-3 text-secondary">{timeline.name}</small> </h3> diff --git a/FrontEnd/src/app/views/user/UserInfoCard.tsx b/FrontEnd/src/app/views/user/UserInfoCard.tsx index e4edd80d..4a0c9e87 100644 --- a/FrontEnd/src/app/views/user/UserInfoCard.tsx +++ b/FrontEnd/src/app/views/user/UserInfoCard.tsx @@ -35,16 +35,13 @@ const UserInfoCard: React.FC<UserInfoCardProps> = (props) => { collapse={collapse} toggleCollapse={toggleCollapse} > - <h3 className="text-primary mx-3 d-inline-block align-middle"> + <h3 className="text-primary d-inline-block align-middle"> {timeline.title} <small className="ml-3 text-secondary">{timeline.name}</small> </h3> <div className="align-middle"> <BlobImage blob={avatar} className="avatar small rounded-circle mr-3" /> {timeline.owner.nickname} - <small className="ml-3 text-secondary"> - @{timeline.owner.username} - </small> </div> <p className="mb-0">{timeline.description}</p> <small className="mt-1 d-block"> |