Improve design responsiveness
This commit is contained in:
Anders Ytterström
parent
e04e04bee9
commit
93358ac607
5 changed files with 335 additions and 269 deletions
194
assets/style.css
194
assets/style.css
|
|
@ -4,7 +4,9 @@ body {
|
|||
color: #aaa;
|
||||
font-size: large;
|
||||
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 {
|
||||
|
|
@ -25,47 +27,69 @@ a:active {
|
|||
}
|
||||
|
||||
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;
|
||||
border-bottom: 3px solid #a83;
|
||||
padding: 1.25rem 0;
|
||||
margin: 1rem 0;
|
||||
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-bottom: 3px solid #555;
|
||||
border-radius: 5px;
|
||||
font-size: large;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
|
||||
padding: .5rem 1rem;
|
||||
min-width: 17em;
|
||||
display: block;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
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;
|
||||
@media (min-width: 500px) {
|
||||
input {
|
||||
min-width: 17em;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* === /Base === */
|
||||
|
|
@ -80,94 +104,124 @@ footer {
|
|||
|
||||
.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;
|
||||
transform: scale(1.05, 1.05);
|
||||
transition: transform .4s linear;
|
||||
}
|
||||
|
||||
.album__cover {
|
||||
margin: 1rem;
|
||||
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;
|
||||
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) {
|
||||
@media (min-width: 500px) {
|
||||
.albums {
|
||||
display: grid;
|
||||
grid-template-columns: auto auto auto;
|
||||
grid-gap: 10px;
|
||||
grid-template-columns: 1fr 1fr 1fr;
|
||||
grid-gap: 0.5em;
|
||||
text-transform: uppercase;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
/* === /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 {
|
||||
.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;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
.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,6 +1,15 @@
|
|||
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 {
|
||||
|
|
@ -15,7 +24,7 @@ export default class Album extends Component {
|
|||
const imagePath = `assets/covers/${img}`;
|
||||
const song = songs.join(', ');
|
||||
return (
|
||||
<article className="album" onClick={() => handleOnClick(album)}>
|
||||
<article className="album" tabIndex="0" role="button" onClick={() => handleOnClick(album)}>
|
||||
<figure className="album__cover">
|
||||
<img src={imagePath} alt="cover" className="album__cover__media" />
|
||||
</figure>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,12 @@
|
|||
import React, { Component } from 'react';
|
||||
|
||||
export default class Modal extends Component {
|
||||
handleKeyPress(e, callback) {
|
||||
alert("sdsdsd")
|
||||
console.log(e.charCode)
|
||||
callback();
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
id,
|
||||
|
|
@ -18,23 +24,21 @@ export default class Modal extends Component {
|
|||
const imagePath = `assets/covers/${img}`;
|
||||
const song = songs.join(', ');
|
||||
return (
|
||||
<div className="selected-album" tabIndex="0" onClick={handleOnClick}>
|
||||
<div className="selected-album"
|
||||
tabIndex="0"
|
||||
onClick={handleOnClick}
|
||||
onKeyPress={e => this.handleKeyPress(e, 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">
|
||||
<div className="selected-album__description">
|
||||
{description.split('\n\n').map(text => (
|
||||
<React.Fragment>
|
||||
<p key={text}>
|
||||
{text}
|
||||
<br />
|
||||
<br />
|
||||
</React.Fragment>
|
||||
))}
|
||||
</p>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue