Skip to content

Commit

Permalink
recalculate the numver of grtid columns on window resize event - closes
Browse files Browse the repository at this point in the history 
#5
  • Loading branch information
@StegSchreck
StegSchreck committed Jul 27, 2019
1 parent e6c08b8 commit dcc5be3
Show file tree
Hide file tree
Showing 5 changed files with 199 additions and 143 deletions.
48 changes: 6 additions & 42 deletions uberpage/src/components/App/App.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';
import './App.css';
import UberTile from '../UberTile/UberTile.jsx';
import data from '../../data';
import UberPage from "../UberPage/UberPage";
import data from "../../data";

function App() {
const defaultItem = {
Expand All @@ -11,48 +11,12 @@ function App() {
background_logo: 'UberPage.svg',
background_logo_size: '75%',
};
if (data.settings.default_item === undefined || data.settings.default_item) { data.items.push(defaultItem); }

function calculateNumberOfColumns() {
if (data.items.length <= 3 || window.innerWidth < 400) {
return 1;
}
if (data.items.length <= 8 || window.innerWidth < 800) {
return 2;
}
return 3;
if (data.settings.default_item === undefined || data.settings.default_item) {
data.items.push(defaultItem);
}

const numberOfColumns = calculateNumberOfColumns();
const numberOfRows = Math.ceil(data.items.length / numberOfColumns);
const itemHeight = 100 / numberOfRows;
let itemWidth = 100 / numberOfColumns;
const gridStyle = { gridTemplateColumns: 'auto '.repeat(numberOfColumns) };
const emptySlots = (numberOfColumns * numberOfRows) - data.items.length;

return (
<div className="App" style={gridStyle}>
{
data.items.map((item, index) => {
const gridColumnStart = (index % numberOfColumns) + 1;
const gridRow = Math.floor((index / numberOfColumns) + 1);
const isLastItem = index + 1 === data.items.length;
const gridColumnEnd = isLastItem ? gridColumnStart + (emptySlots + 1) : gridColumnStart + 1;
itemWidth = isLastItem ? itemWidth * (emptySlots + 1) : itemWidth;
return (
<UberTile
key={index}
item={item}
settings={data.settings}
height={itemHeight}
width={itemWidth}
gridColumnStart={gridColumnStart}
gridColumnEnd={gridColumnEnd}
gridRow={gridRow}
/>
);
})
}
<div className="App">
<UberPage items={data.items} settings={data.settings}/>
</div>
);
}
Expand Down
101 changes: 0 additions & 101 deletions uberpage/src/components/App/App.test.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,112 +1,11 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';
import * as data from '../../data';

describe('App Component', () => {
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});

it('renders at least default tile if data contains no items', () => {
data.default = {
items: [],
settings: {
default_link_target: '_blank'
}
};

const div = document.createElement('div');
ReactDOM.render(<App />, div);
const uberTiles = ReactDOM.findDOMNode(div).getElementsByClassName('UberTile');

expect(uberTiles.length).toBe(1);
expect(uberTiles[0].attributes[1].value).toBe('width: 100vw; min-width: 100vw; max-width: 100vw; height: 100vh; min-height: 100vh; max-height: 100vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2;');
ReactDOM.unmountComponentAtNode(div);
});

it('renders 4 tiles in 2 columns if data contains 3 items', () => {
data.default = {
items: [{title: 'item1'}, {title: 'item2'}, {title: 'item3'}],
settings: {
default_link_target: '_blank'
}
};

const div = document.createElement('div');
ReactDOM.render(<App />, div);
const uberTiles = ReactDOM.findDOMNode(div).getElementsByClassName('UberTile');
expect(uberTiles.length).toBe(4);
expect(uberTiles[0].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 50vh; min-height: 50vh; max-height: 50vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2;');
expect(uberTiles[1].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 50vh; min-height: 50vh; max-height: 50vh; grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2;');
expect(uberTiles[2].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 50vh; min-height: 50vh; max-height: 50vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3;');
expect(uberTiles[3].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 50vh; min-height: 50vh; max-height: 50vh; grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3;');
ReactDOM.unmountComponentAtNode(div);
});

it('renders 3 tiles in 1 column if data contains 2 items', () => {
data.default = {
items: [{title: 'item1'}, {title: 'item2'}],
settings: {
default_link_target: '_blank'
}
};

const div = document.createElement('div');
ReactDOM.render(<App />, div);
const uberTiles = ReactDOM.findDOMNode(div).getElementsByClassName('UberTile');
expect(uberTiles.length).toBe(3);
expect(uberTiles[0].attributes[1].value).toBe('width: 100vw; min-width: 100vw; max-width: 100vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2;');
expect(uberTiles[1].attributes[1].value).toBe('width: 100vw; min-width: 100vw; max-width: 100vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3;');
expect(uberTiles[2].attributes[1].value).toBe('width: 100vw; min-width: 100vw; max-width: 100vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4;');
ReactDOM.unmountComponentAtNode(div);
});

it('renders 9 tiles in 3 column if data contains 8 items', () => {
data.default = {
items: [{title: 'item1'}, {title: 'item2'}, {title: 'item3'}, {title: 'item4'}, {title: 'item5'}, {title: 'item6'}, {title: 'item7'}, {title: 'item8'}],
settings: {
default_link_target: '_blank'
}
};

const div = document.createElement('div');
ReactDOM.render(<App />, div);
const uberTiles = ReactDOM.findDOMNode(div).getElementsByClassName('UberTile');
expect(uberTiles.length).toBe(9);
expect(uberTiles[0].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2;');
expect(uberTiles[1].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2;');
expect(uberTiles[2].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 2;');
expect(uberTiles[3].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3;');
expect(uberTiles[4].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3;');
expect(uberTiles[5].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 3; grid-column-end: 4; grid-row-start: 2; grid-row-end: 3;');
expect(uberTiles[6].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4;');
expect(uberTiles[7].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4;');
expect(uberTiles[8].attributes[1].value).toBe('width: 33.333333333333336vw; min-width: 33.333333333333336vw; max-width: 33.333333333333336vw; height: 33.333333333333336vh; min-height: 33.333333333333336vh; max-height: 33.333333333333336vh; grid-column-start: 3; grid-column-end: 4; grid-row-start: 3; grid-row-end: 4;');
ReactDOM.unmountComponentAtNode(div);
});

it('renders 7 tiles in 2 column if data contains 6 items', () => {
data.default = {
items: [{title: 'item1'}, {title: 'item2'}, {title: 'item3'}, {title: 'item4'}, {title: 'item5'}, {title: 'item6'}],
settings: {
default_link_target: '_blank'
}
};

const div = document.createElement('div');
ReactDOM.render(<App />, div);
const uberTiles = ReactDOM.findDOMNode(div).getElementsByClassName('UberTile');
expect(uberTiles.length).toBe(7);
expect(uberTiles[0].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 25vh; min-height: 25vh; max-height: 25vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; grid-row-end: 2;');
expect(uberTiles[1].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 25vh; min-height: 25vh; max-height: 25vh; grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 2;');
expect(uberTiles[2].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 25vh; min-height: 25vh; max-height: 25vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3;');
expect(uberTiles[3].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 25vh; min-height: 25vh; max-height: 25vh; grid-column-start: 2; grid-column-end: 3; grid-row-start: 2; grid-row-end: 3;');
expect(uberTiles[4].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 25vh; min-height: 25vh; max-height: 25vh; grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4;');
expect(uberTiles[5].attributes[1].value).toBe('width: 50vw; min-width: 50vw; max-width: 50vw; height: 25vh; min-height: 25vh; max-height: 25vh; grid-column-start: 2; grid-column-end: 3; grid-row-start: 3; grid-row-end: 4;');
expect(uberTiles[6].attributes[1].value).toBe('width: 100vw; min-width: 100vw; max-width: 100vw; height: 25vh; min-height: 25vh; max-height: 25vh; grid-column-start: 1; grid-column-end: 3; grid-row-start: 4; grid-row-end: 5;');
ReactDOM.unmountComponentAtNode(div);
});
});
7 changes: 7 additions & 0 deletions uberpage/src/components/UberPage/UberPage.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
.UberPage {
text-align: center;
min-height: 100vh;
background-color: #282c34;
overflow: hidden;
display: grid;
}
58 changes: 58 additions & 0 deletions uberpage/src/components/UberPage/UberPage.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import React from 'react';
import './UberPage.css';
import UberTile from '../UberTile/UberTile.jsx';

class UberPage extends React.Component {
state = {
pageWidth: window.innerWidth
};
render() {
const items = this.props.items;
const settings = this.props.settings;
function calculateNumberOfColumns() {
if (items.length <= 3 || window.innerWidth < 450) {
return 1;
}
if (items.length <= 8 || window.innerWidth < 800) {
return 2;
}
return 3;
}
window.onresize = () => this.setState({pageWidth: window.innerWidth});

const numberOfColumns = calculateNumberOfColumns();
const numberOfRows = Math.ceil(items.length / numberOfColumns);
const itemHeight = 100 / numberOfRows;
let itemWidth = 100 / numberOfColumns;
const gridStyle = {gridTemplateColumns: 'auto '.repeat(numberOfColumns)};
const emptySlots = (numberOfColumns * numberOfRows) - items.length;

return (
<div className="UberPage" style={gridStyle}>
{
items.map((item, index) => {
const gridColumnStart = (index % numberOfColumns) + 1;
const gridRow = Math.floor((index / numberOfColumns) + 1);
const isLastItem = index + 1 === items.length;
const gridColumnEnd = isLastItem ? gridColumnStart + (emptySlots + 1) : gridColumnStart + 1;
itemWidth = isLastItem ? itemWidth * (emptySlots + 1) : itemWidth;
return (
<UberTile
key={index}
item={item}
settings={settings}
height={itemHeight}
width={itemWidth}
gridColumnStart={gridColumnStart}
gridColumnEnd={gridColumnEnd}
gridRow={gridRow}
/>
);
})
}
</div>
);
}
}

export default UberPage;
Loading

0 comments on commit dcc5be3

Please sign in to comment.