Responsive modal looking better
This commit is contained in:
James Barnsley
@ -3,8 +3,8 @@ import React, { memo } from 'react';
|
||||
import Link from './Link';
|
||||
import Icon from './Icon';
|
||||
|
||||
export default memo((props) => {
|
||||
const mapImageSizes = () => {
|
||||
export default memo((props) => {
|
||||
const mapImageSizes = () => {
|
||||
// Single image
|
||||
if (props.image) {
|
||||
return props.image;
|
||||
@ -54,9 +54,13 @@ export default memo((props) => {
|
||||
|
||||
return (
|
||||
<div className={class_name}>
|
||||
<div className="thumbnail__image" style={{ backgroundImage: `url("${image || '/iris/assets/no-image.svg'}")` }} />
|
||||
{props.useImageTag ? (
|
||||
<img alt="Artwork thumbnail" className="thumbnail__image thumbnail__image--use-image-tag" src={`${image || '/iris/assets/no-image.svg'}`} />
|
||||
) : (
|
||||
<div className="thumbnail__image" style={{ backgroundImage: `url("${image || '/iris/assets/no-image.svg'}")` }} />
|
||||
)}
|
||||
{props.glow && image && <div className="thumbnail__image thumbnail__image--glow" style={{ backgroundImage: `url("${image}")` }} />}
|
||||
{zoom_icon}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
@ -178,23 +178,25 @@ class KioskMode extends React.Component {
|
||||
|
||||
return (
|
||||
<Modal
|
||||
className={`modal--kiosk-mode modal--kiosk-mode--${show_lyrics ? 'with' : 'without'}-lyrics`}
|
||||
className="modal--kiosk-mode"
|
||||
extraControls={extraControls}
|
||||
>
|
||||
<Thumbnail className="background" images={images} />
|
||||
|
||||
<div className="track-info">
|
||||
<div className="artwork">
|
||||
<Thumbnail images={images} />
|
||||
</div>
|
||||
<div className={`player player--${show_lyrics ? 'with' : 'without'}-lyrics`}>
|
||||
|
||||
<div className="player">
|
||||
<div className="current-track">
|
||||
<div className="track">
|
||||
<div className="track__artwork">
|
||||
<Thumbnail images={images} useImageTag />
|
||||
</div>
|
||||
<div className="track__info">
|
||||
<div className="title">{ current_track ? current_track.name : <span>-</span> }</div>
|
||||
{ current_track ? <LinksSentence nolinks items={current_track.artists} /> : <LinksSentence /> }
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="player__controls">
|
||||
<div className="playback">
|
||||
<div className="playback__controls">
|
||||
<button className="control previous" onClick={() => this.props.mopidyActions.previous()}>
|
||||
<Icon name="navigate_before" type="material" />
|
||||
</button>
|
||||
@ -203,12 +205,13 @@ class KioskMode extends React.Component {
|
||||
<Icon name="navigate_next" type="material" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="progress-wrapper">
|
||||
<div className="playback__progress">
|
||||
<ProgressSlider />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{show_lyrics && this.renderLyrics()}
|
||||
</Modal>
|
||||
);
|
||||
|
||||
@ -19,6 +19,10 @@
|
||||
background-size: cover;
|
||||
border-radius: 3px;
|
||||
|
||||
&--use-image-tag {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&--glow {
|
||||
@include blur(10px);
|
||||
position: absolute;
|
||||
|
||||
@ -30,7 +30,7 @@ $bp_shallow: 650px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* General animations
|
||||
**/
|
||||
|
||||
@ -245,7 +245,7 @@ $bp_shallow: 650px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* Resolution-based responsive rules
|
||||
* Creates @media wrappers based on pixel density
|
||||
**/
|
||||
@ -261,7 +261,7 @@ $bp_shallow: 650px;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
/**
|
||||
* Viewport-based responsive rules
|
||||
* Creates @media wrappers based on screen dimensions
|
||||
**/
|
||||
|
||||
@ -262,8 +262,10 @@
|
||||
padding: 5%;
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
align-content: center;
|
||||
|
||||
.thumbnail.background {
|
||||
position: absolute;
|
||||
@ -283,63 +285,59 @@
|
||||
}
|
||||
}
|
||||
|
||||
.track-info {
|
||||
height: 90%;
|
||||
width: 100%;
|
||||
.player {
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
.artwork {
|
||||
text-align: center;
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
width: 50%;
|
||||
max-width: 50vh;
|
||||
margin: 0 auto;
|
||||
flex-grow: 1;
|
||||
.track {
|
||||
height: 90%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
.thumbnail {
|
||||
max-width: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.icon {
|
||||
@include animate();
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
color: colour(darkest_grey);
|
||||
font-size: 20rem;
|
||||
top: 25%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
&__artwork {
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
flex-grow: 1;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
.icon {
|
||||
opacity: 0.75;
|
||||
@include animate();
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
color: colour(darkest_grey);
|
||||
font-size: 20rem;
|
||||
top: 25%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
&:hover {
|
||||
.icon {
|
||||
opacity: 0.75;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.player {
|
||||
padding-top: 40px;
|
||||
width: 50%;
|
||||
margin: auto auto 0 auto;
|
||||
|
||||
.current-track {
|
||||
&__info {
|
||||
font-size: 2rem;
|
||||
|
||||
padding-top: 40px;
|
||||
.links-sentence {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.playback {
|
||||
&__controls {
|
||||
padding-top: 40px;
|
||||
.control {
|
||||
@ -349,8 +347,7 @@
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-wrapper {
|
||||
&__progress {
|
||||
padding-top: 40px;
|
||||
.slider {
|
||||
&__track {
|
||||
@ -359,6 +356,16 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&--with-lyrics {
|
||||
width: 30%;
|
||||
|
||||
.track {
|
||||
&__info {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lyrics {
|
||||
@ -376,95 +383,77 @@
|
||||
left: 10%;
|
||||
width: 80%;
|
||||
transition: transform 0.9s linear;
|
||||
}
|
||||
}
|
||||
}
|
||||
text-align: center;
|
||||
|
||||
&--with-lyrics {
|
||||
.content {
|
||||
.track-info {
|
||||
width: 30%;
|
||||
|
||||
.artwork {
|
||||
width: 100%;
|
||||
@include responsive(null, null, $bp_medium) {
|
||||
font-size: 1.4rem;
|
||||
line-height: 1.8rem;
|
||||
}
|
||||
.player {
|
||||
width: 100%;
|
||||
|
||||
.current-track {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
@include responsive($bp_medium) {
|
||||
font-size: 1rem;
|
||||
line-height: 1.4rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive($bp_medium, null, $bp_shallow) {
|
||||
.content {
|
||||
.track-info {
|
||||
.player {
|
||||
.current-track {
|
||||
padding-top: 20px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
@include responsive($bp_medium) {
|
||||
flex-flow: column;
|
||||
padding-top: 60px !important;
|
||||
padding-bottom: 40px !important;
|
||||
height: calc(100% - 80px) !important;
|
||||
|
||||
&__controls {
|
||||
padding-top: 20px;
|
||||
.control {
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
}
|
||||
.progress-wrapper {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.lyrics {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&--with-lyrics {
|
||||
.content {
|
||||
display: block;
|
||||
width: auto;
|
||||
|
||||
.track-info {
|
||||
width: auto;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
height: auto;
|
||||
padding-top: 20px;
|
||||
|
||||
.artwork {
|
||||
width: 25%;
|
||||
}
|
||||
|
||||
.player {
|
||||
padding-top: 0;
|
||||
|
||||
.current-track {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.progress-wrapper {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Shallow viewport
|
||||
@include responsive($bp_medium, null, null, $bp_shallow) {
|
||||
.content {
|
||||
.artwork {
|
||||
width: 100%;
|
||||
}
|
||||
.player {
|
||||
width: 100%;
|
||||
.track {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
&__artwork {
|
||||
width: 25%;
|
||||
}
|
||||
&__info {
|
||||
padding-top: 0;
|
||||
width: 75%;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
.playback {
|
||||
&__progress {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.lyrics {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include responsive(null, null, $bp_shallow) {
|
||||
flex-flow: column;
|
||||
padding-top: 60px !important;
|
||||
padding-bottom: 40px !important;
|
||||
height: calc(100% - 80px) !important;
|
||||
|
||||
.player {
|
||||
.track {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
&__artwork {
|
||||
width: 25%;
|
||||
}
|
||||
&__info {
|
||||
padding-top: 0;
|
||||
width: 75%;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
.playback {
|
||||
&__progress {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user