Fix conflict between ckeditor toolbar and userlist on small screens
This commit is contained in:
parent
7a87775372
commit
8279ef3130
6 changed files with 66 additions and 27 deletions
|
@ -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…
Reference in a new issue