Skip to content

erp5
erp5
Commit fa128ff7 authored by Romain Courteaud's avatar Romain Courteaud
Browse files
Options

[erp5_web_renderjs_ui] Increase tablet size limit 

Left panel should not be always visible on a laptop screen
parent 6770baf9
Hide whitespace changes
Inline Side-by-side
Showing with 27 additions and 27 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
View file @ fa128ff7
...@@ -174,7 +174,7 @@ select { ...@@ -174,7 +174,7 @@ select {
font-weight: 400; font-weight: 400;
line-height: 1.3; line-height: 1.3;
} }
@media only screen and (min-width: 62em), only screen and (min-width: 28em) and (max-width: 62em) { @media only screen and (min-width: 100em), only screen and (min-width: 28em) and (max-width: 100em) {
body, body,
button, button,
input, input,
...@@ -266,7 +266,7 @@ a:focus { ...@@ -266,7 +266,7 @@ a:focus {
outline-offset: -2px; outline-offset: -2px;
outline: 2px solid #3388cc; outline: 2px solid #3388cc;
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 100em) {
a[accesskey]:after { a[accesskey]:after {
content: " [" attr(accesskey) "] "; content: " [" attr(accesskey) "] ";
} }
...@@ -454,12 +454,12 @@ div[data-gadget-scope='panel'] { ...@@ -454,12 +454,12 @@ div[data-gadget-scope='panel'] {
display: block; display: block;
z-index: 2000; z-index: 2000;
} }
@media only screen and (max-width: 28em), only screen and (min-width: 28em) and (max-width: 62em) { @media only screen and (max-width: 28em), only screen and (min-width: 28em) and (max-width: 100em) {
div[data-gadget-scope='panel'] { div[data-gadget-scope='panel'] {
box-shadow: 5px 0 5px rgba(0, 0, 0, 0.15); box-shadow: 5px 0 5px rgba(0, 0, 0, 0.15);
} }
} }
@media only screen and (max-width: 28em), only screen and (min-width: 28em) and (max-width: 62em) { @media only screen and (max-width: 28em), only screen and (min-width: 28em) and (max-width: 100em) {
div[data-gadget-scope='panel'] { div[data-gadget-scope='panel'] {
left: -18em; left: -18em;
transition: transform 200ms ease-out; transition: transform 200ms ease-out;
...@@ -495,7 +495,7 @@ div[data-gadget-scope='panel'] div[data-role="header"] a::before { ...@@ -495,7 +495,7 @@ div[data-gadget-scope='panel'] div[data-role="header"] a::before {
text-indent: 0; text-indent: 0;
margin-left: 1em; margin-left: 1em;
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 100em) {
div[data-gadget-scope='panel'] div[data-role="header"] button[data-i18n="Close"], 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"] { div[data-gadget-scope='panel'] div[data-role="header"] a[data-i18n="Close"] {
display: none; display: none;
...@@ -537,7 +537,7 @@ div[data-gadget-scope='editor_panel'] { ...@@ -537,7 +537,7 @@ div[data-gadget-scope='editor_panel'] {
display: block; display: block;
z-index: 3000; z-index: 3000;
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 100em) {
div[data-gadget-scope='editor_panel'] { div[data-gadget-scope='editor_panel'] {
left: -18em; left: -18em;
transition: transform 200ms ease-out; transition: transform 200ms ease-out;
...@@ -548,7 +548,7 @@ div[data-gadget-scope='editor_panel'] { ...@@ -548,7 +548,7 @@ div[data-gadget-scope='editor_panel'] {
transform: translate3d(18em, 0, 0); transform: translate3d(18em, 0, 0);
} }
} }
@media only screen and (max-width: 28em), only screen and (min-width: 28em) and (max-width: 62em) { @media only screen and (max-width: 28em), only screen and (min-width: 28em) and (max-width: 100em) {
div[data-gadget-scope='editor_panel'] { div[data-gadget-scope='editor_panel'] {
right: -18em; right: -18em;
transition: transform 200ms ease-out; transition: transform 200ms ease-out;
...@@ -637,13 +637,13 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -637,13 +637,13 @@ div[data-gadget-scope='header'] .ui-header {
width: 100%; width: 100%;
color: #FFFFFF; color: #FFFFFF;
} }
@media only screen and (min-width: 28em) and (max-width: 62em), only screen and (max-width: 28em) { @media only screen and (min-width: 28em) and (max-width: 100em), only screen and (max-width: 28em) {
div[data-gadget-scope='header'] .ui-header { div[data-gadget-scope='header'] .ui-header {
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
} }
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 100em) {
div[data-gadget-scope='header'] .ui-header { div[data-gadget-scope='header'] .ui-header {
display: table; display: table;
margin-left: 17em; margin-left: 17em;
...@@ -691,7 +691,7 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a::before { ...@@ -691,7 +691,7 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a::before {
margin-left: 1em; margin-left: 1em;
} }
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 100em) {
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button[name="panel"], 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"] { div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a[name="panel"] {
display: none; display: none;
...@@ -701,13 +701,13 @@ div[data-gadget-scope='header'] .ui-header > .ui-btn-right button, ...@@ -701,13 +701,13 @@ div[data-gadget-scope='header'] .ui-header > .ui-btn-right button,
div[data-gadget-scope='header'] .ui-header > .ui-btn-right a { div[data-gadget-scope='header'] .ui-header > .ui-btn-right a {
background-color: #F60; background-color: #F60;
} }
@media only screen and (max-width: 28em), only screen and (min-width: 28em) and (max-width: 62em) { @media only screen and (max-width: 28em), only screen and (min-width: 28em) and (max-width: 100em) {
div[data-gadget-scope='header'] .ui-header > .ui-btn-right button, div[data-gadget-scope='header'] .ui-header > .ui-btn-right button,
div[data-gadget-scope='header'] .ui-header > .ui-btn-right a { div[data-gadget-scope='header'] .ui-header > .ui-btn-right a {
border-left: 1px solid rgba(255, 255, 255, 0.55); border-left: 1px solid rgba(255, 255, 255, 0.55);
} }
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 100em) {
div[data-gadget-scope='header'] .ui-header > .ui-btn-right { div[data-gadget-scope='header'] .ui-header > .ui-btn-right {
display: table-footer-group; display: table-footer-group;
} }
...@@ -734,7 +734,7 @@ div[data-gadget-scope='header'] .ui-header h1 > span { ...@@ -734,7 +734,7 @@ div[data-gadget-scope='header'] .ui-header h1 > span {
padding-left: 2em; padding-left: 2em;
} }
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 100em) {
div[data-gadget-scope='header'] .ui-header h1 > span { div[data-gadget-scope='header'] .ui-header h1 > span {
padding-left: 2em; padding-left: 2em;
} }
...@@ -749,12 +749,12 @@ div[data-gadget-scope='header'] .ui-header h1 a::before { ...@@ -749,12 +749,12 @@ div[data-gadget-scope='header'] .ui-header h1 a::before {
display: inline-block; display: inline-block;
width: 4em; width: 4em;
} }
@media only screen and (min-width: 28em) and (max-width: 62em), only screen and (max-width: 28em) { @media only screen and (min-width: 28em) and (max-width: 100em), only screen and (max-width: 28em) {
div[data-gadget-scope='header'] .ui-header h1 a::before { div[data-gadget-scope='header'] .ui-header h1 a::before {
text-align: center; text-align: center;
} }
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 100em) {
div[data-gadget-scope='header'] .ui-header h1 a::before { div[data-gadget-scope='header'] .ui-header h1 a::before {
padding-left: 2em; padding-left: 2em;
} }
...@@ -764,7 +764,7 @@ div[data-gadget-scope='header'] .ui-header h1 a::before { ...@@ -764,7 +764,7 @@ div[data-gadget-scope='header'] .ui-header h1 a::before {
width: 2em; width: 2em;
} }
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 100em) {
div[data-gadget-scope='header'] .ui-header .ui-subheader { div[data-gadget-scope='header'] .ui-header .ui-subheader {
text-align: left; text-align: left;
} }
...@@ -778,7 +778,7 @@ div[data-gadget-scope='header'] .ui-header ul { ...@@ -778,7 +778,7 @@ div[data-gadget-scope='header'] .ui-header ul {
div[data-gadget-scope='header'] .ui-header ul a { div[data-gadget-scope='header'] .ui-header ul a {
background-color: #0E81C2; background-color: #0E81C2;
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 100em) {
div[data-gadget-scope='header'] .ui-header ul { div[data-gadget-scope='header'] .ui-header ul {
height: 100%; height: 100%;
} }
...@@ -800,7 +800,7 @@ div[data-gadget-scope='header'] .ui-header ul a { ...@@ -800,7 +800,7 @@ div[data-gadget-scope='header'] .ui-header ul a {
display: none; display: none;
} }
} }
@media only screen and (min-width: 28em) and (max-width: 62em) { @media only screen and (min-width: 28em) and (max-width: 100em) {
div[data-gadget-scope='header'] .ui-header ul li { div[data-gadget-scope='header'] .ui-header ul li {
display: table-cell; display: table-cell;
border-left: 1px solid rgba(0, 0, 0, 0.55); border-left: 1px solid rgba(0, 0, 0, 0.55);
...@@ -872,7 +872,7 @@ div[data-gadget-scope='header'] .ui-header ul a { ...@@ -872,7 +872,7 @@ div[data-gadget-scope='header'] .ui-header ul a {
.gadget-content input[type='submit']:active { .gadget-content input[type='submit']:active {
background-color: #777777; background-color: #777777;
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 100em) {
.gadget-content { .gadget-content {
margin-left: 17em; margin-left: 17em;
} }
...@@ -944,7 +944,7 @@ div[data-gadget-scope='header'] .ui-header ul a { ...@@ -944,7 +944,7 @@ div[data-gadget-scope='header'] .ui-header ul a {
position: absolute; position: absolute;
right: .5em; right: .5em;
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 100em) {
.gadget-content .left, .gadget-content .left,
.gadget-content .right { .gadget-content .right {
vertical-align: top; vertical-align: top;
...@@ -955,7 +955,7 @@ div[data-gadget-scope='header'] .ui-header ul a { ...@@ -955,7 +955,7 @@ div[data-gadget-scope='header'] .ui-header ul a {
padding-left: 2%; padding-left: 2%;
} }
} }
@media only screen and (min-width: 28em) and (max-width: 62em), only screen and (min-width: 62em) { @media only screen and (min-width: 28em) and (max-width: 100em), only screen and (min-width: 100em) {
.gadget-content .ui-field-contain { .gadget-content .ui-field-contain {
display: flex; display: flex;
} }
...@@ -966,7 +966,7 @@ div[data-gadget-scope='header'] .ui-header ul a { ...@@ -966,7 +966,7 @@ div[data-gadget-scope='header'] .ui-header ul a {
flex: 3; flex: 3;
} }
} }
@media only screen and (min-width: 62em) { @media only screen and (min-width: 100em) {
.gadget-content .center .ui-field-contain label + div { .gadget-content .center .ui-field-contain label + div {
flex: 7; flex: 7;
} }
...@@ -1107,7 +1107,7 @@ div[data-gadget-scope='erp5_searchfield'] button { ...@@ -1107,7 +1107,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
.document_table table tbody tr:active { .document_table table tbody tr:active {
background-color: #e0e0e0; background-color: #e0e0e0;
} }
@media only screen and (min-width: 62em), only screen and (min-width: 28em) and (max-width: 62em) { @media only screen and (min-width: 100em), only screen and (min-width: 28em) and (max-width: 100em) {
.document_table table tbody a { .document_table table tbody a {
display: block; display: block;
padding: 0.4em 0.25em; padding: 0.4em 0.25em;
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml
View file @ fa128ff7
...@@ -236,7 +236,7 @@ ...@@ -236,7 +236,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>952.57378.47936.47257</string> </value> <value> <string>954.11511.38331.26436</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -254,7 +254,7 @@ ...@@ -254,7 +254,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1469798919.15</float> <float>1474899561.35</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
View file @ fa128ff7
...@@ -44,8 +44,8 @@ ...@@ -44,8 +44,8 @@
@panelwidth: 17em; @panelwidth: 17em;
@smartphone: ~"only screen and (max-width: 28em)"; @smartphone: ~"only screen and (max-width: 28em)";
@tablet: ~"only screen and (min-width: 28em) and (max-width: 62em)"; @tablet: ~"only screen and (min-width: 28em) and (max-width: 100em)";
@desktop: ~"only screen and (min-width: 62em)"; @desktop: ~"only screen and (min-width: 100em)";
/********************************************** /**********************************************
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7