From 650928e08781cc93037194163a51d81b6ba3773e Mon Sep 17 00:00:00 2001 From: RaenonX Date: Tue, 18 Jan 2022 07:34:04 -0600 Subject: [PATCH] Added narrower layout for landscape viewport #356 Signed-off-by: RaenonX --- .../nav/components/{fluid.tsx => width.tsx} | 27 ++++++++++++------- src/components/nav/const.tsx | 4 +-- src/components/pages/app.tsx | 11 ++++++-- src/components/pages/main.module.css | 14 ++++++++++ src/components/pages/main.module.css.map | 2 +- src/components/pages/main.module.scss | 24 +++++++++++++++++ src/i18n/translations/cht/translation.ts | 11 ++++---- src/i18n/translations/definition.ts | 10 +++---- src/i18n/translations/en/translation.ts | 11 ++++---- src/i18n/translations/jp/translation.ts | 11 ++++---- src/state/layout/dispatchers.ts | 4 +-- src/state/layout/reducer.ts | 20 +++++++------- src/state/layout/types.ts | 6 +++-- test/data/resources | 2 +- 14 files changed, 102 insertions(+), 55 deletions(-) rename src/components/nav/components/{fluid.tsx => width.tsx} (51%) diff --git a/src/components/nav/components/fluid.tsx b/src/components/nav/components/width.tsx similarity index 51% rename from src/components/nav/components/fluid.tsx rename to src/components/nav/components/width.tsx index ebae0e42..46107d2d 100644 --- a/src/components/nav/components/fluid.tsx +++ b/src/components/nav/components/width.tsx @@ -6,14 +6,15 @@ import {useDispatch} from 'react-redux'; import {useI18n} from '../../../i18n/hook'; import {layoutDispatchers} from '../../../state/layout/dispatchers'; import {useLayoutSelector} from '../../../state/layout/selector'; +import {LayoutDispatcherName} from '../../../state/layout/types'; import {useLayout} from '../../hooks/layout/main'; import {NavDropdownMenu} from '../elements/dropdown'; -export const NavFluidConfig = () => { +export const NavWidthConfig = () => { const {t} = useI18n(); const dispatch = useDispatch(); - const {fluid} = useLayoutSelector(); + const {width} = useLayoutSelector(); const {isLandscape} = useLayout(); if (!isLandscape) { @@ -29,20 +30,26 @@ export const NavFluidConfig = () => { )} entries={[ - {type: 'header', text: (t) => t.nav.layout.current.fluid}, - {type: 'text', text: (t) => fluid ? t.nav.layout.fluid.enabled : t.nav.layout.fluid.disabled}, + {type: 'header', text: (t) => t.nav.layout.current.width}, + {type: 'text', text: (t) =>t.nav.layout.width[width]}, {type: 'divider'}, { type: 'path', - text: (t) => t.nav.layout.fluid.enable, - onClick: () => dispatch(layoutDispatchers.changeFluid(true)), - activeOverride: fluid, + text: (t) => t.nav.layout.width.full, + onClick: () => dispatch(layoutDispatchers[LayoutDispatcherName.CHANGE_WIDTH]('full')), + activeOverride: width === 'full', }, { type: 'path', - text: (t) => t.nav.layout.fluid.disable, - onClick: () => dispatch(layoutDispatchers.changeFluid(false)), - activeOverride: !fluid, + text: (t) => t.nav.layout.width.wide, + onClick: () => dispatch(layoutDispatchers[LayoutDispatcherName.CHANGE_WIDTH]('wide')), + activeOverride: width === 'wide', + }, + { + type: 'path', + text: (t) => t.nav.layout.width.mid, + onClick: () => dispatch(layoutDispatchers[LayoutDispatcherName.CHANGE_WIDTH]('mid')), + activeOverride: width === 'mid', }, ]} /> diff --git a/src/components/nav/const.tsx b/src/components/nav/const.tsx index e1a44949..0e9f141b 100644 --- a/src/components/nav/const.tsx +++ b/src/components/nav/const.tsx @@ -2,8 +2,8 @@ import React from 'react'; import {DataPath, GeneralPath, PostPath, StoryPath, UnitPath} from '../../api-def/paths'; import {UserControlButton} from '../elements/common/userControl/button/main'; -import {NavFluidConfig} from './components/fluid'; import {NavLanguageSwitch} from './components/switch'; +import {NavWidthConfig} from './components/width'; import {NavItems} from './type'; @@ -78,6 +78,6 @@ export const navItems: NavItems = [ {type: 'path', path: GeneralPath.ABOUT, text: (t) => t.meta.inUse.about.title}, {type: 'divider'}, {type: 'component', renderComponent: () => }, - {type: 'component', renderComponent: () => }, + {type: 'component', renderComponent: () => }, {type: 'component', renderComponent: () => }, ]; diff --git a/src/components/pages/app.tsx b/src/components/pages/app.tsx index ac4a5515..bac9aec5 100644 --- a/src/components/pages/app.tsx +++ b/src/components/pages/app.tsx @@ -5,6 +5,7 @@ import Container from 'react-bootstrap/Container'; import Row from 'react-bootstrap/Row'; import {useLayoutSelector} from '../../state/layout/selector'; +import {LayoutWidthType} from '../../state/layout/types'; import {Footer} from '../elements/footer'; import {Error404} from '../error/404'; import {NavigationLandscape} from '../nav/main/landscape'; @@ -19,8 +20,14 @@ type Props = { renderApp: () => React.ReactNode, }; +const widthClassMap: {[width in LayoutWidthType]: string} = { + full: styles['container-full'], + wide: styles['container-wide'], + mid: styles['container-mid'], +}; + export const MainApp = ({isNotFound, renderApp}: Props) => { - const {fluid, collapse} = useLayoutSelector(); + const {width, collapse} = useLayoutSelector(); return ( <> @@ -29,7 +36,7 @@ export const MainApp = ({isNotFound, renderApp}: Props) => { { isNotFound ? : - + div.site-alert-text { width: 100vw; padding: 0.5rem 1rem !important; } +div .container-mid, div .container-wide, div .container-full { + padding: 1rem; + margin-left: auto; + margin-right: auto; +} +div .container-full { + width: 100%; +} +div .container-wide { + width: 80%; +} +div .container-mid { + width: 60%; +} /*# sourceMappingURL=main.module.css.map */ diff --git a/src/components/pages/main.module.css.map b/src/components/pages/main.module.css.map index 38ae912c..2abb32d9 100644 --- a/src/components/pages/main.module.css.map +++ b/src/components/pages/main.module.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["main.module.scss","../../../node_modules/bootstrap/scss/mixins/_breakpoints.scss"],"names":[],"mappings":"AAKE;EACE;EAEA;;AAGE;EACE;;AAGF;EACE;;AC4DJ;EDlEA;IAYI;;;ACyCJ;EDpCE;IAII;;;ACgCN;ED5BE;IAII;;;AAMR;EAsBE;EACA,QArBS;;AAET;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;;AAOJ;EACE;EACA,QAzBO;EA4BP;EAGA;EACA;EAGA;EAGA","file":"main.module.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["main.module.scss","../../../node_modules/bootstrap/scss/mixins/_breakpoints.scss"],"names":[],"mappings":"AAKE;EACE;EAEA;;AAGE;EACE;;AAGF;EACE;;AC4DJ;EDlEA;IAYI;;;ACyCJ;EDpCE;IAII;;;ACgCN;ED5BE;IAII;;;AAMR;EAsBE;EACA,QArBS;;AAET;EACE;IACE;;EAGF;IACE;;EAGF;IACE;;EAGF;IACE;;;AAOJ;EACE;EACA,QAzBO;EA4BP;EAGA;EACA;EAGA;EAGA;;AAIJ;EACE;EACA;EACA;;AAGF;EAGE;;AAGF;EAGE;;AAGF;EAGE","file":"main.module.css"} \ No newline at end of file diff --git a/src/components/pages/main.module.scss b/src/components/pages/main.module.scss index 1ec98437..465e70f6 100644 --- a/src/components/pages/main.module.scss +++ b/src/components/pages/main.module.scss @@ -86,4 +86,28 @@ div { padding: 0.5rem 1rem !important; } } + + %container { + padding: 1rem; + margin-left: auto; + margin-right: auto; + } + + .container-full { + @extend %container; + + width: 100%; + } + + .container-wide { + @extend %container; + + width: 80%; + } + + .container-mid { + @extend %container; + + width: 60%; + } } diff --git a/src/i18n/translations/cht/translation.ts b/src/i18n/translations/cht/translation.ts index ffea0130..7bd210cf 100644 --- a/src/i18n/translations/cht/translation.ts +++ b/src/i18n/translations/cht/translation.ts @@ -790,13 +790,12 @@ export const translation: TranslationStruct = { layout: { config: '版面設定', current: { - fluid: '全寬', + width: '寬度', }, - fluid: { - enable: '啟用', - disable: '停用', - enabled: '已啟用', - disabled: '已停用', + width: { + full: '全寬', + wide: '寬', + mid: '中', }, }, }, diff --git a/src/i18n/translations/definition.ts b/src/i18n/translations/definition.ts index 2b21318e..b93d2163 100644 --- a/src/i18n/translations/definition.ts +++ b/src/i18n/translations/definition.ts @@ -2,6 +2,7 @@ import {DimensionKey, KeyPointType, PostType, UnitType} from '../../api-def/api' import {Efficiency} from '../../components/pages/gameData/skillAtk/out/types'; import {SortOrder as LookupSortOrder} from '../../components/pages/gameData/unitInfo/lookup/in/types'; import {Display, SortOrder as TierSortOrder} from '../../components/pages/tier/types'; +import {LayoutWidthType} from '../../state/layout/types'; export type PageMetaTranslations = { @@ -643,14 +644,9 @@ export type TranslationStruct = { layout: { config: string, current: { - fluid: string, - }, - fluid: { - enable: string, - disable: string, - enabled: string, - disabled: string, + width: string, }, + width: {[key in LayoutWidthType]: string}, }, }, posts: { diff --git a/src/i18n/translations/en/translation.ts b/src/i18n/translations/en/translation.ts index 541350d2..332d53ff 100644 --- a/src/i18n/translations/en/translation.ts +++ b/src/i18n/translations/en/translation.ts @@ -830,13 +830,12 @@ export const translation: TranslationStruct = { layout: { config: 'Layout Config', current: { - fluid: 'Full-width', + width: 'Width', }, - fluid: { - enable: 'Enable', - disable: 'Disable', - enabled: 'Enabled', - disabled: 'Disabled', + width: { + full: 'Full', + wide: 'Wide', + mid: 'Medium', }, }, }, diff --git a/src/i18n/translations/jp/translation.ts b/src/i18n/translations/jp/translation.ts index 0e8ca69f..591817ba 100644 --- a/src/i18n/translations/jp/translation.ts +++ b/src/i18n/translations/jp/translation.ts @@ -796,13 +796,12 @@ export const translation: TranslationStruct = { layout: { config: 'TBA', current: { - fluid: 'TBA', + width: 'TBA', }, - fluid: { - enable: 'TBA', - disable: 'TBA', - enabled: 'TBA', - disabled: 'TBA', + width: { + full: 'TBA', + wide: 'TBA', + mid: 'TBA', }, }, }, diff --git a/src/state/layout/dispatchers.ts b/src/state/layout/dispatchers.ts index 00df5f04..9aca5062 100644 --- a/src/state/layout/dispatchers.ts +++ b/src/state/layout/dispatchers.ts @@ -1,9 +1,9 @@ import {createAction} from '@reduxjs/toolkit'; -import {LayoutDispatcherName} from './types'; +import {LayoutDispatcherName, LayoutWidthType} from './types'; export const layoutDispatchers = { - [LayoutDispatcherName.CHANGE_FLUID]: createAction(LayoutDispatcherName.CHANGE_FLUID), + [LayoutDispatcherName.CHANGE_WIDTH]: createAction(LayoutDispatcherName.CHANGE_WIDTH), [LayoutDispatcherName.CHANGE_COLLAPSE]: createAction(LayoutDispatcherName.CHANGE_COLLAPSE), }; diff --git a/src/state/layout/reducer.ts b/src/state/layout/reducer.ts index 3fe4da8e..f208d0fc 100644 --- a/src/state/layout/reducer.ts +++ b/src/state/layout/reducer.ts @@ -1,20 +1,20 @@ import {createSlice} from '@reduxjs/toolkit'; import {layoutDispatchers} from './dispatchers'; -import {LAYOUT_STATE_NAME, LayoutData, LayoutDispatcherName, LayoutDataState} from './types'; +import {LAYOUT_STATE_NAME, LayoutData, LayoutDataState, LayoutDispatcherName, LayoutWidthType} from './types'; const initialState: LayoutDataState = { collapse: false, - fluid: true, + width: 'full', }; -export const changeCollapseReducer = ( - key: keyof LayoutDataState, -) => ( - state: LayoutData, {payload}: {payload: boolean}, -) => { - state[key] = payload; +export const changeCollapseReducer = (state: LayoutData, {payload}: {payload: boolean}) => { + state.collapse = payload; +}; + +export const changeWidthReducer = (state: LayoutData, {payload}: {payload: LayoutWidthType}) => { + state.width = payload; }; const layoutSlice = createSlice({ @@ -22,8 +22,8 @@ const layoutSlice = createSlice({ initialState, reducers: {}, extraReducers: (builder) => { - builder.addCase(layoutDispatchers[LayoutDispatcherName.CHANGE_FLUID], changeCollapseReducer('fluid')); - builder.addCase(layoutDispatchers[LayoutDispatcherName.CHANGE_COLLAPSE], changeCollapseReducer('collapse')); + builder.addCase(layoutDispatchers[LayoutDispatcherName.CHANGE_COLLAPSE], changeCollapseReducer); + builder.addCase(layoutDispatchers[LayoutDispatcherName.CHANGE_WIDTH], changeWidthReducer); }, }); diff --git a/src/state/layout/types.ts b/src/state/layout/types.ts index 1767f931..ff82bd50 100644 --- a/src/state/layout/types.ts +++ b/src/state/layout/types.ts @@ -4,13 +4,15 @@ import {StateBase} from '../types'; export const LAYOUT_STATE_NAME = 'layout'; export enum LayoutDispatcherName { - CHANGE_FLUID = 'changeFluid', + CHANGE_WIDTH = 'changeWidth', CHANGE_COLLAPSE = 'changeCollapse', } +export type LayoutWidthType = 'full' | 'wide' | 'mid'; + export type LayoutData = { collapse: boolean, - fluid: boolean, + width: LayoutWidthType, }; export type LayoutDataState = StateBase & LayoutData; diff --git a/test/data/resources b/test/data/resources index 3a0709a1..e9f23886 160000 --- a/test/data/resources +++ b/test/data/resources @@ -1 +1 @@ -Subproject commit 3a0709a13e747b24bb05bfd49bc71f288e528cac +Subproject commit e9f23886b1c050ba3a1eb237b1e7e688eb1e9588