Restyled chatbar

This commit is contained in:
perroned 2015-05-06 22:33:13 -07:00
parent 029b90f2b1
commit 840c4965a5
3 changed files with 34 additions and 29 deletions

View File

@ -27,9 +27,9 @@
margin: 0px;
padding: 15px;
word-wrap: break-word;
&:nth-child(even) {
background-color: rgb(245,245,245);
}
// &:nth-child(even) {
// background-color: rgb(245,245,245);
// }
table {
width: 100%;
}
@ -39,7 +39,7 @@
#chatbody {
@media @landscape {
height: calc(~'100% - 121px');
height: calc(~'100% - 70px');
}
overflow-y: scroll;
padding-left: 0px;
@ -165,9 +165,13 @@
float: left;
width: 75%;
resize: none;
padding:5px;
border-radius:4px;
border-bottom-left-radius: 10px;
border-top-left-radius: 10px;
border-bottom-right-radius: 0px;
border-top-right-radius: 0px;
border:1px solid extract(@lightGrey, 3);
margin: 0px;
@media @landscape {
height: 40px; /* same height as send button */
@ -201,9 +205,10 @@
.panel-footer {
bottom: 0px;
/* padding: 10px; TODO: investigate (causes the overflow in the chat's title) */
position: relative;
background: extract(@white, 1);
padding: 0;
border-top: 1px solid extract(@lightGrey, 3);
}
.private-chat-user-box {
@ -220,34 +225,37 @@
}
#sendMessageButton {
background-color: extract(@azure, 1);
width: 20%; /* 75% for the message input, 5% margin between the two */
color: extract(@white, 1);
color: extract(@black, 1);
background-color: extract(@white, 1);
font-weight: bold;
height: 50px;
margin: 0px;
border: 1px solid extract(@lightGrey, 3);
border-bottom-left-radius: 00px;
border-top-left-radius: 0px;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
@media @desktop-portrait {
width: 20%; /* 75% for the message input, 5% margin between the two */
font-size: 30px;
height: 60px;
margin-left: 5%;
}
@media @mobile-portrait {
width: 15vw;
height: 8vw;
font-size: 4vw;
margin-left: 5%;
}
@media @mobile-portrait-with-keyboard {
width: 19vw;
height: 21vh;
font-size: 3vh;
margin-left: 1%;
margin-right: 1%;
marigin-top: 2vh;
margin-bottom: 2vh;
}
@media @landscape {
height: 40px;
height: 50px;
padding: 0px;
margin-left: 5%;
}
}

View File

@ -186,10 +186,6 @@ body {
background: extract(@darkGrey, 4);
}
.panel-footer {
padding: 0;
}
.recordingStatus {
background: none!important;
border: none;

View File

@ -26,24 +26,25 @@
{{#if privateChatDisabled}}
<textarea id="newMessageInput" class="disabledChat" placeholder="Private chat is temporarily locked (disabled)" rel="tooltip" data-placement="top" title="Private chat is temporarily locked" disabled></textarea>
{{else}}
<textarea id="newMessageInput" placeholder="Write a message..." rel="tooltip" data-placement="top" title="Write a new message"></textarea>
<button type="submit" id="sendMessageButton" class="btn" rel="tooltip" data-placement="top">
Send
</button>
{{> chatInputControls}}
{{/if}}
{{else}}
{{#if publicChatDisabled}}
<textarea id="newMessageInput" class="disabledChat" placeholder="Public chat is temporarily locked (disabled)" rel="tooltip" data-placement="top" title="Public chat is temporarily locked" disabled></textarea>
{{else}}
<textarea id="newMessageInput" placeholder="Write a message..." rel="tooltip" data-placement="top" title="Write a new message"></textarea>
<button type="submit" id="sendMessageButton" class="btn" rel="tooltip" data-placement="top">
Send
</button>
{{> chatInputControls}}
{{/if}}
{{/if}}
</div>
</template>
<template name="chatInputControls">
<textarea id="newMessageInput" rel="tooltip" data-placement="top" title="Write a new message"></textarea>
<button type="submit" id="sendMessageButton" class="btn" rel="tooltip" data-placement="top">
Send
</button>
</template>
<template name="chatOptions">
<p>Chat Options:</p>
{{> optionsFontSize}}