Commit 8667d72c authored by Romain Courteaud's avatar Romain Courteaud

[erp5_web_renderjs_ui] Improve listbox rendering on mobile

Display only 2 lines of content per document.
Correctly align all text.
parent de7272f8
...@@ -164,6 +164,7 @@ body { ...@@ -164,6 +164,7 @@ body {
display: block; display: block;
color: #1F1F1F; color: #1F1F1F;
word-wrap: break-word; word-wrap: break-word;
word-break: break-word;
} }
body, body,
button, button,
...@@ -1289,12 +1290,13 @@ div[data-gadget-scope='erp5_searchfield'] button { ...@@ -1289,12 +1290,13 @@ div[data-gadget-scope='erp5_searchfield'] button {
display: block; display: block;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
height: 4em;
position: relative; position: relative;
height: 4em;
line-height: 2em;
} }
.document_table table tbody tr td, .document_table table tbody tr td *,
.document_table table tbody tr th { .document_table table tbody tr th * {
display: inline-block; display: inline;
} }
.document_table table tbody tr td:first-child, .document_table table tbody tr td:first-child,
.document_table table tbody tr th:first-child { .document_table table tbody tr th:first-child {
...@@ -1310,6 +1312,7 @@ div[data-gadget-scope='erp5_searchfield'] button { ...@@ -1310,6 +1312,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
padding-top: 6pt;
} }
.document_table table tbody tr td:first-child a:after, .document_table table tbody tr td:first-child a:after,
.document_table table tbody tr th:first-child a:after { .document_table table tbody tr th:first-child a:after {
...@@ -1331,12 +1334,14 @@ div[data-gadget-scope='erp5_searchfield'] button { ...@@ -1331,12 +1334,14 @@ div[data-gadget-scope='erp5_searchfield'] button {
.document_table table tbody tr td:first-child ~ td, .document_table table tbody tr td:first-child ~ td,
.document_table table tbody tr th:first-child ~ td { .document_table table tbody tr th:first-child ~ td {
font-size: 0.8em; font-size: 0.8em;
display: inline;
} }
.document_table table tbody tr td:first-child ~ th a, .document_table table tbody tr td:first-child ~ th a,
.document_table table tbody tr th:first-child ~ th a, .document_table table tbody tr th:first-child ~ th a,
.document_table table tbody tr td:first-child ~ td a, .document_table table tbody tr td:first-child ~ td a,
.document_table table tbody tr th:first-child ~ td a { .document_table table tbody tr th:first-child ~ td a {
pointer-events: none; pointer-events: none;
color: #777777;
} }
.document_table table tbody tr td:first-child ~ th:not(:last-child) a:not(:empty):after, .document_table table tbody tr td:first-child ~ th:not(:last-child) a:not(:empty):after,
.document_table table tbody tr th:first-child ~ th:not(:last-child) a:not(:empty):after, .document_table table tbody tr th:first-child ~ th:not(:last-child) a:not(:empty):after,
......
...@@ -242,7 +242,7 @@ ...@@ -242,7 +242,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>961.42445.27813.34781</string> </value> <value> <string>961.59557.4519.51251</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -260,7 +260,7 @@ ...@@ -260,7 +260,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1503676812.98</float> <float>1504702928.19</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -233,6 +233,7 @@ body { ...@@ -233,6 +233,7 @@ body {
color: @colorforeground; color: @colorforeground;
word-wrap: break-word; word-wrap: break-word;
word-break: break-word;
} }
body, button, input, textarea, select { body, button, input, textarea, select {
...@@ -1492,12 +1493,16 @@ div[data-gadget-scope='erp5_searchfield'] { ...@@ -1492,12 +1493,16 @@ div[data-gadget-scope='erp5_searchfield'] {
display: block; display: block;
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
height: 4em;
position: relative; position: relative;
// Only 2 visible lines are visible
height: 4em;
line-height: 2em;
td, th { td, th {
// all cells inline-block * {
display: inline-block; // Disable all block (div, p, ...)
display: inline;
}
&:first-child { &:first-child {
// first cell must be locked // first cell must be locked
...@@ -1513,6 +1518,8 @@ div[data-gadget-scope='erp5_searchfield'] { ...@@ -1513,6 +1518,8 @@ div[data-gadget-scope='erp5_searchfield'] {
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
// Reduce the gap between the first and second visible lines
padding-top: @margin-size;
&:after { &:after {
// XXX copy/pasted // XXX copy/pasted
...@@ -1535,10 +1542,15 @@ div[data-gadget-scope='erp5_searchfield'] { ...@@ -1535,10 +1542,15 @@ div[data-gadget-scope='erp5_searchfield'] {
~ th, ~ td { ~ th, ~ td {
// set line height on cells after first row // set line height on cells after first row
// First column must be more visible
font-size: 0.8em; font-size: 0.8em;
// Cells must be next to the other and correctly aligned
display: inline;
a { a {
pointer-events: none; pointer-events: none;
// Add contrast with the first column content
color: @grey;
} }
&:not(:last-child) a:not(:empty):after { &:not(:last-child) a:not(:empty):after {
......
Markdown is supported
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