minor styling updates
This commit is contained in:
Egor
parent
e73518552a
commit
d147a16852
16 changed files with 78 additions and 113 deletions
|
|
@ -1,4 +1,3 @@
|
|||
<div class="title"><img src="assets/images/logo.png" alt="Huegasm"></div>
|
||||
{{#unless bridgeUsername}}
|
||||
{{#if bridgeIp}}
|
||||
<img src="assets/images/pressButtonBridge.png" id="press-bridge-button-img"> {{paper-progress-linear warn=true value=bridgeUserNamePingIntervalProgress}}
|
||||
|
|
|
|||
|
|
@ -41,14 +41,6 @@ body, button {
|
|||
border: none;
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
margin-bottom: 20px;
|
||||
img {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
button.md-warn {
|
||||
background: $secondaryThemeColor;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,15 +15,6 @@
|
|||
margin: 30px auto 20px;
|
||||
}
|
||||
|
||||
#intro {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
#intro-paragraph {
|
||||
margin-bottom: 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#bridge-finder, .ready-block {
|
||||
text-align: center;
|
||||
padding: 10px 15px 0;
|
||||
|
|
@ -31,42 +22,10 @@
|
|||
}
|
||||
|
||||
#bridge-finder {
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
|
|
@ -1,4 +1,3 @@
|
|||
<div class="title"><img src="assets/images/logo.png" alt="Huegasm"></div>
|
||||
{{#unless bridgeUsername}}
|
||||
{{#if bridgeIp}}
|
||||
<img src="assets/images/pressButtonBridge.png" id="press-bridge-button-img"> {{paper-progress-linear warn=true value=bridgeUserNamePingIntervalProgress}}
|
||||
|
|
|
|||
|
|
@ -75,17 +75,21 @@ export default Mixin.create({
|
|||
defaultValue: 0,
|
||||
pips: {
|
||||
mode: 'values',
|
||||
values: [1, 50, 100, 150, 200, 254],
|
||||
values: [1, 63, 127, 190, 254],
|
||||
density: 10,
|
||||
format: {
|
||||
to: function (value) {
|
||||
if (value === 50) {
|
||||
value = 20;
|
||||
} else if (value === 100) {
|
||||
value = 40;
|
||||
} else {
|
||||
value = 'Low';
|
||||
if (value === 63) {
|
||||
value = 25;
|
||||
} else if (value === 127) {
|
||||
value = 50;
|
||||
} else if (value === 190) {
|
||||
value = 75;
|
||||
} else if (value === 254) {
|
||||
value = 100;
|
||||
}
|
||||
|
||||
return value;
|
||||
},
|
||||
from: function (value) { return value; }
|
||||
}
|
||||
|
|
|
|||
|
|
@ -52,13 +52,6 @@ div.ember-modal-dialog {
|
|||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-bottom: 50px;
|
||||
img {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.ps-scrollbar-y-rail {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,10 @@
|
|||
text-align: center;
|
||||
padding: 20px 15px 0;
|
||||
font-size: 16px;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
#bridge-finder .md-bar {
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
|
|
@ -1,3 +1,2 @@
|
|||
{{huegasm-app toggleLightsIcons="toggleLightsIcons" toggleDimmer="toggleDimmer" dimmerOn=dimmerOn lightsIconsOn=lightsIconsOn storage=storage}}
|
||||
|
||||
{{huegasm-footer action="toggleDimmer" dimmerOn=dimmerOn storage=storage}}
|
||||
{{huegasm-app toggleLightsIcons="toggleLightsIcons" toggleDimmer="toggleDimmer" dimmerOn=dimmerOn lightsIconsOn=lightsIconsOn
|
||||
storage=storage}} {{huegasm-footer storage=storage}}
|
||||
|
|
@ -1,4 +1,3 @@
|
|||
<div class="title"><img src="assets/images/logo.png" alt="Huegasm"></div>
|
||||
{{#unless bridgeUsername}}
|
||||
{{#if bridgeIp}}
|
||||
<img src="assets/images/pressButtonBridge.png" id="press-bridge-button-img"> {{paper-progress-linear warn=true value=bridgeUserNamePingIntervalProgress}}
|
||||
|
|
|
|||
|
|
@ -6,23 +6,25 @@
|
|||
{{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.
|
||||
</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 id="intro-background">
|
||||
<div id="intro-wrapper">
|
||||
<p id="intro">
|
||||
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.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{{paper-button raised=true primary=true warn=true onClick=(action "isReady") class="go-button center-block" label="START"}}
|
||||
|
||||
<p>Click <a href="#" {{action "isReady"}}>START</a> to get started with Huegasm.</p>
|
||||
|
||||
<div class="relative">
|
||||
{{paper-button raised=true primary=true warn=true onClick=(action "isReady") class="go-button center-block" label="START"}}
|
||||
<a href="https://www.youtube.com/watch?v=zi9J6Qg-MPw" class="video-icon" target="_blank">
|
||||
{{paper-icon "ondemand video" size=28}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
|
|
@ -11,11 +11,5 @@ export default Component.extend({
|
|||
|
||||
year: computed(function () {
|
||||
return new Date().getFullYear();
|
||||
}),
|
||||
|
||||
actions: {
|
||||
toggleDimmer() {
|
||||
this.sendAction();
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,3 @@
|
|||
<div class="logo" {{action "toggleDimmer"}}></div>
|
||||
|
||||
<div class="footer-text">
|
||||
© {{year}}
|
||||
|
||||
|
|
|
|||
|
|
@ -42,6 +42,7 @@ body, button {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 15px;
|
||||
}
|
||||
|
||||
@media(min-width:767px) {
|
||||
|
|
@ -53,6 +54,7 @@ body, button {
|
|||
.footer-text {
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
padding-left: 39%;
|
||||
a {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
|
@ -63,14 +65,6 @@ body, button {
|
|||
border: none;
|
||||
}
|
||||
|
||||
|
||||
.title {
|
||||
margin-bottom: 20px;
|
||||
img {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
button.md-warn {
|
||||
background: $secondaryThemeColor;
|
||||
}
|
||||
|
|
@ -93,8 +87,40 @@ div.ember-modal-dialog {
|
|||
display: flex !important;
|
||||
}
|
||||
|
||||
#intro-background {
|
||||
min-height: 50vh;
|
||||
min-height: 200px;
|
||||
display: flex;
|
||||
margin-bottom: 20px;
|
||||
padding: 10px 0;
|
||||
#intro-wrapper {
|
||||
width: 80%;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.video-icon {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
@media(max-width:768px) {
|
||||
.footer-text {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// fancy webkit scrollbars
|
||||
@media(min-width:767px) {
|
||||
#intro {
|
||||
padding: 3vh 0;
|
||||
}
|
||||
|
||||
#intro-paragraph {
|
||||
padding-bottom: 2vh;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,22 +16,24 @@
|
|||
}
|
||||
|
||||
#intro {
|
||||
font-size: 22px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
#intro-paragraph {
|
||||
margin-bottom: 20px;
|
||||
font-size: 16px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
#bridge-finder, .ready-block {
|
||||
text-align: center;
|
||||
padding: 10px 15px 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
#bridge-finder {
|
||||
min-height: 500px;
|
||||
flex-direction: column;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.md-bar {
|
||||
background-color: $secondaryThemeColor !important;
|
||||
}
|
||||
|
|
@ -51,11 +53,6 @@
|
|||
overflow:hidden;
|
||||
}
|
||||
|
||||
.embed-container-wrapper {
|
||||
max-width: 550px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.embed-container iframe, .embed-container object, .embed-container embed {
|
||||
position:absolute;
|
||||
top:0;
|
||||
|
|
|
|||
Reference in a new issue