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(() => {
const header = document.querySelector('.ag-header');
const root = document.querySelector('.ag-root');
const header = document.querySelector('main .ag-header');
const root = document.querySelector('main .ag-root');
if (isNotPastTableIntersection || !tableInView) {
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;
}
const StyledAnimatedPage = styled(motion.div)`
const StyledAnimatedPage = styled(motion.main)`
position: relative;
display: flex;
flex-direction: column;

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

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