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

Responsive Snapcast; Customisable scrollWheel attribute, fixes #272

Browse Source
This commit is contained in:
James Barnsley
2018-04-19 08:05:42 +12:00
parent 6035963f1f
commit 02cd964e1e
7 changed files with 25710 additions and 23742 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
mopidy_iris/static/app.css
View File

@ -4344,9 +4344,9 @@ input[type="submit"] {
.snapcast .group.list .list-item.client > .latency input {
width: 20%; }
.snapcast .group.list .list-item.client .volume-control {
display: block;
padding-top: 12px;
float: left;
display: inline-block;
vertical-align: middle;
padding-top: 4px;
width: 80%;
padding-right: 10px;
box-sizing: border-box; }
@ -4360,9 +4360,9 @@ input[type="submit"] {
.snapcast .group.list .list-item.client .volume-control.muted .slider .progress {
background: #a3a19f; }
.snapcast .group.list .list-item.client .latency-control {
display: block;
padding-top: 12px;
float: left;
display: inline-block;
vertical-align: middle;
padding-top: 4px;
width: 80%;
padding-right: 10px;
box-sizing: border-box; }
@ -4381,6 +4381,9 @@ input[type="submit"] {
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
@media (max-width: 800px) {
.snapcast .group.list .list-item {
padding-left: 0 !important;
padding-right: 0 !important; }
.snapcast .group.list .list-item.header {
display: block; }
.snapcast .group.list .list-item.header .volume,
@ -4394,7 +4397,11 @@ input[type="submit"] {
.snapcast .group.list .list-item .col::after {
content: '';
clear: both;
display: block; } }
display: block; }
.snapcast .group.list .list-item .col:not(.header) {
line-height: 45px; }
.snapcast .group.list .list-item .col.volume {
padding-bottom: 20px !important; } }
aside {
position: fixed;

49387
mopidy_iris/static/app.js
View File

File diff suppressed because it is too large Load Diff

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

2
src/js/components/LatencyControl.js
View File

@ -49,6 +49,7 @@ export default class LatencyControl extends React.Component{
}
handleWheel(e){
if (this.props.scrollWheel){
// Identify which direction we've scrolled (inverted)
// This is simplified and doesn't consider momentum as it varies wildly
@ -67,6 +68,7 @@ export default class LatencyControl extends React.Component{
this.props.onChange(value);
e.preventDefault();
}
}
render(){

1
src/js/components/PlaybackControls.js
View File

@ -118,6 +118,7 @@ class PlaybackControls extends React.Component{
<section className="volume">
<VolumeControl
scrollWheel
volume={this.props.volume}
mute={this.props.mute}
onVolumeChange={percent => this.props.mopidyActions.setVolume(percent)}

2
src/js/components/VolumeControl.js
View File

@ -26,6 +26,7 @@ export default class VolumeControl extends React.Component{
}
handleWheel(e){
if (this.props.scrollWheel){
// Identify which direction we've scrolled (inverted)
// This is simplified and doesn't consider momentum as it varies wildly
@ -44,6 +45,7 @@ export default class VolumeControl extends React.Component{
this.props.onVolumeChange(percent);
e.preventDefault();
}
}
renderMuteButton(){
if (this.props.mute){

23
src/scss/components/_snapcast.scss
View File

@ -84,9 +84,9 @@
}
.volume-control {
display: block;
padding-top: 12px;
float: left;
display: inline-block;
vertical-align: middle;
padding-top: 4px;
width: 80%;
padding-right: 10px;
box-sizing: border-box;
@ -110,9 +110,9 @@
}
.latency-control {
display: block;
padding-top: 12px;
float: left;
display: inline-block;
vertical-align: middle;
padding-top: 4px;
width: 80%;
padding-right: 10px;
box-sizing: border-box;
@ -141,6 +141,9 @@
@include responsive($bp_medium){
padding-left: 0 !important;
padding-right: 0 !important;
&.header {
display: block;
@ -156,6 +159,14 @@
width: auto !important;
padding-left: 0;
padding-right: 0;
&:not(.header){
line-height: 45px;
}
&.volume {
padding-bottom: 20px !important;
}
}
}
}