work on chat

This commit is contained in:
Kevin Froman 2019-08-18 22:54:36 -05:00
parent 315e860eff
commit 995d380b9f
2 changed files with 38 additions and 5 deletions

View File

@ -23,11 +23,40 @@
display: block; display: block;
} }
/*
.chatInput{ .chatInput{
position: fixed; position: fixed;
bottom: 0; bottom: 0;
}
*/
.chatInput{
margin-top: -3em;
} }
.chatInput textarea{ .chatInput textarea{
resize: none; resize: none;
} }
.chatInput textarea::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: black;
opacity: 1; /* Firefox */
}
.from{
margin-top: 1em;
display: block;
padding-bottom: 0.5em;
}
.chatFeed{
display: block;
max-height: 500px;
overflow-y: scroll;
min-height: 100%;
padding-top: 4em;
transform: rotate(180deg);
direction: rtl;
}
.messageEntry{
transform: rotate(180deg);
direction: ltr;
}

View File

@ -90,12 +90,16 @@
<ul class='conversationList'></ul> <ul class='conversationList'></ul>
</div> </div>
<div class="column chatBox has-text-light has-background-dark is-four-fifths"> <div class="column chatBox has-text-light has-background-dark is-four-fifths">
<span class="chatFeed"></span> <span class="chatFeed">
<div class="messageEntry">
<span class="from has-text-primary">Jenny</span>
<div class="messageContent">I'll stay right here</div>
</div>
</span>
<div class="field has-addons"> <div class="field has-addons">
<p class="control chatInput"> <p class="control chatInput">
<textarea class="textarea" name="message-to-send" id="message-to-send" placeholder="Type your message" rows="1"></textarea> <textarea class="textarea has-dark-text" name="message-to-send" id="message-to-send" placeholder="Type your message" rows="1"></textarea>
</p> </p>
</div> </div>
</div> </div>
</div> </div>