Commit 940c8b1d authored by Vincent Bechu's avatar Vincent Bechu

[erp5_web_renderjs_ui] fixup

parent 3033a256
...@@ -235,12 +235,12 @@ ...@@ -235,12 +235,12 @@
promise_list = []; promise_list = [];
if (modification_dict.hasOwnProperty('desktop')) { if (modification_dict.hasOwnProperty('desktop')) {
if (this.state.desktop) { if (this.state.desktop) {
if (this.element.classList.contains('tablet-mode')) { if (this.element.classList.contains('desktop-panel-closed')) {
this.element.classList.remove('tablet-mode'); this.element.classList.remove('desktop-panel-closed');
} }
} else { } else {
if (!this.element.classList.contains('tablet-mode')) { if (!this.element.classList.contains('desktop-panel-closed')) {
this.element.classList.toggle('tablet-mode'); this.element.classList.toggle('desktop-panel-closed');
} }
} }
} }
......
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>963.43879.9730.43520</string> </value> <value> <string>963.49577.25013.30532</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -248,7 +248,7 @@ ...@@ -248,7 +248,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1511881522.84</float> <float>1511953841.11</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -430,14 +430,15 @@ ...@@ -430,14 +430,15 @@
return route(this, "panel", "toggle"); return route(this, "panel", "toggle");
}) })
.allowPublicAcquisition('setDesktopMode', function (param_list) { .allowPublicAcquisition('setDesktopMode', function (param_list) {
var element = this.props.content_element;
this.props.desktop_mode = param_list[0]; this.props.desktop_mode = param_list[0];
if (param_list[0]) { if (param_list[0]) {
if (this.props.content_element.classList.contains('tablet-mode')) { if (element.classList.contains('desktop-panel-closed')) {
this.props.content_element.classList.remove('tablet-mode'); element.classList.remove('desktop-panel-closed');
} }
} else { } else {
if (!this.props.content_element.classList.contains('tablet-mode')) { if (!element.classList.contains('desktop-panel-closed')) {
this.props.content_element.classList.toggle('tablet-mode'); element.classList.toggle('desktop-panel-closed');
} }
} }
return route(this, "header", "setDesktopMode", [param_list[0]]); return route(this, "header", "setDesktopMode", [param_list[0]]);
......
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>963.49583.4046.44697</string> </value> <value> <string>963.49585.52761.29405</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -248,7 +248,7 @@ ...@@ -248,7 +248,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1511882028.25</float> <float>1511954015.57</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -433,24 +433,19 @@ div[data-gadget-scope='panel'] { ...@@ -433,24 +433,19 @@ div[data-gadget-scope='panel'] {
overflow-y: auto; overflow-y: auto;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: -186pt;
display: block; display: block;
z-index: 2000; z-index: 2000;
transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0);
} }
@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) { @media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) {
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 not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) { div[data-gadget-scope='panel'].visible {
div[data-gadget-scope='panel'] {
left: -186pt;
transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0);
}
div[data-gadget-scope='panel'].visible {
transform: translate3d(186pt, 0, 0); transform: translate3d(186pt, 0, 0);
}
} }
div[data-gadget-scope='panel'] div[data-role="header"] { div[data-gadget-scope='panel'] div[data-role="header"] {
display: flex; display: flex;
...@@ -478,12 +473,6 @@ div[data-gadget-scope='panel'] div[data-role="header"] a::before { ...@@ -478,12 +473,6 @@ div[data-gadget-scope='panel'] div[data-role="header"] a::before {
text-indent: 0; text-indent: 0;
margin-left: 12pt; margin-left: 12pt;
} }
@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;
}
}
div[data-gadget-scope='panel'] div[data-gadget-scope='erp5_searchfield'] { div[data-gadget-scope='panel'] div[data-gadget-scope='erp5_searchfield'] {
padding: 3pt 12pt; padding: 3pt 12pt;
} }
...@@ -686,6 +675,8 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -686,6 +675,8 @@ div[data-gadget-scope='header'] .ui-header {
} }
@media not screen and (max-width: 85em) { @media not screen and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header { div[data-gadget-scope='header'] .ui-header {
transition: transform 200ms ease-out;
transform: translate3d(180pt, 0, 0);
margin-left: 180pt; margin-left: 180pt;
} }
} }
...@@ -926,6 +917,65 @@ div[data-gadget-scope='header'] .ui-header ul { ...@@ -926,6 +917,65 @@ div[data-gadget-scope='header'] .ui-header ul {
display: none; display: none;
} }
} }
@media not screen and (max-width: 85em) {
div[data-gadget-scope="header"].desktop-panel-closed .ui-header {
margin-left: 0;
transform: translate3d(0, 0, 0);
}
div[data-gadget-scope="header"].desktop-panel-closed .ui-header .ui-controlgroup-controls button,
div[data-gadget-scope="header"].desktop-panel-closed .ui-header .ui-controlgroup-controls a {
background-color: #085078;
width: 8em;
}
div[data-gadget-scope="header"].desktop-panel-closed .ui-header .ui-controlgroup-controls button[name="panel"],
div[data-gadget-scope="header"].desktop-panel-closed .ui-header .ui-controlgroup-controls a[name="panel"] {
display: block;
}
div[data-gadget-scope="header"].desktop-panel-closed .ui-header > .ui-btn-right button,
div[data-gadget-scope="header"].desktop-panel-closed .ui-header > .ui-btn-right a {
border-left: 1px solid rgba(255, 255, 255, 0.55);
padding-left: 0;
padding-right: 0;
}
div[data-gadget-scope="header"].desktop-panel-closed .ui-header h1 {
flex: 1;
}
div[data-gadget-scope="header"].desktop-panel-closed .ui-header h1 > span {
padding-left: 16pt;
}
div[data-gadget-scope="header"].desktop-panel-closed .ui-header h1 > span::before {
margin-right: 14pt;
}
div[data-gadget-scope="header"].desktop-panel-closed .ui-header h1 a::before,
div[data-gadget-scope="header"].desktop-panel-closed .ui-header h1 form button::before {
text-align: center;
}
div[data-gadget-scope="header"].desktop-panel-closed .ui-header .ui-subheader {
text-align: center;
flex: 1 100%;
}
div[data-gadget-scope="header"].desktop-panel-closed .ui-header ul > li {
flex: 1;
border-left: 1px solid rgba(0, 0, 0, 0.55);
}
div[data-gadget-scope="header"].desktop-panel-closed .ui-header ul > li:first-child {
border-left: none;
}
div[data-gadget-scope="header"].desktop-panel-closed .ui-header ul > li a {
display: block;
}
div[data-gadget-scope="header"].desktop-panel-closed .ui-header ul > li a {
padding-top: 3pt;
padding-bottom: 3pt;
line-height: inherit;
white-space: nowrap;
overflow: hidden;
}
div[data-gadget-scope="header"].desktop-panel-closed .ui-header ul > li a::before {
font-size: 1.2em;
display: block;
}
}
/********************************************** /**********************************************
* Gadget: main * Gadget: main
**********************************************/ **********************************************/
...@@ -978,6 +1028,10 @@ div[data-gadget-scope='header'] .ui-header ul { ...@@ -978,6 +1028,10 @@ div[data-gadget-scope='header'] .ui-header ul {
padding-top: 7em; padding-top: 7em;
} }
} }
.gadget-content.desktop-panel-closed {
margin-left: 0;
padding-top: 7em;
}
@media not screen and (min-width: 45em) { @media not screen and (min-width: 45em) {
.gadget-content { .gadget-content {
padding: 6pt; padding: 6pt;
......
...@@ -242,7 +242,7 @@ ...@@ -242,7 +242,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>963.50757.27093.23739</string> </value> <value> <string>963.50773.52088.34133</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>1511952591.56</float> <float>1511953440.55</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -541,18 +541,15 @@ div[data-gadget-scope='panel'] { ...@@ -541,18 +541,15 @@ div[data-gadget-scope='panel'] {
overflow-y: auto; overflow-y: auto;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: -@panelwidth - @margin-size;
display: block; display: block;
z-index: 2000; z-index: 2000;
@media @smartphone, @tablet {
left: -@panelwidth - @margin-size;
transition: transform 200ms ease-out; transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
&.visible { &.visible {
transform: translate3d(@panelwidth + @margin-size, 0, 0); transform: translate3d(@panelwidth + @margin-size, 0, 0);
} }
}
div[data-role="header"] { div[data-role="header"] {
display: flex; display: flex;
...@@ -574,12 +571,6 @@ div[data-gadget-scope='panel'] { ...@@ -574,12 +571,6 @@ div[data-gadget-scope='panel'] {
margin-left: @double-margin-size; margin-left: @double-margin-size;
} }
@media @desktop {
&[data-i18n="Close"] {
display: none;
}
}
display: block; display: block;
line-height: @headerheight; line-height: @headerheight;
...@@ -856,6 +847,8 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -856,6 +847,8 @@ div[data-gadget-scope='header'] .ui-header {
width: 100%; width: 100%;
@media @desktop { @media @desktop {
transition: transform 200ms ease-out;
transform: translate3d(@panelwidth, 0, 0);
margin-left: @panelwidth; margin-left: @panelwidth;
} }
...@@ -1073,6 +1066,56 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -1073,6 +1066,56 @@ div[data-gadget-scope='header'] .ui-header {
} }
} }
} }
}
}
}
div[data-gadget-scope="header"].desktop-panel-closed .ui-header {
@media @desktop {
margin-left: 0;
transform: translate3d(0, 0, 0);
.ui-controlgroup-controls {
button, a {
background-color: @colorheaderbackground;
width: 8em;
&[name="panel"] {
display: block;
}
}
}
& > .ui-btn-right {
button, a {
border-left: 1px solid rgba(255, 255, 255, 0.55);
padding-left: 0;
padding-right: 0;
}
}
h1 {
flex: 1;
& > span {
.renderTabletNotALinkTitle();
}
a, form button {
&::before {
text-align: center;
}
}
}
.ui-subheader {
text-align: center;
flex: 1 100%;
}
ul > li {
.renderTabletSubListElement();
a {
.renderTabletSubLink();
}
} }
} }
} }
...@@ -1119,6 +1162,10 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -1119,6 +1162,10 @@ div[data-gadget-scope='header'] .ui-header {
@media @tablet { @media @tablet {
padding-top: 7em; padding-top: 7em;
} }
&.desktop-panel-closed {
margin-left: 0;
padding-top: 7em;
}
@media @smartphone { @media @smartphone {
padding: @main-margin-size-smartphone; padding: @main-margin-size-smartphone;
padding-top: 6em; padding-top: 6em;
......
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