Disable horizontal scrolling and some UI fixes for mobile. Increase queue size to 100. closes #3

Author: debugger22

app/index.html

@@ -55,21 +55,21 @@ <h1 class="header-text">
       <div class="events-remaining">
         <span class="events-remaining-value odometer"></span>&nbsp;
         <span class="events-remaining-text">events remaining in queue</span>&nbsp;
-        <img id="cmdMute" src="/static/public/images/speaker.svg" style="width:32px;height:32px;cursor:pointer;" alt="mute/unmute"/>
       </div>
+      <img id="cmdMute" src="/static/public/images/speaker.svg" alt="mute/unmute"/>
     </header>
     <div id="area">
       <div class="online-users-div">
         <h2 class="online-users-text"><span class="possibly-text">possibly</span>&nbsp;<span class="odometer online-users-count"></span> people listening</h2>
       </div>
     </div>
     <footer>
-      <div style="float:left;line-height:1.3em;">
+      <div class="footer-left-text-block">
         this project is open source, you can view it on <a href="https://github.com/debugger22/github-audio" target="_blank">GitHub</a><br/>
         developed by <a href="https://github.com/debugger22" target="_blank">@debugger22</a><br/><br/>
         ProTip: It's nice to keep it open in the background
       </div>
-      <div style="float:right;margin-right:3%;text-align:right;line-height:1.3em;">
+      <div class="footer-right-text-block">
         inspired by <a href="http://hatnote.com" target="_blank">hatnote</a><br/>
         <div>icons made by <a href="http://www.flaticon.com/authors/freepik" target="_blank" title="Freepik">Freepik</a></div>
       </div>

app/public/css/main.css

@@ -50,9 +50,11 @@ a{
 }
 
 html,body{
-	background-color: white;
+	background-color: #0288D1;
 	font-family: 'Source Sans Pro', sans-serif;
 	font-size: 16px;
+    overflow-y: scroll;
+    overflow-x: hidden;
 }
 
 header{
@@ -79,18 +81,22 @@ header{
 
 .events-remaining{
 	float:right;
-	margin-right: 3%;
+	margin-right: 5%;
 }
 
 .events-remaining-text, .events-remaining-value{
 	font-size: 0.8em;
 	visibility: visible;
 }
 
-.active-nerds{
-	float:right;
-	line-height: 2em;
-	margin-right: 70px;
+
+#cmdMute{
+    width:28px;
+    height:28px;
+    cursor:pointer;
+    position: absolute;
+    top: 20px;
+    right: 40px;
 }
 
 #area{
@@ -144,9 +150,45 @@ footer{
 	font-size: 0.9em;
 }
 
+.footer-left-text-block{
+    float:left;
+    line-height:1.3em;
+}
+
+.footer-right-text-block{
+    float:right;
+    margin-right:3%;
+    text-align:right;
+    line-height:1.3em;
+}
+
 .social-buttons{
 	position: fixed;
 	bottom:20px;
 	right:20px;
 	z-index: 2;
 }
+
+
+@media only screen and (max-device-width: 480px) {
+
+    .footer-left-text-block{
+        width: 100%;
+        margin: 0 auto;
+        line-height:1.3em;
+    }
+
+    .footer-right-text-block{
+        width: 100%;
+        margin: 0 auto;
+        line-height:1.3em;
+        float: left;
+        text-align: left;
+        margin-top: 20px;
+    }
+
+    .online-users-div{
+        text-align: left;
+    }
+
+}

app/public/js/main.js

@@ -39,8 +39,8 @@ socket.on('github', function (data) {
       eventQueue.push(event);
     }
   });
-  // Don't let the eventQueue grow more than 50
-  if (eventQueue.length > 50) eventQueue = eventQueue.slice(0, 50);
+  // Don't let the eventQueue grow more than 100
+  if (eventQueue.length > 100) eventQueue = eventQueue.slice(0, 100);
 });
 
 socket.on('connect', function(){

server/index.js

@@ -81,7 +81,7 @@ function fetchDataFromGithub(){
         if(socket != null && socket.connected == true){
             redis_client.get('connected_users', function(err, count) {
                 if(!err && count != null){
-                    socket.json.emit('github', {data: stripedData, connected_users: count});
+                    socket.volatile.json.emit('github', {data: stripedData, connected_users: count});
                 }else{
                   logger.error(err.message);
                 }