zoriya/Chromacase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Tried to make work the golden ratio on phone but failed (it's better tho)

Browse Source
This commit is contained in:
Clément Le Bihan
2023-11-26 17:54:46 +01:00
parent dc491983f5
commit c085e9aa22
3 changed files with 132 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
front/components/V2/GoldenRatio.tsx
View File

@@ -1,10 +1,8 @@
import React from 'react';
import { View } from 'react-native';
import { useBreakpointValue } from 'native-base';
import { useBreakpointValue, Text } from 'native-base';
import HomeMainSongCard from './HomeMainSongCard';
const bigSideRatio = 1000;
const smallSideRatio = 618;
import GoldenRatioPanel from './GoldenRatioPanel';
type HomeCardProps = {
image: string;
@@ -44,80 +42,30 @@ const cards = [
const GoldenRatio = () => {
const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
const isPhone = screenSize === 'small';
// return (<GoldenRatioPanel direction='column' header={<>r</>}>test</GoldenRatioPanel>)
return (
<View
style={{
alignSelf: 'stretch',
maxWidth: 1100,
alignItems: 'stretch',
flexDirection: isPhone ? 'column' : 'row',
}}
<GoldenRatioPanel
direction={isPhone ? 'column' : 'row'}
header={<HomeMainSongCard {...cards[0]} />}
>
<View
style={{
flexGrow: bigSideRatio,
}}
<GoldenRatioPanel
direction={isPhone ? 'row' : 'column'}
header={<HomeMainSongCard {...cards[1]} />}
>
<HomeMainSongCard {...cards[0]} />
</View>
<View
style={{
flexGrow: smallSideRatio,
display: 'flex',
flexDirection: isPhone ? 'row' : 'column',
alignItems: 'stretch',
}}
>
<View
style={{
flexGrow: bigSideRatio,
}}
<GoldenRatioPanel
direction={isPhone ? 'column-reverse' : 'row-reverse'}
header={<HomeMainSongCard {...cards[2]} />}
>
<HomeMainSongCard {...cards[1]} />
</View>
<View
style={{
flexGrow: smallSideRatio,
display: 'flex',
flexDirection: isPhone ? 'column-reverse' : 'row-reverse',
alignItems: 'stretch',
}}
>
<View
style={{
flexGrow: bigSideRatio,
}}
<GoldenRatioPanel
direction={isPhone ? 'row-reverse' : 'column-reverse'}
header={<HomeMainSongCard {...cards[3]} />}
>
<HomeMainSongCard {...cards[2]} />
</View>
<View
style={{
flexGrow: smallSideRatio,
display: 'flex',
flexDirection: isPhone ? 'row-reverse' : 'column-reverse',
alignItems: 'stretch',
}}
>
<View
style={{
flexGrow: bigSideRatio,
display: 'flex',
flexDirection: 'column',
alignItems: 'stretch',
justifyContent: 'flex-end',
}}
>
<HomeMainSongCard {...cards[3]} />
<View style={{ display: 'flex', width: '100%', height: '100%', backgroundColor: 'red' }}>
</View>
<View
style={{
flexGrow: smallSideRatio,
}}
></View>
</View>
</View>
</View>
</View>
</GoldenRatioPanel>
</GoldenRatioPanel>
</GoldenRatioPanel>
</GoldenRatioPanel>
);
};

60
front/components/V2/GoldenRatioPanel.tsx Normal file
View File

@@ -0,0 +1,60 @@
import { View, ViewStyle } from 'react-native';
const bigSideRatio = 1000;
const smallSideRatio = 618;
const bigSizePercent = '61.8%';
const smallSizePercent = '38.2%';
type GoldenRatioPanelProps = {
direction: 'row' | 'column' | 'row-reverse' | 'column-reverse';
header: React.ReactNode;
children: React.ReactNode;
style?: ViewStyle;
};
const isVerticalDir = (direction: GoldenRatioPanelProps['direction']) => {
return direction === 'column' || direction === 'column-reverse';
};
const GoldenRatioPanel = ({ direction, header, children, style }: GoldenRatioPanelProps) => {
const firstSizePercent = bigSizePercent;
const secondSizePercent = smallSizePercent;
const isVertical = isVerticalDir(direction);
return (
<View
style={[
{
width: !isVertical ? '100%' : undefined,
height: isVertical ? '100%' : undefined,
display: 'flex',
flexDirection: direction,
},
style,
]}
>
<View
style={{
height: isVertical ? firstSizePercent : undefined,
width: !isVertical ? firstSizePercent : undefined,
}}
>
{header}
</View>
<View
style={{
height: isVertical ? secondSizePercent : undefined,
width: !isVertical ? secondSizePercent : undefined,
}}
>
{children}
</View>
</View>
);
};
GoldenRatioPanel.defaultProps = {
direction: 'row',
};
export default GoldenRatioPanel;

93
front/views/V2/DiscoveryView.tsx
View File

@@ -38,17 +38,49 @@ const HomeView = (props: RouteProps<{}>) => {
// }, [artistsQueries]);
return (
<ScaffoldCC routeName={props.route.name}>
// <ScaffoldCC routeName={props.route.name}>
<View
style={{
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
}}
>
<View
style={{
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
maxWidth: 1100,
// maxHeight: 500,
// aspectRatio: 1.618,
// golden ratio in vertical
aspectRatio: 0.618,
}}
>
<GoldenRatio />
<View
</View>
<View
style={{
flexDirection: 'column',
flexWrap: 'wrap',
justifyContent: 'flex-start',
alignItems: 'flex-start',
gap: 16,
}}
>
<Text
style={{
fontSize: 24,
fontWeight: 'bold',
marginLeft: 16,
marginBottom: 16,
marginTop: 24,
}}
>
{'Suggestions'}
</Text>
{songsQuery.isLoading && <Text>Loading...</Text>}
{/* <View
style={{
flexDirection: 'row',
flexWrap: 'wrap',
@@ -57,43 +89,22 @@ const HomeView = (props: RouteProps<{}>) => {
gap: 16,
}}
>
<Text
style={{
fontSize: 24,
fontWeight: 'bold',
marginLeft: 16,
marginBottom: 16,
marginTop: 24,
}}
>
{'Suggestions'}
</Text>
{songsQuery.isLoading && <Text>Loading...</Text>}
<View
style={{
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'flex-start',
alignItems: 'flex-start',
gap: 16,
}}
>
{songsQuery.data?.map((song) => (
<SongCardInfo
key={song.id}
song={song}
onPress={() => {
navigation.navigate('Play', { songId: song.id });
}}
onPlay={() => {
console.log('play');
}}
/>
))}
</View>
</View>
{songsQuery.data?.map((song) => (
<SongCardInfo
key={song.id}
song={song}
onPress={() => {
navigation.navigate('Play', { songId: song.id });
}}
onPlay={() => {
console.log('play');
}}
/>
))}
</View> */}
</View>
</ScaffoldCC>
</View>
// </ScaffoldCC>
);
};