diff --git a/css/style.css b/css/style.css index 44d9e1b..ba4c0d5 100644 --- a/css/style.css +++ b/css/style.css @@ -44,8 +44,29 @@ color: #333; } -#app-content { +#app-content-wrapper { padding: 15px; + margin-top: 70px; +} + +#app-content-header { + background-color: #E6E6E6; + min-height: 30px; + width: 100%; + float: left; + position: fixed; + top: 45px; + padding: 15px; +} + +#ocsms-phone-label { + font-weight: bold; + color: #555; +} + +#ocsms-phone-opt-number { + color: #999; + padding-left: 15px; } .msg-sent, .msg-recv { diff --git a/js/script.js b/js/script.js index 7fd8788..15d5eef 100644 --- a/js/script.js +++ b/js/script.js @@ -34,7 +34,7 @@ var refreshConversation = function() { conversationBuf = formatConversation(jsondata); if (conversationBuf != '') { $('.msg-endtag').before(conversationBuf); - $('#app-content').scrollTop(1E10); + $('#app-content-wrapper').scrollTop(1E10); } } ); @@ -48,9 +48,17 @@ function fetchConversation(phoneNumber) { function(jsondata, status) { conversationBuf = formatConversation(jsondata); conversationBuf += '
'; + if (typeof jsondata['contactName'] == 'undefined') { + $('#ocsms-phone-label').html(phoneNumber); + $('#ocsms-phone-opt-number').html(''); + } + else { + $('#ocsms-phone-label').html(jsondata['contactName']); + $('#ocsms-phone-opt-number').html(phoneNumber); + } - $('#app-content').html(conversationBuf); - $('#app-content').scrollTop(1E10); + $('#app-content-wrapper').html(conversationBuf); + $('#app-content-wrapper').scrollTop(1E10); curPhoneNumber = phoneNumber; } diff --git a/templates/main.php b/templates/main.php index c1d6dbf..eda15fa 100644 --- a/templates/main.php +++ b/templates/main.php @@ -8,8 +8,11 @@ -
+
+
+
+
No conversation loaded