From cccdf533a7a15e53f428413cd0f747542171f94d Mon Sep 17 00:00:00 2001 From: Meiyi Date: Tue, 28 May 2024 02:10:23 +1000 Subject: [PATCH 1/5] :truck: Rename resources --- src/App.tsx | 6 +++--- src/styled/components/LanguageMenu.ts | 2 +- src/styled/page/index.ts | 2 +- src/styled/utils/{color.ts => Colors.ts} | 0 4 files changed, 5 insertions(+), 5 deletions(-) rename src/styled/utils/{color.ts => Colors.ts} (100%) diff --git a/src/App.tsx b/src/App.tsx index aed7f00..1463740 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -25,7 +25,6 @@ import { SelectCoffeeStyle, CoffeeCapFillingBorderStyle, CoffeeCapFillingMaskStyle, - CoffeeEspressoStyle, CoffeeMikeStyle, CoffeeMileFoamStyle, CoffeeButterStyle, @@ -33,7 +32,8 @@ import { CoffeeMilkSpermStyle, CoffeeWaterStyle, CoffeeChocolateStyle, -} from './styled/page' + CoffeeEspressoStyle, +} from './styled/page/index' const App = () => { const { t } = useTranslation() @@ -72,7 +72,7 @@ const App = () => { i18n.changeLanguage(getLocalLang) setLang(getLocalLang) setSelectCoffee(getLocal?.coffee || CoffeeList[0]) - }, [lang]) + }, []) return ( diff --git a/src/styled/components/LanguageMenu.ts b/src/styled/components/LanguageMenu.ts index 3405b25..df15fd3 100644 --- a/src/styled/components/LanguageMenu.ts +++ b/src/styled/components/LanguageMenu.ts @@ -1,6 +1,6 @@ import { styled } from '@linaria/react' -import Colors from '../utils/color' +import Colors from '../utils/Colors' export const LanguageButton = styled.button` color: ${Colors.Primary[900]}; diff --git a/src/styled/page/index.ts b/src/styled/page/index.ts index feaaf1b..6914f28 100644 --- a/src/styled/page/index.ts +++ b/src/styled/page/index.ts @@ -1,6 +1,6 @@ import { styled } from '@linaria/react' -import Colors from '../utils/color' +import Colors from '../utils/Colors' export const WrapperStyle = styled.div` padding: 0.8rem 1.5rem; diff --git a/src/styled/utils/color.ts b/src/styled/utils/Colors.ts similarity index 100% rename from src/styled/utils/color.ts rename to src/styled/utils/Colors.ts From e7627f9a6f0ff27ef796122e569ddd2a10d268b1 Mon Sep 17 00:00:00 2001 From: Meiyi Date: Tue, 28 May 2024 03:41:39 +1000 Subject: [PATCH 2/5] :pencil2: Shorten the Japanese text --- src/asset/locales/ja.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/asset/locales/ja.json b/src/asset/locales/ja.json index c0663f3..60ad3f7 100644 --- a/src/asset/locales/ja.json +++ b/src/asset/locales/ja.json @@ -6,11 +6,11 @@ "milkFoam": "ミルクフォーム", "milkSperm": "ミルクスパム", "water": "水", - "syrup": "キャラメルシロップ", + "syrup": "キャラメル", "brownSugar": "黒糖", "vanillaSyrup": "バニラシロップ", - "hazelnutSyrup": "ヘーゼルナッツシロップ", - "almondSyrup": "アーモンドシロップ", + "hazelnutSyrup": "ヘーゼル", + "almondSyrup": "アーモンド", "butter": "バター" }, "Coffee": { From 918224a479d190a342b4040ba1a63761dc81e6d2 Mon Sep 17 00:00:00 2001 From: Meiyi Date: Wed, 29 May 2024 01:24:31 +1000 Subject: [PATCH 3/5] :lipstick: Update Colors --- src/styled/utils/Colors.ts | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/styled/utils/Colors.ts b/src/styled/utils/Colors.ts index ffd6dbc..ef0926d 100644 --- a/src/styled/utils/Colors.ts +++ b/src/styled/utils/Colors.ts @@ -8,12 +8,15 @@ const Colors = { }, Primary: { 900: '#5A7785', + 300: '#c9d7df', + 200: '#dcdcdc', transparency: '#5f97b254', }, White: { 900: '#fff', 700: '#F2E5DA', 500: '#F0F0F0', + 300: '#fdf8f4', }, Coffee: { Espresso: '#7d604e', From ca9016414c3cfb842a976cf2590221d83b1dd1c2 Mon Sep 17 00:00:00 2001 From: Meiyi Date: Wed, 29 May 2024 01:25:10 +1000 Subject: [PATCH 4/5] :wrench: Add css use img svg --- vite.config.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/vite.config.ts b/vite.config.ts index a70a7af..c5c60c2 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -6,7 +6,12 @@ import { defineConfig } from 'vite' export default defineConfig({ plugins: [ react(), - VitePluginLinaria(), + VitePluginLinaria({ + include: ['**/*.{ts,tsx}'], + babelOptions: { + presets: ['@babel/preset-typescript', '@babel/preset-react'], + }, + }), ], base: 'https://MeganxLi.github.io/coffee-guide', }) From d800a02f4d3caa8e80a65e0dc0ef3b26edabb02e Mon Sep 17 00:00:00 2001 From: Meiyi Date: Wed, 29 May 2024 01:25:31 +1000 Subject: [PATCH 5/5] :iphone: Add RWD style --- src/styled/page/index.ts | 59 +++++++++++++++++++++++++++++++++++--- src/styled/utils/Mixins.ts | 15 ++++++++++ 2 files changed, 70 insertions(+), 4 deletions(-) create mode 100644 src/styled/utils/Mixins.ts diff --git a/src/styled/page/index.ts b/src/styled/page/index.ts index 6914f28..276f095 100644 --- a/src/styled/page/index.ts +++ b/src/styled/page/index.ts @@ -1,11 +1,14 @@ import { styled } from '@linaria/react' import Colors from '../utils/Colors' +import { rwd } from '../utils/Mixins' +const WrapperHeight = 35 export const WrapperStyle = styled.div` padding: 0.8rem 1.5rem; display: flex; justify-content: space-between; + height: ${`${WrapperHeight}px`}; ` export const LogoStyle = styled.span` @@ -20,11 +23,20 @@ export const InnerContentStyle = styled.div` justify-content: center; align-items: center; padding-bottom: 3rem; + ${rwd('md')}{ + padding-bottom: 0; + max-height: calc(100vh - ${`${WrapperHeight * 2}px`}); + } + &::before { content: url(../../../public/Vector.svg); position: absolute; bottom: 0; left: 0; + + ${rwd('md')}{ + content: ''; + } } ` @@ -36,13 +48,33 @@ export const InnerStyle = styled.div` gap: 1rem; width: 80%; max-width: 1000px; + + ${rwd('md')}{ + grid-template-columns: 1fr; + grid-template-rows: 1fr auto; + width: 100%; + height: 100%; + } ` export const MenuStyle = styled.div` + ${rwd('md')}{ + width: 100%; + height: 100%; + overflow: auto; + background-color: ${Colors.Primary[200]}; + border-top:1rem solid ${Colors.Primary[200]}; + border-bottom: 1rem solid ${Colors.Primary[200]}; + } + h4{ font-size: 2rem; color: ${Colors.Primary[900]}; margin-bottom: 1.8rem; + + ${rwd('md')}{ + display: none; + } } ` @@ -52,6 +84,13 @@ export const MenuListStyle = styled.div` line-height: 1.5rem; gap: 2rem; + ${rwd('md')}{ + background-color: ${Colors.White[300]}; + grid-template-columns: 10rem repeat(2, 1fr); + margin: 0 1rem; + padding: 1rem; + } + div:not(:first-child){ text-align: center; } @@ -70,19 +109,24 @@ export const MenuTextStyle = styled.p` )}; cursor: pointer; + &::before{ - content:""; + content: ""; position: absolute; width: ${(props) => (props.selected ? '100%' : '0')}; height: 10px; background-color:${Colors.Primary.transparency}; border-radius: 2px; bottom: 4px; - transition: 0.2s; + transition: 0.2s; } ` -export const CoffeeCapStyle = styled.div`` +export const CoffeeCapStyle = styled.div` + ${rwd('md')}{ + transform: scale(0.8); + } +` export const CoffeeCapBorder = styled.div` border-bottom: 2px solid ${Colors.Black.transparency}; @@ -132,6 +176,7 @@ export const CoffeeCapFillingBorderStyle = styled.div` margin-top: -1px; margin-left: -15px; clip-path: polygon(0 0%, 100% 0, 88% 100%, 14% 100%); + ` export const CoffeeCapFillingMaskStyle = styled(CoffeeCapFillingBorderStyle)` position: absolute; @@ -147,7 +192,10 @@ export const CoffeeIngredientsStyle = styled.div` text-align: center; font-size: 1.2rem; line-height: 2.2rem; - transition: flex-grow 0.8s ease; + transition: flex-grow 0.8s ease; + ${rwd('md')}{ + font-size: 1.5rem; + } ` export const CoffeeEspressoStyle = styled(CoffeeIngredientsStyle) ` @@ -207,4 +255,7 @@ export const SelectCoffeeStyle = styled(CoffeeCapMargin)` font-size: 1.2rem; text-align: center; padding-top: 1rem; + ${rwd('md')}{ + font-size: 1.5rem; + } ` diff --git a/src/styled/utils/Mixins.ts b/src/styled/utils/Mixins.ts new file mode 100644 index 0000000..86b578c --- /dev/null +++ b/src/styled/utils/Mixins.ts @@ -0,0 +1,15 @@ +const breakpoints: { [key: string]: string } = { + xs: '480px', + md: '768px', +} + +const rwd = (breakpoint: string) => { + const point = breakpoints[breakpoint] + if (!point) { + console.warn(`Invalid breakpoint: ${breakpoint}.`) + return '' + } + return `@media (max-width: ${point})` +} + +export { breakpoints, rwd }