Firefox OS Style header #9

Merged
nt1m merged 4 commits from firefoxos-header into master 2015-10-03 17:30:27 +00:00
25 changed files with 274 additions and 124 deletions
Showing only changes of commit e449402928 - Show all commits

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 796 B

After

Width:  |  Height:  |  Size: 796 B

BIN
build/icon/Icon-340.png Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 58 KiB

16
build/img/Back.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="15px" height="24px" viewBox="0 0 15 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
<title>Back</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Components" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Toolbar" sketch:type="MSArtboardGroup" transform="translate(-26.000000, -14.000000)" stroke="#63B0CD" fill="#63B0CD">
<g sketch:type="MSLayerGroup" id="Buttons">
<g transform="translate(26.000000, 7.000000)" sketch:type="MSShapeGroup">
<path d="M7.57710348,12.9048675 C7.04180408,12.7876066 6.46141311,12.9389926 6.04498016,13.3554255 L-2.89216446,22.2925701 C-3.53902314,22.9394288 -3.5418885,23.9953224 -2.89240043,24.6448105 C-2.23838425,25.2988266 -1.18977849,25.2941929 -0.540160097,24.6445745 L7.22721202,16.8772024 L14.9945841,24.6445745 C15.6414428,25.2914332 16.6973364,25.2942985 17.3468245,24.6448105 C18.0008407,23.9907943 17.9962069,22.9421885 17.3465885,22.2925701 L8.40944389,13.3554255 C8.17328851,13.1192701 7.88261547,12.9689485 7.57710348,12.9048675 Z" id="Back" transform="translate(7.228579, 19.000000) rotate(-90.000000) translate(-7.228579, -19.000000) "></path>
</g>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -30215,8 +30215,6 @@ var _actionsChangedir2 = _interopRequireDefault(_actionsChangedir);
var _store = require('store'); var _store = require('store');
// TODO: Fix history not working when clicking on sdcard
var Breadcrumb = (function (_Component) { var Breadcrumb = (function (_Component) {
_inherits(Breadcrumb, _Component); _inherits(Breadcrumb, _Component);
@ -30229,71 +30227,80 @@ var Breadcrumb = (function (_Component) {
_createClass(Breadcrumb, [{ _createClass(Breadcrumb, [{
key: 'render', key: 'render',
value: function render() { value: function render() {
var directories = this.props.cwd.split('/').filter(function (a) { var _this = this;
return a;
});
directories.unshift('sdcard');
var els = directories.map(function (dir, index, arr) { var els = [];
var path = arr.slice(1, index + 1).join('/');
return _react2['default'].createElement( if (this.props.search) {
console.log('search');
els = [_react2['default'].createElement(
'span', 'span',
{ key: index, onClick: (0, _store.bind)((0, _actionsChangedir2['default'])(path)) }, { key: '000' },
_react2['default'].createElement( 'Search: ',
'i', this.props.search
null, )];
'/' } else {
), (function () {
dir var directories = _this.props.cwd.split('/').filter(function (a) {
); return a;
}); });
var lastDirectories = _this.props.lwd.split('/').filter(function (a) {
return a;
});
directories.unshift('sdcard');
var lastDirectories = this.props.lwd.split('/').filter(function (a) { var sumLength = directories.length + lastDirectories.length;
return a;
});
if (lastDirectories.length > directories.length - 1) {
lastDirectories.splice(0, directories.length - 1);
var _history = lastDirectories.map(function (dir, index, arr) { els = els.concat(directories.map(function (dir, index, arr) {
var current = directories.slice(1).concat(arr.slice(0, index + 1)); var path = arr.slice(1, index + 1).join('/');
var path = current.join('/').replace(/^\//, ''); // remove starting slash var style = { zIndex: sumLength - index };
return _react2['default'].createElement( return _react2['default'].createElement(
'span', 'span',
{ key: directories.length + index, className: 'history', onClick: (0, _store.bind)((0, _actionsChangedir2['default'])(path)) }, { key: index, onClick: (0, _store.bind)((0, _actionsChangedir2['default'])(path)), style: style },
_react2['default'].createElement( dir
'i', );
null, }));
'/'
),
dir
);
});
els = els.concat(_history); if (lastDirectories.length > directories.length - 1) {
lastDirectories.splice(0, directories.length - 1);
var _history = lastDirectories.map(function (dir, index, arr) {
var current = directories.slice(1).concat(arr.slice(0, index + 1));
var path = current.join('/').replace(/^\//, ''); // remove starting slash
var key = directories.length + index;
var style = { zIndex: arr.length - index };
console.log('history', dir);
return _react2['default'].createElement(
'span',
{ key: key, className: 'history', onClick: (0, _store.bind)((0, _actionsChangedir2['default'])(path)), style: style },
dir
);
});
els = els.concat(_history);
}
})();
} }
return _react2['default'].createElement( return _react2['default'].createElement(
'div', 'div',
{ className: 'breadcrumb' }, { className: 'breadcrumb', ref: 'container' },
_react2['default'].createElement( _react2['default'].createElement(
'div', 'div',
null, null,
_react2['default'].createElement('span', { onClick: this.goUp, className: 'icon-up' }),
els els
) )
); );
} }
}, { }, {
key: 'goUp', key: 'componentDidUpdate',
value: function goUp() { value: function componentDidUpdate() {
var current = store.getState().get('cwd'); var container = _react2['default'].findDOMNode(this.refs.container);
var up = current.split('/').slice(0, -1).join('/'); var currents = container.querySelectorAll('span:not(.history)');
if (up === current) return; container.scrollLeft = currents[currents.length - 1].offsetLeft;
store.dispatch((0, _actionsChangedir2['default'])(up));
} }
}]); }]);
@ -30307,7 +30314,8 @@ exports['default'] = Breadcrumb;
function props(state) { function props(state) {
return { return {
lwd: state.get('lwd'), // last working directory lwd: state.get('lwd'), // last working directory
cwd: state.get('cwd') cwd: state.get('cwd'),
search: state.get('search')
}; };
} }
module.exports = exports['default']; module.exports = exports['default'];
@ -31081,6 +31089,35 @@ var Navigation = (function (_Component) {
) )
) )
), ),
_react2['default'].createElement(
'p',
null,
'View'
),
_react2['default'].createElement(
'ul',
null,
_react2['default'].createElement(
'li',
null,
_react2['default'].createElement('input', { id: 'view-list', name: 'view', 'data-value': 'list', type: 'radio', defaultChecked: settings.filter === 'list' }),
_react2['default'].createElement(
'label',
{ htmlFor: 'view-list' },
'List'
)
),
_react2['default'].createElement(
'li',
null,
_react2['default'].createElement('input', { id: 'view-grid', name: 'view', 'data-value': 'grid', type: 'radio', defaultChecked: settings.filter === 'grid' }),
_react2['default'].createElement(
'label',
{ htmlFor: 'view-grid' },
'Grid'
)
)
),
_react2['default'].createElement( _react2['default'].createElement(
'p', 'p',
null, null,
@ -31545,8 +31582,8 @@ var Toolbar = (function (_Component) {
return _react2['default'].createElement( return _react2['default'].createElement(
'div', 'div',
{ className: 'toolbar' }, { className: 'toolbar' },
_react2['default'].createElement('button', { className: 'icon-back tour-item', onClick: this.goUp }),
_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 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' })
@ -31567,6 +31604,16 @@ var Toolbar = (function (_Component) {
var transform = 'translate(0, -100%)'; var transform = 'translate(0, -100%)';
_store2['default'].dispatch((0, _actionsMenu.show)('moreMenu', { style: { left: left, top: top, transform: transform } })); _store2['default'].dispatch((0, _actionsMenu.show)('moreMenu', { style: { left: left, top: top, transform: transform } }));
} }
}, {
key: 'goUp',
value: function goUp() {
var current = _store2['default'].getState().get('cwd');
var up = current.split('/').slice(0, -1).join('/');
if (up === current) return;
_store2['default'].dispatch(changedir(up));
}
}, { }, {
key: 'newFile', key: 'newFile',
value: function newFile() { value: function newFile() {
@ -32401,6 +32448,10 @@ exports['default'] = function (state, action) {
return action.keywords; return action.keywords;
} }
if (action.type === _actionsTypes.CHANGE_DIRECTORY || action.type === _actionsTypes.REFRESH) {
return '';
}
return state; return state;
}; };
@ -32419,7 +32470,7 @@ function search(keywords) {
// We don't want to show all the currently visible files from the // We don't want to show all the currently visible files from the
// first iteration // first iteration
var once = true; var once = true;
(0, _apiFiles.children)('/', true).then(function showResults(files) { (0, _apiFiles.children)('', true).then(function showResults(files) {
if (!_store2['default'].getState().get('search')) return; if (!_store2['default'].getState().get('search')) return;
var current = once ? [] : _store2['default'].getState().get('files'); var current = once ? [] : _store2['default'].getState().get('files');
@ -32602,7 +32653,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', 'icon-back': 'Navigate to top directory',
'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'

View File

@ -65,18 +65,11 @@
.icon-cross svg * { .icon-cross svg * {
fill: white; fill: white;
} }
.icon-up { .icon-back {
display: block; display: block;
display: inline-block; background: url(/img/Back.svg) no-repeat;
border: 11px solid transparent; width: 15px;
border-right-color: #63b0cd; height: 24px;
border-top-width: 8px;
border-bottom-width: 8px;
border-radius: 3px;
margin-right: 0.5rem;
position: relative;
top: 2px;
right: 0.5rem;
} }
.regular-medium { .regular-medium {
font-weight: normal; font-weight: normal;
@ -508,21 +501,41 @@ nav i {
width: 100vw; width: 100vw;
height: 4.5rem; height: 4.5rem;
overflow-x: auto; overflow-x: auto;
padding: 8px;
box-sizing: border-box; box-sizing: border-box;
font-weight: 200; font-weight: 200;
font-size: 1.6rem; font-size: 1.6rem;
padding-right: 8px;
background: #f8f8f8; background: #f8f8f8;
border-bottom: 1px solid rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgba(0, 0, 0, 0.2);
overflow-x: scroll; overflow-x: scroll;
overflow-y: hidden; overflow-y: hidden;
white-space: nowrap; white-space: nowrap;
} }
.breadcrumb span { .breadcrumb div {
white-space: nowrap; display: flex;
align-items: center;
} }
.breadcrumb i { .breadcrumb span {
margin: 0 2px; position: relative;
display: flex;
align-items: center;
height: 4.5rem;
white-space: nowrap;
padding: 0 5px 0 30px;
background: #f0f0f0;
filter: drop-shadow(1px 0 0 rgba(0, 0, 0, 0.2));
}
.breadcrumb span:first-of-type {
padding-left: 10px;
}
.breadcrumb span::after {
position: absolute;
right: -46px;
top: 0;
content: '';
display: block;
border: 23px solid transparent;
border-left-color: #f0f0f0;
} }
.breadcrumb span.history { .breadcrumb span.history {
color: #9b9b93; color: #9b9b93;

Binary file not shown.

Binary file not shown.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 796 B

After

Width:  |  Height:  |  Size: 796 B

BIN
src/icon/Icon-340.png Normal file

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 58 KiB

16
src/img/Back.svg Normal file
View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="15px" height="24px" viewBox="0 0 15 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<!-- Generator: Sketch 3.3.3 (12072) - http://www.bohemiancoding.com/sketch -->
<title>Back</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Components" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Toolbar" sketch:type="MSArtboardGroup" transform="translate(-26.000000, -14.000000)" stroke="#63B0CD" fill="#63B0CD">
<g sketch:type="MSLayerGroup" id="Buttons">
<g transform="translate(26.000000, 7.000000)" sketch:type="MSShapeGroup">
<path d="M7.57710348,12.9048675 C7.04180408,12.7876066 6.46141311,12.9389926 6.04498016,13.3554255 L-2.89216446,22.2925701 C-3.53902314,22.9394288 -3.5418885,23.9953224 -2.89240043,24.6448105 C-2.23838425,25.2988266 -1.18977849,25.2941929 -0.540160097,24.6445745 L7.22721202,16.8772024 L14.9945841,24.6445745 C15.6414428,25.2914332 16.6973364,25.2942985 17.3468245,24.6448105 C18.0008407,23.9907943 17.9962069,22.9421885 17.3465885,22.2925701 L8.40944389,13.3554255 C8.17328851,13.1192701 7.88261547,12.9689485 7.57710348,12.9048675 Z" id="Back" transform="translate(7.228579, 19.000000) rotate(-90.000000) translate(-7.228579, -19.000000) "></path>
</g>
</g>
</g>
</g>
</svg>

Before

Width:  |  Height:  |  Size: 1.5 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -3,64 +3,72 @@ import { connect } from 'react-redux';
import changedir from 'actions/changedir'; import changedir from 'actions/changedir';
import { bind } from 'store'; import { bind } from 'store';
// TODO: Fix history not working when clicking on sdcard
@connect(props) @connect(props)
export default class Breadcrumb extends Component { export default class Breadcrumb extends Component {
render() { render() {
let directories = this.props.cwd.split('/').filter(a => a); let els = [];
directories.unshift('sdcard');
let els = directories.map((dir, index, arr) => { if (this.props.search) {
let path = arr.slice(1, index + 1).join('/'); console.log('search');
els = [
<span key='000'>Search: {this.props.search}</span>
]
} else {
let directories = this.props.cwd.split('/').filter(a => a);
let lastDirectories = this.props.lwd.split('/').filter(a => a);
directories.unshift('sdcard');
return ( let sumLength = directories.length + lastDirectories.length;
<span key={index} onClick={bind(changedir(path))}>
<i>/</i>{dir}
</span>
);
});
let lastDirectories = this.props.lwd.split('/').filter(a => a); els = els.concat(directories.map((dir, index, arr) => {
if (lastDirectories.length > directories.length - 1) { let path = arr.slice(1, index + 1).join('/');
lastDirectories.splice(0, directories.length - 1); let style = { zIndex: sumLength - index };
let history = lastDirectories.map((dir, index, arr) => {
let current = directories.slice(1).concat(arr.slice(0, index + 1));
let path = current.join('/').replace(/^\//, ''); // remove starting slash
return ( return (
<span key={directories.length + index} className='history' onClick={bind(changedir(path))}> <span key={index} onClick={bind(changedir(path))} style={style}>{dir}</span>
<i>/</i>{dir} );
</span> }));
)
});
els = els.concat(history); if (lastDirectories.length > directories.length - 1) {
lastDirectories.splice(0, directories.length - 1);
let history = lastDirectories.map((dir, index, arr) => {
let current = directories.slice(1).concat(arr.slice(0, index + 1));
let path = current.join('/').replace(/^\//, ''); // remove starting slash
let key = directories.length + index;
let style = { zIndex: arr.length - index};
console.log('history', dir)
return (
<span key={key} className='history' onClick={bind(changedir(path))} style={style}>{dir}</span>
)
});
els = els.concat(history);
}
} }
return ( return (
<div className='breadcrumb'> <div className='breadcrumb' ref='container'>
<div> <div>
<span onClick={this.goUp} className='icon-up'></span>
{els} {els}
</div> </div>
</div> </div>
); );
} }
goUp() { componentDidUpdate() {
let current = store.getState().get('cwd'); let container = React.findDOMNode(this.refs.container);
let up = current.split('/').slice(0, -1).join('/'); let currents = container.querySelectorAll('span:not(.history)');
if (up === current) return; container.scrollLeft = currents[currents.length - 1].offsetLeft;
store.dispatch(changedir(up));
} }
} }
function props(state) { function props(state) {
return { return {
lwd: state.get('lwd'), // last working directory lwd: state.get('lwd'), // last working directory
cwd: state.get('cwd') cwd: state.get('cwd'),
search: state.get('search')
} }
} }

View File

@ -40,6 +40,18 @@ export default class Navigation extends Component {
</li> </li>
</ul> </ul>
<p>View</p>
<ul>
<li>
<input id='view-list' name='view' data-value='list' type='radio' defaultChecked={settings.filter === 'list'} />
<label htmlFor='view-list'>List</label>
</li>
<li>
<input id='view-grid' name='view' data-value='grid' type='radio' defaultChecked={settings.filter === 'grid'} />
<label htmlFor='view-grid'>Grid</label>
</li>
</ul>
<p>Tools</p> <p>Tools</p>
<ul> <ul>
<li className='coming-soon'> <li className='coming-soon'>

View File

@ -10,8 +10,8 @@ export default class Toolbar extends Component {
render() { render() {
return ( return (
<div className='toolbar'> <div className='toolbar'>
<button className='icon-back tour-item' onClick={this.goUp} />
<button className='icon-plus tour-item' onClick={this.newFile} /> <button className='icon-plus tour-item' onClick={this.newFile} />
<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' />
@ -30,6 +30,15 @@ export default class Toolbar extends Component {
store.dispatch(showMenu('moreMenu', {style: {left, top, transform}})); store.dispatch(showMenu('moreMenu', {style: {left, top, transform}}));
} }
goUp() {
let current = store.getState().get('cwd');
let up = current.split('/').slice(0, -1).join('/');
if (up === current) return;
store.dispatch(changedir(up));
}
newFile() { newFile() {
let cwd = store.getState().get('cwd'); let cwd = store.getState().get('cwd');
let action = showDialog('createDialog', { let action = showDialog('createDialog', {

View File

@ -1,4 +1,4 @@
import { SEARCH } from 'actions/types'; import { SEARCH, CHANGE_DIRECTORY, REFRESH } from 'actions/types';
import store from 'store'; import store from 'store';
import { reportError } from 'utils'; import { reportError } from 'utils';
import { listFiles } from 'actions/files-view'; import { listFiles } from 'actions/files-view';
@ -12,6 +12,10 @@ export default function(state = '', action) {
return action.keywords; return action.keywords;
} }
if (action.type === CHANGE_DIRECTORY || action.type === REFRESH) {
return '';
}
return state; return state;
} }
@ -28,7 +32,7 @@ function search(keywords) {
// We don't want to show all the currently visible files from the // We don't want to show all the currently visible files from the
// first iteration // first iteration
let once = true; let once = true;
children('/', true).then(function showResults(files) { children('', true).then(function showResults(files) {
if (!store.getState().get('search')) return; if (!store.getState().get('search')) return;
let current = once ? [] : store.getState().get('files'); let current = once ? [] : store.getState().get('files');

View File

@ -3,7 +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', 'icon-back': 'Navigate to top directory',
'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'

View File

@ -8,12 +8,12 @@
overflow-x: auto; overflow-x: auto;
padding: 8px;
box-sizing: border-box; box-sizing: border-box;
.light-medium; .light-medium;
padding-right: 8px;
background: @light-gray; background: @light-gray;
border-bottom: 1px solid @dark-transparent; border-bottom: 1px solid @dark-transparent;
@ -22,12 +22,43 @@
overflow-y: hidden; overflow-y: hidden;
white-space: nowrap; white-space: nowrap;
span { div {
white-space: nowrap; display: flex;
align-items: center;
} }
i { span {
margin: 0 2px; position: relative;
display: flex;
align-items: center;
height: 4.5rem;
white-space: nowrap;
padding: 0 5px 0 30px;
background: @gray;
filter: drop-shadow(1px 0 0 @dark-transparent);
&:first-of-type {
padding-left: 10px;
}
&::after {
position: absolute;
right: -46px;
top: 0;
content: '';
display: block;
border: 23px solid transparent;
border-left-color: @gray;
}
} }
span.history { span.history {

View File

@ -72,19 +72,9 @@
} }
} }
.icon-up { .icon-back {
.icon; .icon;
display: inline-block; background: url(/img/Back.svg) no-repeat;
width: 15px;
border: 11px solid transparent; height: 24px;
border-right-color: @blue;
border-top-width: 8px;
border-bottom-width: 8px;
border-radius: 3px;
margin-right: 0.5rem;
position: relative;
top: 2px;
right: 0.5rem;
} }