pogmommy/feishin
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve semantic html of default layout and add ids

Browse source
This commit is contained in:
jeffvli 2023-01-06 14:49:41 -08:00
parent 3cf7127f56
commit f7b8e34905
3 changed files with 126 additions and 125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/renderer/components/virtual-table/hooks/use-fixed-table-header.tsx
View file

@ -14,8 +14,8 @@ export const useFixedTableHeader = () => {
}); });
useEffect(() => { useEffect(() => {
const header = document.querySelector('.ag-header'); const header = document.querySelector('main .ag-header');
const root = document.querySelector('.ag-root'); const root = document.querySelector('main .ag-root');
if (isNotPastTableIntersection || !tableInView) { if (isNotPastTableIntersection || !tableInView) {
header?.classList.remove('ag-header-fixed'); header?.classList.remove('ag-header-fixed');

2
src/renderer/features/shared/components/animated-page.tsx
View file

@ -7,7 +7,7 @@ interface AnimatedPageProps {
children: ReactNode; children: ReactNode;
} }
const StyledAnimatedPage = styled(motion.div)` const StyledAnimatedPage = styled(motion.main)`
position: relative; position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

25
src/renderer/layouts/default-layout.tsx
View file

@ -28,7 +28,7 @@ if (!isElectron()) {
const Layout = styled.div` const Layout = styled.div`
display: grid; display: grid;
grid-template-areas: grid-template-areas:
'main' 'main-content'
'player'; 'player';
grid-template-rows: calc(100vh - 85px) 85px; grid-template-rows: calc(100vh - 85px) 85px;
grid-template-columns: 1fr; grid-template-columns: 1fr;
@ -36,7 +36,7 @@ const Layout = styled.div`
height: 100%; height: 100%;
`; `;
const MainContainer = styled.main<{ const MainContentContainer = styled.div<{
leftSidebarWidth: string; leftSidebarWidth: string;
rightExpanded?: boolean; rightExpanded?: boolean;
rightSidebarWidth?: string; rightSidebarWidth?: string;
@ -44,7 +44,7 @@ const MainContainer = styled.main<{
}>` }>`
position: relative; position: relative;
display: ${(props) => (props.shell ? 'flex' : 'grid')}; display: ${(props) => (props.shell ? 'flex' : 'grid')};
grid-area: main; grid-area: main-content;
grid-template-areas: 'sidebar . right-sidebar'; grid-template-areas: 'sidebar . right-sidebar';
grid-template-rows: 1fr; grid-template-rows: 1fr;
grid-template-columns: ${(props) => props.leftSidebarWidth} 1fr ${(props) => grid-template-columns: ${(props) => props.leftSidebarWidth} 1fr ${(props) =>
@ -53,14 +53,14 @@ const MainContainer = styled.main<{
background: var(--main-bg); background: var(--main-bg);
`; `;
const SidebarContainer = styled.div` const SidebarContainer = styled.aside`
position: relative; position: relative;
grid-area: sidebar; grid-area: sidebar;
background: var(--sidebar-bg); background: var(--sidebar-bg);
border-right: var(--sidebar-border); border-right: var(--sidebar-border);
`; `;
const RightSidebarContainer = styled(motion.div)` const RightSidebarContainer = styled(motion.aside)`
position: relative; position: relative;
grid-area: right-sidebar; grid-area: right-sidebar;
height: 100%; height: 100%;
@ -253,9 +253,9 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
}, [throttledResize, stopResizing]); }, [throttledResize, stopResizing]);
return ( return (
<> <Layout id="default-layout">
<Layout> <MainContentContainer
<MainContainer id="main-content"
leftSidebarWidth={sidebar.leftWidth} leftSidebarWidth={sidebar.leftWidth}
rightExpanded={showSideQueue && sideQueueType === 'sideQueue'} rightExpanded={showSideQueue && sideQueueType === 'sideQueue'}
rightSidebarWidth={sidebar.rightWidth} rightSidebarWidth={sidebar.rightWidth}
@ -263,7 +263,7 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
> >
{!shell && ( {!shell && (
<> <>
<SidebarContainer> <SidebarContainer id="sidebar">
<ResizeHandle <ResizeHandle
ref={sidebarRef} ref={sidebarRef}
isResizing={isResizing} isResizing={isResizing}
@ -326,6 +326,7 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
key="queue-sidebar" key="queue-sidebar"
animate="open" animate="open"
exit="closed" exit="closed"
id="sidebar-queue"
initial="closed" initial="closed"
variants={queueSidebarVariants} variants={queueSidebarVariants}
> >
@ -345,6 +346,7 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
key="queue-drawer" key="queue-drawer"
animate="open" animate="open"
exit="closed" exit="closed"
id="drawer-queue"
initial="closed" initial="closed"
variants={queueDrawerVariants} variants={queueDrawerVariants}
onMouseLeave={() => { onMouseLeave={() => {
@ -366,12 +368,11 @@ export const DefaultLayout = ({ shell }: DefaultLayoutProps) => {
<Suspense fallback={<></>}> <Suspense fallback={<></>}>
<Outlet /> <Outlet />
</Suspense> </Suspense>
</MainContainer> </MainContentContainer>
<PlayerbarContainer> <PlayerbarContainer id="player-bar">
<Playerbar /> <Playerbar />
</PlayerbarContainer> </PlayerbarContainer>
</Layout> </Layout>
</>
); );
}; };