Basic sliding sub-page functionality. See #56

frontend/app/views/index.php

@@ -32,6 +32,9 @@
 	</div>
 	<div id="stations">
 	</div>
+	<div id="nowplaying">
+		<h1 style="text-align: center;position: absolute; top: 50%; left: 47%;">Coming Soon</h1>
+	</div>
 	<footer id="footer">
 		<nav>
 			<button id="historyButton">History</button>
@@ -114,6 +117,14 @@
 			</div>
 		</div>
 	</div>
+	<div id="subPageControls">
+		<div id="leftPageArrow">
+			<button class="icon-chevron-left"></button>
+		</div>
+		<div id="rightPageArrow" style="">
+			<button class="icon-chevron-right"></button>
+		</div>
+	</div>
 </body>
 <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
 <script type="text/javascript" src="js/jquery-ui-1.10.2.custom.min.js"></script>

frontend/public/css/styles.css

@@ -1,3 +1,4 @@
+
 html,
 body,
 div,
@@ -129,6 +130,22 @@ table {
     -webkit-transform: rotate(360deg);
   }
 }
+@-moz-keyframes spin {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@keyframes spin {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
 .button {
   display: block;
   background: none;
@@ -159,15 +176,14 @@ body {
   font-family: 'Source Sans Pro', sans-serif;
 }
 /******** Loading Splash ********/
-
 #loadingSplash {
   position: absolute;
   z-index: 9001;
-  background: -moz-linear-gradient(top, white 0%, #efefef 100%);
-  background: -webkit-linear-gradient(top, white 0%, #efefef 100%);
-  background: -o-linear-gradient(top, white 0%, #efefef 100%);
-  background: -ms-linear-gradient(top, white 0%, #efefef 100%);
-  background: linear-gradient(to bottom, white 0%, #efefef 100%);
+  background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%);
+  background: -webkit-linear-gradient(top, #ffffff 0%, #efefef 100%);
+  background: -o-linear-gradient(top, #ffffff 0%, #efefef 100%);
+  background: -ms-linear-gradient(top, #ffffff 0%, #efefef 100%);
+  background: linear-gradient(to bottom, #ffffff 0%, #efefef 100%);
   width: 100%;
   height: 100%;
 }
@@ -179,7 +195,7 @@ body {
   height: 200px;
   margin: -100px 0 0 -200px;
   /* border: 1px solid #000000; */
-
+ 
 }
 #loadingSplash #inSplash h1 {
   width: 400px;
@@ -204,9 +220,9 @@ body {
   margin: 0 0 0 10px;
   -webkit-animation: spin 2s infinite linear;
   -moz-animation: spin 2s infinite linear;
+  animation: spin 2s infinite linear;
 }
 /******** Header and Footer ********/
-
 #header {
   position: fixed;
   top: 0;
@@ -227,7 +243,7 @@ body {
   float: left;
   width: 90px;
   height: 90px;
-  background-color: white;
+  background-color: #ffffff;
   box-shadow: 0px 0px 4px #232323;
   border-bottom-left-radius: 5px;
   border-bottom-right-radius: 5px;
@@ -310,7 +326,6 @@ body {
   margin: 0 20px 0 20px;
 }
 /******** Stations ********/
-
 #stations {
   overflow-y: scroll;
   margin: 61px 0 30px 0;
@@ -321,7 +336,7 @@ body {
   width: 200px;
   height: 200px;
   margin: 60px 30px 0 30px;
-  background-color: white;
+  background-color: #ffffff;
   box-shadow: 0px 0px 4px #1e1f23;
   border-radius: 4px;
   transition: all 2s linear;
@@ -352,7 +367,7 @@ body {
   background: none;
   border: none;
   font-size: 18px;
-  color: white;
+  color: #ffffff;
 }
 .station .favouriteButton:hover {
   cursor: pointer;
@@ -374,7 +389,6 @@ body {
   font-weight: bold;
 }
 /******** Footer ********/
-
 #footer {
   position: fixed;
   bottom: 0;
@@ -505,7 +519,6 @@ body {
   background-color: #878787;
 }
 /******** Panes ********/
-
 #paneCover {
   display: none;
   position: absolute;
@@ -573,14 +586,13 @@ body {
   cursor: pointer;
 }
 #paneCover .pane hr {
-  border: 1px dashed lightgray;
+  border: 1px dashed #d3d3d3;
 }
 #paneCover .pane .innerPane {
   padding: 10px;
   color: #393b42;
 }
 /**** Dialog ****/
-
 .dialog {
   width: 340px;
   height: 160px;
@@ -615,7 +627,6 @@ body {
   cursor: pointer;
 }
 /**** History Pane ****/
-
 #paneCover #historyPane {
   width: 500px;
   height: 400px;
@@ -662,7 +673,6 @@ body {
   overflow-y: scroll;
 }
 /**** FAQ Pane ****/
-
 #paneCover #faqPane {
   width: 500px;
   height: 400px;
@@ -699,7 +709,6 @@ body {
   overflow-y: scroll;
 }
 /**** Settings Pane ****/
-
 #paneCover #settingsPane {
   width: 500px;
   height: 400px;
@@ -710,7 +719,7 @@ body {
   width: 130px;
   height: 349px;
   padding: 10px 0 0 0;
-  background-color: white;
+  background-color: #ffffff;
   border-bottom-left-radius: 5px;
 }
 #paneCover #settingsPane ul li a {
@@ -757,3 +766,34 @@ body {
 #settingsPane .btn {
   float: left;
 }
+/*** Subpage controls ***/
+#subPageControls {
+  overflow: hidden;
+}
+#subPageControls #leftPageArrow {
+  width: 20px;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+#subPageControls #leftPageArrow button {
+  position: absolute;
+  top: 50%;
+}
+#subPageControls #rightPageArrow {
+  width: 20px;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 0;
+}
+#subPageControls #rightPageArrow button {
+  position: absolute;
+  top: 50%;
+  right: 0%;
+}
+/*** Now Playing sub-page ***/
+#nowplaying {
+  height: 460px;
+}

frontend/public/css/styles.less

@@ -593,4 +593,42 @@ html, body{
 	.btn{
 		float: left;
 	}
-}
+}
+
+/*** Subpage controls ***/
+#subPageControls {
+	overflow:hidden;
+
+	#leftPageArrow {
+		width: 20px; 
+		height: 100%; 
+		position: absolute; 
+		left: 0; 
+		top: 0;
+
+		button {
+			position: absolute;
+			top: 50%;
+		}
+	}
+
+	#rightPageArrow {
+		width: 20px;
+		height: 100%;
+		position: absolute;
+		right: 0;
+		top: 0;
+
+		button {
+			position: absolute;
+			top: 50%;
+			right: 0%;
+		}
+	}
+}
+
+/*** Now Playing sub-page ***/
+#nowplaying {
+	height: 460px;
+}
+

frontend/public/js/core.js

@@ -163,3 +163,22 @@ $("input[type='search']").on('search', function () {
 		$(this).effect("shake", {direction: "up"}); 
 	});
 });
+
+$("#nowplaying").effect("drop");
+$("#leftPageArrow").hide();
+
+$("#leftPageArrow, #rightPageArrow").click(function() {
+	$(this).hide();
+
+	if (this.id == "leftPageArrow") {
+		$("#nowplaying").toggle("drop", { direction: "left"}).promise().done(function() {
+			$("#stations").toggle("drop", { direction: "right"});
+			$("#rightPageArrow").show();
+		});
+	} else {
+		$("#stations").toggle("drop", { direction: "right"}).promise().done(function() {
+			$("#nowplaying").toggle("drop", { direction: "left"});
+			$("#leftPageArrow").show();
+		});
+	}
+});