fixing bugs caused by modernization, move component to sub-components in the pod structure, comment more bootstrap modules, move over the ember-notify.css to the project
This commit is contained in:
Egor!
parent
5edb41a41e
commit
1b2635f6c4
27 changed files with 286 additions and 151 deletions
|
|
@ -9,6 +9,22 @@
|
|||
<meta name="author" content="Egor Philippov">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "http://schema.org",
|
||||
"@type": "WebSite",
|
||||
"name": "Huegasm",
|
||||
"url": "http://www.huegasm.com/"
|
||||
}
|
||||
</script>
|
||||
|
||||
<!--Open graph meta tags -->
|
||||
<meta property="og:title" content="Huegasm" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:site_name" content="Huegasm" />
|
||||
<meta property="og:url" content="http://www.huegasm.com/" />
|
||||
<meta property="og:image" content="/mstile-144x144.png" />
|
||||
|
||||
<link type="text/plain" rel="author" href="http://www.huegasm.com/humans.txt" />
|
||||
|
||||
{{content-for 'head'}}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ const {
|
|||
} = Ember;
|
||||
|
||||
export default Component.extend({
|
||||
classNames: ['container', 'bridgeFinder'],
|
||||
classNames: ['container', 'bridge-finder'],
|
||||
bridgeIp: null,
|
||||
trial: false,
|
||||
bridgeUsername: null,
|
||||
|
|
|
|||
|
|
@ -3,8 +3,8 @@
|
|||
{{#if bridgeIp}}
|
||||
{{#if error}}
|
||||
<p>Huegasm encountered a critical error while trying to connect to your bridge.<br><br>
|
||||
This likely happened because you're using an outdated browser and/or because your browser does not support <a href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing">CORS</a>. Feel free to contact me through the link at the bottom of the page if you feel like this is not the case.<br>
|
||||
For the best browsing experience on this site ( and every other one known to man ) please switch to <a href="https://www.google.com/chrome/">Google Chrome</a> or <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a></p>.
|
||||
This likely happened because you're using an outdated browser and/or because your browser does not support <a href="https://en.wikipedia.org/wiki/Cross-origin_resource_sharing" target="_blank" rel="noopener noreferrer">CORS</a>. Feel free to contact me through the link at the bottom of the page if you feel like this is not the case.<br>
|
||||
For the best browsing experience on this site ( and every other one known to man ) please switch to <a href="https://www.google.com/chrome/" target="_blank" rel="noopener noreferrer">Google Chrome</a> or <a href="https://www.mozilla.org/en-US/firefox/new/" target="_blank" rel="noopener noreferrer">Firefox</a></p>.
|
||||
{{else}}
|
||||
<img src="assets/images/pressButtonBridge.png" id="press-bridge-button-img">
|
||||
{{paper-progress-linear warn=true value=bridgeUserNamePingIntervalProgress}}
|
||||
|
|
|
|||
|
|
@ -10,6 +10,6 @@
|
|||
{{/each}}
|
||||
{{/paper-list}}
|
||||
|
||||
{{add-group-modal lightsData=lightsData groupsData=groupsData isShowingModal=isShowingAddGroupsModal apiURL=apiURL updateGroupsData=updateGroupsData action="toggleAddGroupsModal"}}
|
||||
{{groups-list/add-group-modal lightsData=lightsData groupsData=groupsData isShowingModal=isShowingAddGroupsModal apiURL=apiURL updateGroupsData=updateGroupsData action="toggleAddGroupsModal"}}
|
||||
|
||||
{{delete-group-modal groupName=deleteGroupName groupId=deleteGroupId groupsData=groupsData isShowingModal=isShowingConfirmDeleteModal apiURL=apiURL updateGroupsData=updateGroupsData groupIdSelection=groupIdSelection action="toggleConfirmDeleteGroupsModal"}}
|
||||
{{groups-list/delete-group-modal groupName=deleteGroupName groupId=deleteGroupId groupsData=groupsData isShowingModal=isShowingConfirmDeleteModal apiURL=apiURL updateGroupsData=updateGroupsData groupIdSelection=groupIdSelection action="toggleConfirmDeleteGroupsModal"}}
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
{{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial active=lights-tabSelected colorLoopOn=colorLoopOn dimmerOn=dimmerOn}}
|
||||
{{lights-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights trial=trial active=lightsTabSelected colorLoopOn=colorLoopOn dimmerOn=dimmerOn}}
|
||||
|
||||
{{music-tab apiURL=apiURL lightsData=lightsData activeLights=activeLights active=musicTabSelected pauseLightUpdates=pauseLightUpdates dimmerOn=dimmerOn storage=storage colorLoopOn=colorLoopOn action="startIntro"}}
|
||||
{{/if}}
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
<span class="relative">
|
||||
<span id="dimmer" {{action "toggleDimmer"}} class={{dimmerOnClass}}></span>© {{year}}
|
||||
|
||||
<a href="http://egorphilippov.me" target="_blank">
|
||||
<a href="http://egorphilippov.me" target="_blank" rel="noopener noreferrer">
|
||||
Egor Philippov
|
||||
</a>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -24,7 +24,7 @@
|
|||
{{#paper-button raised=true class="color" action="toggleColorPicker" disabled=trial}}{{/paper-button}}
|
||||
|
||||
{{#if colorPickerDisplayed}}
|
||||
{{color-picker lightsData=lightsData activeLights=activeLights rgb=rgb}}
|
||||
{{lights-tab/color-picker lightsData=lightsData activeLights=activeLights rgb=rgb}}
|
||||
{{/if}}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{{#if isShowingModal}}
|
||||
{{#modal-dialog close="close" alignment="center" translucentOverlay=true attachment="center" targetAttachment="center"}}
|
||||
|
||||
<p>Enter a <a href="https://soundcloud.com">SoundCloud</a> track or playlist/set URL</p>
|
||||
<p>Enter a <a href="https://soundcloud.com" target="_blank" rel="noopener noreferrer">SoundCloud</a> track or playlist/set URL</p>
|
||||
<p>( ex. https://soundcloud.com/mrsuicidesheep/tracks )</p>
|
||||
|
||||
{{paper-input label="SoundCloud URL" icon="search" value=url}}
|
||||
|
|
@ -466,7 +466,12 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
picture = result.user.avatar_url;
|
||||
}
|
||||
|
||||
this.get('playQueue').pushObject({url: result.stream_url + '?client_id=' + this.get('SC_CLIENT_ID'), fileName: result.title + ' - ' + result.user.username, artist: result.user.username, scUrl: result.permalink_url, title: result.title, artworkUrl: result.artwork_url, picture: picture });
|
||||
$.get(picture)
|
||||
.done(()=>{
|
||||
this.get('playQueue').pushObject({url: result.stream_url + '?client_id=' + this.get('SC_CLIENT_ID'), fileName: result.title + ' - ' + result.user.username, artist: result.user.username, scUrl: result.permalink_url, title: result.title, picture: picture });
|
||||
}).fail(()=>{ // no picture
|
||||
this.get('playQueue').pushObject({url: result.stream_url + '?client_id=' + this.get('SC_CLIENT_ID'), fileName: result.title + ' - ' + result.user.username, artist: result.user.username, scUrl: result.permalink_url, title: result.title });
|
||||
});
|
||||
} else {
|
||||
failedSongs.push(result.title);
|
||||
}
|
||||
|
|
@ -617,7 +622,7 @@ export default Component.extend(helperMixin, visualizerMixin, {
|
|||
let track = $('.track'+index);
|
||||
|
||||
if(!isNone(track) && !isNone(track.offset())) {
|
||||
track.velocity('scroll');
|
||||
track.velocity('scroll', { container: $('#play-list-area') });
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -138,10 +138,14 @@ export default Mixin.create({
|
|||
// used to insure that we don't replay the same thing multiple times in shuffle mode
|
||||
shufflePlayed: [],
|
||||
|
||||
// noUiSlider connection specification
|
||||
filledConnect: [true, false],
|
||||
hueRangeConnect: [false, true, false],
|
||||
|
||||
SC_CLIENT_ID: 'aeec0034f58ecd85c2bd1deaecc41594',
|
||||
notFoundHtml: '<div class="alert alert-danger" role="alert">A microphone was not found.</div>',
|
||||
scUserNotSupportedHtml: '<div class="alert alert-danger" role="alert">SoundCloud user URLs are not supported.</div>',
|
||||
tooManySoundCloudFuckUps: '<div class="alert alert-danger" role="alert">The SoundCloud API is not seving the audio properly. More details <a href="https://www.soundcloudcommunity.com/soundcloud/topics/some-soundcloud-cdn-hosted-tracks-dont-have-access-control-allow-origin-header" target="_blank">HERE</a>.</div>',
|
||||
tooManySoundCloudFuckUps: '<div class="alert alert-danger" role="alert">The SoundCloud API is not seving the audio properly. More details <a href="https://www.soundcloudcommunity.com/soundcloud/topics/some-soundcloud-cdn-hosted-tracks-dont-have-access-control-allow-origin-header" target="_blank" rel="noopener noreferrer">HERE</a>.</div>',
|
||||
notStreamableHtml(fileNames){
|
||||
let html = '<div class="alert alert-danger" role="alert">The following file(s) could not be added because they are not allowed to be streamed:<br>' + fileNames.toString().replace(/,/g, '<br>') + '</div>';
|
||||
|
||||
|
|
@ -194,7 +198,7 @@ export default Mixin.create({
|
|||
|
||||
if(playQueuePointer !== -1 && !usingMicAudio && currentVisName === 'None'){
|
||||
let song = playQueue[playQueuePointer];
|
||||
if(song.scUrl){
|
||||
if(song.scUrl && !isNone(song.picture)){
|
||||
pic = song.picture.replace('67x67', '500x500');
|
||||
} else {
|
||||
pic = song.picture;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
<div id="player-controls">
|
||||
{{#if usingLocalAudio}}
|
||||
{{range-slider start=seekPosition min=0 max=100 id="seek-slider" slide="seekChanged"}}
|
||||
{{range-slider start=seekPosition min=0 max=100 connect=filledConnect id="seek-slider" on-slide="seekChanged"}}
|
||||
|
||||
{{#if playQueueNotEmpty}}
|
||||
<span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" id="prevTooltip"
|
||||
|
|
@ -20,7 +20,7 @@
|
|||
-->{{/if}}<!--
|
||||
--><span data-toggle="tooltip" data-placement="top" class="bootstrap-tooltip" id="volumeMutedTooltip"
|
||||
data-title={{volumeMutedTooltipTxt}} {{action "volumeMutedChanged"}}>{{paper-icon icon=volumeIcon class=volumeMutedClass}}</span><!--
|
||||
-->{{range-slider start=volume min=0 max=100 slide="volumeChanged" id="volume-bar" class="hidden-xs"}}
|
||||
-->{{range-slider start=volume min=0 max=100 connect=filledConnect on-slide="volumeChanged" id="volume-bar" class="hidden-xs"}}
|
||||
|
||||
<div id="player-time-controls">{{timeElapsedTxt}} / {{timeTotalTxt}}</div>
|
||||
{{/if}}
|
||||
|
|
@ -141,67 +141,74 @@
|
|||
</div>
|
||||
|
||||
<div id="player-bottom" class="row {{if dimmerOn "dimmerOn"}}">
|
||||
<div id="beat-area" class="col-sm-7 col-xs-12">
|
||||
{{#if usingBeatPreferences}}
|
||||
<span data-toggle="tooltip" data-placement="bottom" data-title="Using the saved sensitivity preference from the last time you listened to this song" class="bootstrap-tooltip" id="save-beat-preferences-star">
|
||||
{{paper-icon class=dimmerOnClass icon="star"}}
|
||||
</span>
|
||||
{{/if}}
|
||||
<div id="beat-area" class="col-sm-7 col-xs-12">
|
||||
{{#if usingBeatPreferences}}
|
||||
<span data-toggle="tooltip" data-placement="bottom" data-title="Using the saved sensitivity preference from the last time you listened to this song" class="bootstrap-tooltip" id="save-beat-preferences-star">
|
||||
{{paper-icon class=dimmerOnClass icon="star"}}
|
||||
</span>
|
||||
{{/if}}
|
||||
|
||||
<div class="row" id="beat-option-row">
|
||||
<div class="beat-option col-xs-4">
|
||||
<span data-toggle="tooltip" data-placement="bottom" data-title="The sensitivity of the beat detector ( more sensitivity results in more registered beats )" class="optionDescription bootstrap-tooltip">Sensitivity</span>
|
||||
{{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range slide="thresholdChanged" pips=beatOptions.threshold.pips}}
|
||||
</div>
|
||||
|
||||
<div class="beat-option col-xs-4">
|
||||
<span data-toggle="tooltip" data-placement="bottom" data-title="The range of hues ( colors ) that the lights may change to on beat." class="optionDescription bootstrap-tooltip">Hue Range</span>
|
||||
{{range-slider start=hueRange orientation="vertical" step=beatOptions.hueRange.step range=beatOptions.hueRange.range slide="hueRangeChanged" pips=beatOptions.hueRange.pips}}
|
||||
</div>
|
||||
|
||||
{{#if usingMicAudio}}
|
||||
<div class="row" id="beat-option-row">
|
||||
<div class="beat-option col-xs-4">
|
||||
<span data-toggle="tooltip" data-placement="bottom" data-title="The coefficient to boost the microphone signal by" class="optionDescription bootstrap-tooltip">Mic Boost</span>
|
||||
{{range-slider start=micBoost orientation="vertical" step=beatOptions.micBoost.step range=beatOptions.micBoost.range slide="micBoostChanged" pips=beatOptions.micBoost.pips}}
|
||||
<span data-toggle="tooltip" data-placement="bottom" data-title="The sensitivity of the beat detector ( more sensitivity results in more registered beats )" class="optionDescription bootstrap-tooltip">
|
||||
Sensitivity
|
||||
</span>
|
||||
|
||||
{{range-slider start=threshold orientation="vertical" step=beatOptions.threshold.step range=beatOptions.threshold.range on-slide="thresholdChanged" pips=beatOptions.threshold.pips}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div id="light-option" class="beat-option col-xs-4">
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Quickly flash the lights on beat" class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
|
||||
{{#paper-checkbox checked=flashingTransitions}}Flashing Transitions{{/paper-checkbox}}
|
||||
</span>
|
||||
<div class="beat-option col-xs-4">
|
||||
<span data-toggle="tooltip" data-placement="bottom" data-title="The range of hues ( colors ) that the lights may change to on beat." class="optionDescription bootstrap-tooltip">
|
||||
Hue Range
|
||||
</span>
|
||||
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Slowly cycle the lights through all the colors" class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
|
||||
{{#paper-checkbox checked=colorloopMode}}Colorloop{{/paper-checkbox}}
|
||||
</span>
|
||||
{{range-slider start=hueRange orientation="vertical" step=beatOptions.hueRange.step range=beatOptions.hueRange.range connect=hueRangeConnect on-slide="hueRangeChanged" pips=beatOptions.hueRange.pips}}
|
||||
</div>
|
||||
|
||||
{{!--<span data-toggle="tooltip" data-placement="bottom auto" data-title="Periodically turn the lights on and off to create a cool looking ambience" class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
|
||||
{{#paper-checkbox checked=ambienceMode}}Ambience{{/paper-checkbox}}
|
||||
</span>--}}
|
||||
</div>
|
||||
</div>
|
||||
{{#if usingMicAudio}}
|
||||
<div class="beat-option col-xs-4">
|
||||
<span data-toggle="tooltip" data-placement="bottom" data-title="The coefficient to boost the microphone signal by" class="optionDescription bootstrap-tooltip">
|
||||
Mic Boost
|
||||
</span>
|
||||
|
||||
</div>
|
||||
{{range-slider start=micBoost orientation="vertical" step=beatOptions.micBoost.step range=beatOptions.micBoost.range on-slide="micBoostChanged" pips=beatOptions.micBoost.pips}}
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
<div id="beat-container" class="col-sm-5">
|
||||
<div class="bezel">
|
||||
<div class="rivet1"></div>
|
||||
<div class="rivet2"></div>
|
||||
<div class="rivet3"></div>
|
||||
<div class="rivet4"></div>
|
||||
<div class="rivet5"></div>
|
||||
<div class="rivet6"></div>
|
||||
<div class="rivet7"></div>
|
||||
<div class="rivet8"></div>
|
||||
<div id="light-option" class="beat-option col-xs-4">
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Quickly flash the lights on beat" class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
|
||||
{{#paper-checkbox checked=flashingTransitions}}Flashing Transitions{{/paper-checkbox}}
|
||||
</span>
|
||||
|
||||
<div id="beat-speaker-center-outer">
|
||||
<div id="beat-speaker-center-inner" class="pointer" {{action "clickSpeaker"}}>
|
||||
<span data-toggle="tooltip" data-placement="bottom auto" data-title="Slowly cycle the lights through all the colors" class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
|
||||
{{#paper-checkbox checked=colorloopMode}}Colorloop{{/paper-checkbox}}
|
||||
</span>
|
||||
|
||||
{{!--<span data-toggle="tooltip" data-placement="bottom auto" data-title="Periodically turn the lights on and off to create a cool looking ambience" class="bootstrap-tooltip" {{action "hideTooltip" on="mouseLeave"}}>
|
||||
{{#paper-checkbox checked=ambienceMode}}Ambience{{/paper-checkbox}}
|
||||
</span>--}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="beat-container" class="col-sm-5 col-xs-12">
|
||||
<div class="bezel">
|
||||
<div class="rivet1"></div>
|
||||
<div class="rivet2"></div>
|
||||
<div class="rivet3"></div>
|
||||
<div class="rivet4"></div>
|
||||
<div class="rivet5"></div>
|
||||
<div class="rivet6"></div>
|
||||
<div class="rivet7"></div>
|
||||
<div class="rivet8"></div>
|
||||
|
||||
<div id="beat-speaker-center-outer">
|
||||
<div id="beat-speaker-center-inner" class="pointer" {{action "clickSpeaker"}}></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{ember-notify messageStyle='bootstrap' closeAfter=5000}}
|
||||
|
||||
{{add-soundcloud-sound-modal action="handleNewSoundCloudURL" isShowingModal=isShowingAddSoundCloudModal}}
|
||||
{{music-tab/add-soundcloud-sound-modal action="handleNewSoundCloudURL" isShowingModal=isShowingAddSoundCloudModal}}
|
||||
|
|
@ -7,8 +7,8 @@
|
|||
@import 'bridge-finder';
|
||||
@import 'common';
|
||||
@import 'dimmer';
|
||||
@import 'ember-notify';
|
||||
@import 'fancy-speaker';
|
||||
@import 'index';
|
||||
@import 'introjs';
|
||||
@import 'group-controls';
|
||||
@import 'hue-controls';
|
||||
|
|
@ -50,10 +50,6 @@ body, button {
|
|||
}
|
||||
}
|
||||
|
||||
.ember-notify-default.ember-notify-cn {
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.alert {
|
||||
margin-bottom: 0;
|
||||
border: none;
|
||||
|
|
|
|||
36
web/app/styles/bootstrap.scss
vendored
36
web/app/styles/bootstrap.scss
vendored
|
|
@ -10,43 +10,43 @@
|
|||
|
||||
// Reset and dependencies
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/normalize";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/print";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/glyphicons";
|
||||
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/print";
|
||||
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/glyphicons";
|
||||
|
||||
// Core CSS
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/scaffolding";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/type";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/code";
|
||||
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/code";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/grid";
|
||||
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/tables";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/forms";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/buttons";
|
||||
|
||||
// Components
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/component-animations";
|
||||
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/component-animations";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/dropdowns";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/button-groups";
|
||||
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/button-groups";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/input-groups";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/navs";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/navbar";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/pagination";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/pager";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/labels";
|
||||
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/navs";
|
||||
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/navbar";
|
||||
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs";
|
||||
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/pagination";
|
||||
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/pager";
|
||||
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/labels";
|
||||
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/badges";
|
||||
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/jumbotron";
|
||||
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/thumbnails";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/alerts";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/progress-bars";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/media";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/list-group";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/panels";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed";
|
||||
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/progress-bars";
|
||||
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/media";
|
||||
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/list-group";
|
||||
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/panels";
|
||||
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed";
|
||||
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/wells";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/close";
|
||||
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/close";
|
||||
|
||||
// Components w/ JavaScript
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/modals";
|
||||
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/modals";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/tooltip";
|
||||
@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/popovers";
|
||||
//@import "bower_components/bootstrap-sass/assets/stylesheets/bootstrap/carousel";
|
||||
|
|
|
|||
|
|
@ -14,3 +14,59 @@
|
|||
max-width: 200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#intro {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
#intro-paragraph {
|
||||
margin-bottom: 50px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.bridge-finder, .ready-block {
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
// preloading image
|
||||
.ready-block:after {
|
||||
display: none;
|
||||
content: url(images/pressButtonBridge.png);
|
||||
}
|
||||
|
||||
.embed-container {
|
||||
position:relative;
|
||||
padding-bottom:56.25%;
|
||||
padding-top:30px;
|
||||
height:0;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.embed-container-wrapper {
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.embed-container iframe, .embed-container object, .embed-container embed {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.go-button {
|
||||
margin-top: 20px;
|
||||
border-radius: 100% !important;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
span {
|
||||
font-size: 28px;
|
||||
width: 100%;
|
||||
}
|
||||
&:hover {
|
||||
background: darken(#3f51b5, 10%) !important;
|
||||
}
|
||||
}
|
||||
102
web/app/styles/ember-notify.scss
Normal file
102
web/app/styles/ember-notify.scss
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
.ember-notify-default.ember-notify-cn {
|
||||
position: fixed;
|
||||
z-index: 5000;
|
||||
right: 0;
|
||||
top: 20px;
|
||||
}
|
||||
|
||||
.ember-notify-default .ember-notify {
|
||||
display: block;
|
||||
margin: 10px;
|
||||
position: relative;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.ember-notify-default .ember-notify-show {
|
||||
-webkit-animation-duration: 500ms;
|
||||
animation-duration: 500ms;
|
||||
-webkit-animation-name: ember-notify-show;
|
||||
animation-name: ember-notify-show;
|
||||
-webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
|
||||
animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
|
||||
}
|
||||
|
||||
.ember-notify-default .ember-notify-hide {
|
||||
-webkit-animation-duration: 250ms;
|
||||
animation-duration: 250ms;
|
||||
-webkit-animation-name: ember-notify-hide;
|
||||
animation-name: ember-notify-hide;
|
||||
-webkit-animation-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045);
|
||||
animation-timing-function: cubic-bezier(0.600, -0.280, 0.735, 0.045);
|
||||
}
|
||||
|
||||
.ember-notify-hide:hover {
|
||||
-webkit-animation-play-state: paused;
|
||||
-moz-animation-play-state: paused;
|
||||
-o-animation-play-state: paused;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
@-webkit-keyframes ember-notify-show {
|
||||
from {
|
||||
right: -310px;
|
||||
}
|
||||
to {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes ember-notify-show {
|
||||
from {
|
||||
right: -310px;
|
||||
}
|
||||
to {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes ember-notify-hide {
|
||||
from {
|
||||
right: 0;
|
||||
}
|
||||
to {
|
||||
right: -310px;
|
||||
}
|
||||
}
|
||||
@keyframes ember-notify-hide {
|
||||
from {
|
||||
right: 0;
|
||||
}
|
||||
to {
|
||||
right: -310px;
|
||||
}
|
||||
}
|
||||
|
||||
.ember-notify-default .ember-notify .close {
|
||||
float: right;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 680px) {
|
||||
.ember-notify-default.ember-notify-cn {
|
||||
width: 100%;
|
||||
padding-left: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.ember-notify-default .ember-notify {
|
||||
width: 100%;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.ember-notify-cn .clearfix {
|
||||
*zoom: 1;
|
||||
}
|
||||
.ember-notify-cn .clearfix:before,
|
||||
.ember-notify-cn .clearfix:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.ember-notify-cn .clearfix:after {
|
||||
clear: both;
|
||||
}
|
||||
|
|
@ -57,6 +57,8 @@ $bezelsize: 240px;
|
|||
position: relative;
|
||||
background-color: #A8A8A8;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.8), inset 3px 3px 10px rgba(0, 0, 0, 0.8), 0 0 2px rgba(0, 0, 0, 0.8), inset 0 0 30px -5px rgba(0, 0, 0, 0.8);
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
.rivet1 {
|
||||
@extend %rivet;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
$playerHeight: 400px;
|
||||
$playerDefaultIconColor: #BBBBBB;
|
||||
$footerHeight: 40px;
|
||||
$playerBottomHeight: 250px;
|
||||
$playerBottomHeight: 255px;
|
||||
$secondaryThemeColor: #F12B24;
|
||||
$glowingText: 0 0 2px #fff, 0 0 8px #fff, 0 0 20px #228DFF;
|
||||
$dimmerOnButtonColor: #404040;
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
#intro {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
#intro-paragraph {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.bridgeFinder, .ready-block {
|
||||
text-align: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
// preloading image
|
||||
.ready-block:after {
|
||||
display: none;
|
||||
content: url(images/pressButtonBridge.png);
|
||||
}
|
||||
|
||||
.embed-container {
|
||||
position:relative;
|
||||
padding-bottom:56.25%;
|
||||
padding-top:30px;
|
||||
height:0;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.embed-container-wrapper {
|
||||
max-width: 600px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.embed-container iframe, .embed-container object, .embed-container embed {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.go-button {
|
||||
margin-top: 20px;
|
||||
border-radius: 100% !important;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
span {
|
||||
font-size: 28px;
|
||||
width: 100%;
|
||||
}
|
||||
&:hover {
|
||||
background: darken(#3f51b5, 10%) !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -10,9 +10,9 @@
|
|||
|
||||
#light-option {
|
||||
text-align: left !important;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
top: 20%;
|
||||
-webkit-transform: translateY(-20%);
|
||||
transform: translateY(-20%);
|
||||
.tooltip {
|
||||
margin-top: 5px !important;
|
||||
left: 0 !important;
|
||||
|
|
@ -107,7 +107,7 @@
|
|||
}
|
||||
|
||||
#player-area * .noUi-base {
|
||||
background-color: $secondaryThemeColor;
|
||||
background-color: black;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
|
|
@ -185,17 +185,17 @@
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
#play-list-area.dragHereHighlight {
|
||||
#play-list-area.drag-here-highlight {
|
||||
background-color: white;
|
||||
border: 5px dotted #5383ff;
|
||||
}
|
||||
|
||||
#play-list-area.draggingOver {
|
||||
#play-list-area.dragging-over {
|
||||
background-color: darken(white, 5%);
|
||||
box-shadow: inset 0 0 20px 0 rgba(0, 0, 0, 1);
|
||||
}
|
||||
|
||||
#fileInput {
|
||||
#file-input {
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
visibility: hidden;
|
||||
|
|
@ -280,14 +280,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
#playerBottom {
|
||||
#player-bottom {
|
||||
color: black;
|
||||
border: 1px solid black;
|
||||
width: 100%;
|
||||
background: white;
|
||||
}
|
||||
|
||||
#beatContainer {
|
||||
#beat-container {
|
||||
padding: 0;
|
||||
height: $playerBottomHeight;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,11 +2,11 @@
|
|||
|
||||
.noUi-value-vertical {
|
||||
margin-top: -10px;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.noUi-value-vertical, .noUi-pips {
|
||||
color: inherit !important;
|
||||
font: 400 14px 'Slabo 27px';
|
||||
}
|
||||
|
||||
.noUi-vertical .noUi-handle {
|
||||
|
|
|
|||
Reference in a new issue