Responsive message box, finally with CSS

This commit is contained in:
Jeremy Zhang 2017-04-09 10:49:28 -07:00
parent 2ba6016c3a
commit a767e11288
3 changed files with 10 additions and 14 deletions

View File

@ -5,6 +5,7 @@ color: white;
main {
min-height: calc(100vh - 80px);
overflow-x: hidden;
}
footer {
@ -112,6 +113,13 @@ color: #90a4ae;
width: 100%;
position: relative;
margin: 10px;
white-space: nowrap;
overflow: hidden;
}
#messageboxouter {
width: 100%;
overflow: hidden;
}
.currentuserchip {

View File

@ -23,12 +23,6 @@ function element_in_view(element, fullyInView) {
}
}
function resize_messagebox() {
var namebox_width = $("#nameplate").outerWidth(true);
var screen_width = $(document).width();
$("#messageboxouter").width(screen_width - namebox_width - 40);
}
function query_guild() {
var funct = $.ajax({
dataType: "json",
@ -79,7 +73,6 @@ function post(channel_id, content) {
}
$(function(){
resize_messagebox();
$("#loginmodal").modal({
dismissible: false, // Modal can be dismissed by clicking outside of the modal
opacity: .5, // Opacity of modal background
@ -346,7 +339,6 @@ function update_embed_userchip(authenticated, avatar, username, userid) {
$("#currentuserimage").hide();
$("#currentusername").text(username + "#" + userid);
}
resize_messagebox();
}
$("#discordlogin_btn").click(function() {
@ -408,10 +400,6 @@ $("#messagebox").keyup(function(event){
}
});
$(window).resize(function() {
resize_messagebox();
});
$('#guild-btn').sideNav({
menuWidth: 300, // Default is 300
edge: 'left', // Choose the horizontal origin

View File

@ -88,8 +88,8 @@
</div>
</div>
<footer class="footer">
<div class="footercontainer">
<footer id="footer" class="footer">
<div id="footercontainer" class="footercontainer">
<div class="currentuserchip left" id="nameplate">
<div class="left"><img id="currentuserimage" src="" class="circle left currentuserimage" style="display: none;"></div>
<div id="currentusername" class="currentusername left">Titan#0001</div>