Fix conflict between ckeditor toolbar and userlist on small screens

pull/1/head
yflory 8 years ago
parent 7a87775372
commit 8279ef3130

@ -64,7 +64,7 @@
.fa { .fa {
width: 20px; width: 20px;
text-align: center; text-align: center;
margin-right: 5px; margin-right: 5px !important;
} }
&:hover { &:hover {

@ -25,7 +25,22 @@
color: inherit; color: inherit;
} }
#cke_editor1 {
.cke_inner {
bottom: 0;
right: 0;
display: flex;
flex-flow: column;
height: 100vh;
width: 100vw;
}
}
.cke_toolbox_main {
display: inline-block;
margin-bottom: -3px;
}
#cke_1_contents { #cke_1_contents {
flex: 1;
margin-top: -1px; margin-top: -1px;
display: flex; display: flex;
overflow: visible; overflow: visible;
@ -51,11 +66,12 @@
box-sizing: border-box; box-sizing: border-box;
.close { .close {
position: absolute; position: absolute;
margin-top: -11px; margin-top: -10px;
margin-left: 149px; margin-left: 149px;
font-size: 15px; font-size: 15px;
opacity: 0.5; opacity: 0.5;
cursor: pointer; cursor: pointer;
text-shadow: unset;
&:hover { &:hover {
opacity: 1; opacity: 1;
} }
@ -112,6 +128,9 @@ body {
left: 0; left: 0;
top: 96px; top: 96px;
bottom: 0; bottom: 0;
.close {
color: @color;
}
} }
.cryptpad-limit { .cryptpad-limit {
text-shadow: -1px 0 @color, 0 1px @color, 1px 0 @color, 0 -1px @color; text-shadow: -1px 0 @color, 0 1px @color, 1px 0 @color, 0 -1px @color;
@ -216,6 +235,13 @@ body {
} }
.cryptpad-toolbar { .cryptpad-toolbar {
* {
outline-width: 0;
&:focus {
outline-width: 0;
}
}
@toolbar-green: #5cb85c; @toolbar-green: #5cb85c;
box-sizing: border-box; box-sizing: border-box;

@ -247,6 +247,10 @@ define([
throw new Error("You must provide a `userList` object to display the userlist"); throw new Error("You must provide a `userList` object to display the userlist");
} }
var $content = $('<div>', {'class': 'userlist-drawer'}); var $content = $('<div>', {'class': 'userlist-drawer'});
$content.on('drop dragover', function (e) {
e.preventDefault();
e.stopPropagation();
});
var $closeIcon = $('<span>', {"class": "fa fa-window-close close"}).appendTo($content); var $closeIcon = $('<span>', {"class": "fa fa-window-close close"}).appendTo($content);
$('<h2>').text(Messages.users).appendTo($content); $('<h2>').text(Messages.users).appendTo($content);
$('<p>', {'class': USERLIST_CLS}).appendTo($content); $('<p>', {'class': USERLIST_CLS}).appendTo($content);
@ -266,26 +270,31 @@ define([
} }
var $ck = config.$container.find('.cke_toolbox_main'); var $ck = config.$container.find('.cke_toolbox_main');
var mobile = $('body').width() <= 600;
var hide = function () { var hide = function () {
$content.hide(); $content.hide();
$button.removeClass('active'); $button.removeClass('active');
$ck.css({ $ck.css({
'display': '',
'padding-left': '', 'padding-left': '',
'margin-bottom': ''
}); });
}; };
var show = function () { var show = function () {
$content.show(); $content.show();
if (mobile) {
$ck.hide();
}
$button.addClass('active'); $button.addClass('active');
$ck.css({ $ck.css({
'display': 'inline-block',
'padding-left': '175px', 'padding-left': '175px',
'margin-bottom': '-3px'
}); });
$content.css('margin-top', (-$ck.height())+'px'); var h = $ck.is(':visible') ? -$ck.height() : 0;
$content.css('margin-top', h+'px');
}; };
$(window).on('cryptpad-ck-toolbar', function () {
if (mobile && $ck.is(':visible')) { return void hide(); }
if ($content.is(':visible')) { return void show(); }
hide();
});
$closeIcon.click(hide); $closeIcon.click(hide);
$button.click(function () { $button.click(function () {
var visible = $content.is(':visible'); var visible = $content.is(':visible');
@ -298,7 +307,7 @@ define([
Cryptpad.getAttribute('userlist-drawer', function (err, val) { Cryptpad.getAttribute('userlist-drawer', function (err, val) {
if (val === false) { return void hide(); } if (val === false || mobile) { return void hide(); }
show(); show();
}); });

@ -46,6 +46,7 @@ body {
} }
img.icon { img.icon {
max-width: 20px; max-width: 20px;
max-height: 16px;
} }
.unselectable { .unselectable {
@ -481,6 +482,7 @@ span {
} }
img.icon { img.icon {
height: 48px; height: 48px;
max-height: none;
max-width: none; max-width: none;
margin: 8px 0; margin: 8px 0;
} }
@ -595,6 +597,13 @@ span {
display: flex; display: flex;
flex-flow: row; flex-flow: row;
* {
outline-width: 0;
&:focus {
outline-width: 0;
}
}
.newPadContainer { .newPadContainer {
display: inline-block; display: inline-block;
height: 100%; height: 100%;
@ -680,19 +689,6 @@ span {
position: relative; position: relative;
display: inline-block; display: inline-block;
} }
/*.right {
float: right;
/* Right-side buttons */
/* button {
display: inline-block;
&.active {
display: none;
}
.fa {
margin-right: 0px;
}
}
}*/
.dropdown-bar-content { .dropdown-bar-content {
margin-right: 2px; margin-right: 2px;
} }
@ -710,13 +706,19 @@ span {
max-width: 100%; max-width: 100%;
text-align: left; text-align: left;
.element { .element {
display: inline-block;
height: 32px;
line-height: 32px;
font-size: 17px; font-size: 17px;
padding: 5px; padding: 0 5px;
border: 0; border: 0;
background: darken(@toolbar-drive-bg, 10%); background: darken(@toolbar-drive-bg, 10%);
color: @toolbar-drive-color; color: @toolbar-drive-color;
box-sizing: border-box; box-sizing: border-box;
transition: all 0.15s; transition: all 0.15s;
&.separator {
color: #ccc;
}
&.clickable { &.clickable {
cursor: pointer; cursor: pointer;
&:hover { &:hover {

@ -1280,11 +1280,11 @@ define([
if (idx === 0) { name = getPrettyName(p); } if (idx === 0) { name = getPrettyName(p); }
else { else {
var $span2 = $('<span>', {'class': 'element'}).text(' > '); var $span2 = $('<span>', {'class': 'element separator'}).text(' / ');
$title.append($span2); $title.prepend($span2);
} }
$span.text(name).appendTo($title); $span.text(name).prependTo($title);
}); });
return $title; return $title;
}; };

@ -515,7 +515,9 @@ define([
}; };
updateIcon(); updateIcon();
$collapse.click(function () { $collapse.click(function () {
$existingButton.click(); $(window).trigger('resize');
$iframe.find('.cke_toolbox_main').toggle();
$(window).trigger('cryptpad-ck-toolbar');
updateIcon(); updateIcon();
}); });
$rightside.append($collapse); $rightside.append($collapse);

Loading…
Cancel
Save