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

View File

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

View File

@ -26,24 +26,25 @@
{{#if privateChatDisabled}} {{#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> <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}} {{else}}
<textarea id="newMessageInput" placeholder="Write a message..." rel="tooltip" data-placement="top" title="Write a new message"></textarea> {{> chatInputControls}}
<button type="submit" id="sendMessageButton" class="btn" rel="tooltip" data-placement="top">
Send
</button>
{{/if}} {{/if}}
{{else}} {{else}}
{{#if publicChatDisabled}} {{#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> <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}} {{else}}
<textarea id="newMessageInput" placeholder="Write a message..." rel="tooltip" data-placement="top" title="Write a new message"></textarea> {{> chatInputControls}}
<button type="submit" id="sendMessageButton" class="btn" rel="tooltip" data-placement="top">
Send
</button>
{{/if}} {{/if}}
{{/if}} {{/if}}
</div> </div>
</template> </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"> <template name="chatOptions">
<p>Chat Options:</p> <p>Chat Options:</p>
{{> optionsFontSize}} {{> optionsFontSize}}