Responive layout for demo.html

Fix scrolÃing and review breakÃpoints
cleared unneeded dependencies
2017-03-16 20:36:28 +01:00 · 2017-03-11 16:23:55 +01:00 · 2017-03-11 14:06:54 +01:00 · 2017-03-10 21:31:57 +01:00 · 2017-03-09 18:28:03 +01:00 · 2017-03-08 16:20:51 +01:00
7 changed files with 404 additions and 404 deletions
--- a/app.js
+++ b/app.js
@ -2,7 +2,7 @@ var server = require("./server");
 var router = require("./route");
 var requestHandlers = require("./requestHandlers");

-var debug = false; // todo move this to configfile
+var debug = server.debugMode();

 var handle = {}
 handle["/"] = requestHandlers.sendInterface;
--- a/board.html
+++ b/board.html
@ -1,25 +1,20 @@
 <!DOCTYPE html>
- <meta charset="UTF-8">
 <html>
  <head>
-
+    <meta charset="UTF-8">
    <title>SMS Board</title>
    <link rel='stylesheet' href='sprite/emoji.css' >
    <link rel="stylesheet" href="/css/bootstrap.min.css" />
    <script src="/js/jquery-1.12.1.min"></script>
    <script src="/js/jquery-ui.js"></script>
-	<script src="/socket.io/socket.io.js">
-  </script>
+    <script src="/socket.io/socket.io.js"></script>
    <style>
    /* Sticky footer styles
    -------------------------------------------------- */
-
-html,
-body {
+    html, body {
      height: 100%;
      /* The html and body elements cannot have any padding or margin. */
    }
-
    /* Wrapper for page content to push down footer */
    #wrap {
      min-height: 100%;
@ -29,7 +24,6 @@ body {
      /* Pad bottom by footer height */
      padding: 0 0 60px;
    }
-
    /* Set the fixed height of the footer here */
    #footer {
      height: 100px;
@ -38,8 +32,6 @@ body {
      width: 100%;
    }
    </style>
-
-
    <script>
    const toDisplay = 4; //define the number of messages to show
    var iosocket;
@ -67,19 +59,13 @@ body {
      }
    }

