Added narrower layout for landscape viewport #356

Signed-off-by: RaenonX <[email protected]>

src/components/nav/components/fluid.tsx → 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 = () => {
         </Button>
       )}
       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',
         },
       ]}
     />

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: () => <NavLanguageSwitch/>},
-  {type: 'component', renderComponent: () => <NavFluidConfig/>},
+  {type: 'component', renderComponent: () => <NavWidthConfig/>},
   {type: 'component', renderComponent: () => <UserControlButton/>},
 ];

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 ?
           <Error404/> :
-          <Container fluid={fluid} className="p-3">
+          <Container fluid={width === 'full'} className={widthClassMap[width]}>
             <Row className={styles['layout-row']}>
               <Col
                 className={

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%;
+  }
 }

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: '中',
       },
     },
   },

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: {

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',
       },
     },
   },

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',
       },
     },
   },

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<boolean>(LayoutDispatcherName.CHANGE_FLUID),
+  [LayoutDispatcherName.CHANGE_WIDTH]: createAction<LayoutWidthType>(LayoutDispatcherName.CHANGE_WIDTH),
   [LayoutDispatcherName.CHANGE_COLLAPSE]: createAction<boolean>(LayoutDispatcherName.CHANGE_COLLAPSE),
 };

src/state/layout/reducer.ts

@@ -1,29 +1,29 @@
 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({
   name: LAYOUT_STATE_NAME,
   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);
   },
 });
 

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;