Fix conflict between ckeditor toolbar and userlist on small screens
This commit is contained in:
yflory
parent
7a87775372
commit
8279ef3130
6 changed files with 66 additions and 27 deletions
|
|
@ -64,7 +64,7 @@
|
|||
.fa {
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
margin-right: 5px;
|
||||
margin-right: 5px !important;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -25,7 +25,22 @@
|
|||
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 {
|
||||
flex: 1;
|
||||
margin-top: -1px;
|
||||
display: flex;
|
||||
overflow: visible;
|
||||
|
|
@ -51,11 +66,12 @@
|
|||
box-sizing: border-box;
|
||||
.close {
|
||||
position: absolute;
|
||||
margin-top: -11px;
|
||||
margin-top: -10px;
|
||||
margin-left: 149px;
|
||||
font-size: 15px;
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
text-shadow: unset;
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -112,6 +128,9 @@ body {
|
|||
left: 0;
|
||||
top: 96px;
|
||||
bottom: 0;
|
||||
.close {
|
||||
color: @color;
|
||||
}
|
||||
}
|
||||
.cryptpad-limit {
|
||||
text-shadow: -1px 0 @color, 0 1px @color, 1px 0 @color, 0 -1px @color;
|
||||
|
|
@ -216,6 +235,13 @@ body {
|
|||
}
|
||||
|
||||
.cryptpad-toolbar {
|
||||
* {
|
||||
outline-width: 0;
|
||||
&:focus {
|
||||
outline-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@toolbar-green: #5cb85c;
|
||||
|
||||
box-sizing: border-box;
|
||||
|
|
|
|||
|
|
@ -247,6 +247,10 @@ define([
|
|||
throw new Error("You must provide a `userList` object to display the userlist");
|
||||
}
|
||||
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);
|
||||
$('<h2>').text(Messages.users).appendTo($content);
|
||||
$('<p>', {'class': USERLIST_CLS}).appendTo($content);
|
||||
|
|
@ -266,26 +270,31 @@ define([
|
|||
}
|
||||
|
||||
var $ck = config.$container.find('.cke_toolbox_main');
|
||||
var mobile = $('body').width() <= 600;
|
||||
var hide = function () {
|
||||
$content.hide();
|
||||
$button.removeClass('active');
|
||||
$ck.css({
|
||||
'display': '',
|
||||
'padding-left': '',
|
||||
'margin-bottom': ''
|
||||
});
|
||||
};
|
||||
var show = function () {
|
||||
$content.show();
|
||||
if (mobile) {
|
||||
$ck.hide();
|
||||
}
|
||||
$button.addClass('active');
|
||||
$ck.css({
|
||||
'display': 'inline-block',
|
||||
'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);
|
||||
$button.click(function () {
|
||||
var visible = $content.is(':visible');
|
||||
|
|
@ -298,7 +307,7 @@ define([
|
|||
|
||||
|
||||
Cryptpad.getAttribute('userlist-drawer', function (err, val) {
|
||||
if (val === false) { return void hide(); }
|
||||
if (val === false || mobile) { return void hide(); }
|
||||
show();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -46,6 +46,7 @@ body {
|
|||
}
|
||||
img.icon {
|
||||
max-width: 20px;
|
||||
max-height: 16px;
|
||||
}
|
||||
|
||||
.unselectable {
|
||||
|
|
@ -481,6 +482,7 @@ span {
|
|||
}
|
||||
img.icon {
|
||||
height: 48px;
|
||||
max-height: none;
|
||||
max-width: none;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
|
@ -595,6 +597,13 @@ span {
|
|||
display: flex;
|
||||
flex-flow: row;
|
||||
|
||||
* {
|
||||
outline-width: 0;
|
||||
&:focus {
|
||||
outline-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.newPadContainer {
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
|
|
@ -680,19 +689,6 @@ span {
|
|||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
/*.right {
|
||||
float: right;
|
||||
/* Right-side buttons */
|
||||
/* button {
|
||||
display: inline-block;
|
||||
&.active {
|
||||
display: none;
|
||||
}
|
||||
.fa {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
.dropdown-bar-content {
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
|
@ -710,13 +706,19 @@ span {
|
|||
max-width: 100%;
|
||||
text-align: left;
|
||||
.element {
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
font-size: 17px;
|
||||
padding: 5px;
|
||||
padding: 0 5px;
|
||||
border: 0;
|
||||
background: darken(@toolbar-drive-bg, 10%);
|
||||
color: @toolbar-drive-color;
|
||||
box-sizing: border-box;
|
||||
transition: all 0.15s;
|
||||
&.separator {
|
||||
color: #ccc;
|
||||
}
|
||||
&.clickable {
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
|
|
|
|||
|
|
@ -1280,11 +1280,11 @@ define([
|
|||
|
||||
if (idx === 0) { name = getPrettyName(p); }
|
||||
else {
|
||||
var $span2 = $('<span>', {'class': 'element'}).text(' > ');
|
||||
$title.append($span2);
|
||||
var $span2 = $('<span>', {'class': 'element separator'}).text(' / ');
|
||||
$title.prepend($span2);
|
||||
}
|
||||
|
||||
$span.text(name).appendTo($title);
|
||||
$span.text(name).prependTo($title);
|
||||
});
|
||||
return $title;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -515,7 +515,9 @@ define([
|
|||
};
|
||||
updateIcon();
|
||||
$collapse.click(function () {
|
||||
$existingButton.click();
|
||||
$(window).trigger('resize');
|
||||
$iframe.find('.cke_toolbox_main').toggle();
|
||||
$(window).trigger('cryptpad-ck-toolbar');
|
||||
updateIcon();
|
||||
});
|
||||
$rightside.append($collapse);
|
||||
|
|
|
|||
Loading…
Reference in a new issue