🎨 Improve code readability
Rename files for consistency and clarification
This commit is contained in:
Anders Ytterström
parent
3d06ff065d
commit
d722027781
14 changed files with 207 additions and 218 deletions
|
|
@ -87,12 +87,20 @@ article:hover,
|
|||
article:focus {
|
||||
background: #333;
|
||||
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 {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
padding: 5px;
|
||||
display: block;
|
||||
border: 1px solid #a83;
|
||||
background-color: #000;
|
||||
}
|
||||
|
|
@ -3,7 +3,7 @@
|
|||
<head>
|
||||
<meta name="viewport" content="width=device-width">
|
||||
<link rel="stylesheet" href="/assets/style.css">
|
||||
<title>Brütal Legend</title>
|
||||
<title>🤘 Brütal Legend 🤘</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="brutal"></div>
|
||||
|
|
|
|||
|
|
@ -1,16 +1,10 @@
|
|||
export const INIT_ALBUM_LIST = 'INIT_ALBUM_LIST';
|
||||
export const SET_VISIBILITY_FILTER = 'SET_VISIBILITY_FILTER';
|
||||
export const SET_SORT_KEY = 'SET_SORT_KEY';
|
||||
|
||||
export const initAlbumList = payload => ({
|
||||
type: INIT_ALBUM_LIST,
|
||||
payload
|
||||
});
|
||||
|
||||
export const setVisibilityFilter = filter => ({
|
||||
type: SET_VISIBILITY_FILTER,
|
||||
payload: {
|
||||
filter,
|
||||
filter
|
||||
}
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +1,7 @@
|
|||
import React, { Component } from 'react';
|
||||
import Album from "./album";
|
||||
import Album from './album';
|
||||
|
||||
export default class AlbumList extends Component {
|
||||
componentWillMount() {
|
||||
this.props.loadAlbumData();
|
||||
}
|
||||
render() {
|
||||
const {
|
||||
albums,
|
||||
|
|
@ -2,14 +2,17 @@ import React, { Component } from 'react';
|
|||
|
||||
export default class FilterInput extends Component {
|
||||
render() {
|
||||
const { value, handleOnChange } = this.props;
|
||||
const {
|
||||
value,
|
||||
handleOnChange
|
||||
} = this.props;
|
||||
return (
|
||||
<div>
|
||||
<input
|
||||
type="text"
|
||||
type='text'
|
||||
value={value}
|
||||
onChange={evt => handleOnChange(evt.target.value)}
|
||||
placeholder="Filtrera på år, artist, låt, skivtitel ..."
|
||||
placeholder='Filtrera på år, artist, låt, skivtitel ...'
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import AlbumList from '../components/album-list';
|
||||
import { initAlbumList } from "../actions";
|
||||
|
||||
const getAlbums = (albums, filter) => {
|
||||
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 => ({
|
||||
albums: getAlbums(state.albums, state.visibilityFilter),
|
||||
sortKey: state.sortKey,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
loadAlbumData: () => dispatch(initAlbumList())
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(AlbumList);
|
||||
export default connect(mapStateToProps)(AlbumList);
|
||||
|
|
|
|||
|
|
@ -1,14 +1,14 @@
|
|||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import FilterInput from '../components/filter-input';
|
||||
import {setVisibilityFilter} from "../actions";
|
||||
import { setVisibilityFilter } from '../actions';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
value: state.visibilityFilter
|
||||
value: state.visibilityFilter,
|
||||
});
|
||||
|
||||
const mapDispatchToProps = (dispatch) => ({
|
||||
handleOnChange: (filter) => dispatch(setVisibilityFilter(filter))
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
handleOnChange: filter => dispatch(setVisibilityFilter(filter)),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(FilterInput);
|
||||
|
|
|
|||
|
|
@ -1,8 +1,4 @@
|
|||
import {INIT_ALBUM_LIST} from '../actions';
|
||||
|
||||
export default (state = [], action) => {
|
||||
switch (action.type) {
|
||||
case INIT_ALBUM_LIST:
|
||||
export default () => {
|
||||
return [{
|
||||
"id": 0,
|
||||
"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.",
|
||||
"img": "15.jpg"
|
||||
}];
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import { combineReducers } from 'redux';
|
||||
import albums from './albums';
|
||||
import visibilityFilter from './visibilityFilter';
|
||||
import sortKey from "./sortKey";
|
||||
import visibilityFilter from './visibility-filter';
|
||||
import sortKey from "./sort-key";
|
||||
|
||||
export default combineReducers({
|
||||
albums,
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import {SET_VISIBILITY_FILTER} from '../actions';
|
||||
import { SET_VISIBILITY_FILTER } from '../actions';
|
||||
|
||||
export default (state = '', action) => {
|
||||
switch (action.type) {
|
||||
Loading…
Add table
Reference in a new issue