mirrors/etherpad-lite
1
0
Fork 0
mirror of https://github.com/ether/etherpad-lite.git synced 2025-04-20 23:46:14 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

css: refactor element positioning

Browse source 
No more javascript to change css properties
Remove a number of useless tables
Try to stop positioning elements with absolute, but use flex-boxes instead

Adds comment to pad template, and move popups and chatbox inside editorcontainerbox (so absolute positioning is straightforward)

Make the design more consistent: always use base color, font-family and font-size. USe relative font size if necessary (.9rem instead of 11px for example)

Remove two columns in the popups, just use one column

Remove css meant to support old browser (like -webkit-box-shadow, -moz-box-shadow). Those css rules are quite common now, and If we want to support very old browser, we should use clean-css or other tools to add them automatically
This commit is contained in:
Sebastian Castro 2020-04-02 14:36:49 +02:00 • committed by muxator
parent 0603bf8097
commit 5fd6aeeea6
20 changed files with 839 additions and 1224 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/static/js/chat.js
View file

@ -31,7 +31,7 @@ var chat = (function()
show: function ()
{
$("#chaticon").hide();
$("#chatbox").show();
$("#chatbox").css('display', 'flex');
$("#gritter-notice-wrapper").hide();
self.scrollDown();
chatMentions = 0;
@ -46,42 +46,28 @@ var chat = (function()
stickToScreen: function(fromInitialCall) // Make chat stick to right hand side of screen
{
chat.show();
if(!isStuck || fromInitialCall) { // Stick it to
padcookie.setPref("chatAlwaysVisible", true);
$('#chatbox').addClass("stickyChat");
$('#titlesticky').hide();
$('#editorcontainer').css({"right":"192px"});
$('.stickyChat').css("top",$('#editorcontainer').offset().top+"px");
isStuck = true;
} else { // Unstick it
padcookie.setPref("chatAlwaysVisible", false);
$('.stickyChat').css("top", "auto");
$('#chatbox').removeClass("stickyChat");
$('#titlesticky').show();
$('#editorcontainer').css({"right":"0px"});
isStuck = false;
}
isStuck = (!isStuck || fromInitialCall);
$('#chatbox, .sticky-container').toggleClass("stickyChat", isStuck);
padcookie.setPref("chatAlwaysVisible", isStuck);
$('#options-stickychat').prop('checked', isStuck);
},
chatAndUsers: function(fromInitialCall)
{
var toEnable = $('#options-chatandusers').is(":checked");
if(toEnable || !userAndChat || fromInitialCall){
padcookie.setPref("chatAndUsers", true);
chat.stickToScreen(true);
$('#options-stickychat').prop('checked', true)
$('#options-chatandusers').prop('checked', true)
$('#options-stickychat').prop("disabled", "disabled");
$('#users').addClass("chatAndUsers");
$("#chatbox").addClass("chatAndUsersChat");
// redraw
userAndChat = true;
padeditbar.redrawHeight()
}else{
padcookie.setPref("chatAndUsers", false);
$('#options-stickychat').prop("disabled", false);
$('#users').removeClass("chatAndUsers");
$("#chatbox").removeClass("chatAndUsersChat");
userAndChat = false;
}
padcookie.setPref("chatAndUsers", userAndChat);
$('#users, .sticky-container').toggleClass("chatAndUsers stickyUsers", userAndChat);
$("#chatbox").toggleClass("chatAndUsersChat", userAndChat);
},
hide: function ()
{