this repo has no description
Test full width for first load of status page
+26
-4
+26
-4
src/pages/status.jsx
+26
-4
src/pages/status.jsx
···
168
168
const [searchParams, setSearchParams] = useSearchParams();
169
169
const mediaParam = searchParams.get('media');
170
170
const showMedia = parseInt(mediaParam, 10) > 0;
171
-
const [viewMode, setViewMode] = useState(searchParams.get('view'));
171
+
const firstLoad = useRef(!states.prevLocation);
172
+
const [viewMode, setViewMode] = useState(
173
+
searchParams.get('view') || firstLoad.current ? 'full' : null,
174
+
);
172
175
const translate = !!parseInt(searchParams.get('translate'));
173
176
const { masto, instance } = api({ instance: propInstance });
174
177
const {
···
839
842
ref={scrollableRef}
840
843
class={`status-deck deck contained ${
841
844
statuses.length > 1 ? 'padded-bottom' : ''
842
-
} ${initialPageState.current === 'status' ? 'slide-in' : ''} ${
843
-
viewMode ? `deck-view-${viewMode}` : ''
844
-
}`}
845
+
} ${
846
+
initialPageState.current === 'status' && !firstLoad.current
847
+
? 'slide-in'
848
+
: ''
849
+
} ${viewMode ? `deck-view-${viewMode}` : ''}`}
845
850
onAnimationEnd={(e) => {
846
851
// Fix the bounce effect when switching viewMode
847
852
// `slide-in` animation kicks in when switching viewMode
···
959
964
)}
960
965
</h1>
961
966
<div class="header-side">
967
+
<button
968
+
type="button"
969
+
class="plain4"
970
+
style={{
971
+
display: viewMode === 'full' ? '' : 'none',
972
+
}}
973
+
onClick={() => {
974
+
setViewMode(null);
975
+
searchParams.delete('media');
976
+
searchParams.delete('media-only');
977
+
searchParams.delete('view');
978
+
setSearchParams(searchParams);
979
+
}}
980
+
title="Switch to Side Peek view"
981
+
>
982
+
<Icon icon="layout4" size="l" />
983
+
</button>
962
984
<Menu
963
985
align="end"
964
986
portal={{