Improve mobile support for the toolbar and the drive
This commit is contained in:
yflory
@@ -29,6 +29,20 @@ body {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
.app-container {
|
||||
display: block;
|
||||
}
|
||||
.app-container #tree {
|
||||
resize: none;
|
||||
width: 100%;
|
||||
max-width: unset;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
.app-container #tree .category2 {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
.fa {
|
||||
/*min-width: 17px;*/
|
||||
margin-right: 3px;
|
||||
@@ -188,7 +202,6 @@ span.fa-folder-open {
|
||||
margin-top: 10px;
|
||||
}
|
||||
#content .info-box {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding-left: 10px;
|
||||
margin: 10px auto;
|
||||
@@ -347,17 +360,17 @@ span.fa-folder-open {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
#driveToolbar .dropdown-bar.right {
|
||||
#driveToolbar .right {
|
||||
float: right;
|
||||
/* Right-side buttons */
|
||||
}
|
||||
#driveToolbar .dropdown-bar.right button {
|
||||
#driveToolbar .right button {
|
||||
display: inline-block;
|
||||
}
|
||||
#driveToolbar .dropdown-bar.right button.active {
|
||||
#driveToolbar .right button.active {
|
||||
display: none;
|
||||
}
|
||||
#driveToolbar .dropdown-bar.right button .fa {
|
||||
#driveToolbar .right button .fa {
|
||||
margin-right: 0px;
|
||||
}
|
||||
#driveToolbar .dropdown-bar-content {
|
||||
|
||||
@@ -18,6 +18,8 @@
|
||||
@toolbar-path-bg: #fff;
|
||||
@toolbar-path-border: #888;
|
||||
|
||||
@size-mobile: 600px;
|
||||
|
||||
/* PAGE */
|
||||
|
||||
html, body {
|
||||
@@ -51,6 +53,18 @@ body {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
@media screen and (max-width: @size-mobile) {
|
||||
display: block;
|
||||
#tree {
|
||||
resize: none;
|
||||
width: 100%;
|
||||
max-width: unset;
|
||||
border-bottom: 1px solid @toolbar-border-col;
|
||||
.category2 {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fa {
|
||||
@@ -228,7 +242,6 @@ span {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.info-box {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
padding-left: 10px;
|
||||
margin: 10px auto;
|
||||
@@ -404,17 +417,17 @@ span {
|
||||
line-height: 1em;
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
&.right {
|
||||
float: right;
|
||||
/* Right-side buttons */
|
||||
button {
|
||||
display: inline-block;
|
||||
&.active {
|
||||
display: none;
|
||||
}
|
||||
.fa {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
.right {
|
||||
float: right;
|
||||
/* Right-side buttons */
|
||||
button {
|
||||
display: inline-block;
|
||||
&.active {
|
||||
display: none;
|
||||
}
|
||||
.fa {
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
<html class="cp">
|
||||
<head>
|
||||
<title>CryptDrive</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta content="text/html; charset=utf-8" http-equiv="content-type"/>
|
||||
<link rel="icon" type="image/png"
|
||||
href="/customize/main-favicon.png"
|
||||
|
||||
@@ -29,7 +29,8 @@ define([
|
||||
var APP = window.APP = {
|
||||
editable: false,
|
||||
Cryptpad: Cryptpad,
|
||||
loggedIn: Cryptpad.isLoggedIn()
|
||||
loggedIn: Cryptpad.isLoggedIn(),
|
||||
mobile: $('body').width() <= 600 // Menu and content area are not inline-block anymore for mobiles
|
||||
};
|
||||
|
||||
var stringify = APP.stringify = function (obj) {
|
||||
@@ -353,6 +354,14 @@ define([
|
||||
} else {
|
||||
$element.removeClass("selected");
|
||||
}
|
||||
$driveToolbar.find('#contextButton').css({
|
||||
background: '#000'
|
||||
});
|
||||
window.setTimeout(function () {
|
||||
$driveToolbar.find('#contextButton').css({
|
||||
background: ''
|
||||
});
|
||||
}, 500);
|
||||
};
|
||||
|
||||
// Open the selected context menu on the closest "li" element
|
||||
@@ -776,6 +785,9 @@ define([
|
||||
if (!path || path.length === 0) { return; }
|
||||
var isTrash = filesOp.isPathInTrash(path);
|
||||
var $title = $('<span>', {'class': 'path unselectable'});
|
||||
if (APP.mobile) {
|
||||
return $title;
|
||||
}
|
||||
path.forEach(function (p, idx) {
|
||||
if (isTrash && [1,2].indexOf(idx) !== -1) { return; }
|
||||
|
||||
@@ -1142,7 +1154,9 @@ define([
|
||||
var $toolbar = $driveToolbar;
|
||||
$toolbar.html('');
|
||||
var $leftside = $('<div>', {'class': 'leftside'}).appendTo($toolbar);
|
||||
$leftside.width($tree.width());
|
||||
if (!APP.mobile) {
|
||||
$leftside.width($tree.width());
|
||||
}
|
||||
var $rightside = $('<div>', {'class': 'rightside'}).appendTo($toolbar);
|
||||
return $toolbar;
|
||||
};
|
||||
@@ -1307,6 +1321,25 @@ define([
|
||||
var $modeButton = createViewModeButton().appendTo($toolbar.find('.rightside'));
|
||||
var $title = createTitle(path).appendTo($toolbar.find('.rightside'));
|
||||
|
||||
if (APP.mobile) {
|
||||
var $context = $('<button>', {'class': 'element right dropdown-bar', id: 'contextButton'});
|
||||
$context.append($('<span>', {'class': 'fa fa-caret-down'}));
|
||||
$context.click(function (e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
var $li = $content.find('.selected');
|
||||
if ($li.length !== 1) {
|
||||
$li = $tree.find('.element.active').closest('li');
|
||||
}
|
||||
$iframe.find('.contextMenu').css({
|
||||
top: ($li.offset().top + 10) + 'px',
|
||||
left: ($li.offset().left + 50) + 'px'
|
||||
});
|
||||
$li.contextmenu();
|
||||
});
|
||||
$context.appendTo($toolbar.find('.rightside'));
|
||||
}
|
||||
|
||||
// NewButton can be undefined if we're in read only mode
|
||||
$toolbar.find('.leftside').append(createNewButton(isInRoot));
|
||||
|
||||
@@ -1761,6 +1794,7 @@ define([
|
||||
});
|
||||
|
||||
$iframe.find('#tree').mousedown(function (e) {
|
||||
if (APP.mobile) { return; }
|
||||
if (APP.resizeTree) { return; }
|
||||
APP.resizeTree = window.setInterval(function () {
|
||||
$driveToolbar.find('.leftside').width($tree.width());
|
||||
|
||||
Reference in New Issue
Block a user