Buttons on white; Added by in mobile context, fixes #342
This commit is contained in:
James Barnsley
@ -3326,10 +3326,10 @@ select {
|
||||
text-align: center; }
|
||||
.button .icon {
|
||||
padding-right: 8px; }
|
||||
.button:not(.no-hover) {
|
||||
.button:not(.button--no-hover) {
|
||||
position: relative;
|
||||
border-radius: 3px; }
|
||||
.button:not(.no-hover):before {
|
||||
.button:not(.button--no-hover):before {
|
||||
-webkit-transition: all 0.2s ease-in-out;
|
||||
-moz-transition: all 0.2s ease-in-out;
|
||||
-o-transition: all 0.2s ease-in-out;
|
||||
@ -3349,9 +3349,9 @@ select {
|
||||
background: -moz-linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black);
|
||||
background: -o-linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black);
|
||||
background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black); }
|
||||
.notouch .button:not(.no-hover):hover {
|
||||
.notouch .button:not(.button--no-hover):hover {
|
||||
box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2); }
|
||||
.notouch .button:not(.no-hover):hover:before {
|
||||
.notouch .button:not(.button--no-hover):hover:before {
|
||||
opacity: 0.2; }
|
||||
.button:active {
|
||||
-webkit-transition: none !important;
|
||||
@ -3361,10 +3361,10 @@ select {
|
||||
background: #f2f2f2;
|
||||
transform: translate(1px, 1px);
|
||||
opacity: 0.8; }
|
||||
.light-theme .button {
|
||||
.light-theme .button--default {
|
||||
background: #181818;
|
||||
color: #FFFFFF; }
|
||||
.light-theme .button:active {
|
||||
.light-theme .button--default:active {
|
||||
background: #000000; }
|
||||
.button--small {
|
||||
padding: 6px 18px 4px; }
|
||||
@ -3376,6 +3376,9 @@ select {
|
||||
.button--primary {
|
||||
background: #08d58f;
|
||||
color: #FFFFFF; }
|
||||
.button--secondary {
|
||||
background: #32b5f2;
|
||||
color: #FFFFFF; }
|
||||
.button--white {
|
||||
color: #000000;
|
||||
background: #FFFFFF; }
|
||||
@ -3388,9 +3391,6 @@ select {
|
||||
.button--confirming, .button--destructive {
|
||||
background: #cf2d2d;
|
||||
color: #FFFFFF; }
|
||||
.button--alternative {
|
||||
background: #32b5f2;
|
||||
color: #FFFFFF; }
|
||||
.button--timing-out {
|
||||
position: relative; }
|
||||
.button--timing-out:before {
|
||||
@ -3733,6 +3733,8 @@ select {
|
||||
text-transform: capitalize; }
|
||||
.context-menu__title__deselect {
|
||||
font-size: 0.86em; }
|
||||
.context-menu__title a {
|
||||
color: inherit; }
|
||||
.context-menu__section {
|
||||
position: absolute;
|
||||
top: 20%;
|
||||
@ -4853,12 +4855,12 @@ aside {
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
font-family: "Overpass";
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: #FFFFFF;
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 12px 10px 10px;
|
||||
padding: 13px 10px 10px;
|
||||
margin: 0 18px;
|
||||
border-radius: 3px; }
|
||||
aside nav a:before {
|
||||
@ -4882,7 +4884,7 @@ aside {
|
||||
background: -o-linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black);
|
||||
background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black); }
|
||||
.light-theme aside nav a {
|
||||
color: #181818;
|
||||
color: #121212;
|
||||
font-weight: 600; }
|
||||
aside nav a .icon {
|
||||
padding-right: 8px;
|
||||
@ -6751,7 +6753,8 @@ main .track-view {
|
||||
z-index: 1; }
|
||||
.discover-view .intro h1 {
|
||||
font-size: 3rem;
|
||||
line-height: 3rem; }
|
||||
line-height: 3rem;
|
||||
padding-bottom: 10px; }
|
||||
.discover-view .intro__liner {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
@ -6760,29 +6763,27 @@ main .track-view {
|
||||
padding-bottom: 8px; }
|
||||
.light-theme .discover-view .intro__liner {
|
||||
color: #121212; }
|
||||
|
||||
.discover-view__parameters {
|
||||
.discover-view .intro__parameters {
|
||||
padding-top: 50px; }
|
||||
.discover-view__parameters::after {
|
||||
.discover-view .intro__parameters::after {
|
||||
content: '';
|
||||
clear: both;
|
||||
display: block; }
|
||||
.discover-view__parameters .seeds,
|
||||
.discover-view__parameters .tunabilities {
|
||||
.discover-view .intro__parameters .seeds,
|
||||
.discover-view .intro__parameters .tunabilities {
|
||||
float: left; }
|
||||
|
||||
.discover-view__actions {
|
||||
.discover-view .intro__actions {
|
||||
padding-top: 40px; }
|
||||
.discover-view__actions .autocomplete-field {
|
||||
.discover-view .intro__actions .autocomplete-field {
|
||||
width: 250px;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
padding: 0;
|
||||
margin-right: 1px; }
|
||||
.discover-view__actions .autocomplete-field .input {
|
||||
.discover-view .intro__actions .autocomplete-field .input {
|
||||
float: none;
|
||||
margin: 0 10px 10px 0; }
|
||||
.discover-view__actions .autocomplete-field .input input {
|
||||
.discover-view .intro__actions .autocomplete-field .input input {
|
||||
background: rgba(100, 100, 100, 0.5);
|
||||
color: #FFFFFF;
|
||||
padding: 15px 13px 10px;
|
||||
@ -6790,22 +6791,22 @@ main .track-view {
|
||||
border: 1px solid transparent;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-right-radius: 0; }
|
||||
.discover-view__actions .autocomplete-field .input input:focus, .discover-view__actions .autocomplete-field .input input:active {
|
||||
.discover-view .intro__actions .autocomplete-field .input input:focus, .discover-view .intro__actions .autocomplete-field .input input:active {
|
||||
border-color: #32b5f2; }
|
||||
.discover-view__actions .autocomplete-field .input input:not(*:root) {
|
||||
.discover-view .intro__actions .autocomplete-field .input input:not(*:root) {
|
||||
padding-top: 16px;
|
||||
padding-bottom: 11px; }
|
||||
.discover-view__actions .autocomplete-field .input:after {
|
||||
.discover-view .intro__actions .autocomplete-field .input:after {
|
||||
background: #32b5f2; }
|
||||
.discover-view__actions .autocomplete-field .results {
|
||||
.discover-view .intro__actions .autocomplete-field .results {
|
||||
top: 49px; }
|
||||
.discover-view__actions .dropdown-field .button {
|
||||
.discover-view .intro__actions .dropdown-field .button {
|
||||
background: rgba(100, 100, 100, 0.5);
|
||||
color: #FFFFFF;
|
||||
padding: 16px 20px 14px 20px;
|
||||
border-top-left-radius: 0;
|
||||
border-bottom-left-radius: 0; }
|
||||
.discover-view__actions .dropdown-field .options {
|
||||
.discover-view .intro__actions .dropdown-field .options {
|
||||
top: 50px;
|
||||
right: 20px; }
|
||||
|
||||
@ -6881,6 +6882,8 @@ main .track-view {
|
||||
@media (max-width: 800px) {
|
||||
.discover-view .intro {
|
||||
padding: 40px 20px; }
|
||||
.discover-view .intro__parameters {
|
||||
padding-top: 20px; }
|
||||
.discover-view .intro__parameters .seeds {
|
||||
padding-top: 20px;
|
||||
float: none; }
|
||||
@ -6893,6 +6896,8 @@ main .track-view {
|
||||
float: none; }
|
||||
.discover-view .intro__parameters .add .add-properties {
|
||||
margin-right: 0; }
|
||||
.discover-view .intro__actions {
|
||||
padding-top: 10px; }
|
||||
.discover-view .intro__actions .add-seed-field {
|
||||
width: 69%; }
|
||||
.discover-view .intro__actions .add-properties {
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -98,7 +98,7 @@
|
||||
|
||||
// Release details
|
||||
// These are automatically injected to built HTML
|
||||
var build = "1543999056";
|
||||
var build = "1544123755";
|
||||
var version = "3.31.2";
|
||||
|
||||
// Construct the script tag
|
||||
|
||||
@ -1,21 +1,22 @@
|
||||
|
||||
import React, { PropTypes } from 'react'
|
||||
import { hashHistory } from 'react-router'
|
||||
import Link from './Link'
|
||||
import { connect } from 'react-redux'
|
||||
import { bindActionCreators } from 'redux'
|
||||
import React, { PropTypes } from 'react';
|
||||
import { hashHistory } from 'react-router';
|
||||
import Link from './Link';
|
||||
import { connect } from 'react-redux';
|
||||
import { bindActionCreators } from 'redux';
|
||||
|
||||
import TrackList from './TrackList'
|
||||
import Icon from './Icon'
|
||||
import Thumbnail from './Thumbnail'
|
||||
import TrackList from './TrackList';
|
||||
import Icon from './Icon';
|
||||
import Thumbnail from './Thumbnail';
|
||||
import URILink from './URILink';
|
||||
|
||||
import * as helpers from '../helpers'
|
||||
import * as coreActions from '../services/core/actions'
|
||||
import * as uiActions from '../services/ui/actions'
|
||||
import * as pusherActions from '../services/pusher/actions'
|
||||
import * as mopidyActions from '../services/mopidy/actions'
|
||||
import * as lastfmActions from '../services/lastfm/actions'
|
||||
import * as spotifyActions from '../services/spotify/actions'
|
||||
import * as helpers from '../helpers';
|
||||
import * as coreActions from '../services/core/actions';
|
||||
import * as uiActions from '../services/ui/actions';
|
||||
import * as pusherActions from '../services/pusher/actions';
|
||||
import * as mopidyActions from '../services/mopidy/actions';
|
||||
import * as lastfmActions from '../services/lastfm/actions';
|
||||
import * as spotifyActions from '../services/spotify/actions';
|
||||
|
||||
class ContextMenu extends React.Component{
|
||||
|
||||
@ -315,13 +316,7 @@ class ContextMenu extends React.Component{
|
||||
this.props.uiActions.hideContextMenu()
|
||||
}
|
||||
|
||||
closeAndDeselectTracks(e){
|
||||
this.props.uiActions.hideContextMenu();
|
||||
// TODO
|
||||
}
|
||||
|
||||
renderTitle(){
|
||||
|
||||
var context = this.getContext()
|
||||
|
||||
if (context.items_count > 1){
|
||||
@ -334,6 +329,41 @@ class ContextMenu extends React.Component{
|
||||
)
|
||||
}
|
||||
|
||||
if (context.items_count == 1 && context.item !== undefined){
|
||||
if (this.props.queue_metadata["tlid_"+context.item.tlid] !== undefined){
|
||||
var metadata = this.props.queue_metadata["tlid_"+context.item.tlid];
|
||||
|
||||
if (metadata.added_from && metadata.added_by){
|
||||
var type = (metadata.added_from ? helpers.uriType(metadata.added_from) : null);
|
||||
|
||||
switch (type){
|
||||
case "discover":
|
||||
var link = <URILink type="recommendations" uri={helpers.getFromUri('seeds',metadata.added_from)}>discover</URILink>
|
||||
break;
|
||||
|
||||
case "browse":
|
||||
var link = <URILink type="browse" uri={metadata.added_from.replace("iris:browse:","")}>browse</URILink>
|
||||
break;
|
||||
|
||||
case "search":
|
||||
var link = <URILink type="search" uri={metadata.added_from.replace("iris:","")}>search</URILink>
|
||||
break;
|
||||
|
||||
default:
|
||||
var link = <URILink type={type} uri={metadata.added_from}>{type}</URILink>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="context-menu__title">
|
||||
<div className="context-menu__title__text">
|
||||
{metadata.added_by} added from {link}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (context.name == 'custom'){
|
||||
if (!this.props.menu.title){
|
||||
return null;
|
||||
@ -347,40 +377,6 @@ class ContextMenu extends React.Component{
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// Do we need titles or does it just confuse things and rip off Spotify too hard?
|
||||
return null;
|
||||
/*
|
||||
switch (context.type){
|
||||
|
||||
case 'artist':
|
||||
case 'album':
|
||||
case 'playlist':
|
||||
var style = null;
|
||||
|
||||
return (
|
||||
<div className="context-menu__title">
|
||||
<Thumbnail size="small" images={context.item ? context.item.images : null} circle={context.type == 'artist'} />
|
||||
<div className="context-menu__title__text">{context.item.name}</div>
|
||||
<div className="context-menu__title__type">
|
||||
{context.source}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
default:
|
||||
return (
|
||||
<div className="context-menu__title">
|
||||
<div className="context-menu__title__text">
|
||||
{context.items_count} {context.nice_name}{context.items_count > 1 ? 's' : null}
|
||||
</div>
|
||||
<div className="context-menu__title__type">
|
||||
{context.source}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
}*/
|
||||
}
|
||||
|
||||
setSubmenu(name){
|
||||
@ -821,6 +817,7 @@ const mapStateToProps = (state, ownProps) => {
|
||||
processes: state.ui.processes,
|
||||
current_track: state.core.current_track,
|
||||
current_tracklist: state.core.current_tracklist,
|
||||
queue_metadata: state.core.queue_metadata,
|
||||
spotify_library_playlists: state.spotify.library_playlists,
|
||||
spotify_library_playlists_loaded_all: state.spotify.library_playlists_loaded_all,
|
||||
mopidy_library_playlists: state.mopidy.library_playlists,
|
||||
|
||||
@ -137,7 +137,7 @@ class Playlist extends React.Component{
|
||||
return (
|
||||
<div className="actions">
|
||||
<button className="button button--primary" onClick={ e => this.play() }>Play</button>
|
||||
<Link className="button button--secondary" to={global.baseURL+'playlist/'+encodeURIComponent(this.props.params.uri)+'/edit'}>Edit</Link>
|
||||
<Link className="button" to={global.baseURL+'playlist/'+encodeURIComponent(this.props.params.uri)+'/edit'}>Edit</Link>
|
||||
<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
|
||||
</div>
|
||||
)
|
||||
@ -147,7 +147,7 @@ class Playlist extends React.Component{
|
||||
return (
|
||||
<div className="actions">
|
||||
<button className="button button--primary" onClick={ e => this.play() }>Play</button>
|
||||
<Link className="button button--secondary" to={global.baseURL+'playlist/'+encodeURIComponent(this.props.params.uri)+'/edit'}>Edit</Link>
|
||||
<Link className="button" to={global.baseURL+'playlist/'+encodeURIComponent(this.props.params.uri)+'/edit'}>Edit</Link>
|
||||
<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
|
||||
</div>
|
||||
)
|
||||
@ -155,7 +155,7 @@ class Playlist extends React.Component{
|
||||
return (
|
||||
<div className="actions">
|
||||
<button className="button button--primary" onClick={ e => this.play() }>Play</button>
|
||||
<FollowButton className="button--secondary" uri={this.props.params.uri} addText="Add to library" removeText="Remove from library" is_following={this.inLibrary()} />
|
||||
<FollowButton uri={this.props.params.uri} addText="Add to library" removeText="Remove from library" is_following={this.inLibrary()} />
|
||||
<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -421,7 +421,7 @@ class Settings extends React.Component {
|
||||
</div>
|
||||
|
||||
<div className="field">
|
||||
{this.props.pusher.version.upgrade_available ? <button className="button button--alternative" onClick={e => this.props.pusherActions.upgrade()}>Upgrade to { this.props.pusher.version.latest }</button> : null }
|
||||
{this.props.pusher.version.upgrade_available ? <button className="button button--secondary" onClick={e => this.props.pusherActions.upgrade()}>Upgrade to { this.props.pusher.version.latest }</button> : null }
|
||||
<button className={"button button--destructive"+(this.props.mopidy.restarting ? ' button--working' : '')} onClick={e => this.props.pusherActions.restart()}>Restart server</button>
|
||||
<ConfirmationButton className="button--destructive" content="Reset all settings" confirmingContent="Are you sure?" onConfirm={() => this.resetAllSettings()} />
|
||||
</div>
|
||||
|
||||
@ -105,7 +105,7 @@ class Discover extends React.Component{
|
||||
}
|
||||
},
|
||||
popularity: {
|
||||
enabled: true,
|
||||
enabled: false,
|
||||
min: 0,
|
||||
max: 100,
|
||||
value: {
|
||||
@ -479,7 +479,7 @@ class Discover extends React.Component{
|
||||
<br />
|
||||
<section>
|
||||
<h4>Albums</h4>
|
||||
<AlbumGrid className="mini" albums={albums} />
|
||||
<AlbumGrid className="grid--mini" albums={albums} />
|
||||
</section>
|
||||
</div>
|
||||
|
||||
|
||||
@ -174,10 +174,10 @@ class LibraryBrowse extends React.Component{
|
||||
options={view_options}
|
||||
handleChange={value => {this.props.uiActions.set({ library_directory_view: value }); this.props.uiActions.hideContextMenu()}}
|
||||
/>
|
||||
{tracks ? <a className="button no-hover" onClick={e => {this.props.uiActions.hideContextMenu(); this.playAll(e, tracks)}}>
|
||||
{tracks ? <a className="button button--no-hover" onClick={e => {this.props.uiActions.hideContextMenu(); this.playAll(e, tracks)}}>
|
||||
<Icon name="play_circle_filled" />Play all
|
||||
</a> : null }
|
||||
<a className="button no-hover" onClick={e => {this.props.uiActions.hideContextMenu(); this.goBack(e)}}>
|
||||
<a className="button button--no-hover" onClick={e => {this.props.uiActions.hideContextMenu(); this.goBack(e)}}>
|
||||
<Icon name="keyboard_backspace" />Back
|
||||
</a>
|
||||
</span>
|
||||
|
||||
@ -242,7 +242,7 @@ class LibraryPlaylists extends React.Component{
|
||||
options={source_options}
|
||||
handleChange={value => {this.props.uiActions.set({ library_playlists_source: value}); this.props.uiActions.hideContextMenu() }}
|
||||
/>
|
||||
<Link className="button no-hover" to={global.baseURL+'playlist/create'}>
|
||||
<Link className="button button--no-hover" to={global.baseURL+'playlist/create'}>
|
||||
<Icon name="add_box" />New
|
||||
</Link>
|
||||
</span>
|
||||
|
||||
@ -191,6 +191,10 @@
|
||||
&__deselect {
|
||||
font-size: 0.86em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&__section {
|
||||
|
||||
@ -52,17 +52,17 @@ aside{
|
||||
a {
|
||||
@include gradient_overlay(3px);
|
||||
font-family: "Overpass";
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
font-size: 15px;
|
||||
color: colour(white);
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
padding: 12px 10px 10px;
|
||||
padding: 13px 10px 10px;
|
||||
margin: 0 18px;
|
||||
border-radius: 3px;
|
||||
|
||||
.light-theme & {
|
||||
color: colour(dark_grey);
|
||||
color: colour(darkest_grey);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
|
||||
@ -211,11 +211,11 @@ select {
|
||||
padding-right: 8px;
|
||||
}
|
||||
|
||||
&:not(.no-hover){
|
||||
&:not(.button--no-hover){
|
||||
@include gradient_overlay(3px, 0.05);
|
||||
}
|
||||
|
||||
.notouch &:not(.no-hover):hover {
|
||||
.notouch &:not(.button--no-hover):hover {
|
||||
box-shadow: 1px 2px 6px rgba(0,0,0,0.2);
|
||||
|
||||
&:before {
|
||||
@ -230,7 +230,7 @@ select {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.light-theme & {
|
||||
.light-theme &--default {
|
||||
background: colour(dark_grey);
|
||||
color: colour(white);
|
||||
|
||||
@ -257,6 +257,11 @@ select {
|
||||
color: colour(white);
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
background: colour(blue);
|
||||
color: colour(white);
|
||||
}
|
||||
|
||||
&--white {
|
||||
color: colour(black);
|
||||
background: colour(white);
|
||||
@ -278,11 +283,6 @@ select {
|
||||
color: colour(white);
|
||||
}
|
||||
|
||||
&--alternative {
|
||||
background: colour(blue);
|
||||
color: colour(white);
|
||||
}
|
||||
|
||||
&--timing-out {
|
||||
position: relative;
|
||||
|
||||
|
||||
@ -9,6 +9,7 @@
|
||||
h1 {
|
||||
font-size: 3rem;
|
||||
line-height: 3rem;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
&__liner {
|
||||
@ -24,7 +25,6 @@
|
||||
color: colour(darkest_grey);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__parameters {
|
||||
@include clearfix();
|
||||
@ -95,6 +95,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.seeds {
|
||||
.seed {
|
||||
@ -202,6 +203,7 @@
|
||||
padding: 40px 20px;
|
||||
|
||||
&__parameters {
|
||||
padding-top: 20px;
|
||||
|
||||
.seeds {
|
||||
padding-top: 20px;
|
||||
@ -229,6 +231,8 @@
|
||||
}
|
||||
|
||||
&__actions {
|
||||
padding-top: 10px;
|
||||
|
||||
.add-seed-field {
|
||||
width: 69%;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user