mirrors/phanpy
1
0
Fork 0
mirror of https://github.com/cheeaun/phanpy.git synced 2025-03-27 03:39:19 +03:00
Code Issues Projects Releases Packages Wiki Activity

Test full width for first load of status page

Browse source
This commit is contained in:
Lim Chee Aun 2023-10-25 17:07:00 +08:00
parent b9afe4fb66
commit 3a32cbf974
1 changed files with 26 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
src/pages/status.jsx
View file

@ -168,7 +168,10 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
const [searchParams, setSearchParams] = useSearchParams(); const [searchParams, setSearchParams] = useSearchParams();
const mediaParam = searchParams.get('media'); const mediaParam = searchParams.get('media');
const showMedia = parseInt(mediaParam, 10) > 0; const showMedia = parseInt(mediaParam, 10) > 0;
const [viewMode, setViewMode] = useState(searchParams.get('view')); const firstLoad = useRef(!states.prevLocation);
const [viewMode, setViewMode] = useState(
searchParams.get('view') || firstLoad.current ? 'full' : null,
);
const translate = !!parseInt(searchParams.get('translate')); const translate = !!parseInt(searchParams.get('translate'));
const { masto, instance } = api({ instance: propInstance }); const { masto, instance } = api({ instance: propInstance });
const { const {
@ -839,9 +842,11 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
ref={scrollableRef} ref={scrollableRef}
class={`status-deck deck contained ${ class={`status-deck deck contained ${
statuses.length > 1 ? 'padded-bottom' : '' statuses.length > 1 ? 'padded-bottom' : ''
} ${initialPageState.current === 'status' ? 'slide-in' : ''} ${ } ${
viewMode ? `deck-view-${viewMode}` : '' initialPageState.current === 'status' && !firstLoad.current
}`} ? 'slide-in'
: ''
} ${viewMode ? `deck-view-${viewMode}` : ''}`}
onAnimationEnd={(e) => { onAnimationEnd={(e) => {
// Fix the bounce effect when switching viewMode // Fix the bounce effect when switching viewMode
// `slide-in` animation kicks in when switching viewMode // `slide-in` animation kicks in when switching viewMode
@ -959,6 +964,23 @@ function StatusThread({ id, closeLink = '/', instance: propInstance }) {
)} )}
</h1> </h1>
<div class="header-side"> <div class="header-side">
<button
type="button"
class="plain4"
style={{
display: viewMode === 'full' ? '' : 'none',
}}
onClick={() => {
setViewMode(null);
searchParams.delete('media');
searchParams.delete('media-only');
searchParams.delete('view');
setSearchParams(searchParams);
}}
title="Switch to Side Peek view"
>
<Icon icon="layout4" size="l" />
</button>
<Menu <Menu
align="end" align="end"
portal={{ portal={{