aey/brutal-legends
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

🎨 Improve code readability

Browse source
This commit is contained in:
Anders Ytterström 2018-11-21 17:07:03 +01:00
parent 3d06ff065d
commit 74732c1683
9 changed files with 205 additions and 216 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
assets/style.css
View file

@ -87,12 +87,20 @@ article:hover,
article:focus { article:focus {
background: #333; background: #333;
color: #fff; color: #fff;
transform: scale(1.05, 1.05);
transition: transform .4s linear;
}
article:hover img {
transform: scale(1.5, 1.5) translateX(-1.5rem);
transition: transform .2s linear;
} }
figure img { figure img {
width: 100px; width: 10vw;
height: 100px; height: 10vw;
padding: 5px; padding: 5px;
display: block; display: block;
border: 1px solid #a83; border: 1px solid #a83;
background-color: #000;
} }

2
index.html
View file

@ -3,7 +3,7 @@
<head> <head>
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="/assets/style.css"> <link rel="stylesheet" href="/assets/style.css">
<title>Brütal Legend</title> <title>🤘 Brütal Legend 🤘</title>
</head> </head>
<body> <body>
<div id="brutal"></div> <div id="brutal"></div>

8
src/actions/index.js
View file

@ -1,16 +1,10 @@
export const INIT_ALBUM_LIST = 'INIT_ALBUM_LIST';
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER'; export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';
export const SET_SORT_KEY = 'SET_SORT_KEY'; export const SET_SORT_KEY = 'SET_SORT_KEY';
export const initAlbumList = payload => ({
type: INIT_ALBUM_LIST,
payload
});
export const setVisibilityFilter = filter => ({ export const setVisibilityFilter = filter => ({
type: SET_VISIBILITY_FILTER, type: SET_VISIBILITY_FILTER,
payload: { payload: {
filter, filter
} }
}); });

5
src/components/album-list.js
View file

@ -1,10 +1,7 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import Album from "./album"; import Album from './album';
export default class AlbumList extends Component { export default class AlbumList extends Component {
componentWillMount() {
this.props.loadAlbumData();
}
render() { render() {
const { const {
albums, albums,

9
src/components/filter-input.js
View file

@ -2,14 +2,17 @@ import React, { Component } from 'react';
export default class FilterInput extends Component { export default class FilterInput extends Component {
render() { render() {
const { value, handleOnChange } = this.props; const {
value,
handleOnChange
} = this.props;
return ( return (
<div> <div>
<input <input
type="text" type='text'
value={value} value={value}
onChange={evt => handleOnChange(evt.target.value)} onChange={evt => handleOnChange(evt.target.value)}
placeholder="Filtrera på år, artist, låt, skivtitel ..." placeholder='Filtrera på år, artist, låt, skivtitel ...'
/> />
</div> </div>
); );

8
src/containers/album-list.js
View file

@ -1,7 +1,6 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import AlbumList from '../components/album-list'; import AlbumList from '../components/album-list';
import { initAlbumList } from "../actions";
const getAlbums = (albums, filter) => { const getAlbums = (albums, filter) => {
const atos = o => [o.artist, o.title, o.songs.join(' '), o.year].join(' ').toLowerCase(); const atos = o => [o.artist, o.title, o.songs.join(' '), o.year].join(' ').toLowerCase();
@ -14,11 +13,6 @@ const getAlbums = (albums, filter) => {
const mapStateToProps = state => ({ const mapStateToProps = state => ({
albums: getAlbums(state.albums, state.visibilityFilter), albums: getAlbums(state.albums, state.visibilityFilter),
sortKey: state.sortKey,
}); });
const mapDispatchToProps = (dispatch) => ({ export default connect(mapStateToProps)(AlbumList);
loadAlbumData: () => dispatch(initAlbumList())
});
export default connect(mapStateToProps, mapDispatchToProps)(AlbumList);

8
src/containers/filter-input.js
View file

@ -1,14 +1,14 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import FilterInput from '../components/filter-input'; import FilterInput from '../components/filter-input';
import {setVisibilityFilter} from "../actions"; import { setVisibilityFilter } from '../actions';
const mapStateToProps = state => ({ const mapStateToProps = state => ({
value: state.visibilityFilter value: state.visibilityFilter,
}); });
const mapDispatchToProps = (dispatch) => ({ const mapDispatchToProps = dispatch => ({
handleOnChange: (filter) => dispatch(setVisibilityFilter(filter)) handleOnChange: filter => dispatch(setVisibilityFilter(filter)),
}); });
export default connect(mapStateToProps, mapDispatchToProps)(FilterInput); export default connect(mapStateToProps, mapDispatchToProps)(FilterInput);

9
src/reducers/albums.js
View file

@ -1,8 +1,4 @@
import {INIT_ALBUM_LIST} from '../actions'; export default () => {
export default (state = [], action) => {
switch (action.type) {
case INIT_ALBUM_LIST:
return [{ return [{
"id": 0, "id": 0,
"purchased_on": "2016-01-24", "purchased_on": "2016-01-24",
@ -182,7 +178,4 @@ export default (state = [], action) => {
"description": "Motörhead bildades 1975 och var aktivt fram tills att dess frontman Lemmy Kilmister, en sann kultklenod inom hårdrocken, gick bort 2015. Det är ingen tillfällighet att så många låtar av Motörhead är med i ett spel som Brütal Legend.\n\n\"Ace of Spades\" är den fjärde skivan och inledde Motörheads 1980-tal. Jag förknippade den tidigare med dess titelspår, men (We Are) The Roadcrew, en låt som skrevs för att särskilt hylla bandets roadies, är mycket passande till spelets berättelse.\n\nDet tidlösa omslaget är någon sorts variant av spaghetti-western med skinnställ.", "description": "Motörhead bildades 1975 och var aktivt fram tills att dess frontman Lemmy Kilmister, en sann kultklenod inom hårdrocken, gick bort 2015. Det är ingen tillfällighet att så många låtar av Motörhead är med i ett spel som Brütal Legend.\n\n\"Ace of Spades\" är den fjärde skivan och inledde Motörheads 1980-tal. Jag förknippade den tidigare med dess titelspår, men (We Are) The Roadcrew, en låt som skrevs för att särskilt hylla bandets roadies, är mycket passande till spelets berättelse.\n\nDet tidlösa omslaget är någon sorts variant av spaghetti-western med skinnställ.",
"img": "15.jpg" "img": "15.jpg"
}]; }];
default:
return state;
}
}; };

2
src/reducers/visibilityFilter.js
View file

@ -1,4 +1,4 @@
import {SET_VISIBILITY_FILTER} from '../actions'; import { SET_VISIBILITY_FILTER } from '../actions';
export default (state = '', action) => { export default (state = '', action) => {
switch (action.type) { switch (action.type) {