Skip to content
GitLab
Menu
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
Jan
kresus
Commits
cfeb79c2
Commit
cfeb79c2
authored
Jun 17, 2016
by
ZeHiro
Browse files
Improve mobile display + allow overflow of types and categories labels
parent
3ca8b1b8
Changes
4
Hide whitespace changes
Inline
Side-by-side
client/components/operations/index.js
View file @
cfeb79c2
...
...
@@ -8,8 +8,8 @@ import SyncButton from './sync-button';
import
throttle
from
'
lodash.throttle
'
;
// Height of an operation line (px)
cons
t
OPERATION_HEIGHT
=
55
;
// Height of an operation line (px)
based on the css settings
le
t
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
>
...
...
client/components/operations/label.js
View file @
cfeb79c2
...
...
@@ -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
(
...
...
client/components/operations/operation.js
View file @
cfeb79c2
...
...
@@ -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
}
...
...
client/css/style.css
View file @
cfeb79c2
...
...
@@ -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%
-
16
px
);
max-width
:
calc
(
100%
-
20
px
);
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
;
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment