Add a background to info pane for better visibility

diff --git a/Main.css b/Main.css
index 69308ae..8d95ddd 100644 (file)
--- a/Main.css
+++ b/Main.css
@@ -17,19 +17,18 @@
        left: 0;
        bottom: 0;
        width: 100%;
-       padding: 24px;
+       padding: 36px 24px 20px 24px;
        font-size: 24px;
        -webkit-transition-property: opacity;
        -webkit-transition-duration: 0.6s;
+       background: -webkit-gradient(linear, 0 top, 0 bottom, color-stop(0, rgba(255,255,255,0)), color-stop(0.2, rgba(255,255,255,0.8)), color-stop(1, rgba(255,255,255,0.8)));
        color: #303030;
 }
 
-.info.dark {
-       color: #AFAFAf;
-}
-
 .info .enyo-menuitem {
        font-size: 24px;
+       height: 28px;
+       padding-top: 6px;
 }
 
 .wrench {

diff --git a/Main.js b/Main.js
index 086d9eb..2b68860 100644 (file)
--- a/Main.js
+++ b/Main.js
@@ -20,15 +20,15 @@ enyo.kind({
                {name: "preferencesView", kind: "HackPreferences", onClose: "savePreferences"}
        ],
        hacksList: [
-               {name: "Nimbus", kind: "Nimbus", dark: false},
-               {name: "HexaSpinner", kind: "HexaSpinnerHack", dark: false},
-               {name: "Landscape", kind: "Landscape", dark: false},
-               {name: "Munch", kind: "Munch", dark: true},
-               {name: "Orbit", kind: "Orbit", dark: false},
-               {name: "Pixelfade", kind: "Pixelfade", dark: true},
-               //{name: "Swarm", kind: "Swarm", dark: false},       // crashy
-               //{name: "Spinner.CGA", kind: "XSpinnerCGA", dark: true}, // no webfont support
-               {name: "Spinner", kind: "XSpinner", dark: true}
+               {name: "Nimbus", kind: "Nimbus"},
+               {name: "HexaSpinner", kind: "HexaSpinnerHack"},
+               {name: "Landscape", kind: "Landscape"},
+               {name: "Munch", kind: "Munch"},
+               {name: "Orbit", kind: "Orbit"},
+               {name: "Pixelfade", kind: "Pixelfade"},
+               //{name: "Swarm", kind: "Swarm"},       // crashy
+               //{name: "Spinner.CGA", kind: "XSpinnerCGA"}, // no webfont support
+               {name: "Spinner", kind: "XSpinner"}
        ],
        create: function() {
                this.inherited(arguments);
@@ -55,7 +55,6 @@ enyo.kind({
                this.$.hacksListSelector.setValue(this.index);
                this.startHack();
                window.addEventListener('resize', this.resizeHack.bind(this), false);
-               this.$.info.addRemoveClass('dark', this.hacksList[this.index].dark);
                this.setNotice('Swipe for more...');
        },
        setNotice: function(notice) {
@@ -110,7 +109,6 @@ enyo.kind({
                this.index = inValue;
                this.lastScrollPos = 0;
                this.$.hacksCarousel.setCenterView(this.getHack(this.index));
-               this.$.info.addRemoveClass('dark', this.hacksList[this.index].dark);
                // For some reason, setCenterView above fires the startScroll
                // event without a subsequent stopScroll event.  To work around
                // this, we defer the start until later.
@@ -159,7 +157,6 @@ enyo.kind({
                        this.$.hacksListSelector.setValue(this.index);
                        this.hackHidden('right');
                        this.infoFade();
-                       this.$.info.addRemoveClass('dark', this.hacksList[this.index].dark);
                }
                if (this.index == 0)
                        return null;
@@ -172,7 +169,6 @@ enyo.kind({
                        this.$.hacksListSelector.setValue(this.index);
                        this.hackHidden('left');
                        this.infoFade();
-                       this.$.info.addRemoveClass('dark', this.hacksList[this.index].dark);
                }
                if (this.index == this.hacksList.length - 1)
                        return null;