+ { this.renderSearch() }
{ this.state.searching && !this.state.loading ? this.renderPlaylist() : null }
@@ -83,7 +78,7 @@ class App extends Component {
{ this.state.loading ?
- { this.state.modalOpen ? this.renderModal() : null }
+ { this.state.modalOpen ? this.renderModal() : }
{ this.state.alertOpen ? this.renderAlert() : null }
@@ -92,24 +87,16 @@ class App extends Component {
;
}
- renderTop() {
- return
+ return
;
+
;
}
renderPlaylist() {
- return
-
+
-
+
;
}
diff --git a/app/js/components/Modal.js b/app/js/components/Modal.js
index 68c8a05..434dc9d 100644
--- a/app/js/components/Modal.js
+++ b/app/js/components/Modal.js
@@ -15,7 +15,6 @@ class Modal extends Component {
constructor(props) {
super(props);
this.state = {
- inputError: false,
playlistName: '',
playlistPublic: true
};
@@ -32,28 +31,17 @@ class Modal extends Component {
_savePlaylist() {
const playlistName = ReactDOM.findDOMNode(this.refs.playlistName).value;
- close();
- save(
- UserStore.getUser()._id,
- playlistName,
- this.state.playlistPublic, PlaylistStore.getTracks()
- );
- }
-
- _validateForm() {
- const playlistName = ReactDOM.findDOMNode(this.refs.playlistName).value;
- let isValid = playlistName.length > 3;
- this.setState({
- inputError: !isValid
- });
-
- return isValid;
+ if (playlistName.length > 3) {
+ close();
+ save(
+ UserStore.getUser()._id,
+ playlistName,
+ this.state.playlistPublic, PlaylistStore.getTracks()
+ );
+ }
}
_handleSave() {
- if (!this._validateForm()) {
- return;
- }
if (this.props.token &&
this.props.user &&
Number(localStorage.magic_token_expires) > Date.now())
@@ -74,22 +62,19 @@ class Modal extends Component {
}
render() {
- let inputPlaceholder = this.state.inputError ? 'Please enter a valid name!' : 'Name';
- let inputClass = this.state.inputError ? 'playlist-name error' : 'playlist-name';
return Developed by @magicplaylistco -
Created using the API of 
+ target='_blank'>
-
- 
-
-
-
+
- Playlist Status
+
Save playlist on Spotify
+
+
-
;
diff --git a/app/js/components/Player.js b/app/js/components/Player.js
index eb192a2..73dbb34 100644
--- a/app/js/components/Player.js
+++ b/app/js/components/Player.js
@@ -73,13 +73,13 @@ class Track extends Component {
render() {
return Playlist Status
-
{ !this.state.isPlaying && !this.state.isLoading ?
- 
: null
+ : null
}
{ this.state.isPlaying && !this.state.isLoading ?
- 
: null
+ : null
}
{ this.state.isLoading ?
- 
: null
+ : null
}
;
diff --git a/app/js/components/Playlist.js b/app/js/components/Playlist.js
index 5fb5f70..724c569 100644
--- a/app/js/components/Playlist.js
+++ b/app/js/components/Playlist.js
@@ -37,28 +37,26 @@ class Playlist extends Component {
index={i}
ptag={this._add.bind(this)}
stopAll={this._stopAll.bind(this)}
- country={this.props.country}
/>;
});
return : null
+ : null
}
{ this.state.isPlaying && !this.state.isLoading ?
- : null
+ : null
}
{ this.state.isLoading ?
- : null
+ : null
}
{ !this.props.tracks.length ?
-
- Hey! The track doesn't exist! :(
: null
+ Hey! The track doesn't exist! :(
: null } { this.props.mainTrack ? -
-
+
: null
+ , {this.props.mainTrack.artists.first().name}
+ : null
}
{ this.props.tracks.length ?
- : null
+ : null
}
{this.props.mainTrack.name} -
, {this.props.mainTrack.artists.first().name} --
+
-
{track.name}, {track.artists.first().name}--
+ -+--; } } diff --git a/app/js/core/Spotify.js b/app/js/core/Spotify.js index af97f4f..d2169bc 100644 --- a/app/js/core/Spotify.js +++ b/app/js/core/Spotify.js @@ -8,7 +8,7 @@ let client = Client.instance; client.settings = { clientId: '', secretId: '', - scopes: 'playlist-modify-public playlist-modify-private', + scopes: 'playlist-modify-public user-read-private playlist-modify-private', redirect_uri: 'http://localhost:3000/app/login/index.html' }; diff --git a/app/styles/_fontawesome-icons-vars.scss b/app/styles/_fontawesome-icons-vars.scss new file mode 100644 index 0000000..c10cd47 --- /dev/null +++ b/app/styles/_fontawesome-icons-vars.scss @@ -0,0 +1,688 @@ +// Variables +// -------------------------- + +$fa-font-path: "../fonts" !default; +$fa-font-size-base: 14px !default; +$fa-line-height-base: 1 !default; +//$fa-font-path: "//netdna.bootstrapcdn.com/font-awesome/4.4.0/fonts" !default; // for referencing Bootstrap CDN font files directly +$fa-css-prefix: fa !default; +$fa-version: "4.4.0" !default; +$fa-border-color: #eee !default; +$fa-inverse: #fff !default; +$fa-li-width: (30em / 14) !default; + +$fa-var-500px: "\f26e"; +$fa-var-adjust: "\f042"; +$fa-var-adn: "\f170"; +$fa-var-align-center: "\f037"; +$fa-var-align-justify: "\f039"; +$fa-var-align-left: "\f036"; +$fa-var-align-right: "\f038"; +$fa-var-amazon: "\f270"; +$fa-var-ambulance: "\f0f9"; +$fa-var-anchor: "\f13d"; +$fa-var-android: "\f17b"; +$fa-var-angellist: "\f209"; +$fa-var-angle-double-down: "\f103"; +$fa-var-angle-double-left: "\f100"; +$fa-var-angle-double-right: "\f101"; +$fa-var-angle-double-up: "\f102"; +$fa-var-angle-down: "\f107"; +$fa-var-angle-left: "\f104"; +$fa-var-angle-right: "\f105"; +$fa-var-angle-up: "\f106"; +$fa-var-apple: "\f179"; +$fa-var-archive: "\f187"; +$fa-var-area-chart: "\f1fe"; +$fa-var-arrow-circle-down: "\f0ab"; +$fa-var-arrow-circle-left: "\f0a8"; +$fa-var-arrow-circle-o-down: "\f01a"; +$fa-var-arrow-circle-o-left: "\f190"; +$fa-var-arrow-circle-o-right: "\f18e"; +$fa-var-arrow-circle-o-up: "\f01b"; +$fa-var-arrow-circle-right: "\f0a9"; +$fa-var-arrow-circle-up: "\f0aa"; +$fa-var-arrow-down: "\f063"; +$fa-var-arrow-left: "\f060"; +$fa-var-arrow-right: "\f061"; +$fa-var-arrow-up: "\f062"; +$fa-var-arrows: "\f047"; +$fa-var-arrows-alt: "\f0b2"; +$fa-var-arrows-h: "\f07e"; +$fa-var-arrows-v: "\f07d"; +$fa-var-asterisk: "\f069"; +$fa-var-at: "\f1fa"; +$fa-var-automobile: "\f1b9"; +$fa-var-backward: "\f04a"; +$fa-var-balance-scale: "\f24e"; +$fa-var-ban: "\f05e"; +$fa-var-bank: "\f19c"; +$fa-var-bar-chart: "\f080"; +$fa-var-bar-chart-o: "\f080"; +$fa-var-barcode: "\f02a"; +$fa-var-bars: "\f0c9"; +$fa-var-battery-0: "\f244"; +$fa-var-battery-1: "\f243"; +$fa-var-battery-2: "\f242"; +$fa-var-battery-3: "\f241"; +$fa-var-battery-4: "\f240"; +$fa-var-battery-empty: "\f244"; +$fa-var-battery-full: "\f240"; +$fa-var-battery-half: "\f242"; +$fa-var-battery-quarter: "\f243"; +$fa-var-battery-three-quarters: "\f241"; +$fa-var-bed: "\f236"; +$fa-var-beer: "\f0fc"; +$fa-var-behance: "\f1b4"; +$fa-var-behance-square: "\f1b5"; +$fa-var-bell: "\f0f3"; +$fa-var-bell-o: "\f0a2"; +$fa-var-bell-slash: "\f1f6"; +$fa-var-bell-slash-o: "\f1f7"; +$fa-var-bicycle: "\f206"; +$fa-var-binoculars: "\f1e5"; +$fa-var-birthday-cake: "\f1fd"; +$fa-var-bitbucket: "\f171"; +$fa-var-bitbucket-square: "\f172"; +$fa-var-bitcoin: "\f15a"; +$fa-var-black-tie: "\f27e"; +$fa-var-bold: "\f032"; +$fa-var-bolt: "\f0e7"; +$fa-var-bomb: "\f1e2"; +$fa-var-book: "\f02d"; +$fa-var-bookmark: "\f02e"; +$fa-var-bookmark-o: "\f097"; +$fa-var-briefcase: "\f0b1"; +$fa-var-btc: "\f15a"; +$fa-var-bug: "\f188"; +$fa-var-building: "\f1ad"; +$fa-var-building-o: "\f0f7"; +$fa-var-bullhorn: "\f0a1"; +$fa-var-bullseye: "\f140"; +$fa-var-bus: "\f207"; +$fa-var-buysellads: "\f20d"; +$fa-var-cab: "\f1ba"; +$fa-var-calculator: "\f1ec"; +$fa-var-calendar: "\f073"; +$fa-var-calendar-check-o: "\f274"; +$fa-var-calendar-minus-o: "\f272"; +$fa-var-calendar-o: "\f133"; +$fa-var-calendar-plus-o: "\f271"; +$fa-var-calendar-times-o: "\f273"; +$fa-var-camera: "\f030"; +$fa-var-camera-retro: "\f083"; +$fa-var-car: "\f1b9"; +$fa-var-caret-down: "\f0d7"; +$fa-var-caret-left: "\f0d9"; +$fa-var-caret-right: "\f0da"; +$fa-var-caret-square-o-down: "\f150"; +$fa-var-caret-square-o-left: "\f191"; +$fa-var-caret-square-o-right: "\f152"; +$fa-var-caret-square-o-up: "\f151"; +$fa-var-caret-up: "\f0d8"; +$fa-var-cart-arrow-down: "\f218"; +$fa-var-cart-plus: "\f217"; +$fa-var-cc: "\f20a"; +$fa-var-cc-amex: "\f1f3"; +$fa-var-cc-diners-club: "\f24c"; +$fa-var-cc-discover: "\f1f2"; +$fa-var-cc-jcb: "\f24b"; +$fa-var-cc-mastercard: "\f1f1"; +$fa-var-cc-paypal: "\f1f4"; +$fa-var-cc-stripe: "\f1f5"; +$fa-var-cc-visa: "\f1f0"; +$fa-var-certificate: "\f0a3"; +$fa-var-chain: "\f0c1"; +$fa-var-chain-broken: "\f127"; +$fa-var-check: "\f00c"; +$fa-var-check-circle: "\f058"; +$fa-var-check-circle-o: "\f05d"; +$fa-var-check-square: "\f14a"; +$fa-var-check-square-o: "\f046"; +$fa-var-chevron-circle-down: "\f13a"; +$fa-var-chevron-circle-left: "\f137"; +$fa-var-chevron-circle-right: "\f138"; +$fa-var-chevron-circle-up: "\f139"; +$fa-var-chevron-down: "\f078"; +$fa-var-chevron-left: "\f053"; +$fa-var-chevron-right: "\f054"; +$fa-var-chevron-up: "\f077"; +$fa-var-child: "\f1ae"; +$fa-var-chrome: "\f268"; +$fa-var-circle: "\f111"; +$fa-var-circle-o: "\f10c"; +$fa-var-circle-o-notch: "\f1ce"; +$fa-var-circle-thin: "\f1db"; +$fa-var-clipboard: "\f0ea"; +$fa-var-clock-o: "\f017"; +$fa-var-clone: "\f24d"; +$fa-var-close: "\f00d"; +$fa-var-cloud: "\f0c2"; +$fa-var-cloud-download: "\f0ed"; +$fa-var-cloud-upload: "\f0ee"; +$fa-var-cny: "\f157"; +$fa-var-code: "\f121"; +$fa-var-code-fork: "\f126"; +$fa-var-codepen: "\f1cb"; +$fa-var-coffee: "\f0f4"; +$fa-var-cog: "\f013"; +$fa-var-cogs: "\f085"; +$fa-var-columns: "\f0db"; +$fa-var-comment: "\f075"; +$fa-var-comment-o: "\f0e5"; +$fa-var-commenting: "\f27a"; +$fa-var-commenting-o: "\f27b"; +$fa-var-comments: "\f086"; +$fa-var-comments-o: "\f0e6"; +$fa-var-compass: "\f14e"; +$fa-var-compress: "\f066"; +$fa-var-connectdevelop: "\f20e"; +$fa-var-contao: "\f26d"; +$fa-var-copy: "\f0c5"; +$fa-var-copyright: "\f1f9"; +$fa-var-creative-commons: "\f25e"; +$fa-var-credit-card: "\f09d"; +$fa-var-crop: "\f125"; +$fa-var-crosshairs: "\f05b"; +$fa-var-css3: "\f13c"; +$fa-var-cube: "\f1b2"; +$fa-var-cubes: "\f1b3"; +$fa-var-cut: "\f0c4"; +$fa-var-cutlery: "\f0f5"; +$fa-var-dashboard: "\f0e4"; +$fa-var-dashcube: "\f210"; +$fa-var-database: "\f1c0"; +$fa-var-dedent: "\f03b"; +$fa-var-delicious: "\f1a5"; +$fa-var-desktop: "\f108"; +$fa-var-deviantart: "\f1bd"; +$fa-var-diamond: "\f219"; +$fa-var-digg: "\f1a6"; +$fa-var-dollar: "\f155"; +$fa-var-dot-circle-o: "\f192"; +$fa-var-download: "\f019"; +$fa-var-dribbble: "\f17d"; +$fa-var-dropbox: "\f16b"; +$fa-var-drupal: "\f1a9"; +$fa-var-edit: "\f044"; +$fa-var-eject: "\f052"; +$fa-var-ellipsis-h: "\f141"; +$fa-var-ellipsis-v: "\f142"; +$fa-var-empire: "\f1d1"; +$fa-var-envelope: "\f0e0"; +$fa-var-envelope-o: "\f003"; +$fa-var-envelope-square: "\f199"; +$fa-var-eraser: "\f12d"; +$fa-var-eur: "\f153"; +$fa-var-euro: "\f153"; +$fa-var-exchange: "\f0ec"; +$fa-var-exclamation: "\f12a"; +$fa-var-exclamation-circle: "\f06a"; +$fa-var-exclamation-triangle: "\f071"; +$fa-var-expand: "\f065"; +$fa-var-expeditedssl: "\f23e"; +$fa-var-external-link: "\f08e"; +$fa-var-external-link-square: "\f14c"; +$fa-var-eye: "\f06e"; +$fa-var-eye-slash: "\f070"; +$fa-var-eyedropper: "\f1fb"; +$fa-var-facebook: "\f09a"; +$fa-var-facebook-f: "\f09a"; +$fa-var-facebook-official: "\f230"; +$fa-var-facebook-square: "\f082"; +$fa-var-fast-backward: "\f049"; +$fa-var-fast-forward: "\f050"; +$fa-var-fax: "\f1ac"; +$fa-var-feed: "\f09e"; +$fa-var-female: "\f182"; +$fa-var-fighter-jet: "\f0fb"; +$fa-var-file: "\f15b"; +$fa-var-file-archive-o: "\f1c6"; +$fa-var-file-audio-o: "\f1c7"; +$fa-var-file-code-o: "\f1c9"; +$fa-var-file-excel-o: "\f1c3"; +$fa-var-file-image-o: "\f1c5"; +$fa-var-file-movie-o: "\f1c8"; +$fa-var-file-o: "\f016"; +$fa-var-file-pdf-o: "\f1c1"; +$fa-var-file-photo-o: "\f1c5"; +$fa-var-file-picture-o: "\f1c5"; +$fa-var-file-powerpoint-o: "\f1c4"; +$fa-var-file-sound-o: "\f1c7"; +$fa-var-file-text: "\f15c"; +$fa-var-file-text-o: "\f0f6"; +$fa-var-file-video-o: "\f1c8"; +$fa-var-file-word-o: "\f1c2"; +$fa-var-file-zip-o: "\f1c6"; +$fa-var-files-o: "\f0c5"; +$fa-var-film: "\f008"; +$fa-var-filter: "\f0b0"; +$fa-var-fire: "\f06d"; +$fa-var-fire-extinguisher: "\f134"; +$fa-var-firefox: "\f269"; +$fa-var-flag: "\f024"; +$fa-var-flag-checkered: "\f11e"; +$fa-var-flag-o: "\f11d"; +$fa-var-flash: "\f0e7"; +$fa-var-flask: "\f0c3"; +$fa-var-flickr: "\f16e"; +$fa-var-floppy-o: "\f0c7"; +$fa-var-folder: "\f07b"; +$fa-var-folder-o: "\f114"; +$fa-var-folder-open: "\f07c"; +$fa-var-folder-open-o: "\f115"; +$fa-var-font: "\f031"; +$fa-var-fonticons: "\f280"; +$fa-var-forumbee: "\f211"; +$fa-var-forward: "\f04e"; +$fa-var-foursquare: "\f180"; +$fa-var-frown-o: "\f119"; +$fa-var-futbol-o: "\f1e3"; +$fa-var-gamepad: "\f11b"; +$fa-var-gavel: "\f0e3"; +$fa-var-gbp: "\f154"; +$fa-var-ge: "\f1d1"; +$fa-var-gear: "\f013"; +$fa-var-gears: "\f085"; +$fa-var-genderless: "\f22d"; +$fa-var-get-pocket: "\f265"; +$fa-var-gg: "\f260"; +$fa-var-gg-circle: "\f261"; +$fa-var-gift: "\f06b"; +$fa-var-git: "\f1d3"; +$fa-var-git-square: "\f1d2"; +$fa-var-github: "\f09b"; +$fa-var-github-alt: "\f113"; +$fa-var-github-square: "\f092"; +$fa-var-gittip: "\f184"; +$fa-var-glass: "\f000"; +$fa-var-globe: "\f0ac"; +$fa-var-google: "\f1a0"; +$fa-var-google-plus: "\f0d5"; +$fa-var-google-plus-square: "\f0d4"; +$fa-var-google-wallet: "\f1ee"; +$fa-var-graduation-cap: "\f19d"; +$fa-var-gratipay: "\f184"; +$fa-var-group: "\f0c0"; +$fa-var-h-square: "\f0fd"; +$fa-var-hacker-news: "\f1d4"; +$fa-var-hand-grab-o: "\f255"; +$fa-var-hand-lizard-o: "\f258"; +$fa-var-hand-o-down: "\f0a7"; +$fa-var-hand-o-left: "\f0a5"; +$fa-var-hand-o-right: "\f0a4"; +$fa-var-hand-o-up: "\f0a6"; +$fa-var-hand-paper-o: "\f256"; +$fa-var-hand-peace-o: "\f25b"; +$fa-var-hand-pointer-o: "\f25a"; +$fa-var-hand-rock-o: "\f255"; +$fa-var-hand-scissors-o: "\f257"; +$fa-var-hand-spock-o: "\f259"; +$fa-var-hand-stop-o: "\f256"; +$fa-var-hdd-o: "\f0a0"; +$fa-var-header: "\f1dc"; +$fa-var-headphones: "\f025"; +$fa-var-heart: "\f004"; +$fa-var-heart-o: "\f08a"; +$fa-var-heartbeat: "\f21e"; +$fa-var-history: "\f1da"; +$fa-var-home: "\f015"; +$fa-var-hospital-o: "\f0f8"; +$fa-var-hotel: "\f236"; +$fa-var-hourglass: "\f254"; +$fa-var-hourglass-1: "\f251"; +$fa-var-hourglass-2: "\f252"; +$fa-var-hourglass-3: "\f253"; +$fa-var-hourglass-end: "\f253"; +$fa-var-hourglass-half: "\f252"; +$fa-var-hourglass-o: "\f250"; +$fa-var-hourglass-start: "\f251"; +$fa-var-houzz: "\f27c"; +$fa-var-html5: "\f13b"; +$fa-var-i-cursor: "\f246"; +$fa-var-ils: "\f20b"; +$fa-var-image: "\f03e"; +$fa-var-inbox: "\f01c"; +$fa-var-indent: "\f03c"; +$fa-var-industry: "\f275"; +$fa-var-info: "\f129"; +$fa-var-info-circle: "\f05a"; +$fa-var-inr: "\f156"; +$fa-var-instagram: "\f16d"; +$fa-var-institution: "\f19c"; +$fa-var-internet-explorer: "\f26b"; +$fa-var-intersex: "\f224"; +$fa-var-ioxhost: "\f208"; +$fa-var-italic: "\f033"; +$fa-var-joomla: "\f1aa"; +$fa-var-jpy: "\f157"; +$fa-var-jsfiddle: "\f1cc"; +$fa-var-key: "\f084"; +$fa-var-keyboard-o: "\f11c"; +$fa-var-krw: "\f159"; +$fa-var-language: "\f1ab"; +$fa-var-laptop: "\f109"; +$fa-var-lastfm: "\f202"; +$fa-var-lastfm-square: "\f203"; +$fa-var-leaf: "\f06c"; +$fa-var-leanpub: "\f212"; +$fa-var-legal: "\f0e3"; +$fa-var-lemon-o: "\f094"; +$fa-var-level-down: "\f149"; +$fa-var-level-up: "\f148"; +$fa-var-life-bouy: "\f1cd"; +$fa-var-life-buoy: "\f1cd"; +$fa-var-life-ring: "\f1cd"; +$fa-var-life-saver: "\f1cd"; +$fa-var-lightbulb-o: "\f0eb"; +$fa-var-line-chart: "\f201"; +$fa-var-link: "\f0c1"; +$fa-var-linkedin: "\f0e1"; +$fa-var-linkedin-square: "\f08c"; +$fa-var-linux: "\f17c"; +$fa-var-list: "\f03a"; +$fa-var-list-alt: "\f022"; +$fa-var-list-ol: "\f0cb"; +$fa-var-list-ul: "\f0ca"; +$fa-var-location-arrow: "\f124"; +$fa-var-lock: "\f023"; +$fa-var-long-arrow-down: "\f175"; +$fa-var-long-arrow-left: "\f177"; +$fa-var-long-arrow-right: "\f178"; +$fa-var-long-arrow-up: "\f176"; +$fa-var-magic: "\f0d0"; +$fa-var-magnet: "\f076"; +$fa-var-mail-forward: "\f064"; +$fa-var-mail-reply: "\f112"; +$fa-var-mail-reply-all: "\f122"; +$fa-var-male: "\f183"; +$fa-var-map: "\f279"; +$fa-var-map-marker: "\f041"; +$fa-var-map-o: "\f278"; +$fa-var-map-pin: "\f276"; +$fa-var-map-signs: "\f277"; +$fa-var-mars: "\f222"; +$fa-var-mars-double: "\f227"; +$fa-var-mars-stroke: "\f229"; +$fa-var-mars-stroke-h: "\f22b"; +$fa-var-mars-stroke-v: "\f22a"; +$fa-var-maxcdn: "\f136"; +$fa-var-meanpath: "\f20c"; +$fa-var-medium: "\f23a"; +$fa-var-medkit: "\f0fa"; +$fa-var-meh-o: "\f11a"; +$fa-var-mercury: "\f223"; +$fa-var-microphone: "\f130"; +$fa-var-microphone-slash: "\f131"; +$fa-var-minus: "\f068"; +$fa-var-minus-circle: "\f056"; +$fa-var-minus-square: "\f146"; +$fa-var-minus-square-o: "\f147"; +$fa-var-mobile: "\f10b"; +$fa-var-mobile-phone: "\f10b"; +$fa-var-money: "\f0d6"; +$fa-var-moon-o: "\f186"; +$fa-var-mortar-board: "\f19d"; +$fa-var-motorcycle: "\f21c"; +$fa-var-mouse-pointer: "\f245"; +$fa-var-music: "\f001"; +$fa-var-navicon: "\f0c9"; +$fa-var-neuter: "\f22c"; +$fa-var-newspaper-o: "\f1ea"; +$fa-var-object-group: "\f247"; +$fa-var-object-ungroup: "\f248"; +$fa-var-odnoklassniki: "\f263"; +$fa-var-odnoklassniki-square: "\f264"; +$fa-var-opencart: "\f23d"; +$fa-var-openid: "\f19b"; +$fa-var-opera: "\f26a"; +$fa-var-optin-monster: "\f23c"; +$fa-var-outdent: "\f03b"; +$fa-var-pagelines: "\f18c"; +$fa-var-paint-brush: "\f1fc"; +$fa-var-paper-plane: "\f1d8"; +$fa-var-paper-plane-o: "\f1d9"; +$fa-var-paperclip: "\f0c6"; +$fa-var-paragraph: "\f1dd"; +$fa-var-paste: "\f0ea"; +$fa-var-pause: "\f04c"; +$fa-var-paw: "\f1b0"; +$fa-var-paypal: "\f1ed"; +$fa-var-pencil: "\f040"; +$fa-var-pencil-square: "\f14b"; +$fa-var-pencil-square-o: "\f044"; +$fa-var-phone: "\f095"; +$fa-var-phone-square: "\f098"; +$fa-var-photo: "\f03e"; +$fa-var-picture-o: "\f03e"; +$fa-var-pie-chart: "\f200"; +$fa-var-pied-piper: "\f1a7"; +$fa-var-pied-piper-alt: "\f1a8"; +$fa-var-pinterest: "\f0d2"; +$fa-var-pinterest-p: "\f231"; +$fa-var-pinterest-square: "\f0d3"; +$fa-var-plane: "\f072"; +$fa-var-play: "\f04b"; +$fa-var-play-circle: "\f144"; +$fa-var-play-circle-o: "\f01d"; +$fa-var-plug: "\f1e6"; +$fa-var-plus: "\f067"; +$fa-var-plus-circle: "\f055"; +$fa-var-plus-square: "\f0fe"; +$fa-var-plus-square-o: "\f196"; +$fa-var-power-off: "\f011"; +$fa-var-print: "\f02f"; +$fa-var-puzzle-piece: "\f12e"; +$fa-var-qq: "\f1d6"; +$fa-var-qrcode: "\f029"; +$fa-var-question: "\f128"; +$fa-var-question-circle: "\f059"; +$fa-var-quote-left: "\f10d"; +$fa-var-quote-right: "\f10e"; +$fa-var-ra: "\f1d0"; +$fa-var-random: "\f074"; +$fa-var-rebel: "\f1d0"; +$fa-var-recycle: "\f1b8"; +$fa-var-reddit: "\f1a1"; +$fa-var-reddit-square: "\f1a2"; +$fa-var-refresh: "\f021"; +$fa-var-registered: "\f25d"; +$fa-var-remove: "\f00d"; +$fa-var-renren: "\f18b"; +$fa-var-reorder: "\f0c9"; +$fa-var-repeat: "\f01e"; +$fa-var-reply: "\f112"; +$fa-var-reply-all: "\f122"; +$fa-var-retweet: "\f079"; +$fa-var-rmb: "\f157"; +$fa-var-road: "\f018"; +$fa-var-rocket: "\f135"; +$fa-var-rotate-left: "\f0e2"; +$fa-var-rotate-right: "\f01e"; +$fa-var-rouble: "\f158"; +$fa-var-rss: "\f09e"; +$fa-var-rss-square: "\f143"; +$fa-var-rub: "\f158"; +$fa-var-ruble: "\f158"; +$fa-var-rupee: "\f156"; +$fa-var-safari: "\f267"; +$fa-var-save: "\f0c7"; +$fa-var-scissors: "\f0c4"; +$fa-var-search: "\f002"; +$fa-var-search-minus: "\f010"; +$fa-var-search-plus: "\f00e"; +$fa-var-sellsy: "\f213"; +$fa-var-send: "\f1d8"; +$fa-var-send-o: "\f1d9"; +$fa-var-server: "\f233"; +$fa-var-share: "\f064"; +$fa-var-share-alt: "\f1e0"; +$fa-var-share-alt-square: "\f1e1"; +$fa-var-share-square: "\f14d"; +$fa-var-share-square-o: "\f045"; +$fa-var-shekel: "\f20b"; +$fa-var-sheqel: "\f20b"; +$fa-var-shield: "\f132"; +$fa-var-ship: "\f21a"; +$fa-var-shirtsinbulk: "\f214"; +$fa-var-shopping-cart: "\f07a"; +$fa-var-sign-in: "\f090"; +$fa-var-sign-out: "\f08b"; +$fa-var-signal: "\f012"; +$fa-var-simplybuilt: "\f215"; +$fa-var-sitemap: "\f0e8"; +$fa-var-skyatlas: "\f216"; +$fa-var-skype: "\f17e"; +$fa-var-slack: "\f198"; +$fa-var-sliders: "\f1de"; +$fa-var-slideshare: "\f1e7"; +$fa-var-smile-o: "\f118"; +$fa-var-soccer-ball-o: "\f1e3"; +$fa-var-sort: "\f0dc"; +$fa-var-sort-alpha-asc: "\f15d"; +$fa-var-sort-alpha-desc: "\f15e"; +$fa-var-sort-amount-asc: "\f160"; +$fa-var-sort-amount-desc: "\f161"; +$fa-var-sort-asc: "\f0de"; +$fa-var-sort-desc: "\f0dd"; +$fa-var-sort-down: "\f0dd"; +$fa-var-sort-numeric-asc: "\f162"; +$fa-var-sort-numeric-desc: "\f163"; +$fa-var-sort-up: "\f0de"; +$fa-var-soundcloud: "\f1be"; +$fa-var-space-shuttle: "\f197"; +$fa-var-spinner: "\f110"; +$fa-var-spoon: "\f1b1"; +$fa-var-spotify: "\f1bc"; +$fa-var-square: "\f0c8"; +$fa-var-square-o: "\f096"; +$fa-var-stack-exchange: "\f18d"; +$fa-var-stack-overflow: "\f16c"; +$fa-var-star: "\f005"; +$fa-var-star-half: "\f089"; +$fa-var-star-half-empty: "\f123"; +$fa-var-star-half-full: "\f123"; +$fa-var-star-half-o: "\f123"; +$fa-var-star-o: "\f006"; +$fa-var-steam: "\f1b6"; +$fa-var-steam-square: "\f1b7"; +$fa-var-step-backward: "\f048"; +$fa-var-step-forward: "\f051"; +$fa-var-stethoscope: "\f0f1"; +$fa-var-sticky-note: "\f249"; +$fa-var-sticky-note-o: "\f24a"; +$fa-var-stop: "\f04d"; +$fa-var-street-view: "\f21d"; +$fa-var-strikethrough: "\f0cc"; +$fa-var-stumbleupon: "\f1a4"; +$fa-var-stumbleupon-circle: "\f1a3"; +$fa-var-subscript: "\f12c"; +$fa-var-subway: "\f239"; +$fa-var-suitcase: "\f0f2"; +$fa-var-sun-o: "\f185"; +$fa-var-superscript: "\f12b"; +$fa-var-support: "\f1cd"; +$fa-var-table: "\f0ce"; +$fa-var-tablet: "\f10a"; +$fa-var-tachometer: "\f0e4"; +$fa-var-tag: "\f02b"; +$fa-var-tags: "\f02c"; +$fa-var-tasks: "\f0ae"; +$fa-var-taxi: "\f1ba"; +$fa-var-television: "\f26c"; +$fa-var-tencent-weibo: "\f1d5"; +$fa-var-terminal: "\f120"; +$fa-var-text-height: "\f034"; +$fa-var-text-width: "\f035"; +$fa-var-th: "\f00a"; +$fa-var-th-large: "\f009"; +$fa-var-th-list: "\f00b"; +$fa-var-thumb-tack: "\f08d"; +$fa-var-thumbs-down: "\f165"; +$fa-var-thumbs-o-down: "\f088"; +$fa-var-thumbs-o-up: "\f087"; +$fa-var-thumbs-up: "\f164"; +$fa-var-ticket: "\f145"; +$fa-var-times: "\f00d"; +$fa-var-times-circle: "\f057"; +$fa-var-times-circle-o: "\f05c"; +$fa-var-tint: "\f043"; +$fa-var-toggle-down: "\f150"; +$fa-var-toggle-left: "\f191"; +$fa-var-toggle-off: "\f204"; +$fa-var-toggle-on: "\f205"; +$fa-var-toggle-right: "\f152"; +$fa-var-toggle-up: "\f151"; +$fa-var-trademark: "\f25c"; +$fa-var-train: "\f238"; +$fa-var-transgender: "\f224"; +$fa-var-transgender-alt: "\f225"; +$fa-var-trash: "\f1f8"; +$fa-var-trash-o: "\f014"; +$fa-var-tree: "\f1bb"; +$fa-var-trello: "\f181"; +$fa-var-tripadvisor: "\f262"; +$fa-var-trophy: "\f091"; +$fa-var-truck: "\f0d1"; +$fa-var-try: "\f195"; +$fa-var-tty: "\f1e4"; +$fa-var-tumblr: "\f173"; +$fa-var-tumblr-square: "\f174"; +$fa-var-turkish-lira: "\f195"; +$fa-var-tv: "\f26c"; +$fa-var-twitch: "\f1e8"; +$fa-var-twitter: "\f099"; +$fa-var-twitter-square: "\f081"; +$fa-var-umbrella: "\f0e9"; +$fa-var-underline: "\f0cd"; +$fa-var-undo: "\f0e2"; +$fa-var-university: "\f19c"; +$fa-var-unlink: "\f127"; +$fa-var-unlock: "\f09c"; +$fa-var-unlock-alt: "\f13e"; +$fa-var-unsorted: "\f0dc"; +$fa-var-upload: "\f093"; +$fa-var-usd: "\f155"; +$fa-var-user: "\f007"; +$fa-var-user-md: "\f0f0"; +$fa-var-user-plus: "\f234"; +$fa-var-user-secret: "\f21b"; +$fa-var-user-times: "\f235"; +$fa-var-users: "\f0c0"; +$fa-var-venus: "\f221"; +$fa-var-venus-double: "\f226"; +$fa-var-venus-mars: "\f228"; +$fa-var-viacoin: "\f237"; +$fa-var-video-camera: "\f03d"; +$fa-var-vimeo: "\f27d"; +$fa-var-vimeo-square: "\f194"; +$fa-var-vine: "\f1ca"; +$fa-var-vk: "\f189"; +$fa-var-volume-down: "\f027"; +$fa-var-volume-off: "\f026"; +$fa-var-volume-up: "\f028"; +$fa-var-warning: "\f071"; +$fa-var-wechat: "\f1d7"; +$fa-var-weibo: "\f18a"; +$fa-var-weixin: "\f1d7"; +$fa-var-whatsapp: "\f232"; +$fa-var-wheelchair: "\f193"; +$fa-var-wifi: "\f1eb"; +$fa-var-wikipedia-w: "\f266"; +$fa-var-windows: "\f17a"; +$fa-var-won: "\f159"; +$fa-var-wordpress: "\f19a"; +$fa-var-wrench: "\f0ad"; +$fa-var-xing: "\f168"; +$fa-var-xing-square: "\f169"; +$fa-var-y-combinator: "\f23b"; +$fa-var-y-combinator-square: "\f1d4"; +$fa-var-yahoo: "\f19e"; +$fa-var-yc: "\f23b"; +$fa-var-yc-square: "\f1d4"; +$fa-var-yelp: "\f1e9"; +$fa-var-yen: "\f157"; +$fa-var-youtube: "\f167"; +$fa-var-youtube-play: "\f16a"; +$fa-var-youtube-square: "\f166"; + diff --git a/app/styles/_style.css b/app/styles/_style.css new file mode 100644 index 0000000..9771d91 --- /dev/null +++ b/app/styles/_style.css @@ -0,0 +1,839 @@ +@import url(https://fonts.googleapis.com/css?family=Montserrat:400+700); +@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro); + +body { + margin: 0px; + padding: 0px; + height: 100%; + font-family: 'Montserrat', sans-serif; + background: #5e04c2; +} + +div { + box-sizing: border-box; +} + +*:focus { + outline: 0; +} + +.auto-hidden { + overflow: hidden; +} + +.hidden { + display: none +} + +.container { + width: 100%; + float: left; +} + +strong { + font-weight: 700; +} + +a { + text-decoration: underline; +} + +/* Search Containter Component */ + +.search-container { + width: 600px; + margin: -100px 0 0 -300px; + position: absolute; + top: 40%; + left: 50%; +} + +.search-container h1 { + font-family: 'Montserrat', sans-serif; + font-size: 26px; + color: #fff; + font-weight: 400; + text-align: center; + margin: 0px; +} + +.search-container h3 { + font-family: 'Montserrat', sans-serif; + font-size: 18px; + color: #fff; + font-weight: 400; + text-align: center; + width: 100%; + float: left; + margin: 10px 0 0 0; +} + +@media screen and (max-width: 700px) { + .search-container { + width: 90%; + margin: -100px 0 0 -45%; + position: absolute; + top: 40%; + left: 50%; + } +} + +/* Search Box Component */ + +.search-box { + margin: 40px 0 0 0; +} + +.search-group { + width: 100%; + position: relative; +} + +.search-group .input-group-btn { + position: absolute; + right: 10px; +} + +.search-group .input-group-btn .btn-search { + width: 52px; + height: 63px; + cursor: pointer; +} + +.search-group .input-group-btn .btn-search img { + width: 24px; + margin: 20px 0 0 11px; +} + +.search-group .input-search { + width: 100%; + font-family: 'Source Sans Pro', sans-serif; + font-size: 18px; + padding: 20px 46px 20px 46px; + border: 0px; + border-radius: 5px; + background: #410287; + color: #fff; + -webkit-transition: 0.2s ease-in-out; + -moz-transition: 0.2s ease-in-out; + -o-transition: 0.2s ease-in-out; + transition: 0.2s ease-in-out; + text-align: center; +} + +.search-group .input-search:focus { + background: #773CB5; +} + +.search-group .input-search:focus::-webkit-input-placeholder { + text-align: center; + opacity: 0.5; +} + +.search-group .input-search::-webkit-input-placeholder { + color: #fff; + text-align: center; + opacity: 0.5; +} + +.search-group .input-search:-moz-placeholder { /* Firefox 18- */ + color: #fff; + text-align: center; +} + +.search-group .input-search::-moz-placeholder { /* Firefox 19+ */ + color: #fff; + text-align: center; +} + +.search-group .input-search:-ms-input-placeholder { + color: #fff; + text-align: center; +} + +.search-container .tip { + margin: 30px 0 0 0; +} + +.search-container .tip span { + font-size: 14px; + font-family: sans-serif; + color: #C698FA; + float: left; + clear: both; + text-align: center; + width: 100%; + margin: 10px 0 0 0; +} + +.top { + width: 100%; + height: 90px; + float: left; + background: #4f03a5; + position: fixed; + top: 0px; + left: 0px +} + +.top .title { + width: 20%; + float: left; + font-family: 'Montserrat', sans-serif; + font-size: 18px; + color: #fff; + font-weight: 400; + text-align: center; + margin: 33px 0 0 0; + cursor: pointer; +} + +.top .search { + width: 60%; + height: 70px; + float: left; +} + +.top .search .search-box { + margin: 20px auto 0 auto; + width: 600px; +} + +.top .search .search-group .input-group-btn .btn-search { + width: 38px; + height: 49px; + cursor: pointer; +} + +.top .search .search-group .input-group-btn .btn-search img { + width: 20px; + margin: 15px 0 0 11px; +} + +.top .search .search-group .input-search { + width: 100%; + font-size: 18px; + padding: 13px 13px 13px 39px; + border: 0px; +} + +.top .close { + width: 15%; + height: 70px; + float: left; + color: #fff; + font-size: 60px; + font-weight: lighter; + padding: 0 0 0 14px; + cursor: pointer; +} + +@media screen and (max-width: 700px) { + .top { + height: 120px; + } + + .top .title { + width: 100%; + margin: 10px 0 0 0; + } + + .top .search { + width: 100%; + height: 70px; + margin: 0 auto; + } + + .top .search .search-box { + width: 90%; + } +} + +/* Playlist Component */ + +.playlist .info { + width: 70%; + margin: 133px auto 0; + text-align: center; +} + +.info .track-name { + font-family: 'Montserrat', sans-serif; + font-size: 40px; + color: #fff; + text-align: center; + width: 100%; +} + +.info .save-playlist { + display: inline-block; + height: 54px; + background: #12FFCC; + font-family: 'Source Sans Pro', sans-serif; + font-size: 18px; + color: #125E4D; + text-align: center; + border-radius: 40px; + padding: 15px 30px; + margin: 45px auto 0 auto; + cursor: pointer; +} + +.trackList { + width: 70%; + margin: 80px auto 100px; + list-style: none; + padding: 0px; +} + +.trackList li { + font-family: 'Source Sans Pro', sans-serif; + font-size: 20px; + color: #fff; + border-bottom: 1px solid #410287; + overflow: hidden; + padding: 13px 10px +} + +.trackList li .remove { + width: 24px; + height: 24px; + float: right; + margin: 0 0 0 15px; + cursor: pointer; +} + +.trackList li .play { + width: 24px; + height: 24px; + float: right; + margin: 0 0 0 15px; + cursor: pointer; +} + +.player-loading { + width: 100%; +} + +.trackList li .track-name { + float: left; +} + +@media screen and (max-width: 700px) { + .info .save-playlist { + width: 100%; + } + + .trackList { + width: 90%; + } + + .trackList li { + overflow: hidden; + } + + .trackList li .track-name { + width: 85%; + float: left; + } + + .trackList li .play { + margin: 10px 0 0 15px; + } +} + +/* Modal */ + +.modal { + height: 100%; + width: 100%; + top: 0px; + float: left; + background: #fff; + position: fixed; + overflow: scroll; +} + +.modal .modal-container { + width: 90%; + margin: 30px auto 0; +} + +.modal-container h2 { + +} + +.modal-container .playlist-name { + width: 100%; + font-family: 'Source Sans Pro', sans-serif; + font-size: 30px; + padding: 9px; + border: 0px; + background: #fff; + color: #000; + border-bottom: 2px solid #ccc; +} + +.modal-container .save { + width: 184px; + height: 54px; + background: #12FFCC; + font-family: 'Source Sans Pro', sans-serif; + font-size: 18px; + color: #125E4D; + text-align: center; + border-radius: 40px; + padding: 16px; + margin: 40px auto 0 auto; + cursor: pointer; + border: 0px; + clear: both; + float: left; +} + +.modal-container .close-modal { + width: 100%; + height: 32px; + float: left; + cursor: pointer; +} + +.modal-container .close-modal img { + width: 32px; + height: 32px; + float: right; +} + +.modal-container .status { + font-family: 'Montserrat', sans-serif; + font-size: 18px; + color: #4C2EE6; + margin: 30px 0 0 0; + float: left; +} + +.modal-container .radio-container { + float: left; + margin: 20px 0 0 0; + clear: both; +} + +.radio-container input[type="radio"] { + display:none; +} + +.radio-container label { + display: inline-block; + background-color: #5e04c2; + padding: 7px 0; + font-family: Arial; + font-size: 16px; + width: 30px; + margin: 10px 0; + height: 17px; + text-indent: 40px; + color: #5e04c2; + border-radius: 5px; + float: left; + clear: both; + cursor: pointer; +} + +.radio-container input[type="radio"]:checked + label { + background-image: url('../img/check.svg'); + background-size: 20px 20px; + background-repeat: no-repeat; + background-position: 5px; +} + +/* Loading Component */ + +.loading { + top: 50%; + left: 50%; + position: absolute; + margin: -40px 0 0 -27px; +} + +/* Footer Component */ + +.footer { + width: 100%; + float: left; + padding: 20px; +} + +.footer.fixed { + position: fixed; + bottom: 0px +} + +.footer .copy { + font-family: 'Source Sans Pro', sans-serif; + font-size: 12px; + color: #fff; + float: left; + padding: 11px 0 0 0; +} + +.footer .copy a { + color: #12FFCC; + text-decoration: none; +} + +.footer .spotify-api { + font-family: 'Source Sans Pro', sans-serif; + font-size: 12px; + color: #fff; + float: right; +} + +.footer .spotify-api span { + float: left; + margin: 11px 10px 0 0; +} + +.footer .spotify-api img { + width: 100px +} + +@media screen and (max-width: 700px) { + .footer { + display: none; + } +} + +/* Alert Component */ + +.alert-shadow { + width: 100%; + height: 100%; + position: fixed; + z-index: 9000; + top: 0px; + background: rgba(65, 2, 135, 0.65) +} + +.alert-modal { + width: 400px; + min-height: 400px; + position: absolute; + text-align: center; + top: 50%; + left: 50%; + margin: -200px 0 0 -200px; + padding: 15px 0 30px; + box-sizing: border-box; + background: #fff; + border-radius: 5px; + overflow: hidden; + font-family: 'Montserrat', sans-serif; +} + +.alert-loading { + width: 100%; + height: 100%; + background: #fff; +} + +.alert-loading img { + width: 80px; + position: absolute; + top: 50%; + right: 50%; + margin: -40px -40px 0 0; +} + +.alert-modal .alert-loading img { + width: 48px; + margin: -24px -24px 0 0; +} + +.alert-fail { + width: 100%; + height: 407px; + background: red; + position: absolute; + top: 0px; +} + +.alert-fail img { + width: 80px; + position: absolute; + top: 50%; + right: 50%; + margin: -40px -40px 0 0; +} + +.alert-fail span { + font-size: 20px; + width: 100%; + float: left; + margin: 30% 0 0 0; + text-align: center; + color: #fff; + +} + +.alert-share { + width: 100%; + height: 100%; +} + +.alert-share .share-title { + font-size: 32px; + color: #4C2EE6; + text-align: center; + padding: 15px 0; + width: 100%; + float: left; +} + +.alert-share .share-subtitle, +.alert-share .share-cta { + font-size: 18px; + color: #370273; + text-align: center; + width: 100%; + float: left; +} +.alert-share .share-cta { + font-size: 14px; + margin-top: 10px; +} + +.alert-share .share-subtitle span { + display: block; + color: #370273; +} + +.alert-share .share-message { + font-size: 14px; + color: #4C2EE6; + text-align: center; + width: 100%; + float: left; + margin: 40px 0 0 0; +} + +.alert-share .share { + width: 160px; + margin: 0px 120px; + padding: 10px 0px 0px; + overflow: hidden; + float: left; +} + +.alert-share .share .source { + width: 50px; + height: 50px; + margin: 15px; + float: left; + cursor: pointer; +} + +.alert-share .share .source img { + width: 100%; + float: left; +} + +.alert-share .btn-done { + height: 54px; + background: #12FFCC; + font-family: 'Source Sans Pro', sans-serif; + font-size: 18px; + color: #125E4D; + text-align: center; + display: inline-block; + border-radius: 40px; + padding: 15px 30px; + margin: 40px 0 0; + cursor: pointer; +} + +.alert-limit { + width: 100%; + height: 100%; +} + +.alert-limit .limit-title { + font-size: 32px; + color: #4C2EE6; + text-align: center; + padding: 15px 0; + width: 100%; + float: left; +} + +.alert-limit .limit-subtitle { + font-size: 18px; + color: #370273; + text-align: center; + width: 100%; + float: left; +} + +.alert-limit .btn-done { + height: 54px; + background: #12FFCC; + font-family: 'Source Sans Pro', sans-serif; + font-size: 18px; + color: #125E4D; + text-align: center; + display: inline-block; + border-radius: 40px; + padding: 15px 30px; + margin: 130px 10px 0; + cursor: pointer; +} + +.alert-limit .btn-close { + height: 54px; + background: #F5958B; + font-family: 'Source Sans Pro', sans-serif; + font-size: 18px; + color: #125E4D; + text-align: center; + display: inline-block; + border-radius: 40px; + padding: 15px 30px; + margin: 130px 1px 0; + cursor: pointer; +} + +/**/ + +.fade-enter { + opacity: 0.01; + transition: opacity .2s ease-in; + -webkit-transform: opacity .2s ease-in; + -ms-transform: opacity .2s ease-in; +} + +.fade-enter.fade-enter-active { + opacity: 1; +} + +.fade-leave { + opacity: 1; + transition: opacity .2s ease-in; + -webkit-transform: opacity .2s ease-in; + -ms-transform: opacity .2s ease-in; +} + +.fade-leave.fade-leave-active { + opacity: 0.01; +} + +/* Fade Up */ +.fadeOut-enter { + opacity: 0.00; + transform: translateY(280px); + -webkit-transform: translateY(280px); + -ms-transform: translateY(280px); + transition: all .5s ease-in; +} + +.fadeOut-enter.fadeOut-enter-active { + opacity: 1; + transform: translateY(0px); + -webkit-transform: translateY(0px); + -ms-transform: translateY(0px); +} + +.fadeOut-leave { + opacity: 0; + -webkit-transform: scale(0.6); + -moz-transform: scale(0.6); + -o-transform: scale(0.6); + -ms-transform: scale(0.6); + transform: scale(0.6); + -webkit-transition: 0.5s ease-in-out; + -moz-transition: 0.5s ease-in-out; + -o-transition: 0.5s ease-in-out; + transition: 0.5s ease-in-out; +} + +.fadeOut-leave.example-leave-active { + opacity: 1; + -webkit-transform: scale(1); + -moz-transform: scale(1); + -o-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); +} +/**/ + +/* Fade Down */ +.fadeDown-enter { + opacity: 0.00; + transform: translateY(-100px); + -webkit-transform: translateY(-100px); + -ms-transform: translateY(-100px); + transition: all .5s ease-in; +} + +.fadeDown-enter.fadeDown-enter-active { + opacity: 1; + transform: translateY(0px); + -webkit-transform: translateY(0px); + -ms-transform: translateY(0px); +} + +.fadeDown-leave { + opacity: 1; + transform: translateY(-280px); + -webkit-transform: translateY(-280px); + -ms-transform: translateY(-280px); + transition: all .3s ease-out; +} + +.fadeDown-leave.example-leave-active { + opacity: 0.01; +} +/**/ + +/* fade list*/ + +.fadeList-enter { + opacity: 0.01; + transition: opacity .2s ease-in; +} + +.fadeList-enter.fadeList-enter-active { + opacity: 1; +} + +.fadeList-leave { + opacity: 1; + transition: opacity .2s ease-in; +} + +.fadeList-leave.fadeList-leave-active { + opacity: 0.01; +} + + +.react-autosuggest__suggestions { + width: 100%; + margin: 10px 0 0 0; + padding: 0px; + list-style: none; + position: absolute; +} + +.react-autosuggest__suggestion { + color: #410287; + padding: 20px; + background: #fff; + cursor: pointer; +} + +.react-autosuggest__suggestion--focused { + background: #773CB5; + color: #fff; +} + +.top .react-autosuggest__suggestion { + padding: 15px +} diff --git a/app/styles/fonts/FontAwesome.otf b/app/styles/fonts/FontAwesome.otf new file mode 100644 index 0000000..681bdd4 Binary files /dev/null and b/app/styles/fonts/FontAwesome.otf differ diff --git a/app/styles/fonts/fontawesome-webfont.eot b/app/styles/fonts/fontawesome-webfont.eot new file mode 100644 index 0000000..a30335d Binary files /dev/null and b/app/styles/fonts/fontawesome-webfont.eot differ diff --git a/app/styles/fonts/fontawesome-webfont.svg b/app/styles/fonts/fontawesome-webfont.svg new file mode 100644 index 0000000..6fd19ab --- /dev/null +++ b/app/styles/fonts/fontawesome-webfont.svg @@ -0,0 +1,640 @@ + + + \ No newline at end of file diff --git a/app/styles/fonts/fontawesome-webfont.ttf b/app/styles/fonts/fontawesome-webfont.ttf new file mode 100644 index 0000000..d7994e1 Binary files /dev/null and b/app/styles/fonts/fontawesome-webfont.ttf differ diff --git a/app/styles/fonts/fontawesome-webfont.woff b/app/styles/fonts/fontawesome-webfont.woff new file mode 100644 index 0000000..6fd4ede Binary files /dev/null and b/app/styles/fonts/fontawesome-webfont.woff differ diff --git a/app/styles/fonts/fontawesome-webfont.woff2 b/app/styles/fonts/fontawesome-webfont.woff2 new file mode 100644 index 0000000..5560193 Binary files /dev/null and b/app/styles/fonts/fontawesome-webfont.woff2 differ diff --git a/app/styles/style.css b/app/styles/style.css index d63b063..aae6b64 100644 --- a/app/styles/style.css +++ b/app/styles/style.css @@ -1,972 +1,802 @@ +@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Montserrat:400+700); -@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro); - -body { - margin: 0px; - padding: 0px; - height: 100%; - font-family: 'Montserrat', sans-serif; - background: #5e04c2; -} - -div { - box-sizing: border-box; -} - -*:focus { - outline: 0; -} - -.auto-hidden { - overflow: hidden; -} - -.hidden { - display: none -} - -.container { +@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700); +@font-face { + font-family: 'icons'; + src: url("fonts/fontawesome-webfont.eot?v=4.4.0"); + src: url("fonts/fontawesome-webfont.eot?#iefix&v=4.4.0") format("embedded-opentype"), url("fonts/fontawesome-webfont.woff2?v=4.4.0") format("woff2"), url("fonts/fontawesome-webfont.woff?v=4.4.0") format("woff"), url("fonts/fontawesome-webfont.ttf?v=4.4.0") format("truetype"), url("fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular") format("svg"); + font-weight: normal; + font-style: normal; } +.search-box .search-group .input-group-btn .btn-search::before, .playlist .tracklist li .remove::before, +.playlist .tracklist li .play > div a::before, +.playlist .tracklist li .play > div .player-loading::before, .playlist .info .track-name::before, .modal .playlist-name-input::before, .modal input[type='radio'] + label::before, .modal input[type='radio']:checked + label::before { + font-family: 'icons'; + -webkit-font-smoothing: antialiased; } + +/* + +$color-primary-100: #B3E5FC; +$color-primary-500: #03A9F4; +$color-primary-900: #01579B; +*/ +#container, #container .container, #container .container > span, .playlist, .playlist .tracklist li, .playlist .info, .footer, .modal, .modal .playlist-status, .modal .buttons, .alert-shadow, #container .container.search-state-true .search-container { + display: -webkit-flex; + display: flex; + display: -ms-flexbox; } + +.search-box .search-group .input-search, .modal .playlist-name { + font-size: 17px; width: 100%; - float: left; -} - -strong { - font-weight: 700; -} - -a { - text-decoration: underline; -} - -/* Search Containter Component */ - -.search-container { - width: 600px; - margin: -100px 0 0 -300px; - position: absolute; - top: 40%; - left: 50%; -} - -.search-container h1 { - font-family: 'Montserrat', sans-serif; - font-size: 26px; - color: #fff; - font-weight: 400; - text-align: center; - margin: 0px; -} - -.search-container h3 { - font-family: 'Montserrat', sans-serif; - font-size: 18px; + background: #512DA8; + font-family: "Source Sans Pro", sans-serif; + border-radius: 50px; + padding: 20px; color: #fff; - font-weight: 400; - text-align: center; - width: 100%; - float: left; - margin: 10px 0 0 0; -} - -@media screen and (max-width: 700px) { - .search-container { - width: 90%; - margin: -100px 0 0 -45%; - position: absolute; - top: 40%; - left: 50%; - } -} - -/* Search Box Component */ - -.search-box { - margin: 40px 0 0 0; -} - -.search-group { - width: 100%; + box-shadow: 0 0 0 transparent; + transition: all .2s ease; position: relative; -} - -.search-group .input-group-btn { - position: absolute; - left: 0px -} - -.search-group .input-group-btn .btn-search { - width: 52px; - height: 63px; - cursor: pointer; -} - -.search-group .input-group-btn .btn-search img { - width: 24px; - margin: 20px 0 0 11px; -} - -.search-group .input-search { - width: 100%; - font-family: 'Source Sans Pro', sans-serif; - font-size: 18px; - padding: 20px 46px 20px 46px; - border: 0px; - border-radius: 5px; - background: #410287; - color: #fff; - -webkit-transition: 0.2s ease-in-out; - -moz-transition: 0.2s ease-in-out; - -o-transition: 0.2s ease-in-out; - transition: 0.2s ease-in-out; -} - -.search-group .input-search:focus { - background: #773CB5; -} - -.search-group .input-search:focus::-webkit-input-placeholder { - text-align: left; - opacity: 0.5; -} - -.search-group .input-search::-webkit-input-placeholder { - color: #fff; - text-align: center; -} - -.search-group .input-search:-moz-placeholder { /* Firefox 18- */ - color: #fff; - text-align: center; -} - -.search-group .input-search::-moz-placeholder { /* Firefox 19+ */ - color: #fff; - text-align: center; -} - -.search-group .input-search:-ms-input-placeholder { - color: #fff; - text-align: center; -} - -.search-container .tip { - margin: 30px 0 0 0; -} - -.search-container .tip span { - font-size: 14px; - font-family: sans-serif; - color: #C698FA; - float: left; - clear: both; - text-align: center; - width: 100%; - margin: 10px 0 0 0; -} - -.top { - width: 100%; - height: 90px; - float: left; - background: #4f03a5; - position: fixed; - top: 0px; - left: 0px; - z-index: 1 -} - -.top .title { - width: 20%; - float: left; - font-family: 'Montserrat', sans-serif; - font-size: 18px; - color: #fff; - font-weight: 400; - text-align: center; - margin: 33px 0 0 0; - cursor: pointer; -} - -.top .search { - width: 60%; - height: 70px; - float: left; -} - -.top .search .search-box { - margin: 20px auto 0 auto; - width: 600px; -} - -.top .search .search-group .input-group-btn .btn-search { - width: 38px; - height: 49px; - cursor: pointer; -} - -.top .search .search-group .input-group-btn .btn-search img { - width: 20px; - margin: 15px 0 0 11px; -} - -.top .search .search-group .input-search { - width: 100%; - font-size: 18px; - padding: 13px 13px 13px 39px; - border: 0px; -} - -.top .close { - width: 15%; - height: 70px; - float: left; - color: #fff; - font-size: 60px; - font-weight: lighter; - padding: 0 0 0 14px; - cursor: pointer; -} - -@media screen and (max-width: 700px) { - .top { - height: 120px; - } - - .top .title { - width: 100%; - margin: 10px 0 0 0; - } - - .top .search { - width: 100%; - height: 70px; - margin: 0 auto; - } - - .top .search .search-box { - width: 90%; - } -} - -/* Playlist Component */ - -.playlist .info { - width: 70%; - margin: 133px auto 0; - text-align: center; -} - -.info .track-name { - font-family: 'Montserrat', sans-serif; - font-size: 40px; - color: #fff; + top: 0; text-align: center; - width: 100%; -} - -.info .save-playlist { - display: inline-block; - height: 54px; - background: #12FFCC; - font-family: 'Source Sans Pro', sans-serif; - font-size: 18px; - color: #125E4D; - text-align: center; - border-radius: 40px; - padding: 15px 30px; - margin: 45px auto 0 auto; - cursor: pointer; -} - -.trackList { - width: 70%; - margin: 80px auto 100px; - list-style: none; - padding: 0px; -} - -.trackList li { - width: 100%; - float: left; - font-family: 'Source Sans Pro', sans-serif; - font-size: 20px; - color: #fff; - border-bottom: 1px solid #410287; - padding: 13px 10px -} - -.trackList li .remove { - width: 24px; - height: 24px; - float: right; - margin: 0 0 0 15px; - cursor: pointer; -} - -.trackList li .play { - width: 24px; - height: 24px; - float: right; - margin: 0 0 0 15px; - cursor: pointer; -} - -.player-loading { - width: 100%; -} - -.trackList li .track-name { - float: left; -} - -.trackList li .re-search { - width: 24px; - height: 24px; - float: right; - margin: 0 0 0 15px; - cursor: pointer; -} - -.trackList li .re-search img { - transform: rotate(0deg); - -webkit-transform: rotate(0deg); - -ms-transform: rotate(0deg); - transition: all .2s ease-in; -} - -.trackList li .re-search:hover img { - transform: rotate(-360deg); - -webkit-transform: rotate(-360deg); - -ms-transform: rotate(-360deg); - transition: all .5s ease-in; -} - -@media screen and (max-width: 700px) { - .info .save-playlist { - width: 100%; - } - - .trackList { - width: 90%; - } - - .trackList li { - overflow: hidden; - } - - .trackList li .track-name { - width: 85%; - float: left; - } - - .trackList li .play { - margin: 10px 0 0 15px; - } - - .trackList li .re-search { - display: none; - } -} - -/* Modal */ - -.modal { + box-sizing: border-box; + border: 1px solid rgba(255, 255, 255, 0); + /*background: { + image: url('../img/search.svg'); + size: 20px; + position: 95% 50%; + repeat: no-repeat; + }*/ + z-index: 2; } + .search-box .search-group .input-search::-webkit-input-placeholder, .modal .playlist-name::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.8); } + .search-box .search-group .input-search:focus, .modal .playlist-name:focus { + box-shadow: 0 0 20px black; + background-color: #673dcb; + border: 1px solid rgba(255, 255, 255, 0.2); + outline: 0; } + .search-box .search-group .input-search:focus::-webkit-input-placeholder, .modal .playlist-name:focus::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.2); } + +html, +body { height: 100%; width: 100%; - top: 0px; - float: left; - background: #fff; - position: fixed; - overflow: scroll; - z-index: 2 -} - -.modal .modal-container { - width: 90%; - margin: 30px auto 0; -} - -.modal-container h2 { + margin: 0; + padding: 0; } -} - -.modal-container .playlist-name { - width: 100%; - font-family: 'Source Sans Pro', sans-serif; - font-size: 30px; - padding: 9px; - border: 0px; - background: #fff; - color: #000; - border-bottom: 2px solid #ccc; -} - -.modal-container .playlist-name.error::-webkit-input-placeholder { - color: red; -} - -.modal-container .playlist-name.error:-moz-placeholder { /* Firefox 18- */ - color: red; -} - -.modal-container .playlist-name.error::-moz-placeholder { /* Firefox 19+ */ - color: red; -} - -.modal-container .playlist-name.error:-ms-input-placeholder { - color: red; -} - -.modal-container .save { - width: 184px; - height: 54px; - background: #12FFCC; - font-family: 'Source Sans Pro', sans-serif; - font-size: 18px; - color: #125E4D; - text-align: center; - border-radius: 40px; - padding: 16px; - margin: 40px auto 0 auto; - cursor: pointer; - border: 0px; - clear: both; - float: left; -} - -.modal-container .close-modal { - width: 100%; - height: 32px; - float: left; - cursor: pointer; -} - -.modal-container .close-modal img { - width: 32px; - height: 32px; - float: right; -} - -.modal-container .status { - font-family: 'Montserrat', sans-serif; - font-size: 18px; - color: #4C2EE6; - margin: 30px 0 0 0; - float: left; -} - -.modal-container .radio-container { - float: left; - margin: 20px 0 0 0; - clear: both; -} - -.radio-container input[type="radio"] { - display:none; -} - -.radio-container label { - display: inline-block; - background-color: #5e04c2; - padding: 7px 0; - font-family: Arial; +body { + font-family: "Source Sans Pro", sans-serif; font-size: 16px; - width: 30px; - margin: 10px 0; - height: 17px; - text-indent: 40px; - color: #5e04c2; - border-radius: 5px; - float: left; - clear: both; - cursor: pointer; -} - -.radio-container input[type="radio"]:checked + label { - background-image: url('../img/check.svg'); - background-size: 20px 20px; - background-repeat: no-repeat; - background-position: 5px; -} - -/* Loading Component */ - -.loading { - top: 50%; - left: 50%; - position: absolute; - margin: -40px 0 0 -27px; -} - -/* Footer Component */ - -.footer { - width: 100%; - float: left; - padding: 20px; -} - -.footer.fixed { - position: fixed; - bottom: 0px -} - -.footer .copy { - font-family: 'Source Sans Pro', sans-serif; - font-size: 12px; - color: #fff; - float: left; - padding: 11px 0 0 0; -} - -.footer .copy a { - color: #12FFCC; - text-decoration: none; -} - -.footer .spotify-api { - font-family: 'Source Sans Pro', sans-serif; - font-size: 12px; + background: #1b0f37; color: #fff; - float: right; -} + box-shadow: 0 0 20vw rgba(0, 0, 0, 0.5) inset; } -.footer .spotify-api span { - float: left; - margin: 11px 10px 0 0; -} - -.footer .spotify-api img { - width: 100px -} - -@media screen and (max-width: 700px) { - .footer { - display: none; - } -} - -/* Alert Component */ +a { + color: #CDDC39; + text-decoration: none; } -.alert-shadow { - width: 100%; +#container { height: 100%; - position: fixed; - z-index: 9000; - top: 0px; - background: rgba(65, 2, 135, 0.65); - z-index: 2 -} - -.alert-modal { - width: 400px; - min-height: 400px; - position: absolute; + -webkit-flex-direction: column; + flex-direction: column; + -ms-flex-direction: column; + justify-content: center; + -webkit-align-items: center; + align-items: center; + -ms-flex-align: center; } + #container .container { + width: 100%; + height: 100%; + -webkit-flex-direction: column; + flex-direction: column; + -ms-flex-direction: column; + justify-content: center; + -webkit-align-items: center; + align-items: center; + -ms-flex-align: center; } + #container .container > span { + width: 100%; + -webkit-flex-direction: column; + flex-direction: column; + -ms-flex-direction: column; + -webkit-align-items: center; + align-items: center; + -ms-flex-align: center; + transition: all 1s ease; } + #container .container > span:nth-child(1) { + -webkit-flex: 1; + flex: 1; + -ms-flex: 1; + justify-content: center; } + +/*************** +Search Container +***************/ +.search-container { + width: 100%; + max-width: 600px; text-align: center; - top: 50%; - left: 50%; - margin: -200px 0 0 -200px; - padding: 15px 0 30px; - box-sizing: border-box; - background: #fff; - border-radius: 5px; + color: rgba(255, 255, 255, 0.7); + transition: all 1s ease; + border-bottom: 1px solid transparent; } + .search-container h1 { + font-family: "Montserrat", sans-serif; + font-size: 30px; + color: white; + transition: all 1s ease; + text-align: center; + padding-left: 0; + min-width: 300px; } + .search-container .tip { + color: rgba(255, 255, 255, 0.5); + font-size: 13px; + padding: 20px 0 0; + opacity: 1; } + .search-container .tip p { + margin: 0; + padding: 0; + line-height: 22px; } + +/********* +Search Box +*********/ +.search-box { + padding: 15px 0; } + .search-box .search-group { + position: relative; } + .search-box .search-group:focus { + position: relative; + top: 10px; } + .search-box .search-group .input-group-btn { + position: absolute; + right: 0; + height: 100%; + width: 75px; + z-index: 5; } + .search-box .search-group .input-group-btn .btn-search { + cursor: pointer; + height: 100%; + width: 100%; + display: block; + line-height: 62px; + font-size: 25px; } + .search-box .search-group .input-group-btn .btn-search::before { + content: ""; + display: block; + color: rgba(255, 255, 255, 0.5); + transition: all .25s ease; } + .search-box .search-group .input-group-btn .btn-search:hover::before { + color: rgba(255, 255, 255, 0.8); } + +/******* +Playlist +*******/ +.playlist { overflow: hidden; - font-family: 'Montserrat', sans-serif; - z-index: 3 -} - -.alert-loading { + transition: opacity 2s ease; width: 100%; - height: 100%; - background: #fff; -} - -.alert-loading img { - width: 80px; + max-width: 800px; + padding: 0 20px; + -webkit-flex-direction: column; + flex-direction: column; + -ms-flex-direction: column; } + .playlist .tracklist { + overflow: auto; + height: 100%; + margin: 0; + padding: 0 30px; + list-style: none; } + .playlist .tracklist li { + padding: 10px 20px; + background: rgba(255, 255, 255, 0); + transition: all .25s ease; + position: relative; + -webkit-align-items: center; + align-items: center; + -ms-flex-align: center; + border-radius: 10px; + list-style: none; } + .playlist .tracklist li:hover { + background: rgba(255, 255, 255, 0.05); } + .playlist .tracklist li::before { + content: ''; + height: 1px; + width: 100%; + background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 5%, rgba(255, 255, 255, 0.2) 95%, rgba(255, 255, 255, 0) 100%); + position: absolute; + bottom: 0; + left: 0; } + .playlist .tracklist li .remove, + .playlist .tracklist li .play { + padding: 0; + cursor: pointer; + display: inline-block; + transition: all .25s ease; + text-align: center; } + .playlist .tracklist li .remove::before, + .playlist .tracklist li .play > div a::before, + .playlist .tracklist li .play > div .player-loading::before { + content: ''; + height: 30px; + width: 30px; + display: inline-block; + line-height: 30px; + transform: scale(1); + transition: all .25s ease; } + .playlist .tracklist li .remove { + opacity: .5; + order: 1; + margin-right: -5px; } + .playlist .tracklist li .remove:hover { + opacity: .8; } + .playlist .tracklist li .remove::before { + content: ""; } + .playlist .tracklist li .play .play { + transform: scale(0, 0); + opacity: 0; + -webkit-animation-name: animate-in; + -webkit-animation-delay: .2s; + -webkit-animation-duration: .2s; + -webkit-animation-fill-mode: forwards; + -moz-animation-name: animate-in; + -moz-animation-delay: .2s; + -moz-animation-duration: .2s; + -moz-animation-fill-mode: forwards; + -ms-animation-name: animate-in; + -ms-animation-delay: .2s; + -ms-animation-duration: .2s; + -ms-animation-fill-mode: forwards; + animation-name: animate-in; + animation-delay: .2s; + animation-duration: .2s; + animation-fill-mode: forwards; } + .playlist .tracklist li .play .play::before { + content: ""; } + .playlist .tracklist li .play .play:hover::before { + transform: scale(1.2); } + .playlist .tracklist li .play > div .player-loading::before { + content: ""; + opacity: .5; + cursor: default; } + .playlist .tracklist li .play > div .player-loading:hover::before { + transform: scale(1); } + .playlist .tracklist li .play .pause::before { + content: ""; } + .playlist .tracklist li .play .pause:hover::before { + transform: scale(1.5); } + .playlist .tracklist li .play > div .player-loading::before { + -webkit-animation-name: spinning; + -webkit-animation-duration: 1s; + -webkit-animation-iteration-count: infinite; + -webkit-animation-timing-function: linear; + -ms-animation-name: spinning; + -ms-animation-duration: 1s; + -ms-animation-iteration-count: infinite; + -ms-animation-timing-function: linear; + -moz-animation-name: spinning; + -moz-animation-duration: 1s; + -moz-animation-iteration-count: infinite; + -moz-animation-timing-function: linear; + animation-name: spinning; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-timing-function: linear; } + .playlist .tracklist .track-name { + display: inline-block; + -webkit-flex: 1; + flex: 1; + -ms-flex: 1; } + .playlist .info { + text-align: center; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-direction: row; + padding: 50px 0; + height: 60px; } + .playlist .info .track-name { + font-size: 30px; + -webkit-flex: 1; + flex: 1; + -ms-flex: 1; + text-align: left; + margin: 0; + padding: 0 20px 0 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + line-height: 60px; } + .playlist .info .track-name::before { + content: ""; + display: inline-block; + margin-right: 20px; + color: #CDDC39; } + .playlist .save-playlist { + padding: 20px 30px; + border-radius: 40px; + background: #CDDC39; + color: #212121; + display: inline-block; + transform: scale(1); + transition: all .2s ease; } + .playlist .save-playlist:hover { + transform: scale(1.06); } + .playlist.fade-enter { + opacity: 0; + padding: 0; } + .playlist.fade-enter.fade-enter-active { + opacity: 1; + padding: 0 20px; } + +@-webkit-keyframes spinning { + 0% { + transform: rotate(0deg); } + 100% { + transform: rotate(360deg); } } +@-ms-keyframes spinning { + 0% { + transform: rotate(0deg); } + 100% { + transform: rotate(360deg); } } +@-moz-keyframes spinning { + 0% { + transform: rotate(0deg); } + 100% { + transform: rotate(360deg); } } +@keyframes spinning { + 0% { + transform: rotate(0deg); } + 100% { + transform: rotate(360deg); } } +/*********** +Auto Suggest +***********/ +.react-autosuggest__suggestions { position: absolute; - top: 50%; - right: 50%; - margin: -40px -40px 0 0; -} - -.alert-modal .alert-loading img { - width: 48px; - margin: -24px -24px 0 0; -} - -.alert-fail { + top: 60px; + left: 0; + right: 0; + width: 92%; + margin: 0 auto; + padding: 0; + list-style: none; + background: #fcfcfe; + z-index: 1; + opacity: 1; + transform: scale(1, 0); + transform-origin: 0% 0%; + -webkit-animation-name: animate-in; + -webkit-animation-delay: .2s; + -webkit-animation-duration: .2s; + -webkit-animation-fill-mode: forwards; + -moz-animation-name: animate-in; + -moz-animation-delay: .2s; + -moz-animation-duration: .2s; + -moz-animation-fill-mode: forwards; + -ms-animation-name: animate-in; + -ms-animation-delay: .2s; + -ms-animation-duration: .2s; + -ms-animation-fill-mode: forwards; + animation-name: animate-in; + animation-delay: .2s; + animation-duration: .2s; + animation-fill-mode: forwards; } + .react-autosuggest__suggestions li { + list-style: none; + padding: 15px 0; + margin: 0; + cursor: pointer; + color: #212121; + transition: all .25s ease; + background: transparent; } + .react-autosuggest__suggestions li:hover { + background: #CDDC39; } + +@keyframes animate-in { + 0% { + opacity: 0; + transform: scale(1, 0); } + 100% { + opacity: 1; + transform: scale(1, 1); } } +@-moz-keyframes animate-in { + 0% { + opacity: 0; + transform: scale(1, 0); } + 100% { + opacity: 1; + transform: scale(1, 1); } } +@-ms-keyframes animate-in { + 0% { + opacity: 0; + transform: scale(1, 0); } + 100% { + opacity: 1; + transform: scale(1, 1); } } +@-webkit-keyframes animate-in { + 0% { + opacity: 0; + transform: scale(1, 0); } + 100% { + opacity: 1; + transform: scale(1, 1); } } +/***** +Footer +*****/ +.footer { width: 100%; - height: 407px; - background: red; + position: relative; + bottom: 0; + left: 0; + font-size: 12px; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-direction: row; + z-index: 0; } + .footer p { + padding: 0; + margin: 0; + height: 40px; + line-height: 40px; } + .footer .spotify-api { + text-align: right; } + .footer .spotify-api a { + background-image: url("../img/spotify-logo.png"); + background-size: contain; + background-repeat: no-repeat; + display: inline-block; + height: 20px; + width: 70px; + position: relative; + top: 5px; + margin-left: 5px; } + .footer > div { + -webkit-flex: 1; + flex: 1; + -ms-flex: 1; + padding: 5px 15px; } + +/****** +Loading +******/ +.loading { position: absolute; - top: 0px; -} - -.alert-fail img { - width: 80px; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + opacity: 0; + transition: all 2s ease; + display: none; } + .loading.fade-enter { + opacity: 1; } + .loading.fade-leave { + opacity: 0; } + +/****************** +Save Playlist Modal +******************/ +.modal { position: absolute; - top: 50%; - right: 50%; - margin: -40px -40px 0 0; -} - -.alert-fail span { - font-size: 20px; - width: 100%; - float: left; - margin: 30% 0 0 0; - text-align: center; - color: #fff; - -} - -.alert-share { - width: 100%; height: 100%; -} - -.alert-share .share-title { - font-size: 32px; - color: #4C2EE6; - text-align: center; - padding: 15px 0; - width: 100%; - float: left; -} - -.alert-share .share-subtitle, -.alert-share .share-cta { - font-size: 18px; - color: #370273; - text-align: center; - width: 100%; - float: left; -} -.alert-share .share-cta { - font-size: 14px; - margin-top: 10px; -} - -.alert-share .share-subtitle span { - display: block; - color: #370273; -} - -.alert-share .share-message { - font-size: 14px; - color: #4C2EE6; - text-align: center; - width: 100%; - float: left; - margin: 40px 0 0 0; -} - -.alert-share .share { - width: 160px; - margin: 0px 120px; - padding: 10px 0px 0px; - overflow: hidden; - float: left; -} - -.alert-share .share .source { - width: 50px; - height: 50px; - margin: 15px; - float: left; - cursor: pointer; -} - -.alert-share .share .source img { - width: 100%; - float: left; -} - -.alert-share .btn-done { - height: 54px; - background: #12FFCC; - font-family: 'Source Sans Pro', sans-serif; - font-size: 18px; - color: #125E4D; - text-align: center; - display: inline-block; - border-radius: 40px; - padding: 15px 30px; - margin: 40px 0 0; - cursor: pointer; -} - -.alert-limit { - width: 100%; - height: 100%; -} - -.alert-limit .limit-title { - font-size: 32px; - color: #4C2EE6; - text-align: center; - padding: 15px 0; width: 100%; - float: left; -} - -.alert-limit .limit-subtitle { - font-size: 18px; - color: #370273; - text-align: center; - width: 100%; - float: left; -} - -.alert-limit .btn-done { - height: 54px; - background: #12FFCC; - font-family: 'Source Sans Pro', sans-serif; - font-size: 18px; - color: #125E4D; - text-align: center; - display: inline-block; - border-radius: 40px; - padding: 15px 30px; - margin: 130px 10px 0; - cursor: pointer; -} - -.alert-limit .btn-close { - height: 54px; - background: #F5958B; - font-family: 'Source Sans Pro', sans-serif; - font-size: 18px; - color: #125E4D; - text-align: center; - display: inline-block; - border-radius: 40px; - padding: 15px 30px; - margin: 130px 1px 0; - cursor: pointer; -} - -/**/ - -.fade-enter { - opacity: 0.01; - transition: opacity .2s ease-in; - -webkit-transform: opacity .2s ease-in; - -ms-transform: opacity .2s ease-in; -} - -.fade-enter.fade-enter-active { - opacity: 1; -} - -.fade-leave { - opacity: 1; - transition: opacity .2s ease-in; - -webkit-transform: opacity .2s ease-in; - -ms-transform: opacity .2s ease-in; -} - -.fade-leave.fade-leave-active { - opacity: 0.01; -} - -/* Fade Up */ -.fadeOut-enter { - opacity: 0.00; - transform: translateY(280px); - -webkit-transform: translateY(280px); - -ms-transform: translateY(280px); - transition: all .5s ease-in; -} - -.fadeOut-enter.fadeOut-enter-active { - opacity: 1; - transform: translateY(0px); - -webkit-transform: translateY(0px); - -ms-transform: translateY(0px); -} - -.fadeOut-leave { - opacity: 0; - -webkit-transform: scale(0.6); - -moz-transform: scale(0.6); - -o-transform: scale(0.6); - -ms-transform: scale(0.6); - transform: scale(0.6); - -webkit-transition: 0.5s ease-in-out; - -moz-transition: 0.5s ease-in-out; - -o-transition: 0.5s ease-in-out; - transition: 0.5s ease-in-out; -} - -.fadeOut-leave.example-leave-active { - opacity: 1; - -webkit-transform: scale(1); - -moz-transform: scale(1); - -o-transform: scale(1); - -ms-transform: scale(1); - transform: scale(1); -} -/**/ - -/* Fade Down */ -.fadeDown-enter { - opacity: 0.00; - transform: translateY(-100px); - -webkit-transform: translateY(-100px); - -ms-transform: translateY(-100px); - transition: all .5s ease-in; -} - -.fadeDown-enter.fadeDown-enter-active { - opacity: 1; - transform: translateY(0px); - -webkit-transform: translateY(0px); - -ms-transform: translateY(0px); -} - -.fadeDown-leave { - opacity: 1; - transform: translateY(-280px); - -webkit-transform: translateY(-280px); - -ms-transform: translateY(-280px); - transition: all .3s ease-out; -} - -.fadeDown-leave.example-leave-active { - opacity: 0.01; -} -/**/ - -/* fade list*/ - -.fadeList-enter { - opacity: 0.01; - transition: opacity .2s ease-in; -} - -.fadeList-enter.fadeList-enter-active { - opacity: 1; -} - -.fadeList-leave { - opacity: 1; - transition: opacity .2s ease-in; -} - -.fadeList-leave.fadeList-leave-active { - opacity: 0.01; -} - - -.react-autosuggest__suggestions { - width: 100%; - margin: 10px 0 0 0; - padding: 0px; - list-style: none; - position: absolute; - z-index: 2 -} - -.react-autosuggest__suggestion { - color: #410287; - padding: 20px; - background: #fff; - cursor: pointer; -} - -.react-autosuggest__suggestion--focused { - background: #773CB5; - color: #fff; -} - -.top .react-autosuggest__suggestion { - padding: 15px -} - -/* Tooltip */ -.tooltip.center { - position: relative; -} - -.tooltip.center:before, .tooltip.center:after { + z-index: 10; + background: rgba(27, 15, 55, 0.95); + justify-content: center; + -webkit-align-items: center; + align-items: center; + -ms-flex-align: center; + top: 0; + left: 0; + transition: all 5s ease; opacity: 0; - z-index: 98; - -moz-transition: opacity 300ms, visibility 0ms linear 300ms; - -o-transition: opacity 300ms, visibility 0ms linear 300ms; - -webkit-transition: opacity 300ms, visibility 0ms linear; - -webkit-transition-delay: 0s, 300ms; - transition: opacity 300ms, visibility 0ms linear 300ms; - pointer-events: none; -} - -@media screen and (max-width: 700px) { - .tooltip.center:before, .tooltip.center:after { - display: none !important; - } -} - -.tooltip.center:before { - content: attr(data-tooltip); - position: absolute; - width: 114px; - padding: 10px 15px; - line-height: 18px; - text-align: center; - font-size: 13px; - font-weight: normal; - white-space: normal; - border-radius: 3px; - background-color: #fff; - color: #5e04c2; -} - -.tooltip.center:after { - content: ''; -} - -.tooltip.center:before { - top: -9px; - bottom: auto; - -moz-transform: translateY(-100%); - -ms-transform: translateY(-100%); - -webkit-transform: translateY(-100%); - transform: translateY(-100%); -} - -.tooltip.center:after { - content: ''; - display: block; + -webkit-animation-name: animate-in-fade; + -webkit-animation-delay: .2s; + -webkit-animation-duration: .25s; + -webkit-animation-fill-mode: forwards; + -moz-animation-name: animate-in-fade; + -moz-animation-delay: .2s; + -moz-animation-duration: .25s; + -moz-animation-fill-mode: forwards; + -ms-animation-name: animate-in-fade; + -ms-animation-delay: .2s; + -ms-animation-duration: .25s; + -ms-animation-fill-mode: forwards; + animation-name: animate-in-fade; + animation-delay: .2s; + animation-duration: .25s; + animation-fill-mode: forwards; } + .modal .modal-container { + width: 100%; + max-width: 500px; } + .modal .playlist-name { + background-image: none; } + .modal h1 { + text-align: center; + border-bottom: 1px solid #D1C4E9; + padding: 0 0 20px 0; + margin: 0 0 40px 0; } + .modal h3 { + text-align: left; + margin: 0 20px 0 0; + padding: 0; + color: rgba(255, 255, 255, 0.7); } + .modal .playlist-name-input { + position: relative; } + .modal .playlist-name-input::before { + content: ""; + position: absolute; + right: 15px; + z-index: 3; + top: 0; + bottom: 0; + margin: auto; + height: 30px; + width: 30px; + line-height: 30px; + text-align: center; + font-size: 25px; + color: rgba(255, 255, 255, 0.5); } + .modal input[type='radio'] { + display: none; } + .modal input[type='radio'] + label { + padding: 10px; + border-radius: 20px; + transition: all .25s ease; + cursor: pointer; + color: rgba(255, 255, 255, 0.7); } + .modal input[type='radio'] + label:hover { + color: rgba(255, 255, 255, 0.9); } + .modal input[type='radio'] + label::before { + content: ""; + color: transparent; + display: inline-block; + transition: all .25s ease; + margin-right: 5px; } + .modal input[type='radio']:checked + label { + background: transparent; + color: #CDDC39; } + .modal input[type='radio']:checked + label::before { + content: ""; + color: #CDDC39; + display: inline-block; } + .modal .playlist-status { + padding: 40px 50px; + justify-content: center; + -webkit-align-items: center; + align-items: center; + -ms-flex-align: center; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-direction: row; } + .modal .buttons { + justify-content: flex-end; + -webkit-align-items: center; + align-items: center; + -ms-flex-align: center; + -webkit-flex-direction: row; + flex-direction: row; + -ms-flex-direction: row; + margin-top: 30px; } + .modal .save, + .modal .close { + padding: 20px 30px; + border-radius: 40px; + background: #CDDC39; + color: #212121; + display: inline-block; + transform: scale(1); + transition: all .2s ease; + float: right; } + .modal .save:hover, + .modal .close:hover { + transform: scale(1.06); } + .modal .close { + background: transparent; + color: rgba(255, 255, 255, 0.7); } + .modal .close:hover { + transform: scale(1); + box-shadow: none; + color: rgba(255, 255, 255, 0.9); } + .modal.fade-enter, .modal.fade-appear { + opacity: 0; } + .modal.fade-enter.fade-enter-active, .modal.fade-enter.fade-appear-active, .modal.fade-appear.fade-enter-active, .modal.fade-appear.fade-appear-active { + opacity: 1; } + +@keyframes animate-in-fade { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } +@-moz-keyframes animate-in-fade { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } +@-ms-keyframes animate-in-fade { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } +@-webkit-keyframes animate-in-fade { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } +/************* +Congrats Alert +*************/ +.alert-shadow { position: absolute; - height: 0; - width: 0; - border-top: 6px solid #fff; - border-left: 6px solid transparent; - border-right: 6px solid transparent; - border-bottom: none; - top: -9px; - bottom: auto; -} - -.tooltip.center:before, .tooltip.center:after { - left: 50%; - right: auto; - margin-left: -6px; -} - -.tooltip.center:before { - margin-left: -70px; -} - -.tooltip.center:hover { - /* putting comment here so :hover is declared first by itself to fix ie10 bug with transitions on psuedo elements- http://css-tricks.com/pseudo-element-animationstransitions-bug-fixed-in-webkit/ */ -} + height: 100%; + width: 100%; + z-index: 10; + background: rgba(27, 15, 55, 0.95); + justify-content: center; + -webkit-align-items: center; + align-items: center; + -ms-flex-align: center; + top: 0; + left: 0; + transition: all 5s ease; } + .alert-shadow .alert-modal { + width: 100%; + max-width: 500px; } + +/****************************************** +Transformations when a search is being made +******************************************/ +#container .container.search-state-true > span:nth-child(1) { + -webkit-flex: inherit; + flex: inherit; + -ms-flex: inherit; } +#container .container.search-state-true > span:nth-child(2) { + -webkit-flex: 1; + flex: 1; + -ms-flex: 1; + overflow: hidden; } +#container .container.search-state-true .search-container { + max-width: 100%; + border-bottom: 1px solid #D1C4E9; + -webkit-align-items: center; + align-items: center; + -ms-flex-align: center; } + #container .container.search-state-true .search-container h3 { + display: none; } + #container .container.search-state-true .search-container h1 { + text-align: left; + padding-left: 30px; } + #container .container.search-state-true .search-container .tip * { + opacity: 0; } + #container .container.search-state-true .search-container > div { + -webkit-flex: 1; + flex: 1; + -ms-flex: 1; } + #container .container.search-state-true .search-container .search-box { + -webkit-flex: 1.5; + flex: 1.5; + -ms-flex: 1.5; } + +/*********** +Mobile Stuff +***********/ +@media screen and (max-width: 940px) { + #container .container.search-state-true .search-container { + -webkit-flex-direction: column; + flex-direction: column; + -ms-flex-direction: column; + padding: 15px 0 0; } + #container .container.search-state-true .search-container .tip { + display: none; } + #container .container.search-state-true .search-container h1 { + font-size: 20px; + text-align: center; + padding: 0; + margin: 0; + min-width: 100%; } + #container .container.search-state-true .search-container > div, + #container .container.search-state-true .search-container .search-box { + flex: inherit; + width: 95%; } + #container .container > span:nth-child(1) { + justify-content: flex-start; } + + .search-box { + padding: 15px; } + .search-box .search-group .input-group-btn { + width: 50px; } + .search-box .search-group .input-group-btn .btn-search { + line-height: 50px; + font-size: 20px; } + .search-box .search-group .input-search { + padding: 15px 50px 15px 15px; + font-size: 16px; + text-align: left; } + .search-box .search-group .input-search:focus { + box-shadow: 0 0 20px black; + background-color: #673dcb; + transform: scale(1); + outline: 0; } + .search-box .search-group .input-search:focus::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.2); } + + .react-autosuggest__suggestions { + top: 45px; } + + .modal h1 { + font-size: 25px; } + .modal h2 { + -webkit-flex: inherit; + flex: inherit; + -ms-flex: inherit; + padding-bottom: 20px; } + .modal h3 { + margin: 0 0 20px 0; } + .modal .modal-container { + width: 95%; } + .modal .buttons { + justify-content: center; } + .modal .save, + .modal .close { + -webkit-flex: 1; + flex: 1; + -ms-flex: 1; + text-align: center; } + .modal .playlist-status { + -webkit-flex-direction: column; + flex-direction: column; + -ms-flex-direction: column; } + .modal .playlist-name { + padding: 15px 50px 15px 15px; + font-size: 16px; + text-align: left; } + .modal .playlist-name:focus { + box-shadow: 0 0 20px black; + background-color: #673dcb; + transform: scale(1); + outline: 0; } + .modal .playlist-name:focus::-webkit-input-placeholder { + color: rgba(255, 255, 255, 0.2); } + .modal .playlist-name-input::before { + font-size: 20px; } + + .playlist .info { + -webkit-flex-direction: column; + flex-direction: column; + -ms-flex-direction: column; + height: inherit; + padding: 0 10px 10px; } + .playlist .info .track-name { + flex: inherit; + text-align: center; + padding: 0; + font-size: 16px; } + .playlist .info .track-name::before { + margin-right: 10px; } + .playlist .save-playlist { + padding: 15px; } + .playlist .tracklist { + padding: 0; } + .playlist .tracklist li { + font-size: 14px; } -.tooltip.center:hover:before, .tooltip.center:hover:after { - opacity: 1; - pointer-events: all; - -moz-transition-delay: 0ms; - -o-transition-delay: 0ms; - -webkit-transition-delay: 0ms; - transition-delay: 0ms; -} \ No newline at end of file + .footer { + -webkit-flex-direction: column; + flex-direction: column; + -ms-flex-direction: column; + padding: 10px 0 0; + margin: 10px 0 0; + border-top: 1px solid #D1C4E9; } + .footer > div { + -webkit-flex: inherit; + flex: inherit; + -ms-flex: inherit; + padding: 0 5px; + text-align: center; } + .footer p { + height: inherit; + line-height: inherit; } + .footer .spotify-api { + padding: 5px 0; + text-align: center; } } + +/*# sourceMappingURL=style.css.map */ diff --git a/app/styles/style.css.map b/app/styles/style.css.map new file mode 100644 index 0000000..3fbc9ef --- /dev/null +++ b/app/styles/style.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "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", +"sources": ["style.scss","_fontawesome-icons-vars.scss"], +"names": [], +"file": "style.css" +} \ No newline at end of file diff --git a/app/styles/style.scss b/app/styles/style.scss new file mode 100644 index 0000000..94673ac --- /dev/null +++ b/app/styles/style.scss @@ -0,0 +1,1158 @@ +@font-face { + font-family: 'icons'; + src: url('fonts/fontawesome-webfont.eot?v=4.4.0'); + src: url('fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), + url('fonts/fontawesome-webfont.woff2?v=4.4.0') format('woff2'), + url('fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), + url('fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), + url('fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg'); + font-weight: normal; + font-style: normal; +} + + +@import url(https://fonts.googleapis.com/css?family=Montserrat:400+700); +@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700); +@import 'fontawesome-icons-vars'; + + +$title-font: 'Montserrat', sans-serif; +$main-font: 'Source Sans Pro', sans-serif; +$icon-font: 'icons'; + +%icon-font { + font-family: 'icons'; + -webkit-font-smoothing: antialiased; +} + +$color-white: #fff; +$color-black: #000; +$color-border: #666; +$color-background: #ECEFF1; +/* + +$color-primary-100: #B3E5FC; +$color-primary-500: #03A9F4; +$color-primary-900: #01579B; +*/ + +$color-primary-100: #D1C4E9; +$color-primary-500: #673AB7; +$color-primary-900: #311B92; + +$color-secondary-100: #FFE0B2; +$color-secondary-500: #FF9800; +$color-secondary-900: #E65100; + +$primary-color-dark: #512DA8; +$primary-color: #673AB7; +$primary-color-light: #D1C4E9; +$primary-color-text: #FFFFFF; +$accent-color: #CDDC39; +$primary-text-color: #212121; +$secondary-text-color: #727272; +$divider-color: #B6B6B6; + +%display-flex { + display: -webkit-flex; + display: flex; + display: -ms-flexbox; +} + +%input-field { + font-size: 17px; + width: 100%; + background: $primary-color-dark; + font-family: $main-font; + border-radius: 50px; + padding: 20px; + color: $color-white; + box-shadow: 0 0 0 transparent; + transition: all .2s ease; + position: relative; + top: 0; + text-align: center; + box-sizing: border-box; + border: 1px solid transparentize($color-white, 1); + /*background: { + image: url('../img/search.svg'); + size: 20px; + position: 95% 50%; + repeat: no-repeat; + }*/ + //transform: scale(1); + z-index: 2; + + &::-webkit-input-placeholder { + color: transparentize($color-white, .2); + } + + &:focus { + box-shadow: 0 0 20px transparentize($color-black, 0); + background-color: lighten($primary-color-dark, 10%); + border: 1px solid transparentize($color-white, .8); + //transform: scale(1.06); + outline: 0; + &::-webkit-input-placeholder { + color: transparentize($color-white, .8); + } + } +} + +@mixin flex-direction($direction) { + -webkit-flex-direction: $direction; + flex-direction: $direction; + -ms-flex-direction: $direction; +} + +@mixin flex-justify($justify) { + justify-content: $justify; +} + +@mixin flex-align-items($alignment) { + -webkit-align-items: $alignment; + align-items: $alignment; + -ms-flex-align: $alignment; +} + +@mixin flex($n) { + -webkit-flex: $n; + flex: $n; + -ms-flex: $n; +} + +html, +body { + height: 100%; + width: 100%; + margin: 0; + padding: 0; +} + +body { + font-family: $main-font; + font-size: 16px; + background: darken($primary-color-dark, 28%); + color: $color-white; + box-shadow: 0 0 20vw rgba(0,0,0,.5) inset; +} + +a { + color: $accent-color; + text-decoration: none; +} + +#container { + height: 100%; + @extend %display-flex; + @include flex-direction(column); + @include flex-justify(center); + @include flex-align-items(center); + + .container { + width: 100%; + height: 100%; + @extend %display-flex; + @include flex-direction(column); + @include flex-justify(center); + @include flex-align-items(center); + + > span { + width: 100%; + @extend %display-flex; + @include flex-direction(column); + @include flex-align-items(center); + transition: all 1s ease; + + &:nth-child(1) { + @include flex(1); + @include flex-justify(center); + } + } + } +} + + + +/*************** +Search Container +***************/ + +.search-container { + width: 100%; + max-width: 600px; + text-align: center; + color: transparentize($color-white, .3); + transition: all 1s ease; + + border-bottom: 1px solid transparent; + + h1 { + font-family: $title-font; + font-size: 30px; + color: transparentize($color-white, 0); + transition: all 1s ease; + text-align: center; + padding-left: 0; + min-width: 300px; + } + + .tip { + color: transparentize($color-white, .5); + font-size: 13px; + padding: 20px 0 0; + opacity: 1; + + p { + margin: 0; + padding: 0; + line-height: 22px; + } + } +} + + +/********* +Search Box +*********/ + +.search-box { + + padding: 15px 0; + + .search-group { + position: relative; + + &:focus { + position: relative; + top: 10px; + } + + .input-search { + @extend %input-field; + } + + .input-group-btn { + position: absolute; + right: 0; + height: 100%; + width: 75px; + z-index: 5; + + .btn-search { + cursor: pointer; + height: 100%; + width: 100%; + display: block; + line-height: 62px; + font-size: 25px; + + &::before { + content: $fa-var-search; + @extend %icon-font; + display: block; + color: transparentize($color-white, .5); + transition: all .25s ease; + } + + &:hover::before { + color: transparentize($color-white, .2); + } + } + } + } +} + + + +/******* +Playlist +*******/ + +.playlist { + overflow: hidden; + transition: opacity 2s ease; + width: 100%; + max-width: 800px; + padding: 0 20px; + @extend %display-flex; + @include flex-direction(column); + + .tracklist { + overflow: auto; + height: 100%; + + margin: 0; + padding: 0 30px; + list-style: none; + + li { + padding: 10px 20px; + background: transparentize($color-white, 1); + transition: all .25s ease; + position: relative; + @extend %display-flex; + @include flex-align-items(center); + border-radius: 10px; + list-style: none; + + &:hover { + background: transparentize($color-white, .95); + } + + &::before { + content: ''; + height: 1px; + width: 100%; + background: linear-gradient(to right, transparentize($color-white, 1) 0%, transparentize($color-white, .80) 5%, transparentize($color-white, .80) 95%, transparentize($color-white, 1) 100%); + position: absolute; + bottom: 0; + left: 0; + } + + .remove, + .play { + padding: 0; + cursor: pointer; + display: inline-block; + transition: all .25s ease; + text-align: center; + } + + .remove, + .play > div a, + .play > div .player-loading { + &::before { + content: ''; + height: 30px; + width: 30px; + display: inline-block; + @extend %icon-font; + line-height: 30px; + transform: scale(1); + transition: all .25s ease; + } + } + + .remove { + opacity: .5; + order: 1; + margin-right: -5px; + + &:hover { + opacity: .8; + } + &::before { + content: $fa-var-times; + } + } + + .play .play { + + transform: scale(0, 0); + opacity: 0; + + -webkit-animation-name: animate-in; + -webkit-animation-delay: .2s; + -webkit-animation-duration: .2s; + -webkit-animation-fill-mode: forwards; + -moz-animation-name: animate-in; + -moz-animation-delay: .2s; + -moz-animation-duration: .2s; + -moz-animation-fill-mode: forwards; + -ms-animation-name: animate-in; + -ms-animation-delay: .2s; + -ms-animation-duration: .2s; + -ms-animation-fill-mode: forwards; + animation-name: animate-in; + animation-delay: .2s; + animation-duration: .2s; + animation-fill-mode: forwards; + + &::before { + content: $fa-var-play; + } + + &:hover::before { + transform: scale(1.2); + } + } + + .play > div .player-loading { + &::before { + content: $fa-var-spinner; + opacity: .5; + cursor: default; + } + + &:hover::before { + transform: scale(1); + } + } + + .play .pause { + &::before { + content: $fa-var-pause; + } + + &:hover::before { + transform: scale(1.5); + } + } + + .play > div .player-loading::before { + -webkit-animation-name: spinning; + -webkit-animation-duration: 1s; + -webkit-animation-iteration-count: infinite; + -webkit-animation-timing-function: linear; + + -ms-animation-name: spinning; + -ms-animation-duration: 1s; + -ms-animation-iteration-count: infinite; + -ms-animation-timing-function: linear; + + -moz-animation-name: spinning; + -moz-animation-duration: 1s; + -moz-animation-iteration-count: infinite; + -moz-animation-timing-function: linear; + + animation-name: spinning; + animation-duration: 1s; + animation-iteration-count: infinite; + animation-timing-function: linear; + } + } + + .track-name { + display: inline-block; + @include flex(1); + } + } + + .info { + text-align: center; + @extend %display-flex; + @include flex-direction(row); + padding: 50px 0; + height: 60px; + + .track-name { + font-size: 30px; + @include flex(1); + text-align: left; + margin: 0; + padding: 0 20px 0 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + line-height: 60px; + + &::before { + content: $fa-var-music; + @extend %icon-font; + display: inline-block; + margin-right: 20px; + color: $accent-color; + } + } + } + + .save-playlist { + padding: 20px 30px; + border-radius: 40px; + background: $accent-color; + color: $primary-text-color; + display: inline-block; + transform: scale(1); + transition: all .2s ease; + //box-shadow: 0 0 0 transparentize($color-black, 1); + + &:hover { + transform: scale(1.06); + //box-shadow: 0 0 20px transparentize($color-black, 0); + } + } + + &.fade-enter { + opacity: 0; + padding: 0; + + &.fade-enter-active { + opacity: 1; + padding: 0 20px; + } + } +} + + +@-webkit-keyframes spinning { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +@-ms-keyframes spinning { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +@-moz-keyframes spinning { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +@keyframes spinning { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +/*********** +Auto Suggest +***********/ + +.react-autosuggest__suggestions { + position: absolute; + top: 60px; + left: 0; + right: 0; + width: 92%; + margin: 0 auto; + padding: 0; + list-style: none; + background: lighten($primary-color-light, 15%); + z-index: 1; + //box-shadow: 0 0 35px transparentize($color-black, .7); + opacity: 1; + transform: scale(1, 0); + transform-origin: 0% 0%; + -webkit-animation-name: animate-in; + -webkit-animation-delay: .2s; + -webkit-animation-duration: .2s; + -webkit-animation-fill-mode: forwards; + -moz-animation-name: animate-in; + -moz-animation-delay: .2s; + -moz-animation-duration: .2s; + -moz-animation-fill-mode: forwards; + -ms-animation-name: animate-in; + -ms-animation-delay: .2s; + -ms-animation-duration: .2s; + -ms-animation-fill-mode: forwards; + animation-name: animate-in; + animation-delay: .2s; + animation-duration: .2s; + animation-fill-mode: forwards; + + li { + list-style: none; + padding: 15px 0; + margin: 0; + cursor: pointer; + color: $primary-text-color; + transition: all .25s ease; + background: transparent; + + &:hover { + background: $accent-color; + } + } +} + +@keyframes animate-in { + 0% { + opacity: 0; + transform: scale(1, 0); + } + 100% { + opacity: 1; + transform: scale(1, 1); + } +} + +@-moz-keyframes animate-in { + 0% { + opacity: 0; + transform: scale(1, 0); + } + 100% { + opacity: 1; + transform: scale(1, 1); + } +} + +@-ms-keyframes animate-in { + 0% { + opacity: 0; + transform: scale(1, 0); + } + 100% { + opacity: 1; + transform: scale(1, 1); + } +} + +@-webkit-keyframes animate-in { + 0% { + opacity: 0; + transform: scale(1, 0); + } + 100% { + opacity: 1; + transform: scale(1, 1); + } +} + + + +/***** +Footer +*****/ + +.footer { + width: 100%; + position: relative; + bottom: 0; + left: 0; + font-size: 12px; + @extend %display-flex; + @include flex-direction(row); + z-index: 0; + + p { + padding: 0; + margin: 0; + height: 40px; + line-height: 40px; + + + } + + .spotify-api { + text-align: right; + a { + background: { + image: url('../img/spotify-logo.png'); + size: contain; + repeat: no-repeat; + } + display: inline-block; + height: 20px; + width: 70px; + position: relative; + top: 5px; + margin-left: 5px; + } + } + + > div { + @include flex(1); + padding: 5px 15px; + } +} + + + +/****** +Loading +******/ + +.loading { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + margin: auto; + opacity: 0; + transition: all 2s ease; + display: none; + + &.fade-enter { + opacity: 1; + } + + &.fade-leave { + opacity: 0; + } +} + + +/****************** +Save Playlist Modal +******************/ + +.modal { + position: absolute; + height: 100%; + width: 100%; + z-index: 10; + background: transparentize(darken($primary-color-dark, 28%), .05); + + @extend %display-flex; + @include flex-justify(center); + @include flex-align-items(center); + top: 0; + left: 0; + transition: all 5s ease; + opacity: 0; + + -webkit-animation-name: animate-in-fade; + -webkit-animation-delay: .2s; + -webkit-animation-duration: .25s; + -webkit-animation-fill-mode: forwards; + -moz-animation-name: animate-in-fade; + -moz-animation-delay: .2s; + -moz-animation-duration: .25s; + -moz-animation-fill-mode: forwards; + -ms-animation-name: animate-in-fade; + -ms-animation-delay: .2s; + -ms-animation-duration: .25s; + -ms-animation-fill-mode: forwards; + animation-name: animate-in-fade; + animation-delay: .2s; + animation-duration: .25s; + animation-fill-mode: forwards; + + + .modal-container { + width: 100%; + max-width: 500px; + } + + .playlist-name { + @extend %input-field; + background-image: none; + } + + h1 { + text-align: center; + border-bottom: 1px solid $primary-color-light; + padding: 0 0 20px 0; + margin: 0 0 40px 0; + } + + h3 { + text-align: left; + margin: 0 20px 0 0; + padding: 0; + color: transparentize($color-white, .3); + } + + .playlist-name-input { + position: relative; + + &::before { + content: $fa-var-pencil; + @extend %icon-font; + position: absolute; + right: 15px; + z-index: 3; + top: 0; + bottom: 0; + margin: auto; + height: 30px; + width: 30px; + line-height: 30px; + text-align: center; + font-size: 25px; + color: transparentize($color-white, .5); + } + } + + input[type='radio'] { + display: none; + + + label { + padding: 10px; + border-radius: 20px; + transition: all .25s ease; + cursor: pointer; + color: transparentize($color-white, .3); + + &:hover { + color: transparentize($color-white, .1); + } + + &::before { + content: $fa-var-check; + @extend %icon-font; + color: transparent; + display: inline-block; + transition: all .25s ease; + margin-right: 5px; + } + } + + &:checked { + + label { + background: transparent; + color: $accent-color; + + &::before { + content: $fa-var-check; + @extend %icon-font; + color: $accent-color; + display: inline-block; + } + } + } + } + + .playlist-status { + padding: 40px 50px; + @extend %display-flex; + @include flex-justify(center); + @include flex-align-items(center); + @include flex-direction(row); + } + + .buttons { + @extend %display-flex; + @include flex-justify(flex-end); + @include flex-align-items(center); + @include flex-direction(row); + margin-top: 30px; + } + + .save, + .close { + padding: 20px 30px; + border-radius: 40px; + background: $accent-color; + color: $primary-text-color; + display: inline-block; + transform: scale(1); + transition: all .2s ease; + //box-shadow: 0 0 0 transparentize($color-black, 1); + float: right; + + &:hover { + transform: scale(1.06); + //box-shadow: 0 0 20px transparentize($color-black, 0); + } + } + + .close { + background: transparent; + color: transparentize($color-white, .3); + + &:hover { + transform: scale(1); + box-shadow: none; + color: transparentize($color-white, .1); + } + } + + &.fade-enter, + &.fade-appear { + opacity: 0; + + &.fade-enter-active, + &.fade-appear-active { + opacity: 1; + } + } +} + + +@keyframes animate-in-fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@-moz-keyframes animate-in-fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@-ms-keyframes animate-in-fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@-webkit-keyframes animate-in-fade { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + + +/************* +Congrats Alert +*************/ + +.alert-shadow { + position: absolute; + height: 100%; + width: 100%; + z-index: 10; + background: transparentize(darken($primary-color-dark, 28%), .05); + + @extend %display-flex; + @include flex-justify(center); + @include flex-align-items(center); + top: 0; + left: 0; + transition: all 5s ease; + + .alert-modal { + width: 100%; + max-width: 500px; + } +} + +/****************************************** +Transformations when a search is being made +******************************************/ + +#container .container.search-state-true { + + > span { + &:nth-child(1) { + @include flex(inherit); + } + &:nth-child(2) { + @include flex(1); + overflow: hidden; + } + } + + .search-container { + max-width: 100%; + @extend %display-flex; + border-bottom: 1px solid $primary-color-light; + @include flex-align-items(center); + + h3 { + display: none; + } + + h1 { + text-align: left; + padding-left: 30px; + } + + .tip * { + opacity: 0; + } + + > div { + @include flex(1); + } + + .search-box { + @include flex(1.5); + } + } +} + + + +/*********** +Mobile Stuff +***********/ + +@media screen and (max-width: 940px) { + + #container { + .container { + &.search-state-true { + .search-container { + + @include flex-direction(column); + padding: 15px 0 0; + + .tip { + display: none; + } + + h1 { + font-size: 20px; + text-align: center; + padding: 0; + margin: 0; + min-width: 100%; + } + + > div, + .search-box { + flex: inherit; + width: 95%; + } + } + } + + > span:nth-child(1) { + @include flex-justify(flex-start); + } + } + } + + .search-box { + padding: 15px; + + .search-group { + .input-group-btn { + width: 50px; + + .btn-search { + line-height: 50px; + font-size: 20px; + } + } + + .input-search { + padding: 15px 50px 15px 15px; + font-size: 16px; + text-align: left; + + &:focus { + box-shadow: 0 0 20px transparentize($color-black, 0); + background-color: lighten($primary-color-dark, 10%); + transform: scale(1); + outline: 0; + &::-webkit-input-placeholder { + color: transparentize($color-white, .8); + } + } + } + } + } + + .react-autosuggest__suggestions { + top: 45px; + } + + .modal { + h1 { + font-size: 25px; + } + + h2 { + @include flex(inherit); + padding-bottom: 20px; + } + + h3 { + margin: 0 0 20px 0; + } + + .modal-container { + width: 95%; + } + + .buttons { + @include flex-justify(center); + } + + .save, + .close { + @include flex(1); + text-align: center; + } + + .playlist-status { + @include flex-direction(column); + } + + .playlist-name { + padding: 15px 50px 15px 15px; + font-size: 16px; + text-align: left; + + &:focus { + box-shadow: 0 0 20px transparentize($color-black, 0); + background-color: lighten($primary-color-dark, 10%); + transform: scale(1); + outline: 0; + &::-webkit-input-placeholder { + color: transparentize($color-white, .8); + } + } + } + + .playlist-name-input::before { + font-size: 20px; + } + } + + .playlist { + .info { + @include flex-direction(column); + height: inherit; + padding: 0 10px 10px; + + .track-name { + flex: inherit; + text-align: center; + padding: 0; + font-size: 16px; + + &::before { + margin-right: 10px; + } + } + } + + .save-playlist { + padding: 15px; + } + + .tracklist { + padding: 0; + + li { + font-size: 14px; + } + } + } + + .footer { + @include flex-direction(column); + padding: 10px 0 0; + margin: 10px 0 0; + border-top: 1px solid $primary-color-light; + + > div { + @include flex(inherit); + padding: 0 5px; + text-align: center; + } + + p { + height: inherit; + line-height: inherit; + } + + .spotify-api { + padding: 5px 0; + text-align: center; + } + } +}
-
- 
- Tip: Type a song + artist for better results.
- (ex: Billie Jean, Michael Jackson)
+
;
};
diff --git a/app/js/components/Track.js b/app/js/components/Track.js
index 57729f8..ffc6cc5 100644
--- a/app/js/components/Track.js
+++ b/app/js/components/Track.js
@@ -15,35 +15,18 @@ class Track extends Component {
ga('send', 'event', 'button', 'click', 'playlist-remove-track');
}
- _handleReSearch() {
- PlaylistActions.search(this.props.track, this.props.country);
- ga('send', 'event', 'event', 'new-re-search', this.props.track.name);
- }
-
render() {
let track = this.props.track;
return Tip: Type a song + artist for better results.
(ex: Billie Jean, Michael Jackson)