Commit 710bab7c authored by Romain Courteaud's avatar Romain Courteaud

[erp5_web_renderjs_ui] Display desktop mode on chromebook when maximized

parent a620ef82
......@@ -251,7 +251,7 @@ a:focus {
outline-offset: -2px;
outline: 2px solid #3388cc;
}
@media not screen and (max-width: 90em) {
@media not screen and (max-width: 85em) {
a[accesskey]:after {
content: " [" attr(accesskey) "] ";
}
......@@ -346,7 +346,7 @@ textarea {
height: 20em;
}
}
@media only screen and (min-width: 45em) and (max-width: 90em), not screen and (max-width: 90em) {
@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (max-width: 85em) {
textarea {
min-height: 10em;
}
......@@ -437,12 +437,12 @@ div[data-gadget-scope='panel'] {
display: block;
z-index: 2000;
}
@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 90em) {
@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) {
div[data-gadget-scope='panel'] {
box-shadow: 5px 0 5px rgba(0, 0, 0, 0.15);
}
}
@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 90em) {
@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) {
div[data-gadget-scope='panel'] {
left: -186pt;
transition: transform 200ms ease-out;
......@@ -478,7 +478,7 @@ div[data-gadget-scope='panel'] div[data-role="header"] a::before {
text-indent: 0;
margin-left: 12pt;
}
@media not screen and (max-width: 90em) {
@media not screen and (max-width: 85em) {
div[data-gadget-scope='panel'] div[data-role="header"] button[data-i18n="Close"],
div[data-gadget-scope='panel'] div[data-role="header"] a[data-i18n="Close"] {
display: none;
......@@ -568,7 +568,7 @@ div[data-gadget-scope='editor_panel'] {
display: block;
z-index: 3000;
}
@media not screen and (max-width: 90em) {
@media not screen and (max-width: 85em) {
div[data-gadget-scope='editor_panel'] {
left: -186pt;
transition: transform 200ms ease-out;
......@@ -579,7 +579,7 @@ div[data-gadget-scope='editor_panel'] {
transform: translate3d(186pt, 0, 0);
}
}
@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 90em) {
@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) {
div[data-gadget-scope='editor_panel'] {
right: -186pt;
transition: transform 200ms ease-out;
......@@ -671,7 +671,7 @@ div[data-gadget-scope='header'] .ui-header {
color: #FFFFFF;
background-color: #0E81C2;
}
@media not screen and (max-width: 90em) {
@media not screen and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header {
margin-left: 180pt;
}
......@@ -693,13 +693,13 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
transition: background-color 0.2s ease-out;
line-height: 30pt;
}
@media not screen and (max-width: 90em) {
@media not screen and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button,
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
background-color: #0E81C2;
}
}
@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 90em) {
@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button,
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
background-color: #085078;
......@@ -711,7 +711,7 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button:acti
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a:active {
background-color: #0e90d8;
}
@media only screen and (min-width: 45em) and (max-width: 90em) {
@media only screen and (min-width: 45em) and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button,
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
width: 8em;
......@@ -726,7 +726,7 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a:active {
white-space: nowrap;
}
}
@media only screen and (min-width: 45em) and (max-width: 90em), not screen and (max-width: 90em) {
@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button::before,
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a::before {
width: 1em;
......@@ -742,7 +742,7 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a:active {
margin-left: 12pt;
}
}
@media not screen and (max-width: 90em) {
@media not screen and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button[name="panel"],
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a[name="panel"] {
display: none;
......@@ -752,13 +752,13 @@ div[data-gadget-scope='header'] .ui-header > .ui-btn-left button,
div[data-gadget-scope='header'] .ui-header > .ui-btn-left a {
border-right: 1px solid rgba(255, 255, 255, 0.55);
}
@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 90em) {
@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header > .ui-btn-right button,
div[data-gadget-scope='header'] .ui-header > .ui-btn-right a {
border-left: 1px solid rgba(255, 255, 255, 0.55);
}
}
@media not screen and (max-width: 90em) {
@media not screen and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header > .ui-btn-right button,
div[data-gadget-scope='header'] .ui-header > .ui-btn-right a {
padding-left: 24pt;
......@@ -775,7 +775,7 @@ div[data-gadget-scope='header'] .ui-header h1 {
overflow: hidden;
text-overflow: ellipsis;
}
@media not screen and (max-width: 90em) {
@media not screen and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header h1 {
flex: 1 100%;
}
......@@ -788,7 +788,7 @@ div[data-gadget-scope='header'] .ui-header h1 > span {
padding-left: 30pt;
}
}
@media not screen and (max-width: 90em) {
@media not screen and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header h1 > span {
padding-left: 24pt;
}
......@@ -803,12 +803,12 @@ div[data-gadget-scope='header'] .ui-header h1 a::before {
display: inline-block;
width: 42pt;
}
@media only screen and (min-width: 45em) and (max-width: 90em), not screen and (min-width: 45em) {
@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (min-width: 45em) {
div[data-gadget-scope='header'] .ui-header h1 a::before {
text-align: center;
}
}
@media not screen and (max-width: 90em) {
@media not screen and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header h1 a::before {
padding-left: 24pt;
}
......@@ -818,13 +818,13 @@ div[data-gadget-scope='header'] .ui-header h1 a::before {
width: 30pt;
}
}
@media not screen and (max-width: 90em) {
@media not screen and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header .ui-subheader {
text-align: left;
flex: 1;
}
}
@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 90em) {
@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header .ui-subheader {
flex: 1 100%;
}
......@@ -832,7 +832,7 @@ div[data-gadget-scope='header'] .ui-header h1 a::before {
div[data-gadget-scope='header'] .ui-header ul {
display: flex;
}
@media only screen and (min-width: 45em) and (max-width: 90em), not screen and (min-width: 45em) {
@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (min-width: 45em) {
div[data-gadget-scope='header'] .ui-header ul li {
flex: 1;
border-left: 1px solid rgba(0, 0, 0, 0.55);
......@@ -844,7 +844,7 @@ div[data-gadget-scope='header'] .ui-header ul {
display: block;
}
}
@media only screen and (min-width: 45em) and (max-width: 90em) {
@media only screen and (min-width: 45em) and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header ul li a {
padding-top: 3pt;
padding-bottom: 3pt;
......@@ -873,7 +873,7 @@ div[data-gadget-scope='header'] .ui-header ul {
width: 100%;
}
}
@media not screen and (max-width: 90em) {
@media not screen and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header ul li a {
display: block;
padding-left: 24pt;
......@@ -927,12 +927,12 @@ div[data-gadget-scope='header'] .ui-header ul {
.gadget-content input[type='submit']:active {
background-color: #ffa366;
}
@media not screen and (max-width: 90em) {
@media not screen and (max-width: 85em) {
.gadget-content {
margin-left: 180pt;
}
}
@media only screen and (min-width: 45em) and (max-width: 90em) {
@media only screen and (min-width: 45em) and (max-width: 85em) {
.gadget-content {
padding-top: 7em;
}
......@@ -1004,7 +1004,7 @@ div[data-gadget-scope='header'] .ui-header ul {
position: absolute;
right: 6pt;
}
@media only screen and (min-width: 45em) and (max-width: 90em), not screen and (max-width: 90em) {
@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (max-width: 85em) {
.gadget-content .left,
.gadget-content .right {
vertical-align: top;
......@@ -1015,7 +1015,7 @@ div[data-gadget-scope='header'] .ui-header ul {
padding-left: 24pt;
}
}
@media only screen and (min-width: 45em) and (max-width: 90em), not screen and (max-width: 90em) {
@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (max-width: 85em) {
.gadget-content .ui-field-contain {
display: flex;
}
......@@ -1026,7 +1026,7 @@ div[data-gadget-scope='header'] .ui-header ul {
flex: 3;
}
}
@media only screen and (min-width: 45em) and (max-width: 90em), not screen and (max-width: 90em) {
@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (max-width: 85em) {
.gadget-content .center .ui-field-contain label + div {
flex: 7;
}
......@@ -1037,7 +1037,7 @@ div[data-gadget-scope='header'] .ui-header ul {
.gadget-content form label span span {
animation: fadein 0.2s ease-out;
}
@media not screen and (max-width: 90em), only screen and (min-width: 45em) and (max-width: 90em) {
@media not screen and (max-width: 85em), only screen and (min-width: 45em) and (max-width: 85em) {
.gadget-content form label span span {
background-color: #FF6600;
color: #f8fff3;
......@@ -1223,7 +1223,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
.document_table table tbody tr:active {
background-color: #e0e0e0;
}
@media not screen and (max-width: 90em), only screen and (min-width: 45em) and (max-width: 90em) {
@media not screen and (max-width: 85em), only screen and (min-width: 45em) and (max-width: 85em) {
.document_table table tbody a {
display: block;
padding: 3pt;
......
......@@ -242,7 +242,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>958.18776.46267.41045</string> </value>
<value> <string>958.19701.31404.5597</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -260,7 +260,7 @@
</tuple>
<state>
<tuple>
<float>1490632830.94</float>
<float>1490687640.52</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -223,7 +223,7 @@
event,
context = this;
function extractSizeAndDispatch() {
if (window.matchMedia("(min-width: 90em)").matches) {
if (window.matchMedia("(min-width: 85em)").matches) {
return context.changeState({
desktop: true
});
......
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>957.46809.34243.17971</string> </value>
<value> <string>958.19723.40120.16469</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1488381715.57</float>
<float>1490688736.61</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -48,8 +48,8 @@
// @panelwidth: 15em;
@smartphone: ~"not screen and (min-width: 45em)";
@tablet: ~"only screen and (min-width: 45em) and (max-width: 90em)";
@desktop: ~"not screen and (max-width: 90em)";
@tablet: ~"only screen and (min-width: 45em) and (max-width: 85em)";
@desktop: ~"not screen and (max-width: 85em)";
/**********************************************
......
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