Commit 5e4668ea authored by Tomáš Peterka's avatar Tomáš Peterka Committed by Tomáš Peterka

[renderjs_ui] Empty worklist has relative positioning to be stackable

@Nicolas uses worklist as one of many gadgets in one page thus stackable empty worklist is necessary (before it was positioned as an fixed element).

/reviewed-on nexedi/erp5!387
parent 70a5a681
......@@ -918,8 +918,8 @@ div[data-gadget-scope='header'] .ui-header ul {
.gadget-content {
padding: 24pt;
padding-top: 66pt;
/* Disclaimer: It is here only for backward-compatibility! Don't rely on
this class because it will be removed.
/* Disclaimer: Class .horizontal_align_form_box is here only for backward-compatibility!
Don't rely on this class because it will be removed.
It was used to force horizontal rendering of fields inside FormBox. */
/*
@media @smartphone {
......@@ -982,6 +982,24 @@ div[data-gadget-scope='header'] .ui-header ul {
.gadget-content .ui-content-header-plain {
font-size: 150%;
}
.gadget-content .worklist-empty {
max-width: 442px;
/* original size of the embedded image */
width: 100%;
/* smaller screens than 442px will show full-width box */
margin: auto;
/* center with known width */
text-align: center;
}
.gadget-content .worklist-empty h2 {
font-size: 300%;
/* copy behaviour of previously used .first-loader */
margin-bottom: 0.5em;
}
.gadget-content .worklist-empty img {
width: 100%;
/* height will be computed automatically and proportionally */
}
.gadget-content ul.document-listview:not(:last-of-type) {
margin-bottom: 12pt;
}
......@@ -1054,8 +1072,8 @@ div[data-gadget-scope='header'] .ui-header ul {
}
.gadget-content .ui-field-contain > label {
flex: 1;
/* Disclaimer: It is here only for backward-compatibility! Don't rely on
this class because it will be removed.
/* Disclaimer: Class .invisible is here only for backward-compatibility!
Don't rely on this class because it will be removed.
It was used to hide the label of a FormBox. */
}
.gadget-content .ui-field-contain > label.invisible {
......
......@@ -242,7 +242,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>961.60979.41143.53009</string> </value>
<value> <string>962.1204.63259.57958</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -260,7 +260,7 @@
</tuple>
<state>
<tuple>
<float>1504787937.42</float>
<float>1505133981.01</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -28,9 +28,9 @@
{{/each}}
</ul>
{{else}}
<div class="first-loader">
<div class="worklist-empty">
<h2 data-i18n="All work caught up!">All work caught up!</h2>
<img width="442" height="442" src="gadget_erp5_worklist_empty.svg?format=svg">
<img src="gadget_erp5_worklist_empty.svg?format=svg">
</div>
{{/if}}
</script>
......
......@@ -234,7 +234,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>960.12553.18419.64989</string> </value>
<value> <string>962.1183.1144.61900</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -252,7 +252,7 @@
</tuple>
<state>
<tuple>
<float>1498036615.88</float>
<float>1505133662.18</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -1117,8 +1117,8 @@ div[data-gadget-scope='header'] .ui-header {
width: 100%;
}
}
/* Disclaimer: It is here only for backward-compatibility! Don't rely on
this class because it will be removed.
/* Disclaimer: Class .horizontal_align_form_box is here only for backward-compatibility!
Don't rely on this class because it will be removed.
It was used to force horizontal rendering of fields inside FormBox. */
.horizontal_align_form_box .ui-field-contain > div {
display: block-inline;
......@@ -1127,7 +1127,19 @@ div[data-gadget-scope='header'] .ui-header {
.ui-content-header-plain {
font-size: 150%;
}
.worklist-empty {
max-width: 442px; /* original size of the embedded image */
width: 100%; /* smaller screens than 442px will show full-width box */
margin: auto; /* center with known width */
text-align: center;
h2 {
font-size: 300%; /* copy behaviour of previously used .first-loader */
margin-bottom: 0.5em;
}
img {
width: 100%; /* height will be computed automatically and proportionally */
}
}
ul.document-listview {
&:not(:last-of-type) {
margin-bottom: @double-margin-size;
......@@ -1218,8 +1230,8 @@ div[data-gadget-scope='header'] .ui-header {
display: flex;
& > label {
flex: 1;
/* Disclaimer: It is here only for backward-compatibility! Don't rely on
this class because it will be removed.
/* Disclaimer: Class .invisible is here only for backward-compatibility!
Don't rely on this class because it will be removed.
It was used to hide the label of a FormBox. */
&.invisible {
display: none;
......
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