-
-	function initSocketIO()
-	{
+    function initSocketIO() {
      iosocket = io.connect();
-
      iosocket.on('clientrefresh', function() {
        location.reload();
      });

      iosocket.on('connect', function() {
-
-
-
        iosocket.on('debugMessage', function(message) {
          alert(message);
        });
@ -89,13 +75,13 @@ body {
          $( "span.number" ).html(mynumber);
        });

-
        iosocket.on('newMessage', function(time,number,message,color) {
          var censoredNumber = number.substring(0,3) + "********" +number.substring(number.length - 3, number.length);
          var messages = document.getElementById('messagesBody');
-       newDiv = document.createElement('div');
+          var newDiv = document.createElement('div');
          var newH1 = document.createElement('h1');
          var newP = document.createElement('p');
+
          newH1.innerHTML = message;
          newP.innerHTML = "by " + censoredNumber + " at " + time;
          newDiv.style.backgroundColor = getColor(color); //need this on both for some browsers (especially safari) to recognize...
@ -103,10 +89,9 @@ body {
          newDiv.className = "jumbotron";
          newDiv.appendChild(newH1);
          newDiv.appendChild(newP);
-
          currentMessageCount++;
-       if(currentMessageCount > toDisplay)
-       {
+
+          if(currentMessageCount > toDisplay) {
            //Remove the top div
            $('#messagesBody').find('div').first().slideUp(function() {
              $(this).remove();
@ -116,16 +101,13 @@ body {
          } else {
            document.getElementById('messagesBody').appendChild(newDiv);
          }
-
        });
      });
-	}
+    };

-
-	function initButton()
-	{
+    function initButton() {
      $("#check").button();
-	}
+    };

    window.onload = function() {
      initSocketIO();
@ -133,25 +115,19 @@ body {
      iosocket.emit('getConfig');
    };

-
    $(document).ready(function() {
      $('#check').click(function() {
        iosocket.emit('sendAT',toggleVal);
      });
    });

-
    </script>
-
  </head>
  <body style="/*background-color: #D4D4D4;*/">
    <div style="text-align:center;" >
-
      <h2>Send an SMS with a message to <span class="number" style="color:#3399ff;"></span></h2>
      <div id="wrap">
-  <div id="messagesBody">
-  </div>
-
+        <div id="messagesBody"></div>
        <br>
        <br>
        <div style="display:none;" id="btnHolder">
@ -160,9 +136,9 @@ body {
          <div id="debugOut"> </div>
        </div>
      </div>
-<!-- <div id="footer">
-<h2>Send an SMS with a message to <span class="number" style="color:#3399ff;"></span></h2>
+      <div id="footer">
+      <h2 style="display: none;">Send an SMS with a message to <span class="number" style="color:#3399ff;"></span></h2>
+      </div>
    </div>
-->
  </body>
 </html>
--- a/clear.html
+++ b/clear.html
@ -1,37 +1,27 @@
 <!DOCTYPE html>
- <meta charset="UTF-8">
  <html>
    <head>
+      <meta charset="UTF-8">
      <title>Clear Board</title>
      <link rel='stylesheet' href='sprite/emoji.css' >
      <link rel="stylesheet" href="/css/bootstrap.min.css" />
      <script src="/js/jquery-1.12.1.min"></script>
      <script src="/js/jquery-ui.js"></script>
 	    <script src="/socket.io/socket.io.js"></script>
-
      <script>
      var iosocket;
-
-	function initSocketIO()
-	{
+      function initSocketIO() {
        iosocket = io.connect();
        iosocket.on('connect', function() {
-
          iosocket.on('debugMessage', function(message) {
            alert(message);
          });
-
-
        });
-	}
-
-
-
+      };
      window.onload = function() {
        initSocketIO();
      };

-
      $(document).ready(function() {
        $('#clear').click(function() {
          var number = $('#number').val();
@ -42,8 +32,6 @@
          iosocket.emit('refreshClients');
        });
      });
-
-
      </script>
    </head>
    <body>
@ -51,13 +39,16 @@
        <div id="wrap">
          <div  id="btnHolder">
            <h2>Functions</h2>
-    <input type="number" id="number" value="1" min="1"/><label for="number">Number</label><br>
+            <input type="number" id="number" value="1" min="1"/>
+            <label for="number">Number</label>
+            <br>
            <input type="button" id="clear" value="clear"/>
            <br>
            <input type="button" id="refresh" value="refresh"/>
            <div id="debugOut"></div>
          </div>
        </div>
-
+      </div>
    </body>
  </html>
+  
--- a/demo.html
+++ b/demo.html
@ -2,43 +2,34 @@
  <html>
    <head>
      <meta charset="UTF-8">
-  <meta name="viewport" content="width=320, initial-scale=1">
+      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Chat</title>
      <script src="/js/jquery-1.12.1.min"></script>
      <script src="/js/jquery-ui.js"></script>
      <script src="/socket.io/socket.io.js"></script>
-</head>
-
      <script type="text/javascript">
      var iosocket;

-	function initSocketIO()
-	{
+      function initSocketIO() {
        iosocket = io.connect();

        iosocket.on('connect', function() {
          createSystemMessage('[Connected]');
          console.log("connect");

-
          iosocket.on('debugMessage', function(message) {
            alert(message);
          });
          iosocket.on('disconnect', function() {
            createSystemMessage('[Disconnected]');
          });
-
        });
-
      }

-
-
      window.onload = function() {
        initSocketIO();
      };

-
      function createSystemMessage(message) {
        var message = document.createTextNode(message);

@ -68,7 +59,6 @@
        chat.appendChild(messageBox);
      }

-
      function sendMessage() {
        var user = document.getElementById('user');
        var message = document.getElementById('message');
@ -87,30 +77,12 @@
        if (( e.keyCode == 13 )&&(e.shiftKey === false)) {
          sendMessage();
        }
-
      }
-
-
      </script>
-
-<body>
-  <div id="wrapper">
-    <div id="chat_box" class="content"></div>
-
-    <div id="footer">
-      <div class="content">
-        <input type="text" id="number"  value="+4301234567890" />
-        <input type="text" id="message" onkeypress="return submitEnter(event)" placeholder="Enter a Test Message! (Or emoji!, google if if you don't know how)" />
-        <input type="button" id="send_btn" value="Send"  onclick="sendMessage()">
-      </div>
-    </div>
-  </div>
-</body>
-</html>
-
      <style type="text/css">
+      @import url('https://fonts.googleapis.com/css?family=Noto+Sans');
        * {
-    font-family: "Arial";
+          font-family: "Noto Sans", sans-serif;
          font-size: 24px;
        }

@ -126,7 +98,7 @@

        #chat_box {
          box-sizing: border-box;
-    height: 100%;
+          height: calc(100% - 50px);
          overflow: auto;
          padding-bottom: 50px;
        }
@ -145,14 +117,18 @@
          position: relative;
        }

-  #user { width: 20%; }
-  #message { width: 68%; }
+        #number {
+          width: 20%;
+          max-width: 240px;
+        }
+        #message {
+          width: calc(90% - 360px);
+        }
+
        #send_btn {
-    width: 10%;
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    margin: 0;
+          width: 120px;
+          position: relative;
+          margin: 2px;
        }

        .content {
@ -169,20 +145,23 @@
        input[type="text"] {
          background-color: #146EA8;
          padding: 3px 10px;
+          margin: 2px;
+          max-width: 92%;
        }

        input[type="button"] {
          background-color: #f39c12;
-    border-right: 2px solid #e67e22;
-    border-bottom: 2px solid #e67e22;
+          border-right: 1px solid #e67e22;
+          border-bottom: 1px solid #e67e22;
          min-width: 70px;
          display: inline-block;
+          position: relative;
        }

        input[type="button"]:hover {
          background-color: #e67e22;
-    border-right: 2px solid #f39c12;
-    border-bottom: 2px solid #f39c12;
+          border-right: 1px solid #f39c12;
+          border-bottom: 1px solid #f39c12;
          cursor: pointer;
        }

@ -194,23 +173,54 @@
          font-size: 16px;
        }

-  @media(max-width: 1000px) {
+        @media screen and (max-width: 1000px) {
          .content { width: 90%; }
+          #send_btn {
+            position: relative;
+          }
        }

-  @media(max-width: 780px) {
-    #footer { height: 91px; }
-    #chat_box { padding-bottom: 91px; }
-
-    #user { width: 100%; }
-    #message { width: 80%; }
+        @media screen and (max-width: 780px) {
+          #footer {
+            height: 91px;
+          }
+          #chat_box {
+            padding-bottom: 91px;
+            height: calc(100% - 91px);
          }

-  @media(max-width: 400px) {
-    #footer { height: 135px; }
-    #chat_box { padding-bottom: 135px; }
+          #number {
+            width: 100%;
+          }
+          #message {
+            min-width: 60%;
+          }
+          #send_btn {
+            position: absolute;
+            right: 0;
+            bottom: 3px;
+            margin: 0;
+            width: 10%;
+          }
+        }

-    #message { width: 100%; }
+        @media screen and (max-width: 400px) {
+          #footer {
+            height: 135px;
+          }
+          #chat_box {
+            padding-bottom: 135px;
+            height: calc(100% - 135px);
+
+          }
+
+          #number {
+            max-width: none;
+            width: 93%;
+          }
+          #message {
+            width: 93%;
+          }
          #send_btn {
            position: relative;
            margin-top: 3px;
@ -218,3 +228,18 @@
          }
        }
      </style>
+    </head>
+    <body>
+      <div id="wrapper">
+        <div id="chat_box" class="content"></div>
+
+        <div id="footer">
+          <div class="content">
+            <input type="text" id="number"  value="+4301234567890" />
+            <input type="text" id="message" onkeypress="return submitEnter(event)" placeholder="Enter a Message" />
+            <input type="button" id="send_btn" value="Send"  onclick="sendMessage()">
+          </div>
+        </div>
+      </div>
+    </body>
+  </html>
--- a/package.json
+++ b/package.json
@ -4,7 +4,6 @@
  "description": "A SMS Messageboard built using node and express",
  "main": "app.js",
  "dependencies": {
-    "async": "^2.0.0-rc.6",
    "emojize": "^0.2.0",
    "lowdb": "^0.12.5",
    "serialport": "^4.0.5",
--- a/sample.config.json
+++ b/sample.config.json
@ -21,6 +21,10 @@
    {
      "param": "demoMode",
      "value": true
+    },
+    {
+      "param": "debugMode",
+      "value": false
    }
  ]
 }
--- a/server.js
+++ b/server.js
@ -23,6 +23,11 @@ module.exports.demoMode  = function () {
 	return config('debug').chain().find({ param: 'demoMode' }).value()['value'];
 };

+module.exports.debugMode = function () {
+	return config('debug').chain().find({ param: 'debugMode' }).value()['value'];
+};
+
+
 // utility function for ucs2 decode
 function ucs2Parse(ucs2){
 	codeArray = ucs2.match(/.{1,4}/g);
Author	SHA1	Message	Date
eorg_oz	fd183a7d4f	Responive layout for demo.html	2017-03-16 20:36:28 +01:00
eorg_oz	de0480b859	Fix scrolÃing and review breakÃpoints	2017-03-11 16:23:55 +01:00
eorg_oz	236cae183a	cleared unneeded dependencies	2017-03-11 14:06:54 +01:00
eorg_oz	d131979c5d	First edit for better readability	2017-03-10 21:31:57 +01:00
eorg_oz	9c0c30c5c2	Signed-off-by: eorg_oz <eorg.vie@gmail.com>	2017-03-09 18:28:03 +01:00
eorg_oz	462b2a0f9e	Move debug to config	2017-03-08 16:20:51 +01:00