Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
erp5
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Rafael Monnerat
erp5
Commits
ae2c27cd
Commit
ae2c27cd
authored
Dec 14, 2017
by
Vincent Bechu
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
[erp5_web_renderjs_ui] Add possibility to hide panel in desktop view
parent
634fac2e
Changes
5
Show whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
188 additions
and
45 deletions
+188
-45
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.js
...mplateItem/web_page_module/rjs_gadget_erp5_launcher_js.js
+16
-0
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.xml
...plateItem/web_page_module/rjs_gadget_erp5_launcher_js.xml
+3
-3
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
...emplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
+86
-25
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml
...emplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml
+3
-3
bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
...teItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
+80
-14
No files found.
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.js
View file @
ae2c27cd
...
@@ -169,6 +169,19 @@
...
@@ -169,6 +169,19 @@
return
displayErrorContent
(
gadget
,
error
);
return
displayErrorContent
(
gadget
,
error
);
}
}
function
hideDesktopPanel
(
gadget
,
hide
)
{
var
element
=
gadget
.
element
.
querySelector
(
'
div[data-role="page"]
'
);
if
(
hide
)
{
if
(
!
element
.
classList
.
contains
(
'
desktop-panel-hidden
'
))
{
element
.
classList
.
toggle
(
'
desktop-panel-hidden
'
);
}
}
else
{
if
(
element
.
classList
.
contains
(
'
desktop-panel-hidden
'
))
{
element
.
classList
.
remove
(
'
desktop-panel-hidden
'
);
}
}
}
//////////////////////////////////////////
//////////////////////////////////////////
// Page rendering
// Page rendering
//////////////////////////////////////////
//////////////////////////////////////////
...
@@ -426,6 +439,9 @@
...
@@ -426,6 +439,9 @@
gadget
.
props
.
panel_argument_list
=
param_list
[
0
];
gadget
.
props
.
panel_argument_list
=
param_list
[
0
];
})
})
.
allowPublicAcquisition
(
'
hidePanel
'
,
function
(
param_list
)
{
return
hideDesktopPanel
(
this
,
param_list
[
0
]);
})
.
allowPublicAcquisition
(
'
triggerPanel
'
,
function
()
{
.
allowPublicAcquisition
(
'
triggerPanel
'
,
function
()
{
return
route
(
this
,
"
panel
"
,
"
toggle
"
);
return
route
(
this
,
"
panel
"
,
"
toggle
"
);
})
})
...
...
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.xml
View file @
ae2c27cd
...
@@ -216,7 +216,7 @@
...
@@ -216,7 +216,7 @@
</item>
</item>
<item>
<item>
<key>
<string>
actor
</string>
</key>
<key>
<string>
actor
</string>
</key>
<value>
<string>
zope
</string>
</value>
<value>
<string>
vincent
</string>
</value>
</item>
</item>
<item>
<item>
<key>
<string>
comment
</string>
</key>
<key>
<string>
comment
</string>
</key>
...
@@ -230,7 +230,7 @@
...
@@ -230,7 +230,7 @@
</item>
</item>
<item>
<item>
<key>
<string>
serial
</string>
</key>
<key>
<string>
serial
</string>
</key>
<value>
<string>
96
3.29105.23200.50073
</string>
</value>
<value>
<string>
96
4.8140.54108.1245
</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>
151
1971674.78
</float>
<float>
151
3245928.9
</float>
<string>
UTC
</string>
<string>
UTC
</string>
</tuple>
</tuple>
</state>
</state>
...
...
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
View file @
ae2c27cd
...
@@ -436,6 +436,8 @@ div[data-gadget-scope='panel'] {
...
@@ -436,6 +436,8 @@ div[data-gadget-scope='panel'] {
left
:
0
;
left
:
0
;
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'
]
{
...
@@ -445,8 +447,6 @@ div[data-gadget-scope='panel'] {
...
@@ -445,8 +447,6 @@ div[data-gadget-scope='panel'] {
@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'
]
{
left
:
-186pt
;
left
:
-186pt
;
transition
:
transform
200ms
ease-out
;
transform
:
translate3d
(
0
,
0
,
0
);
}
}
div
[
data-gadget-scope
=
'panel'
]
.visible
{
div
[
data-gadget-scope
=
'panel'
]
.visible
{
transform
:
translate3d
(
186pt
,
0
,
0
);
transform
:
translate3d
(
186pt
,
0
,
0
);
...
@@ -479,8 +479,8 @@ div[data-gadget-scope='panel'] div[data-role="header"] a::before {
...
@@ -479,8 +479,8 @@ div[data-gadget-scope='panel'] div[data-role="header"] a::before {
margin-left
:
12pt
;
margin-left
:
12pt
;
}
}
@media
not
screen
and
(
max-width
:
85em
)
{
@media
not
screen
and
(
max-width
:
85em
)
{
div
[
data-gadget-scope
=
'panel'
]
div
[
data-role
=
"header"
]
button
[
data-i18n
=
"Close"
],
div
[
data-
role
=
'page'
]
:not
(
.desktop-panel-hidden
)
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-
role
=
'page'
]
:not
(
.desktop-panel-hidden
)
div
[
data-
gadget-scope
=
'panel'
]
div
[
data-role
=
"header"
]
a
[
data-i18n
=
"Close"
]
{
display
:
none
;
display
:
none
;
}
}
}
}
...
@@ -686,7 +686,8 @@ div[data-gadget-scope='header'] .ui-header {
...
@@ -686,7 +686,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
{
margin-left
:
180pt
;
transition
:
transform
200ms
ease-out
;
transform
:
translate3d
(
180pt
,
0
,
0
);
}
}
}
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
button
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
button
,
...
@@ -712,10 +713,14 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
...
@@ -712,10 +713,14 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
background-color
:
#0E81C2
;
background-color
:
#0E81C2
;
}
}
}
}
@media
not
screen
and
(
min-width
:
45em
)
,
only
screen
and
(
min-width
:
45em
)
and
(
max-width
:
85em
)
{
@media
not
screen
and
(
min-width
:
45em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
{
background-color
:
#085078
;
background-color
:
#085078
;
width
:
3em
;
overflow
:
hidden
;
text-indent
:
-9999px
;
white-space
:
nowrap
;
}
}
}
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
:hover
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
:hover
,
...
@@ -727,18 +732,10 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a:active {
...
@@ -727,18 +732,10 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a:active {
@media
only
screen
and
(
min-width
:
45em
)
and
(
max-width
:
85em
)
{
@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
button
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
{
background-color
:
#085078
;
width
:
8em
;
width
:
8em
;
}
}
}
}
@media
not
screen
and
(
min-width
:
45em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
{
width
:
3em
;
overflow
:
hidden
;
text-indent
:
-9999px
;
white-space
:
nowrap
;
}
}
@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-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
::before
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
::before
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
::before
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
::before
{
...
@@ -756,8 +753,8 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a:active {
...
@@ -756,8 +753,8 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a:active {
}
}
}
}
@media
not
screen
and
(
max-width
:
85em
)
{
@media
not
screen
and
(
max-width
:
85em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
[
name
=
"panel"
],
div
[
data-
role
=
'page'
]
:not
(
.desktop-panel-hidden
)
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-
role
=
'page'
]
:not
(
.desktop-panel-hidden
)
div
[
data-
gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
[
name
=
"panel"
]
{
display
:
none
;
display
:
none
;
}
}
}
}
...
@@ -772,8 +769,8 @@ div[data-gadget-scope='header'] .ui-header > .ui-btn-left a {
...
@@ -772,8 +769,8 @@ div[data-gadget-scope='header'] .ui-header > .ui-btn-left a {
}
}
}
}
@media
not
screen
and
(
max-width
:
85em
)
{
@media
not
screen
and
(
max-width
:
85em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
>
.ui-btn-right
button
,
div
[
data-
role
=
'page'
]
:not
(
.desktop-panel-hidden
)
div
[
data-
gadget-scope
=
'header'
]
.ui-header
>
.ui-btn-right
button
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
>
.ui-btn-right
a
{
div
[
data-
role
=
'page'
]
:not
(
.desktop-panel-hidden
)
div
[
data-
gadget-scope
=
'header'
]
.ui-header
>
.ui-btn-right
a
{
padding-left
:
24pt
;
padding-left
:
24pt
;
padding-right
:
24pt
;
padding-right
:
24pt
;
min-width
:
5em
;
min-width
:
5em
;
...
@@ -789,7 +786,7 @@ div[data-gadget-scope='header'] .ui-header h1 {
...
@@ -789,7 +786,7 @@ div[data-gadget-scope='header'] .ui-header h1 {
text-overflow
:
ellipsis
;
text-overflow
:
ellipsis
;
}
}
@media
not
screen
and
(
max-width
:
85em
)
{
@media
not
screen
and
(
max-width
:
85em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
{
div
[
data-
role
=
'page'
]
:not
(
.desktop-panel-hidden
)
div
[
data-
gadget-scope
=
'header'
]
.ui-header
h1
{
flex
:
1
100%
;
flex
:
1
100%
;
}
}
}
}
...
@@ -832,7 +829,7 @@ div[data-gadget-scope='header'] .ui-header h1 a::before {
...
@@ -832,7 +829,7 @@ div[data-gadget-scope='header'] .ui-header h1 a::before {
}
}
}
}
@media
not
screen
and
(
max-width
:
85em
)
{
@media
not
screen
and
(
max-width
:
85em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
a
::before
{
div
[
data-
role
=
'page'
]
:not
(
.desktop-panel-hidden
)
div
[
data-
gadget-scope
=
'header'
]
.ui-header
h1
a
::before
{
width
:
12pt
;
width
:
12pt
;
margin-left
:
24pt
;
margin-left
:
24pt
;
margin-right
:
6pt
;
margin-right
:
6pt
;
...
@@ -873,6 +870,7 @@ div[data-gadget-scope='header'] .ui-header ul {
...
@@ -873,6 +870,7 @@ div[data-gadget-scope='header'] .ui-header ul {
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
a
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
a
{
padding-top
:
3pt
;
padding-top
:
3pt
;
padding-bottom
:
3pt
;
padding-bottom
:
3pt
;
line-height
:
inherit
;
white-space
:
nowrap
;
white-space
:
nowrap
;
overflow
:
hidden
;
overflow
:
hidden
;
}
}
...
@@ -901,13 +899,15 @@ div[data-gadget-scope='header'] .ui-header ul {
...
@@ -901,13 +899,15 @@ div[data-gadget-scope='header'] .ui-header ul {
@media
not
screen
and
(
max-width
:
85em
)
{
@media
not
screen
and
(
max-width
:
85em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
a
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
a
{
display
:
block
;
display
:
block
;
padding-left
:
24pt
;
padding-right
:
24pt
;
min-width
:
5em
;
line-height
:
30pt
;
line-height
:
30pt
;
white-space
:
nowrap
;
white-space
:
nowrap
;
overflow
:
hidden
;
overflow
:
hidden
;
}
}
div
[
data-role
=
'page'
]
:not
(
.desktop-panel-hidden
)
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
a
{
padding-left
:
24pt
;
padding-right
:
24pt
;
min-width
:
5em
;
}
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
a
::before
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
a
::before
{
display
:
none
;
display
:
none
;
}
}
...
@@ -955,7 +955,7 @@ div[data-gadget-scope='header'] .ui-header ul {
...
@@ -955,7 +955,7 @@ div[data-gadget-scope='header'] .ui-header ul {
background-color
:
#ffa366
;
background-color
:
#ffa366
;
}
}
@media
not
screen
and
(
max-width
:
85em
)
{
@media
not
screen
and
(
max-width
:
85em
)
{
.gadget-content
{
div
[
data-role
=
'page'
]
:not
(
.desktop-panel-hidden
)
.gadget-content
{
margin-left
:
180pt
;
margin-left
:
180pt
;
}
}
}
}
...
@@ -1497,6 +1497,67 @@ div[data-gadget-scope='notification'] button.error {
...
@@ -1497,6 +1497,67 @@ div[data-gadget-scope='notification'] button.error {
}
}
}
}
/**********************************************
/**********************************************
* Desktop Panel Hidden
**********************************************/
@media
not
screen
and
(
max-width
:
85em
)
{
.desktop-panel-hidden
div
[
data-gadget-scope
=
"header"
]
.ui-header
{
margin-left
:
0
;
transform
:
translate3d
(
0
,
0
,
0
);
}
.desktop-panel-hidden
div
[
data-gadget-scope
=
"header"
]
.ui-header
h1
>
span
{
padding-left
:
16pt
;
}
.desktop-panel-hidden
div
[
data-gadget-scope
=
"header"
]
.ui-header
h1
>
span
::before
{
margin-right
:
14pt
;
}
.desktop-panel-hidden
div
[
data-gadget-scope
=
"header"
]
.ui-header
h1
a
::before
{
text-align
:
center
;
}
.desktop-panel-hidden
div
[
data-gadget-scope
=
"header"
]
.ui-header
>
.ui-btn-right
button
,
.desktop-panel-hidden
div
[
data-gadget-scope
=
"header"
]
.ui-header
>
.ui-btn-right
a
{
border-left
:
1px
solid
rgba
(
255
,
255
,
255
,
0.55
);
}
.desktop-panel-hidden
div
[
data-gadget-scope
=
"header"
]
.ui-header
.ui-controlgroup-controls
button
,
.desktop-panel-hidden
div
[
data-gadget-scope
=
"header"
]
.ui-header
.ui-controlgroup-controls
a
{
background-color
:
#085078
;
width
:
8em
;
}
.desktop-panel-hidden
div
[
data-gadget-scope
=
"header"
]
.ui-header
.ui-subheader
{
flex
:
1
100%
;
text-align
:
center
;
}
.desktop-panel-hidden
div
[
data-gadget-scope
=
"header"
]
.ui-header
ul
>
li
{
flex
:
1
;
border-left
:
1px
solid
rgba
(
0
,
0
,
0
,
0.55
);
}
.desktop-panel-hidden
div
[
data-gadget-scope
=
"header"
]
.ui-header
ul
>
li
:first-child
{
border-left
:
none
;
}
.desktop-panel-hidden
div
[
data-gadget-scope
=
"header"
]
.ui-header
ul
>
li
a
{
display
:
block
;
}
.desktop-panel-hidden
div
[
data-gadget-scope
=
"header"
]
.ui-header
ul
>
li
a
{
padding-top
:
3pt
;
padding-bottom
:
3pt
;
line-height
:
inherit
;
white-space
:
nowrap
;
overflow
:
hidden
;
}
.desktop-panel-hidden
div
[
data-gadget-scope
=
"header"
]
.ui-header
ul
>
li
a
::before
{
font-size
:
1.2em
;
display
:
block
;
}
.desktop-panel-hidden
.gadget-content
{
padding-top
:
7em
;
}
.desktop-panel-hidden
div
[
data-gadget-scope
=
'panel'
]
{
transform
:
translate3d
(
-186pt
,
0
,
0
);
}
.desktop-panel-hidden
div
[
data-gadget-scope
=
'panel'
]
.visible
{
transform
:
translate3d
(
0
,
0
,
0
);
}
}
/**********************************************
* Class
* Class
**********************************************/
**********************************************/
.content-iframe-maximize
{
.content-iframe-maximize
{
...
...
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml
View file @
ae2c27cd
...
@@ -228,7 +228,7 @@
...
@@ -228,7 +228,7 @@
</item>
</item>
<item>
<item>
<key>
<string>
actor
</string>
</key>
<key>
<string>
actor
</string>
</key>
<value>
<string>
zope
</string>
</value>
<value>
<string>
vincent
</string>
</value>
</item>
</item>
<item>
<item>
<key>
<string>
comment
</string>
</key>
<key>
<string>
comment
</string>
</key>
...
@@ -242,7 +242,7 @@
...
@@ -242,7 +242,7 @@
</item>
</item>
<item>
<item>
<key>
<string>
serial
</string>
</key>
<key>
<string>
serial
</string>
</key>
<value>
<string>
96
3.49524.2871.1918
2
</string>
</value>
<value>
<string>
96
4.8294.44761.4263
2
</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>
151
2052879.86
</float>
<float>
151
3250374.08
</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 @
ae2c27cd
...
@@ -545,10 +545,11 @@ div[data-gadget-scope='panel'] {
...
@@ -545,10 +545,11 @@ div[data-gadget-scope='panel'] {
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);
@media @smartphone, @tablet {
left: -@panelwidth - @margin-size;
&.visible {
&.visible {
transform: translate3d(@panelwidth + @margin-size, 0, 0);
transform: translate3d(@panelwidth + @margin-size, 0, 0);
}
}
...
@@ -575,7 +576,7 @@ div[data-gadget-scope='panel'] {
...
@@ -575,7 +576,7 @@ div[data-gadget-scope='panel'] {
}
}
@media @desktop {
@media @desktop {
&[data-i18n="Close"] {
div[data-role='page']:not(.desktop-panel-hidden)
&[data-i18n="Close"] {
display: none;
display: none;
}
}
}
}
...
@@ -808,14 +809,17 @@ div[data-gadget-scope='editor_panel'] {
...
@@ -808,14 +809,17 @@ div[data-gadget-scope='editor_panel'] {
* Gadget: header
* Gadget: header
**********************************************/
**********************************************/
.renderDesktopSubLink() {
.renderDesktopSubLink() {
div[data-role='page']:not(.desktop-panel-hidden) & {
padding-left: @sub-line-margin-size-desktop;
padding-left: @sub-line-margin-size-desktop;
padding-right: @sub-line-margin-size-desktop;
padding-right: @sub-line-margin-size-desktop;
min-width: @sub-line-min-width-desktop;
min-width: @sub-line-min-width-desktop;
}
}
}
.renderTabletSubLink() {
.renderTabletSubLink() {
padding-top: @half-margin-size;
padding-top: @half-margin-size;
padding-bottom: @half-margin-size;
padding-bottom: @half-margin-size;
line-height: inherit;
white-space: nowrap;
white-space: nowrap;
overflow: hidden;
overflow: hidden;
&::before {
&::before {
...
@@ -862,7 +866,8 @@ div[data-gadget-scope='header'] .ui-header {
...
@@ -862,7 +866,8 @@ div[data-gadget-scope='header'] .ui-header {
width: 100%;
width: 100%;
@media @desktop {
@media @desktop {
margin-left: @panelwidth;
transition: transform 200ms ease-out;
transform: translate3d(@panelwidth, 0, 0);
}
}
color: @white;
color: @white;
...
@@ -915,7 +920,7 @@ div[data-gadget-scope='header'] .ui-header {
...
@@ -915,7 +920,7 @@ div[data-gadget-scope='header'] .ui-header {
}
}
}
}
&[name="panel"] {
div[data-role='page']:not(.desktop-panel-hidden)
&[name="panel"] {
@media @desktop {
@media @desktop {
display: none;
display: none;
}
}
...
@@ -948,8 +953,10 @@ div[data-gadget-scope='header'] .ui-header {
...
@@ -948,8 +953,10 @@ div[data-gadget-scope='header'] .ui-header {
line-height: @headerheight;
line-height: @headerheight;
flex: 1;
flex: 1;
@media @desktop {
@media @desktop {
div[data-role='page']:not(.desktop-panel-hidden) & {
flex: 1 100%;
flex: 1 100%;
}
}
}
background-color: @colorheaderbackground;
background-color: @colorheaderbackground;
...
@@ -997,10 +1004,12 @@ div[data-gadget-scope='header'] .ui-header {
...
@@ -997,10 +1004,12 @@ div[data-gadget-scope='header'] .ui-header {
}
}
@media @desktop {
@media @desktop {
div[data-role='page']:not(.desktop-panel-hidden) & {
width: @headertitlemiddlewidth;
width: @headertitlemiddlewidth;
margin-left: @headertitleleftmiddlemargin;
margin-left: @headertitleleftmiddlemargin;
margin-right: @headertitlerightsmallmargin;
margin-right: @headertitlerightsmallmargin;
}
}
}
width: @headertitleleftlargemargin;
width: @headertitleleftlargemargin;
@media @smartphone {
@media @smartphone {
width: @headertitleleftsmallmargin;
width: @headertitleleftsmallmargin;
...
@@ -1102,9 +1111,11 @@ div[data-gadget-scope='header'] .ui-header {
...
@@ -1102,9 +1111,11 @@ div[data-gadget-scope='header'] .ui-header {
@media @desktop {
@media @desktop {
div[data-role='page']:not(.desktop-panel-hidden) & {
// Keep the panel always visible
// Keep the panel always visible
margin-left: @panelwidth;
margin-left: @panelwidth;
}
}
}
// Top padding
// Top padding
padding: @main-margin-size-desktop;
padding: @main-margin-size-desktop;
...
@@ -1722,7 +1733,62 @@ div[data-gadget-scope='notification'] {
...
@@ -1722,7 +1733,62 @@ div[data-gadget-scope='notification'] {
from {opacity:0;}
from {opacity:0;}
to {opacity:1;}
to {opacity:1;}
}
}
/**********************************************
* Desktop Panel Hidden
**********************************************/
@media @desktop {
.desktop-panel-hidden {
div[data-gadget-scope="header"] .ui-header {
margin-left: 0;
transform: translate3d(0, 0, 0);
h1 {
& > span {
.renderTabletNotALinkTitle();
}
a {
&::before {
text-align: center;
}
}
}
& > .ui-btn-right {
button, a {
border-left: 1px solid rgba(255, 255, 255, 0.55);
}
}
.ui-controlgroup-controls {
button, a {
.renderTabletHeaderButton();
}
}
.ui-subheader {
flex: 1 100%;
text-align: center;
}
ul > li {
.renderTabletSubListElement();
a {
.renderTabletSubLink();
}
}
}
.gadget-content {
padding-top: 7em;
}
div[data-gadget-scope='panel'] {
transform: translate3d(-@panelwidth - @margin-size, 0, 0);
&.visible {
transform: translate3d(0, 0, 0);
}
}
}
}
/**********************************************
/**********************************************
* Class
* Class
**********************************************/
**********************************************/
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment