more mobile improvements
This commit is contained in:
parent
36dbc0fe61
commit
009363dd87
14 changed files with 67 additions and 183 deletions
|
|
@ -21,9 +21,25 @@ export default Component.extend({
|
|||
|
||||
lightsTabSelected: computed.equal('selectedTab', 0),
|
||||
musicTabSelected: computed.equal('selectedTab', 1),
|
||||
dimmerOn: false,
|
||||
|
||||
dimmerOnClass: computed('dimmerOn', function(){
|
||||
return this.get('dimmerOn') ? 'dimmerOn md-menu-origin' : 'md-menu-origin';
|
||||
let dimmerOn = this.get('dimmerOn'),
|
||||
storage = this.get('storage'),
|
||||
dimmerOnClass = 'md-menu-origin';
|
||||
|
||||
if (dimmerOn) {
|
||||
$('body').addClass('dimmerOn');
|
||||
$('html').addClass('dimmerOn');
|
||||
dimmerOnClass += ' dimmerOn';
|
||||
} else {
|
||||
$('body').removeClass('dimmerOn');
|
||||
$('html').removeClass('dimmerOn');
|
||||
}
|
||||
|
||||
storage.set('huegasm.dimmerOn', dimmerOn);
|
||||
|
||||
return dimmerOnClass;
|
||||
}),
|
||||
|
||||
ready: computed('lightsData', 'trial', function() {
|
||||
|
|
@ -53,11 +69,17 @@ export default Component.extend({
|
|||
init() {
|
||||
this._super(...arguments);
|
||||
|
||||
let storage = this.get('storage');
|
||||
|
||||
if(!this.get('trial')) {
|
||||
this.updateLightData();
|
||||
this.set('lightsDataIntervalHandle', setInterval(this.updateLightData.bind(this), 2000));
|
||||
}
|
||||
|
||||
if (!isNone(storage.get('huegasm.dimmerOn'))) {
|
||||
this.set('dimmerOn', storage.get('huegasm.dimmerOn'));
|
||||
}
|
||||
|
||||
if (!isNone(this.get('storage').get('huegasm.selectedTab'))) {
|
||||
this.set('selectedTab', this.get('storage').get('huegasm.selectedTab'));
|
||||
}
|
||||
|
|
@ -217,7 +239,7 @@ export default Component.extend({
|
|||
onFinish();
|
||||
dimmer.popover({
|
||||
trigger: 'manual',
|
||||
placement: 'top',
|
||||
placement: 'right',
|
||||
content: 'Click on this icon to toggle the dark theme.'
|
||||
}).popover('show');
|
||||
|
||||
|
|
@ -237,6 +259,9 @@ export default Component.extend({
|
|||
$('.introjs-tooltip').velocity('scroll');
|
||||
}, 500);
|
||||
}).onexit(onExit).oncomplete(onFinish).start();
|
||||
},
|
||||
toggleDimmer(){
|
||||
this.toggleProperty('dimmerOn');
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
{{#if ready}}
|
||||
<div id="navigation">
|
||||
<div id="dimmer" {{action "toggleDimmer"}} class={{dimmerOnClass}}></div>
|
||||
|
||||
{{#each tabData as |tab|}}
|
||||
<span class="navigation-item text-uppercase {{if tab.selected "active"}}" {{action "changeTab" tab.name}}>{{tab.name}}</span>
|
||||
{{/each}}
|
||||
|
||||
<div id="settings">
|
||||
<span data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="settings-itemSettings">
|
||||
{{paper-icon "settings" class=dimmerOnClass id="settings-icon" size=28}}
|
||||
|
|
|
|||
|
|
@ -2,10 +2,7 @@ import Ember from 'ember';
|
|||
|
||||
const {
|
||||
Component,
|
||||
computed,
|
||||
isEmpty,
|
||||
isNone,
|
||||
$
|
||||
isEmpty
|
||||
} = Ember;
|
||||
|
||||
export default Component.extend({
|
||||
|
|
@ -13,31 +10,6 @@ export default Component.extend({
|
|||
bridgeUsername: null,
|
||||
trial: false,
|
||||
storage: null,
|
||||
dimmerOn: false,
|
||||
ready: false,
|
||||
|
||||
year: computed(function(){
|
||||
return new Date().getFullYear();
|
||||
}),
|
||||
|
||||
dimmerOnClass: computed('dimmerOn', function(){
|
||||
let dimmerOn = this.get('dimmerOn'),
|
||||
storage = this.get('storage'),
|
||||
dimmerOnClass = null;
|
||||
|
||||
if (dimmerOn) {
|
||||
$('body').addClass('dimmerOn');
|
||||
$('html').addClass('dimmerOn');
|
||||
dimmerOnClass = 'active';
|
||||
} else {
|
||||
$('body').removeClass('dimmerOn');
|
||||
$('html').removeClass('dimmerOn');
|
||||
}
|
||||
|
||||
storage.set('huegasm.dimmerOn', dimmerOn);
|
||||
|
||||
return dimmerOnClass;
|
||||
}),
|
||||
|
||||
init(){
|
||||
this._super(...arguments);
|
||||
|
|
@ -45,24 +17,11 @@ export default Component.extend({
|
|||
let storage = new window.Locally.Store({compress: true});
|
||||
this.set('storage', storage);
|
||||
|
||||
if (!isNone(storage.get('huegasm.dimmerOn'))) {
|
||||
this.set('dimmerOn', storage.get('huegasm.dimmerOn'));
|
||||
}
|
||||
|
||||
if (!isEmpty(storage.get('huegasm.bridgeIp')) && !isEmpty(storage.get('huegasm.bridgeUsername'))) {
|
||||
this.setProperties({
|
||||
bridgeIp: storage.get('huegasm.bridgeIp'),
|
||||
bridgeUsername: storage.get('huegasm.bridgeUsername')
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
toggleDimmer(){
|
||||
this.toggleProperty('dimmerOn');
|
||||
},
|
||||
isReady(){
|
||||
this.set('ready', true);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,39 +1,5 @@
|
|||
{{#if bridgeUsername}}
|
||||
{{hue-controls bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial dimmerOn=dimmerOn storage=storage}}
|
||||
{{else}}
|
||||
{{#if ready}}
|
||||
{{bridge-finder bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial storage=storage}}
|
||||
{{else}}
|
||||
<div class="ready-block">
|
||||
<div class="title">
|
||||
<img src="assets/images/logo.png" alt="Huegasm">
|
||||
</div>
|
||||
|
||||
<p id="intro">
|
||||
Your lights, meet your music. Huegasm.
|
||||
</p>
|
||||
<p id="intro-paragraph">
|
||||
Huegasm is a free web application for managing and synchronizing your <a target="_blank" href="http://www2.meethue.com">Philips Hue lights</a> with the beat of your music.
|
||||
</p>
|
||||
|
||||
<div class="embed-container-wrapper">
|
||||
<div class="embed-container">
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/zi9J6Qg-MPw" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
</div>
|
||||
{{paper-button raised=true primary=true onClick=(action "isReady") class="go-button center-block" label="Go!"}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{bridge-finder bridgeIp=bridgeIp bridgeUsername=bridgeUsername trial=trial storage=storage}}
|
||||
{{/if}}
|
||||
|
||||
<footer id="footer">
|
||||
<div id="dimmer" {{action "toggleDimmer"}} class={{dimmerOnClass}}></div>
|
||||
|
||||
<div id="footer-text">
|
||||
© {{year}}
|
||||
|
||||
<a href="http://www.egorphilippov.me" target="_blank" rel="noopener noreferrer">
|
||||
Egor Philippov
|
||||
</a>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
@ -4,10 +4,8 @@ const {
|
|||
A,
|
||||
Component,
|
||||
computed,
|
||||
isEmpty,
|
||||
isNone,
|
||||
observer,
|
||||
$
|
||||
observer
|
||||
} = Ember;
|
||||
|
||||
export default Component.extend({
|
||||
|
|
|
|||
|
|
@ -16,55 +16,24 @@
|
|||
@import 'music-tab';
|
||||
@import 'noui-slider';
|
||||
|
||||
html {
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
[data-ember-action] {
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
body {
|
||||
margin-bottom: $footerHeight;
|
||||
position: static;
|
||||
-webkit-tap-highlight-color {
|
||||
rgba: (0, 0, 0, 0);
|
||||
}
|
||||
|
||||
body, button {
|
||||
font-family: 'Slabo 27px', serif;
|
||||
}
|
||||
|
||||
.ember-app {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
#footer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
height: $footerHeight;
|
||||
}
|
||||
|
||||
#footer-text {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
bottom: 10px;
|
||||
a {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.alert {
|
||||
margin-bottom: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
margin-bottom: 20px;
|
||||
img {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
button.md-warn {
|
||||
background: $secondaryThemeColor;
|
||||
}
|
||||
|
|
@ -80,12 +49,18 @@ div.ember-modal-dialog {
|
|||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 30px;
|
||||
img {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
font-size: 14px;
|
||||
a {
|
||||
line-height: 2 !important;
|
||||
}
|
||||
|
||||
}
|
||||
// fancy webkit scrollbars
|
||||
::-webkit-scrollbar {
|
||||
|
|
|
|||
|
|
@ -15,16 +15,7 @@
|
|||
margin: 30px auto;
|
||||
}
|
||||
|
||||
#intro {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
#intro-paragraph {
|
||||
margin-bottom: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#bridge-finder, .ready-block {
|
||||
#bridge-finder {
|
||||
text-align: center;
|
||||
padding: 10px 15px 0;
|
||||
font-size: 16px;
|
||||
|
|
@ -33,41 +24,3 @@
|
|||
#bridge-finder .md-bar {
|
||||
background-color: $secondaryThemeColor !important;
|
||||
}
|
||||
|
||||
// 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: 550px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.embed-container iframe, .embed-container object, .embed-container embed {
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.go-button {
|
||||
margin: 20px 0;
|
||||
border-radius: 100% !important;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
font-size: 28px;
|
||||
&:hover {
|
||||
background: darken(#3f51b5, 10%) !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -69,7 +69,6 @@ body.dimmerOn {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
.paper-icon.dimmerOn {
|
||||
color: inherit !important;
|
||||
text-shadow: $glowingText;
|
||||
|
|
@ -77,9 +76,9 @@ body.dimmerOn {
|
|||
}
|
||||
|
||||
#dimmer {
|
||||
display: inline-block;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: url(images/huegasm.png) center center no-repeat;
|
||||
background-size: 40px 40px;
|
||||
float: left;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: url(images/huegasm.png) center center no-repeat !important;
|
||||
background-size: 30px 30px !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
$playerHeight: 400px;
|
||||
$playerDefaultIconColor: #BBBBBB;
|
||||
$footerHeight: 50px;
|
||||
$playerBottomHeight: 255px;
|
||||
$secondaryThemeColor: #F12B24;
|
||||
$glowingText: 0 0 2px #fff, 0 0 4px #fff, 0 0 20px #228DFF;
|
||||
|
|
|
|||
|
|
@ -9,13 +9,11 @@
|
|||
#light-option {
|
||||
text-align: left !important;
|
||||
top: 20%;
|
||||
-webkit-transform: translateY(-20%);
|
||||
transform: translateY(-20%);
|
||||
}
|
||||
|
||||
#music-tab {
|
||||
padding: 0;
|
||||
margin: 10px 0 $footerHeight + 20px;
|
||||
margin: 10px 0 20px;
|
||||
}
|
||||
|
||||
#slide-toggle {
|
||||
|
|
@ -369,4 +367,8 @@
|
|||
.beat-option {
|
||||
text-align: center !important;
|
||||
}
|
||||
#save-beat-preferences-star {
|
||||
right: 5px;
|
||||
left: initial;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,6 +45,6 @@ md-switch.md-default-theme.md-checked .md-thumb {
|
|||
|
||||
@media(max-width:500px) {
|
||||
md-checkbox .md-label {
|
||||
width: 100px;
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
</div>
|
||||
|
||||
<p id="intro">
|
||||
Your lights, meet your music. Huegasm.
|
||||
Your lights meet your music.
|
||||
</p>
|
||||
<p id="intro-paragraph">
|
||||
Huegasm is a free web application for managing and synchronizing your <a target="_blank" href="http://www2.meethue.com">Philips Hue lights</a> with the beat of your music.
|
||||
|
|
|
|||
|
|
@ -9,8 +9,6 @@
|
|||
#light-option {
|
||||
text-align: left !important;
|
||||
top: 20%;
|
||||
-webkit-transform: translateY(-20%);
|
||||
transform: translateY(-20%);
|
||||
.tooltip {
|
||||
margin-top: 5px !important;
|
||||
}
|
||||
|
|
@ -404,4 +402,8 @@
|
|||
.close {
|
||||
display: block;
|
||||
}
|
||||
#save-beat-preferences-star {
|
||||
right: 5px;
|
||||
left: initial;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -57,6 +57,9 @@ md-switch.md-default-theme.md-checked .md-thumb {
|
|||
|
||||
@media(max-width:500px) {
|
||||
md-checkbox .md-label {
|
||||
width: 100px;
|
||||
width: 70px;
|
||||
}
|
||||
#save-beat-preferences-star {
|
||||
right: 5px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Reference in a new issue