diff --git a/board.html b/board.html
index ae877c1..1b3c33d 100644
--- a/board.html
+++ b/board.html
@@ -120,7 +120,7 @@
iosocket.emit('sendAT',toggleVal);
});
});
-
+
@@ -137,7 +137,7 @@
diff --git a/demo.html b/demo.html
index 2a6b7b8..beade4e 100644
--- a/demo.html
+++ b/demo.html
@@ -2,7 +2,7 @@
-
+
Chat
@@ -97,7 +97,7 @@
#chat_box {
box-sizing: border-box;
- height: 100%;
+ height: calc(100% - 50px);
overflow: auto;
padding-bottom: 50px;
}
@@ -116,14 +116,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 {
@@ -140,20 +144,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;
}
@@ -165,23 +172,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; }
+ @media screen and (max-width: 780px) {
+ #footer {
+ height: 91px;
+ }
+ #chat_box {
+ padding-bottom: 91px;
+ height: calc(100% - 91px);
+ }
- #user { width: 100%; }
- #message { width: 80%; }
+ #number {
+ width: 100%;
+ }
+ #message {
+ min-width: 60%;
+ }
+ #send_btn {
+ position: absolute;
+ right: 0;
+ bottom: 3px;
+ margin: 0;
+ width: 10%;
+ }
}
- @media(max-width: 400px) {
- #footer { height: 135px; }
- #chat_box { padding-bottom: 135px; }
+ @media screen and (max-width: 400px) {
+ #footer {
+ height: 135px;
+ }
+ #chat_box {
+ padding-bottom: 135px;
+ height: calc(100% - 135px);
- #message { width: 100%; }
+ }
+
+ #number {
+ max-width: none;
+ width: 93%;
+ }
+ #message {
+ width: 93%;
+ }
#send_btn {
position: relative;
margin-top: 3px;
@@ -197,7 +235,7 @@