feat view: Enable toggle view button to toggle between grid and list views
This commit is contained in:
parent
49eb62ef2f
commit
d56ea95e9b
@ -31,7 +31,9 @@ function drainQueue() {
|
|||||||
currentQueue = queue;
|
currentQueue = queue;
|
||||||
queue = [];
|
queue = [];
|
||||||
while (++queueIndex < len) {
|
while (++queueIndex < len) {
|
||||||
currentQueue[queueIndex].run();
|
if (currentQueue) {
|
||||||
|
currentQueue[queueIndex].run();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
queueIndex = -1;
|
queueIndex = -1;
|
||||||
len = queue.length;
|
len = queue.length;
|
||||||
@ -83,7 +85,6 @@ process.binding = function (name) {
|
|||||||
throw new Error('process.binding is not supported');
|
throw new Error('process.binding is not supported');
|
||||||
};
|
};
|
||||||
|
|
||||||
// TODO(shtylman)
|
|
||||||
process.cwd = function () { return '/' };
|
process.cwd = function () { return '/' };
|
||||||
process.chdir = function (dir) {
|
process.chdir = function (dir) {
|
||||||
throw new Error('process.chdir is not supported');
|
throw new Error('process.chdir is not supported');
|
||||||
@ -29679,9 +29680,6 @@ Object.defineProperty(exports, '__esModule', {
|
|||||||
});
|
});
|
||||||
exports.listFiles = listFiles;
|
exports.listFiles = listFiles;
|
||||||
exports.refresh = refresh;
|
exports.refresh = refresh;
|
||||||
exports.toggle = toggle;
|
|
||||||
exports.details = details;
|
|
||||||
exports.list = list;
|
|
||||||
exports.selectView = selectView;
|
exports.selectView = selectView;
|
||||||
exports.search = search;
|
exports.search = search;
|
||||||
|
|
||||||
@ -29706,27 +29704,6 @@ function refresh() {
|
|||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggle() {
|
|
||||||
return {
|
|
||||||
type: _actionsTypes.FILES_VIEW,
|
|
||||||
view: 'toggle'
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function details() {
|
|
||||||
return {
|
|
||||||
type: _actionsTypes.FILES_VIEW,
|
|
||||||
view: 'details'
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function list() {
|
|
||||||
return {
|
|
||||||
type: _actionsTypes.FILES_VIEW,
|
|
||||||
view: 'list'
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
function selectView() {
|
function selectView() {
|
||||||
var active = arguments.length <= 0 || arguments[0] === undefined ? true : arguments[0];
|
var active = arguments.length <= 0 || arguments[0] === undefined ? true : arguments[0];
|
||||||
|
|
||||||
@ -29915,7 +29892,6 @@ var TYPES = {
|
|||||||
CHANGE_DIRECTORY: Symbol('CHANGE_DIRECTORY'),
|
CHANGE_DIRECTORY: Symbol('CHANGE_DIRECTORY'),
|
||||||
|
|
||||||
LIST_FILES: Symbol('LIST_FILES'),
|
LIST_FILES: Symbol('LIST_FILES'),
|
||||||
FILES_VIEW: Symbol('FILES_VIEW'),
|
|
||||||
SELECT_VIEW: Symbol('SELECT_VIEW'),
|
SELECT_VIEW: Symbol('SELECT_VIEW'),
|
||||||
|
|
||||||
NAVIGATION: Symbol('NAVIGATION'),
|
NAVIGATION: Symbol('NAVIGATION'),
|
||||||
@ -30538,6 +30514,7 @@ var FileList = (function (_Component) {
|
|||||||
var files = _props.files;
|
var files = _props.files;
|
||||||
var selectView = _props.selectView;
|
var selectView = _props.selectView;
|
||||||
var activeFile = _props.activeFile;
|
var activeFile = _props.activeFile;
|
||||||
|
var view = _props.view;
|
||||||
|
|
||||||
activeFile = activeFile || [];
|
activeFile = activeFile || [];
|
||||||
var settings = _store2['default'].getState().get('settings');
|
var settings = _store2['default'].getState().get('settings');
|
||||||
@ -30551,9 +30528,11 @@ var FileList = (function (_Component) {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
var className = 'file-list ' + view;
|
||||||
|
|
||||||
return _react2['default'].createElement(
|
return _react2['default'].createElement(
|
||||||
'div',
|
'div',
|
||||||
{ className: 'file-list', ref: 'container' },
|
{ className: className, ref: 'container' },
|
||||||
els
|
els
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -30585,7 +30564,8 @@ function props(state) {
|
|||||||
return {
|
return {
|
||||||
files: state.get('files'),
|
files: state.get('files'),
|
||||||
selectView: state.get('selectView'),
|
selectView: state.get('selectView'),
|
||||||
activeFile: state.get('activeFile')
|
activeFile: state.get('activeFile'),
|
||||||
|
view: state.get('settings').view || 'list'
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -31443,6 +31423,10 @@ var _actionsDialog = require('actions/dialog');
|
|||||||
|
|
||||||
var _actionsMenu = require('actions/menu');
|
var _actionsMenu = require('actions/menu');
|
||||||
|
|
||||||
|
var _actionsSettings = require('actions/settings');
|
||||||
|
|
||||||
|
var _actionsSettings2 = _interopRequireDefault(_actionsSettings);
|
||||||
|
|
||||||
var _store = require('store');
|
var _store = require('store');
|
||||||
|
|
||||||
var _store2 = _interopRequireDefault(_store);
|
var _store2 = _interopRequireDefault(_store);
|
||||||
@ -31465,7 +31449,7 @@ var Toolbar = (function (_Component) {
|
|||||||
'div',
|
'div',
|
||||||
{ className: 'toolbar' },
|
{ className: 'toolbar' },
|
||||||
_react2['default'].createElement('button', { className: 'icon-plus tour-item', onClick: this.newFile }),
|
_react2['default'].createElement('button', { className: 'icon-plus tour-item', onClick: this.newFile }),
|
||||||
_react2['default'].createElement('button', { className: 'icon-view coming-soon', onClick: (0, _store.bind)((0, _actionsFilesView.toggle)()) }),
|
_react2['default'].createElement('button', { className: 'icon-view tour-item', onClick: this.toggleView }),
|
||||||
_react2['default'].createElement('button', { className: 'icon-refresh tour-item', onClick: (0, _store.bind)((0, _actionsFilesView.refresh)()) }),
|
_react2['default'].createElement('button', { className: 'icon-refresh tour-item', onClick: (0, _store.bind)((0, _actionsFilesView.refresh)()) }),
|
||||||
_react2['default'].createElement('button', { className: 'icon-select tour-item', onClick: (0, _store.bind)((0, _actionsFilesView.selectView)('toggle')) }),
|
_react2['default'].createElement('button', { className: 'icon-select tour-item', onClick: (0, _store.bind)((0, _actionsFilesView.selectView)('toggle')) }),
|
||||||
_react2['default'].createElement('button', { className: 'icon-more tour-item', onClick: this.showMore.bind(this), ref: 'more' })
|
_react2['default'].createElement('button', { className: 'icon-more tour-item', onClick: this.showMore.bind(this), ref: 'more' })
|
||||||
@ -31495,6 +31479,14 @@ var Toolbar = (function (_Component) {
|
|||||||
});
|
});
|
||||||
_store2['default'].dispatch(action);
|
_store2['default'].dispatch(action);
|
||||||
}
|
}
|
||||||
|
}, {
|
||||||
|
key: 'toggleView',
|
||||||
|
value: function toggleView() {
|
||||||
|
var current = _store2['default'].getState().get('settings').view;
|
||||||
|
var value = current === 'list' ? 'grid' : 'list';
|
||||||
|
|
||||||
|
_store2['default'].dispatch((0, _actionsSettings2['default'])({ view: value }));
|
||||||
|
}
|
||||||
}]);
|
}]);
|
||||||
|
|
||||||
return Toolbar;
|
return Toolbar;
|
||||||
@ -31503,7 +31495,7 @@ var Toolbar = (function (_Component) {
|
|||||||
exports['default'] = Toolbar;
|
exports['default'] = Toolbar;
|
||||||
module.exports = exports['default'];
|
module.exports = exports['default'];
|
||||||
|
|
||||||
},{"./menu":235,"actions/dialog":218,"actions/files-view":220,"actions/menu":221,"react":207,"store":"store"}],241:[function(require,module,exports){
|
},{"./menu":235,"actions/dialog":218,"actions/files-view":220,"actions/menu":221,"actions/settings":224,"react":207,"store":"store"}],241:[function(require,module,exports){
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
Object.defineProperty(exports, '__esModule', {
|
Object.defineProperty(exports, '__esModule', {
|
||||||
@ -32332,7 +32324,8 @@ var _lodashObjectOmit2 = _interopRequireDefault(_lodashObjectOmit);
|
|||||||
|
|
||||||
var DEFAULT = {
|
var DEFAULT = {
|
||||||
showHiddenFiles: false,
|
showHiddenFiles: false,
|
||||||
showDirectoriesFirst: true
|
showDirectoriesFirst: true,
|
||||||
|
view: 'list'
|
||||||
};
|
};
|
||||||
|
|
||||||
exports['default'] = function (state, action) {
|
exports['default'] = function (state, action) {
|
||||||
@ -32454,6 +32447,7 @@ var MESSAGES = {
|
|||||||
'icon-refresh': 'Refresh File List',
|
'icon-refresh': 'Refresh File List',
|
||||||
'icon-select': 'Select files for batch actions',
|
'icon-select': 'Select files for batch actions',
|
||||||
'icon-more': 'Actions used on selected files such as Copy, Delete, Move, …',
|
'icon-more': 'Actions used on selected files such as Copy, Delete, Move, …',
|
||||||
|
'icon-view': 'Toggle between List and Grid view',
|
||||||
'drawer': 'Extra options, tools and links are here',
|
'drawer': 'Extra options, tools and links are here',
|
||||||
'icon-search': 'Search your storage for a certain file',
|
'icon-search': 'Search your storage for a certain file',
|
||||||
'swipe-instruction': 'Swipe from left to right to go to parent folder'
|
'swipe-instruction': 'Swipe from left to right to go to parent folder'
|
||||||
|
@ -260,34 +260,58 @@ button.coming-soon::after {
|
|||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
transform: translate(-50%, -50%) rotate(-45deg);
|
transform: translate(-50%, -50%) rotate(-45deg);
|
||||||
}
|
}
|
||||||
|
.list .file,
|
||||||
|
.list .directory {
|
||||||
|
flex: 1 1 100%;
|
||||||
|
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
.list .file p,
|
||||||
|
.list .directory p {
|
||||||
|
word-wrap: break-word;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
.list .file > span,
|
||||||
|
.list .directory > span {
|
||||||
|
font-weight: 100;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
margin-left: 1rem;
|
||||||
|
}
|
||||||
|
.list .file i,
|
||||||
|
.list .directory i {
|
||||||
|
margin-right: 1.4rem;
|
||||||
|
}
|
||||||
|
.grid .file,
|
||||||
|
.grid .directory {
|
||||||
|
flex: 1 0 30%;
|
||||||
|
max-width: 30%;
|
||||||
|
padding: 1.4rem 0.5rem;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.grid .file p,
|
||||||
|
.grid .directory p {
|
||||||
|
max-height: 1.5em;
|
||||||
|
max-width: 100%;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.grid .file span,
|
||||||
|
.grid .directory span {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
.file,
|
.file,
|
||||||
.directory {
|
.directory {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: row;
|
flex-flow: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 1.4rem;
|
padding: 1.4rem;
|
||||||
width: 100%;
|
|
||||||
font-weight: 200;
|
font-weight: 200;
|
||||||
font-size: 1.8rem;
|
font-size: 1.8rem;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
}
|
||||||
.file p,
|
.file p,
|
||||||
.directory p {
|
.directory p {
|
||||||
flex: 1 1;
|
flex: 1 1;
|
||||||
max-width: calc(100% - 9rem);
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
word-wrap: break-word;
|
|
||||||
}
|
|
||||||
.file > span,
|
|
||||||
.directory > span {
|
|
||||||
font-weight: 100;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
margin-left: 1rem;
|
|
||||||
}
|
|
||||||
.file i,
|
|
||||||
.directory i {
|
|
||||||
margin-right: 1.4rem;
|
|
||||||
}
|
}
|
||||||
.directory i {
|
.directory i {
|
||||||
display: block;
|
display: block;
|
||||||
@ -469,6 +493,10 @@ nav i {
|
|||||||
color: #9b9b93;
|
color: #9b9b93;
|
||||||
}
|
}
|
||||||
.file-list {
|
.file-list {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-content: flex-start;
|
||||||
height: calc(100vh - 14.5rem);
|
height: calc(100vh - 14.5rem);
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { LIST_FILES, FILES_VIEW, SELECT_VIEW, REFRESH, SEARCH } from 'actions/types';
|
import { LIST_FILES, VIEW, SELECT_VIEW, REFRESH, SEARCH } from 'actions/types';
|
||||||
import store from 'store';
|
import store from 'store';
|
||||||
|
|
||||||
export function listFiles(files) {
|
export function listFiles(files) {
|
||||||
@ -14,27 +14,6 @@ export function refresh() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export function toggle() {
|
|
||||||
return {
|
|
||||||
type: FILES_VIEW,
|
|
||||||
view: 'toggle'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function details() {
|
|
||||||
return {
|
|
||||||
type: FILES_VIEW,
|
|
||||||
view: 'details'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function list() {
|
|
||||||
return {
|
|
||||||
type: FILES_VIEW,
|
|
||||||
view: 'list'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export function selectView(active = true) {
|
export function selectView(active = true) {
|
||||||
return {
|
return {
|
||||||
type: SELECT_VIEW,
|
type: SELECT_VIEW,
|
||||||
|
@ -2,7 +2,6 @@ const TYPES = {
|
|||||||
CHANGE_DIRECTORY: Symbol('CHANGE_DIRECTORY'),
|
CHANGE_DIRECTORY: Symbol('CHANGE_DIRECTORY'),
|
||||||
|
|
||||||
LIST_FILES: Symbol('LIST_FILES'),
|
LIST_FILES: Symbol('LIST_FILES'),
|
||||||
FILES_VIEW: Symbol('FILES_VIEW'),
|
|
||||||
SELECT_VIEW: Symbol('SELECT_VIEW'),
|
SELECT_VIEW: Symbol('SELECT_VIEW'),
|
||||||
|
|
||||||
NAVIGATION: Symbol('NAVIGATION'),
|
NAVIGATION: Symbol('NAVIGATION'),
|
||||||
|
@ -14,7 +14,7 @@ export default class FileList extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let { files, selectView, activeFile } = this.props;
|
let { files, selectView, activeFile, view } = this.props;
|
||||||
activeFile = activeFile || [];
|
activeFile = activeFile || [];
|
||||||
let settings = store.getState().get('settings');
|
let settings = store.getState().get('settings');
|
||||||
|
|
||||||
@ -27,8 +27,10 @@ export default class FileList extends Component {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
let className= `file-list ${view}`;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='file-list' ref='container'>
|
<div className={className} ref='container'>
|
||||||
{els}
|
{els}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -53,7 +55,8 @@ function props(state) {
|
|||||||
return {
|
return {
|
||||||
files: state.get('files'),
|
files: state.get('files'),
|
||||||
selectView: state.get('selectView'),
|
selectView: state.get('selectView'),
|
||||||
activeFile: state.get('activeFile')
|
activeFile: state.get('activeFile'),
|
||||||
|
view: state.get('settings').view || 'list'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,7 +1,8 @@
|
|||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import { toggle as toggleView, refresh, selectView } from 'actions/files-view';
|
import { refresh, selectView } from 'actions/files-view';
|
||||||
import { show as showDialog } from 'actions/dialog';
|
import { show as showDialog } from 'actions/dialog';
|
||||||
import { show as showMenu } from 'actions/menu';
|
import { show as showMenu } from 'actions/menu';
|
||||||
|
import settings from 'actions/settings';
|
||||||
import store, { bind } from 'store';
|
import store, { bind } from 'store';
|
||||||
import { MENU_WIDTH } from './menu';
|
import { MENU_WIDTH } from './menu';
|
||||||
|
|
||||||
@ -10,7 +11,7 @@ export default class Toolbar extends Component {
|
|||||||
return (
|
return (
|
||||||
<div className='toolbar'>
|
<div className='toolbar'>
|
||||||
<button className='icon-plus tour-item' onClick={this.newFile} />
|
<button className='icon-plus tour-item' onClick={this.newFile} />
|
||||||
<button className='icon-view coming-soon' onClick={bind(toggleView())} />
|
<button className='icon-view tour-item' onClick={this.toggleView} />
|
||||||
<button className='icon-refresh tour-item' onClick={bind(refresh())} />
|
<button className='icon-refresh tour-item' onClick={bind(refresh())} />
|
||||||
<button className='icon-select tour-item' onClick={bind(selectView('toggle'))} />
|
<button className='icon-select tour-item' onClick={bind(selectView('toggle'))} />
|
||||||
<button className='icon-more tour-item' onClick={this.showMore.bind(this)} ref='more' />
|
<button className='icon-more tour-item' onClick={this.showMore.bind(this)} ref='more' />
|
||||||
@ -36,4 +37,11 @@ export default class Toolbar extends Component {
|
|||||||
});
|
});
|
||||||
store.dispatch(action);
|
store.dispatch(action);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
toggleView() {
|
||||||
|
let current = store.getState().get('settings').view;
|
||||||
|
let value = current === 'list' ? 'grid' : 'list';
|
||||||
|
|
||||||
|
store.dispatch(settings({view: value}));
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -3,7 +3,8 @@ import omit from 'lodash/object/omit';
|
|||||||
|
|
||||||
const DEFAULT = {
|
const DEFAULT = {
|
||||||
showHiddenFiles: false,
|
showHiddenFiles: false,
|
||||||
showDirectoriesFirst: true
|
showDirectoriesFirst: true,
|
||||||
|
view: 'list'
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function(state = DEFAULT, action) {
|
export default function(state = DEFAULT, action) {
|
||||||
|
@ -3,6 +3,7 @@ const MESSAGES = {
|
|||||||
'icon-refresh': 'Refresh File List',
|
'icon-refresh': 'Refresh File List',
|
||||||
'icon-select': 'Select files for batch actions',
|
'icon-select': 'Select files for batch actions',
|
||||||
'icon-more': 'Actions used on selected files such as Copy, Delete, Move, …',
|
'icon-more': 'Actions used on selected files such as Copy, Delete, Move, …',
|
||||||
|
'icon-view': 'Toggle between List and Grid view',
|
||||||
'drawer': 'Extra options, tools and links are here',
|
'drawer': 'Extra options, tools and links are here',
|
||||||
'icon-search': 'Search your storage for a certain file',
|
'icon-search': 'Search your storage for a certain file',
|
||||||
'swipe-instruction': 'Swipe from left to right to go to parent folder'
|
'swipe-instruction': 'Swipe from left to right to go to parent folder'
|
||||||
|
@ -1,25 +1,11 @@
|
|||||||
.file, .directory {
|
.list .file, .list .directory {
|
||||||
display: flex;
|
flex: 1 1 100%;
|
||||||
flex-flow: row;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
padding: 1.4rem;
|
|
||||||
|
|
||||||
width: 100%;
|
|
||||||
.light-big;
|
|
||||||
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
border-bottom: 1px solid @dark-separator;
|
border-bottom: 1px solid @dark-separator;
|
||||||
|
|
||||||
p {
|
p {
|
||||||
flex: 1 1;
|
|
||||||
|
|
||||||
max-width: ~'calc(100% - 9rem)';
|
|
||||||
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
|
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
> span {
|
> span {
|
||||||
@ -33,6 +19,45 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.grid .file, .grid .directory {
|
||||||
|
flex: 1 0 30%;
|
||||||
|
|
||||||
|
max-width: 30%;
|
||||||
|
|
||||||
|
padding: 1.4rem 0.5rem;
|
||||||
|
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
p {
|
||||||
|
max-height: 1.5em;
|
||||||
|
max-width: 100%;
|
||||||
|
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.file, .directory {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
padding: 1.4rem;
|
||||||
|
|
||||||
|
.light-big;
|
||||||
|
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
p {
|
||||||
|
flex: 1 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.directory i {
|
.directory i {
|
||||||
.icon-directory;
|
.icon-directory;
|
||||||
}
|
}
|
||||||
|
@ -1,4 +1,10 @@
|
|||||||
.file-list {
|
.file-list {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row wrap;
|
||||||
|
|
||||||
|
justify-content: space-around;
|
||||||
|
align-content: flex-start;
|
||||||
|
|
||||||
height: ~'calc(100vh - 14.5rem)';
|
height: ~'calc(100vh - 14.5rem)';
|
||||||
|
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
Loading…
Reference in New Issue
Block a user