secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Responsive modal looking better

Browse Source
This commit is contained in:
James Barnsley
2020-02-27 16:59:35 +13:00
parent ef7f5e2349
commit 8371acb4a3
10 changed files with 27215 additions and 19173 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/js/components/Thumbnail.js
View File

@ -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>
);
});
});

23
src/js/views/modals/KioskMode.js
View File

@ -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>
);