Improve design responsiveness
This commit is contained in:
Anders Ytterström
parent
e04e04bee9
commit
93358ac607
5 changed files with 335 additions and 269 deletions
400
assets/style.css
400
assets/style.css
|
|
@ -1,173 +1,227 @@
|
|||
/* === Base === */
|
||||
body {
|
||||
background-color: #111;
|
||||
color: #aaa;
|
||||
font-size: large;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
|
||||
padding: 5rem 10rem;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #a83;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #a83;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
a:hover, a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
a:active {
|
||||
transform: translate(2px, 2px);
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
border-bottom: 3px solid #a83;
|
||||
padding: 1.25rem 0;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
border-width: 0;
|
||||
border-bottom: 3px solid #555;
|
||||
font-size: large;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
|
||||
padding: .5rem 1rem;
|
||||
min-width: 17em;
|
||||
}
|
||||
|
||||
input:hover {
|
||||
background-color: #444;
|
||||
border-color: #777;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
border-color: #a83;
|
||||
}
|
||||
|
||||
footer {
|
||||
color: #888;
|
||||
font-size: small;
|
||||
position: fixed;
|
||||
transform: rotate(45deg) translate(2em, 3em);
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* === /Base === */
|
||||
/* === Helpers === */
|
||||
|
||||
.blur {
|
||||
filter: blur(25px);
|
||||
}
|
||||
|
||||
/* === /Helpers === */
|
||||
/* === Albums === */
|
||||
|
||||
.album {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.album:hover {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
transform: scale(1.05, 1.05);
|
||||
transition: transform .4s linear;
|
||||
}
|
||||
|
||||
.album__cover {
|
||||
margin: 1rem;
|
||||
}
|
||||
|
||||
.album__cover__media {
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
padding: 5px;
|
||||
display: block;
|
||||
border: 1px solid #a83;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.album__cover__media:hover {
|
||||
transform: scale(1.5, 1.5) translateX(-1.5rem);
|
||||
transition: transform .2s linear;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.albums {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
grid-gap: 10px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
/* === /Albums === */
|
||||
/* === Selected album === */
|
||||
|
||||
.selected-album__inner {
|
||||
display: grid;
|
||||
max-width: 80%;
|
||||
transform: translateY(-3em);
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-rows: 1fr 2fr;
|
||||
}
|
||||
|
||||
.selected-album__cover {
|
||||
grid-column: 1;
|
||||
grid-row: 1 / 3;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.selected-album__cover__media {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.selected-album__summary {
|
||||
align-self: end;
|
||||
text-transform: uppercase;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.selected-album__description {
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
align-self: start;
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 600px) {
|
||||
.selected-album {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
/* === /Selected album === */
|
||||
/* === Base === */
|
||||
body {
|
||||
background-color: #111;
|
||||
color: #aaa;
|
||||
font-size: large;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
max-width: 80em;
|
||||
}
|
||||
|
||||
a:link {
|
||||
color: #a83;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #a83;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
a:hover, a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
a:active {
|
||||
transform: translate(2px, 2px);
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom: 3px solid #a83;
|
||||
padding: 0.5em 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.5em;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
header {
|
||||
margin: 0.5em 0;
|
||||
}
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-transform: uppercase;
|
||||
margin: 0;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
p:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
input {
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
border-width: 0;
|
||||
border-radius: 5px;
|
||||
font-size: large;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
|
||||
padding: .5rem 1rem;
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
input:hover {
|
||||
background-color: #444;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
background-color: #fff;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
input {
|
||||
min-width: 17em;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* === /Base === */
|
||||
/* === Helpers === */
|
||||
|
||||
.blur {
|
||||
filter: blur(25px);
|
||||
}
|
||||
|
||||
/* === /Helpers === */
|
||||
/* === Albums === */
|
||||
|
||||
.album {
|
||||
display: flex;
|
||||
align-items: start;
|
||||
padding: 0.5em;
|
||||
margin: 0.8em 0;
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
.album {
|
||||
flex-direction: column;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.album {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
.album:hover {
|
||||
background: #333;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.album__cover {
|
||||
margin: 0 0.5em 0 0;
|
||||
padding-top: 7px;
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
.album__cover {
|
||||
margin: 0 0 0.5em;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.album__cover {
|
||||
margin: 0 1em 0 0;
|
||||
padding-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.album__cover__media {
|
||||
width: 25vw;
|
||||
height: 25vw;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.album__cover__media:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: #fff;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
.album__cover__media {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.album__cover__media {
|
||||
width: 10vw;
|
||||
height: 10vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 500px) {
|
||||
.albums {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: 0.5em;
|
||||
text-transform: uppercase;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
/* === /Albums === */
|
||||
/* === Selected album === */
|
||||
|
||||
.selected-album {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.selected-album__inner {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.selected-album__summary {
|
||||
text-transform: uppercase;
|
||||
padding: 0.5em;
|
||||
background-color: #000;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.selected-album__description {
|
||||
color: #fff;
|
||||
padding: 0.5rem;
|
||||
overflow: auto;
|
||||
margin: 0;
|
||||
max-width: 40em;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
/* === /Selected album === */
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="brutal"></div>
|
||||
<footer>av <a href="https://madr.se" rel="author">madr</a> 2018</footer>
|
||||
</body>
|
||||
<script src="bundle.js"></script>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,24 +1,24 @@
|
|||
import React, { Component } from 'react';
|
||||
import Album from './album';
|
||||
|
||||
export default class AlbumList extends Component {
|
||||
render() {
|
||||
const {
|
||||
albums,
|
||||
handleOnClick,
|
||||
blurred,
|
||||
} = this.props;
|
||||
const classNames = blurred ? 'blur' : ''
|
||||
return (
|
||||
<div className={"albums " + classNames}>
|
||||
{albums.map(album => (
|
||||
<Album
|
||||
key={album.id}
|
||||
album={album}
|
||||
handleOnClick={handleOnClick}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
import React, { Component } from 'react';
|
||||
import Album from './album';
|
||||
|
||||
export default class AlbumList extends Component {
|
||||
render() {
|
||||
const {
|
||||
albums,
|
||||
handleOnClick,
|
||||
blurred,
|
||||
} = this.props;
|
||||
const classNames = blurred ? 'blur' : ''
|
||||
return (
|
||||
<div className={"albums " + classNames}>
|
||||
{albums.map(album => (
|
||||
<Album
|
||||
key={album.id}
|
||||
album={album}
|
||||
handleOnClick={handleOnClick}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,29 +1,38 @@
|
|||
import React, { Component } from 'react';
|
||||
|
||||
export default class Album extends Component {
|
||||
render() {
|
||||
const { album, handleOnClick } = this.props;
|
||||
const {
|
||||
id,
|
||||
artist,
|
||||
title,
|
||||
songs,
|
||||
year,
|
||||
img,
|
||||
purchased_on,
|
||||
} = album;
|
||||
const imagePath = `assets/covers/${img}`;
|
||||
const song = songs.join(', ');
|
||||
return (
|
||||
<article className="album" onClick={() => handleOnClick(album)}>
|
||||
<figure className="album__cover">
|
||||
<img src={imagePath} alt="cover" className="album__cover__media" />
|
||||
</figure>
|
||||
<span>
|
||||
#{id+1}: {artist} - {song}, från "{title}" ({year})<br />
|
||||
<small>✔️ {purchased_on}</small>
|
||||
</span>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
}
|
||||
import React, { Component } from 'react';
|
||||
|
||||
export default class Album extends Component {
|
||||
handleKeyPress(e, callback) {
|
||||
const SPACE_KEY = 32
|
||||
const ENTER_KEY = 13
|
||||
if (e.charCode === SPACE_KEY || e.charCode === ENTER_KEY) {
|
||||
e.preventDefault();
|
||||
callback();
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const { album, handleOnClick } = this.props;
|
||||
const {
|
||||
id,
|
||||
artist,
|
||||
title,
|
||||
songs,
|
||||
year,
|
||||
img,
|
||||
purchased_on,
|
||||
} = album;
|
||||
const imagePath = `assets/covers/${img}`;
|
||||
const song = songs.join(', ');
|
||||
return (
|
||||
<article className="album" tabIndex="0" role="button" onClick={() => handleOnClick(album)}>
|
||||
<figure className="album__cover">
|
||||
<img src={imagePath} alt="cover" className="album__cover__media" />
|
||||
</figure>
|
||||
<span>
|
||||
#{id+1}: {artist} - {song}, från "{title}" ({year})<br />
|
||||
<small>✔️ {purchased_on}</small>
|
||||
</span>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,42 +1,46 @@
|
|||
import React, { Component } from 'react';
|
||||
|
||||
export default class Modal extends Component {
|
||||
render() {
|
||||
const {
|
||||
id,
|
||||
artist,
|
||||
title,
|
||||
songs,
|
||||
year,
|
||||
img,
|
||||
description,
|
||||
handleOnClick,
|
||||
} = this.props;
|
||||
if (id === undefined) {
|
||||
return '';
|
||||
}
|
||||
const imagePath = `assets/covers/${img}`;
|
||||
const song = songs.join(', ');
|
||||
return (
|
||||
<div className="selected-album" tabIndex="0" onClick={handleOnClick}>
|
||||
<div className="selected-album__inner">
|
||||
<figure className="selected-album__cover">
|
||||
<img src={imagePath} alt="cover" className="selected-album__cover__media" />
|
||||
</figure>
|
||||
<span className="selected-album__summary">
|
||||
#{id+1}: {artist} - {song}, från "{title}" ({year})<br />
|
||||
</span>
|
||||
<p className="selected-album__description">
|
||||
{description.split('\n\n').map(text => (
|
||||
<React.Fragment>
|
||||
{text}
|
||||
<br />
|
||||
<br />
|
||||
</React.Fragment>
|
||||
))}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
import React, { Component } from 'react';
|
||||
|
||||
export default class Modal extends Component {
|
||||
handleKeyPress(e, callback) {
|
||||
alert("sdsdsd")
|
||||
console.log(e.charCode)
|
||||
callback();
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
id,
|
||||
artist,
|
||||
title,
|
||||
songs,
|
||||
year,
|
||||
img,
|
||||
description,
|
||||
handleOnClick,
|
||||
} = this.props;
|
||||
if (id === undefined) {
|
||||
return '';
|
||||
}
|
||||
const imagePath = `assets/covers/${img}`;
|
||||
const song = songs.join(', ');
|
||||
return (
|
||||
<div className="selected-album"
|
||||
tabIndex="0"
|
||||
onClick={handleOnClick}
|
||||
onKeyPress={e => this.handleKeyPress(e, handleOnClick)}>
|
||||
<div className="selected-album__inner">
|
||||
<span className="selected-album__summary">
|
||||
#{id+1}: {artist} - {song}, från "{title}" ({year})<br />
|
||||
</span>
|
||||
<div className="selected-album__description">
|
||||
{description.split('\n\n').map(text => (
|
||||
<p key={text}>
|
||||
{text}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue