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