From de0480b859596ca830ab9b7b10113c258b4fadd8 Mon Sep 17 00:00:00 2001 From: eorg_oz Date: Sat, 11 Mar 2017 16:23:55 +0100 Subject: [PATCH] =?UTF-8?q?Fix=20scrol=C3=83ing=20and=20review=20break?= =?UTF-8?q?=C3=83points?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- board.html | 4 +-- demo.html | 86 +++++++++++++++++++++++++++++++++++++++--------------- 2 files changed, 64 insertions(+), 26 deletions(-) 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 @@