-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Different layout for mobile and desktop devices
- Loading branch information
Showing
8 changed files
with
165 additions
and
21 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| export const actionTypes = { | ||
| resized: 'window/resized', | ||
| }; | ||
|
|
||
| export const resized = (width, height) => ({ | ||
| type: actionTypes.resized, | ||
| width, | ||
| height, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import { actionTypes } from './actions'; | ||
|
|
||
| const mobileMaxWidth = 768; | ||
|
|
||
| // ----------------------------------------------------------------------------- | ||
| // Initial state | ||
| // ----------------------------------------------------------------------------- | ||
|
|
||
| const initialState = { | ||
| width: window.innerWidth, | ||
| height: window.innerHeight, | ||
| isMobile: window.innerWidth <= mobileMaxWidth, | ||
| }; | ||
|
|
||
| // ----------------------------------------------------------------------------- | ||
| // Actions | ||
| // ----------------------------------------------------------------------------- | ||
|
|
||
| function resized(state, action) { | ||
| return { | ||
| ...state, | ||
| width: action.width, | ||
| height: action.height, | ||
| isMobile: action.width <= mobileMaxWidth, | ||
| }; | ||
| } | ||
|
|
||
| // ----------------------------------------------------------------------------- | ||
| // Reducer | ||
| // ----------------------------------------------------------------------------- | ||
|
|
||
| const actionsMap = { | ||
| [actionTypes.resized]: resized, | ||
| }; | ||
|
|
||
| export default function reducer(state = initialState, action) { | ||
| const reducerFunction = actionsMap[action.type]; | ||
| return reducerFunction ? reducerFunction(state, action) : state; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { take, put, call } from 'redux-saga/effects'; | ||
| import { eventChannel } from 'redux-saga'; | ||
| import { resized } from './actions'; | ||
|
|
||
| // ----------------------------------------------------------------------------- | ||
| // Action watchers | ||
| // ----------------------------------------------------------------------------- | ||
|
|
||
| // noinspection JSUnusedGlobalSymbols | ||
| export function* watchForWindowResizeEvents() { | ||
| const chan = yield call(getWindowResizeEventChannel); | ||
| try { | ||
| let i = 0; // NOTE: This is a workaround for SonarQube not accepting an infinite loop here! | ||
| while (i < 1000) { | ||
| const area = yield take(chan); | ||
| yield put(resized(area.width, area.height)); | ||
| i++; | ||
| i--; | ||
| } | ||
| } finally { | ||
| chan.close(); | ||
| } | ||
| } | ||
|
|
||
| // ----------------------------------------------------------------------------- | ||
| // Action handlers | ||
| // ----------------------------------------------------------------------------- | ||
|
|
||
| function getWindowResizeEventChannel() { | ||
| return eventChannel((emit) => { | ||
| const emitter = () => { | ||
| emit({ | ||
| width: window.innerWidth, | ||
| height: window.innerHeight, | ||
| }); | ||
| }; | ||
|
|
||
| window.addEventListener('resize', emitter); | ||
|
|
||
| return () => { | ||
| // Must return an unsubscribe function. | ||
| window.removeEventListener('resize', emitter); | ||
| }; | ||
| }); | ||
| } |