Commit cfeb79c2 authored by ZeHiro's avatar ZeHiro
Browse files

Improve mobile display + allow overflow of types and categories labels

parent 3ca8b1b8
......@@ -8,8 +8,8 @@ import SyncButton from './sync-button';
import throttle from 'lodash.throttle';
// Height of an operation line (px)
const OPERATION_HEIGHT = 55;
// Height of an operation line (px) based on the css settings
let OPERATION_HEIGHT = setOperationHeight();
// Number of operations before / after the ones to render, for flexibility.
const OPERATION_BALLAST = 10;
......@@ -31,6 +31,10 @@ function isNegative(op) {
return op.amount < 0;
}
function setOperationHeight() {
return window.innerWidth < 768 ? 41 : 55;
}
export default class OperationsComponent extends React.Component {
constructor(props) {
......@@ -88,6 +92,7 @@ export default class OperationsComponent extends React.Component {
handleResize(e) {
e.preventDefault();
OPERATION_HEIGHT = setOperationHeight();
INITIAL_SHOW_ITEMS = window.innerHeight / OPERATION_HEIGHT | 0;
this.handleScroll();
}
......@@ -211,20 +216,20 @@ export default class OperationsComponent extends React.Component {
<table className="table table-hover table-bordered">
<thead ref="thead">
<tr>
<th></th>
<th className="col-sm-1">
<th className="hidden-xs"></th>
<th className="col-sm-1 col-xs-2">
{ $t('client.operations.column_date') }
</th>
<th className="col-sm-2">
<th className="col-sm-2 hidden-xs">
{ $t('client.operations.column_type') }
</th>
<th className="col-sm-6">
<th className="col-sm-6 col-xs-8">
{ $t('client.operations.column_name') }
</th>
<th className="col-sm-1">
<th className="col-sm-1 col-xs-2">
{ $t('client.operations.column_amount') }
</th>
<th className="col-sm-2">
<th className="col-sm-2 hidden-xs">
{ $t('client.operations.column_category') }
</th>
</tr>
......
......@@ -87,12 +87,18 @@ class LabelComponent extends React.Component {
render() {
if (!this.state.editMode) {
return (
<button
className="form-control text-left btn-transparent"
id={ this.props.operation.id }
onClick={ this.handleClickEditMode }>
{ this.buttonLabel() }
</button>
<div >
<span className="text-uppercase visible-xs-inline label-button">
{ this.defaultValue() }
</span>
<button
className="form-control text-left btn-transparent hidden-xs"
id={ this.props.operation.id }
onClick={ this.handleClickEditMode }>
{ this.buttonLabel() }
</button>
</div>
);
}
return (
......
......@@ -86,13 +86,13 @@ export default class Operation extends React.Component {
}
return (
<tr className={ rowClassName }>
<td>
<td className="hidden-xs">
<a href="#" onClick={ this.handleToggleDetails }>
<i className="fa fa-plus-square"></i>
</a>
</td>
<td>{ op.date.toLocaleDateString() }</td>
<td>
<td className="hidden-xs">
<OperationTypeSelect
operation={ op }
onSelectId={ this.handleSelectType }
......@@ -100,7 +100,7 @@ export default class Operation extends React.Component {
</td>
<td><OperationListViewLabel operation={ op } link={ maybeLink } /></td>
<td className="text-right">{ this.props.formatCurrency(op.amount) }</td>
<td>
<td className="hidden-xs">
<CategorySelect
operation={ op }
onSelectId={ this.handleSelectCategory }
......
......@@ -377,22 +377,50 @@ ul {
* WebKit hack: by setting a relative position to the cell, its width will not be
* calculated according to its content, which is wrong if the content is too wide
*/
.operation-panel .table td:nth-child(4)
{
position: relative;
@media screen and (max-width: 768px) {
/* The height is smaller in xs-mode */
.operation-panel .table td
{
position: relative;
height: 41px;
}
/* This allows to display the invoice icon correctly in xs-mode*/
.table .input-group-addon {
padding: 0px 12px 0px 0px;
}
}
@media screen and (min-width: 768px) {
.operation-panel .table td
{
position: relative;
height: 54px;
}
.operation-panel .table td > div
{
position: relative;
max-width: 100%;
}
}
.operation-panel .table td:nth-child(4) button
.operation-panel .table td > button, .operation-panel .table td > div > span,
.operation-panel .table td > div > div > span
{
position: absolute;
max-width: calc(100% - 16px);
max-width: calc(100% - 20px);
max-width: -webkit-fill-available;
}
.operation-panel .table td:nth-child(4) .input-group-addon + button
.operation-panel .table td > div > button
{
position: absolute;
max-width: 100%;
max-width: -webkit-fill-available;
}
.operation-panel .table td:nth-child(4) .input-group-addon + div > button {
/* 52px = .input-group paddings (12+12) + 2 icons max (28px) */
max-width: calc(100% - 52px);
position: absolute;
max-width: calc(100% - 38px);
}
.input-group-addon {
......@@ -478,13 +506,6 @@ button:focus, input:focus {outline:none !important}
}
}
@media screen and (max-width: 768px) {
td .form-control {
display: inline-block;
width: inherit;
}
}
.box-transparent {
color: inherit;
background-color: transparent;
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment