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

Normalize section spacing on album/artist detail pages

Browse source
This commit is contained in:
jeffvli 2024-02-01 04:06:56 -08:00
parent 6aba41c3d9
commit 3daa1aef4b
2 changed files with 48 additions and 65 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/renderer/features/albums/components/album-detail-content.tsx
View file

@ -1,7 +1,7 @@
import { MutableRefObject, useCallback, useMemo } from 'react'; import { MutableRefObject, useCallback, useMemo } from 'react';
import { RowDoubleClickedEvent, RowHeightParams, RowNode } from '@ag-grid-community/core'; import { RowDoubleClickedEvent, RowHeightParams, RowNode } from '@ag-grid-community/core';
import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact'; import type { AgGridReact as AgGridReactType } from '@ag-grid-community/react/lib/agGridReact';
import { Box, Group, Spoiler, Stack } from '@mantine/core'; import { Box, Group, Stack } from '@mantine/core';
import { useSetState } from '@mantine/hooks'; import { useSetState } from '@mantine/hooks';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
import { FaLastfmSquare } from 'react-icons/fa'; import { FaLastfmSquare } from 'react-icons/fa';
@ -12,7 +12,7 @@ import { Link } from 'react-router-dom';
import styled from 'styled-components'; import styled from 'styled-components';
import { queryKeys } from '/@/renderer/api/query-keys'; import { queryKeys } from '/@/renderer/api/query-keys';
import { AlbumListSort, LibraryItem, QueueSong, SortOrder } from '/@/renderer/api/types'; import { AlbumListSort, LibraryItem, QueueSong, SortOrder } from '/@/renderer/api/types';
import { Button, Popover } from '/@/renderer/components'; import { Button, Popover, Spoiler } from '/@/renderer/components';
import { MemoizedSwiperGridCarousel } from '/@/renderer/components/grid-carousel'; import { MemoizedSwiperGridCarousel } from '/@/renderer/components/grid-carousel';
import { import {
TableConfigDropdown, TableConfigDropdown,
@ -58,6 +58,7 @@ const ContentContainer = styled.div`
const DetailContainer = styled.div` const DetailContainer = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 2rem;
padding: 1rem 2rem 5rem; padding: 1rem 2rem 5rem;
overflow: hidden; overflow: hidden;
`; `;
@ -328,7 +329,6 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
<Box component="section"> <Box component="section">
<Group <Group
position="apart" position="apart"
py="1rem"
spacing="sm" spacing="sm"
> >
<Group> <Group>
@ -380,10 +380,7 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
</Group> </Group>
</Box> </Box>
{showGenres && ( {showGenres && (
<Box <Box component="section">
component="section"
py="1rem"
>
<Group spacing="sm"> <Group spacing="sm">
{detailQuery?.data?.genres?.map((genre) => ( {detailQuery?.data?.genres?.map((genre) => (
<Button <Button
@ -445,14 +442,7 @@ export const AlbumDetailContent = ({ tableRef, background }: AlbumDetailContentP
) : null} ) : null}
{comment && ( {comment && (
<Box component="section"> <Box component="section">
<Spoiler <Spoiler maxHeight={75}>{replaceURLWithHTMLLinks(comment)}</Spoiler>
hideLabel={t('common.collapse')}
maxHeight={60}
mb={20}
showLabel={t('common.expand')}
>
{replaceURLWithHTMLLinks(comment)}
</Spoiler>
</Box> </Box>
)} )}
<Box style={{ minHeight: '300px' }}> <Box style={{ minHeight: '300px' }}>

13
src/renderer/features/artists/components/album-artist-detail-content.tsx
View file

@ -48,7 +48,7 @@ const ContentContainer = styled.div`
const DetailContainer = styled.div` const DetailContainer = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 3rem; gap: 2rem;
padding: 1rem 2rem 5rem; padding: 1rem 2rem 5rem;
overflow: hidden; overflow: hidden;
@ -341,15 +341,13 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
<ContentContainer ref={cq.ref}> <ContentContainer ref={cq.ref}>
<LibraryBackgroundOverlay $backgroundColor={background} /> <LibraryBackgroundOverlay $backgroundColor={background} />
<DetailContainer> <DetailContainer>
<Stack spacing="lg">
<Group spacing="md"> <Group spacing="md">
<PlayButton onClick={() => handlePlay(playButtonBehavior)} /> <PlayButton onClick={() => handlePlay(playButtonBehavior)} />
<Group spacing="xs"> <Group spacing="xs">
<Button <Button
compact compact
loading={ loading={
createFavoriteMutation.isLoading || createFavoriteMutation.isLoading || deleteFavoriteMutation.isLoading
deleteFavoriteMutation.isLoading
} }
variant="subtle" variant="subtle"
onClick={handleFavorite} onClick={handleFavorite}
@ -395,7 +393,6 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
View all songs View all songs
</Button> </Button>
</Group> </Group>
</Stack>
{showGenres ? ( {showGenres ? (
<Box component="section"> <Box component="section">
<Group spacing="sm"> <Group spacing="sm">
@ -418,11 +415,7 @@ export const AlbumArtistDetailContent = ({ background }: AlbumArtistDetailConten
</Box> </Box>
) : null} ) : null}
{externalLinks ? ( {externalLinks ? (
<Box <Box component="section">
component="section"
mb={-20}
mt={-20}
>
<Group spacing="sm"> <Group spacing="sm">
<Button <Button
compact compact