remote: vol up & down.

ngryman · Aug 3, 2012 · 0906774 · 0906774
1 parent 9a2f21d
commit 0906774
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git a/public/stylesheets/remote/remote.css b/public/stylesheets/remote/remote.css
@@ -1,3 +1,6 @@
+#right    { background-image: url(/images/remote/right.png); }
+#down     { background-image: url(/images/remote/down.png); }
+#voldown  { background-image: url(/images/remote/down.png); }
 html, body {
     width: 100%;
     height: 100%;
@@ -74,6 +77,15 @@ button {
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
 }
 
+.cross .top .touch:first-child,
+.cross .top .touch:last-child,
+.cross .bottom .touch:first-child,
+.cross .bottom .touch:last-child {
+    background: transparent;
+    border: none;
+    box-shadow: none;
+}
+
 .cross .middle .touch:nth-child(2) {
     border-top: solid 1px transparent;
 }
@@ -84,6 +96,14 @@ button {
     background-size: 60px 60px;
 }
 
+#up {
+    background-image: url(/images/remote/up.png);
+}
+
+#volup {
+    background-image: url(/images/remote/vol_up.png);
+}
+
 #fb {
     background-image: url(/images/remote/fb.png);
 }
@@ -126,6 +146,9 @@ button {
     background-image: url(/images/remote/down.png);
 }
 
+#voldown {
+    background-image: url(/images/remote/vol_down.png);
+}
 
 #return {
     background-image: url(/images/remote/return.png);

diff --git a/views/remote.ejs b/views/remote.ejs
@@ -18,13 +18,21 @@
             <div class="touch"><button id="ff">Fast Forward</button></div>
         </div>
         <div class="cross">
-            <div class="top touch"><button id="up">Up</button></div>
+            <div class="top">
+                <div class="touch"></div>
+                <div class="touch"><button id="up">Up</button></div>
+                <div class="touch"><button id="volup">Up</button></div>
+            </div>
             <div class="middle">
                 <div class="touch"><button id="left">Left</button></div>
                 <div class="touch"><button id="ok">OK</button></div>
                 <div class="touch"><button id="right">Right</button></div>
             </div>
-            <div class="bottom touch"><button id="down">Down</button></div>
+            <div class="bottom">
+                <div class="touch"></div>
+                <div class="touch"><button id="down">Down</button></div>
+                <div class="touch"><button id="voldown">Down</button></div>
+            </div>
         </div>
         <div class="bar">
             <div class="touch"><button id="return"></button></div>