Commit a5db87a1 authored by Romain Courteaud's avatar Romain Courteaud

erp5_web_renderjs_ui: allow to use the css grid in multiple places

Use the `ui-list-grid` class on a `ul` element.
parent 293687c5
Pipeline #15941 canceled with stage
...@@ -1827,12 +1827,12 @@ div[data-gadget-scope='maximize'] button:active { ...@@ -1827,12 +1827,12 @@ div[data-gadget-scope='maximize'] button:active {
/********************************************** /**********************************************
* Front page * Front page
**********************************************/ **********************************************/
div[data-gadget-url$="gadget_erp5_page_front.html"] > ul { ul.ui-list-grid {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
} }
div[data-gadget-url$="gadget_erp5_page_front.html"] > ul > li { ul.ui-list-grid > li {
flex-shrink: 1; flex-shrink: 1;
vertical-align: top; vertical-align: top;
padding: 3pt; padding: 3pt;
...@@ -1842,25 +1842,25 @@ div[data-gadget-url$="gadget_erp5_page_front.html"] > ul > li { ...@@ -1842,25 +1842,25 @@ div[data-gadget-url$="gadget_erp5_page_front.html"] > ul > li {
background-color: #FFFFFF; background-color: #FFFFFF;
} }
@media not screen and (min-width: 45em) { @media not screen and (min-width: 45em) {
div[data-gadget-url$="gadget_erp5_page_front.html"] > ul > li { ul.ui-list-grid > li {
flex-basis: 100%; flex-basis: 100%;
margin-bottom: 6pt; margin-bottom: 6pt;
} }
} }
@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (max-width: 85em) { @media only screen and (min-width: 45em) and (max-width: 85em), not screen and (max-width: 85em) {
div[data-gadget-url$="gadget_erp5_page_front.html"] > ul > li { ul.ui-list-grid > li {
margin-right: 24pt; margin-right: 24pt;
margin-bottom: 24pt; margin-bottom: 24pt;
flex-basis: 20em; flex-basis: 20em;
} }
} }
div[data-gadget-url$="gadget_erp5_page_front.html"] > ul > li h2 { ul.ui-list-grid > li h2 {
font-weight: 700; font-weight: 700;
background: #085078; background: #085078;
color: #FFFFFF; color: #FFFFFF;
padding: 6pt; padding: 6pt;
} }
div[data-gadget-url$="gadget_erp5_page_front.html"] > ul > li li { ul.ui-list-grid > li li {
padding: 3pt 6pt; padding: 3pt 6pt;
} }
/********************************************** /**********************************************
......
...@@ -246,7 +246,7 @@ ...@@ -246,7 +246,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>989.49292.64608.7680</string> </value> <value> <string>989.60433.59989.54698</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -264,7 +264,7 @@ ...@@ -264,7 +264,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1612445457.98</float> <float>1612969527.49</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
</head> </head>
<body> <body>
<ul> <ul class="ui-list-grid">
</ul> </ul>
</body> </body>
</html> </html>
\ No newline at end of file
...@@ -238,7 +238,7 @@ ...@@ -238,7 +238,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>981.53539.4987.28928</string> </value> <value> <string>989.60433.59989.54698</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -256,7 +256,7 @@ ...@@ -256,7 +256,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1581602343.58</float> <float>1612969553.17</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -2088,8 +2088,7 @@ div[data-gadget-scope='maximize'] button { ...@@ -2088,8 +2088,7 @@ div[data-gadget-scope='maximize'] button {
/********************************************** /**********************************************
* Front page * Front page
**********************************************/ **********************************************/
div[data-gadget-url$="gadget_erp5_page_front.html"] { ul.ui-list-grid {
> ul {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
flex-wrap: wrap; flex-wrap: wrap;
...@@ -2122,7 +2121,6 @@ div[data-gadget-url$="gadget_erp5_page_front.html"] { ...@@ -2122,7 +2121,6 @@ div[data-gadget-url$="gadget_erp5_page_front.html"] {
padding: @half-margin-size @margin-size; padding: @half-margin-size @margin-size;
} }
} }
}
} }
/********************************************** /**********************************************
......
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