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
Levin Zimmermann
erp5
Commits
d69602da
Commit
d69602da
authored
Nov 15, 2016
by
Romain Courteaud
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
[erp5_web_renderjs_ui] Use left/right layout in the tablet rendering
Only display desktop mode on big screens.
parent
0551b4ce
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
49 additions
and
49 deletions
+49
-49
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
+42
-42
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
+2
-2
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
+5
-5
No files found.
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
View file @
d69602da
...
...
@@ -251,7 +251,7 @@ a:focus {
outline-offset
:
-2px
;
outline
:
2px
solid
#3388cc
;
}
@media
only
screen
and
(
min-width
:
7
0em
)
{
@media
only
screen
and
(
min-width
:
9
0em
)
{
a
[
accesskey
]
:after
{
content
:
" ["
attr
(
accesskey
)
"] "
;
}
...
...
@@ -417,12 +417,12 @@ div[data-gadget-scope='panel'] {
display
:
block
;
z-index
:
2000
;
}
@media
only
screen
and
(
max-width
:
28em
),
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
7
0em
)
{
@media
only
screen
and
(
max-width
:
45em
),
only
screen
and
(
min-width
:
45em
)
and
(
max-width
:
9
0em
)
{
div
[
data-gadget-scope
=
'panel'
]
{
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
:
7
0em
)
{
@media
only
screen
and
(
max-width
:
45em
),
only
screen
and
(
min-width
:
45em
)
and
(
max-width
:
9
0em
)
{
div
[
data-gadget-scope
=
'panel'
]
{
left
:
-186pt
;
transition
:
transform
200ms
ease-out
;
...
...
@@ -458,7 +458,7 @@ div[data-gadget-scope='panel'] div[data-role="header"] a::before {
text-indent
:
0
;
margin-left
:
12pt
;
}
@media
only
screen
and
(
min-width
:
7
0em
)
{
@media
only
screen
and
(
min-width
:
9
0em
)
{
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
;
...
...
@@ -500,7 +500,7 @@ div[data-gadget-scope='editor_panel'] {
display
:
block
;
z-index
:
3000
;
}
@media
only
screen
and
(
min-width
:
7
0em
)
{
@media
only
screen
and
(
min-width
:
9
0em
)
{
div
[
data-gadget-scope
=
'editor_panel'
]
{
left
:
-186pt
;
transition
:
transform
200ms
ease-out
;
...
...
@@ -511,7 +511,7 @@ div[data-gadget-scope='editor_panel'] {
transform
:
translate3d
(
186pt
,
0
,
0
);
}
}
@media
only
screen
and
(
max-width
:
28em
),
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
7
0em
)
{
@media
only
screen
and
(
max-width
:
45em
),
only
screen
and
(
min-width
:
45em
)
and
(
max-width
:
9
0em
)
{
div
[
data-gadget-scope
=
'editor_panel'
]
{
right
:
-186pt
;
transition
:
transform
200ms
ease-out
;
...
...
@@ -602,7 +602,7 @@ div[data-gadget-scope='header'] .ui-header {
color
:
#FFFFFF
;
background-color
:
#0E81C2
;
}
@media
only
screen
and
(
min-width
:
7
0em
)
{
@media
only
screen
and
(
min-width
:
9
0em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
{
margin-left
:
180pt
;
}
...
...
@@ -624,13 +624,13 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
transition
:
background-color
0.2s
ease-out
;
line-height
:
30pt
;
}
@media
only
screen
and
(
min-width
:
7
0em
)
{
@media
only
screen
and
(
min-width
:
9
0em
)
{
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
only
screen
and
(
max-width
:
28em
),
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
7
0em
)
{
@media
only
screen
and
(
max-width
:
45em
),
only
screen
and
(
min-width
:
45em
)
and
(
max-width
:
9
0em
)
{
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
;
...
...
@@ -642,13 +642,13 @@ 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
:
28em
)
and
(
max-width
:
7
0em
)
{
@media
only
screen
and
(
min-width
:
45em
)
and
(
max-width
:
9
0em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
{
width
:
8em
;
}
}
@media
only
screen
and
(
max-width
:
28
em
)
{
@media
only
screen
and
(
max-width
:
45
em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
{
width
:
3em
;
...
...
@@ -657,7 +657,7 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a:active {
white-space
:
nowrap
;
}
}
@media
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
70em
),
only
screen
and
(
min-width
:
7
0em
)
{
@media
only
screen
and
(
min-width
:
45em
)
and
(
max-width
:
90em
),
only
screen
and
(
min-width
:
9
0em
)
{
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
;
...
...
@@ -665,7 +665,7 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a:active {
text-align
:
center
;
}
}
@media
only
screen
and
(
max-width
:
28
em
)
{
@media
only
screen
and
(
max-width
:
45
em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
::before
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
::before
{
float
:
left
;
...
...
@@ -673,7 +673,7 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a:active {
margin-left
:
12pt
;
}
}
@media
only
screen
and
(
min-width
:
7
0em
)
{
@media
only
screen
and
(
min-width
:
9
0em
)
{
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
;
...
...
@@ -683,13 +683,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
only
screen
and
(
max-width
:
28em
),
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
7
0em
)
{
@media
only
screen
and
(
max-width
:
45em
),
only
screen
and
(
min-width
:
45em
)
and
(
max-width
:
9
0em
)
{
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
only
screen
and
(
min-width
:
7
0em
)
{
@media
only
screen
and
(
min-width
:
9
0em
)
{
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
;
...
...
@@ -706,7 +706,7 @@ div[data-gadget-scope='header'] .ui-header h1 {
overflow
:
hidden
;
text-overflow
:
ellipsis
;
}
@media
only
screen
and
(
min-width
:
7
0em
)
{
@media
only
screen
and
(
min-width
:
9
0em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
{
flex
:
1
100%
;
}
...
...
@@ -714,12 +714,12 @@ div[data-gadget-scope='header'] .ui-header h1 {
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
>
span
{
padding-left
:
42pt
;
}
@media
only
screen
and
(
max-width
:
28
em
)
{
@media
only
screen
and
(
max-width
:
45
em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
>
span
{
padding-left
:
30pt
;
}
}
@media
only
screen
and
(
min-width
:
7
0em
)
{
@media
only
screen
and
(
min-width
:
9
0em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
>
span
{
padding-left
:
24pt
;
}
...
...
@@ -734,28 +734,28 @@ div[data-gadget-scope='header'] .ui-header h1 a::before {
display
:
inline-block
;
width
:
42pt
;
}
@media
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
70em
),
only
screen
and
(
max-width
:
28
em
)
{
@media
only
screen
and
(
min-width
:
45em
)
and
(
max-width
:
90em
),
only
screen
and
(
max-width
:
45
em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
a
::before
{
text-align
:
center
;
}
}
@media
only
screen
and
(
min-width
:
7
0em
)
{
@media
only
screen
and
(
min-width
:
9
0em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
a
::before
{
padding-left
:
24pt
;
}
}
@media
only
screen
and
(
max-width
:
28
em
)
{
@media
only
screen
and
(
max-width
:
45
em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
h1
a
::before
{
width
:
30pt
;
}
}
@media
only
screen
and
(
min-width
:
7
0em
)
{
@media
only
screen
and
(
min-width
:
9
0em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-subheader
{
text-align
:
left
;
flex
:
1
;
}
}
@media
only
screen
and
(
max-width
:
28em
),
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
7
0em
)
{
@media
only
screen
and
(
max-width
:
45em
),
only
screen
and
(
min-width
:
45em
)
and
(
max-width
:
9
0em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-subheader
{
flex
:
1
100%
;
}
...
...
@@ -763,7 +763,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
:
28em
)
and
(
max-width
:
70em
),
only
screen
and
(
max-width
:
28
em
)
{
@media
only
screen
and
(
min-width
:
45em
)
and
(
max-width
:
90em
),
only
screen
and
(
max-width
:
45
em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
{
flex
:
1
;
border-left
:
1px
solid
rgba
(
0
,
0
,
0
,
0.55
);
...
...
@@ -775,7 +775,7 @@ div[data-gadget-scope='header'] .ui-header ul {
display
:
block
;
}
}
@media
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
7
0em
)
{
@media
only
screen
and
(
min-width
:
45em
)
and
(
max-width
:
9
0em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
a
{
padding-top
:
3pt
;
padding-bottom
:
3pt
;
...
...
@@ -787,7 +787,7 @@ div[data-gadget-scope='header'] .ui-header ul {
display
:
block
;
}
}
@media
only
screen
and
(
max-width
:
28
em
)
{
@media
only
screen
and
(
max-width
:
45
em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
a
{
text-align
:
center
;
vertical-align
:
middle
;
...
...
@@ -804,7 +804,7 @@ div[data-gadget-scope='header'] .ui-header ul {
width
:
100%
;
}
}
@media
only
screen
and
(
min-width
:
7
0em
)
{
@media
only
screen
and
(
min-width
:
9
0em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
a
{
display
:
block
;
padding-left
:
24pt
;
...
...
@@ -853,17 +853,17 @@ div[data-gadget-scope='header'] .ui-header ul {
.gadget-content
input
[
type
=
'submit'
]
:active
{
background-color
:
#777777
;
}
@media
only
screen
and
(
min-width
:
7
0em
)
{
@media
only
screen
and
(
min-width
:
9
0em
)
{
.gadget-content
{
margin-left
:
180pt
;
}
}
@media
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
7
0em
)
{
@media
only
screen
and
(
min-width
:
45em
)
and
(
max-width
:
9
0em
)
{
.gadget-content
{
padding-top
:
7em
;
}
}
@media
only
screen
and
(
max-width
:
28
em
)
{
@media
only
screen
and
(
max-width
:
45
em
)
{
.gadget-content
{
padding
:
6pt
;
padding-top
:
6em
;
...
...
@@ -930,7 +930,7 @@ div[data-gadget-scope='header'] .ui-header ul {
position
:
absolute
;
right
:
6pt
;
}
@media
only
screen
and
(
min-width
:
7
0em
)
{
@media
only
screen
and
(
min-width
:
45em
)
and
(
max-width
:
90em
),
only
screen
and
(
min-width
:
9
0em
)
{
.gadget-content
.left
,
.gadget-content
.right
{
vertical-align
:
top
;
...
...
@@ -941,7 +941,7 @@ div[data-gadget-scope='header'] .ui-header ul {
padding-left
:
24pt
;
}
}
@media
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
70em
),
only
screen
and
(
min-width
:
7
0em
)
{
@media
only
screen
and
(
min-width
:
45em
)
and
(
max-width
:
90em
),
only
screen
and
(
min-width
:
9
0em
)
{
.gadget-content
.ui-field-contain
{
display
:
flex
;
}
...
...
@@ -952,7 +952,7 @@ div[data-gadget-scope='header'] .ui-header ul {
flex
:
3
;
}
}
@media
only
screen
and
(
min-width
:
7
0em
)
{
@media
only
screen
and
(
min-width
:
45em
)
and
(
max-width
:
90em
),
only
screen
and
(
min-width
:
9
0em
)
{
.gadget-content
.center
.ui-field-contain
label
+
div
{
flex
:
7
;
}
...
...
@@ -1038,7 +1038,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
display
:
flex
;
padding-bottom
:
6pt
;
}
@media
only
screen
and
(
max-width
:
28
em
)
{
@media
only
screen
and
(
max-width
:
45
em
)
{
.document_table
.ui-table-header
{
border-bottom
:
2px
solid
rgba
(
0
,
0
,
0
,
0.14902
);
}
...
...
@@ -1057,7 +1057,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
.document_table
.ui-table-header
button
:last-of-type
{
margin-right
:
0
;
}
@media
only
screen
and
(
max-width
:
28
em
)
{
@media
only
screen
and
(
max-width
:
45
em
)
{
.document_table
.ui-table-header
button
{
width
:
2em
;
overflow
:
hidden
;
...
...
@@ -1068,7 +1068,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
.document_table
.ui-table-header
button
::before
{
margin-right
:
6pt
;
}
@media
only
screen
and
(
max-width
:
28
em
)
{
@media
only
screen
and
(
max-width
:
45
em
)
{
.document_table
.ui-table-header
button
::before
{
float
:
left
;
text-indent
:
0
;
...
...
@@ -1089,7 +1089,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
.document_table
table
thead
tr
th
{
padding
:
6pt
3pt
;
}
@media
only
screen
and
(
max-width
:
28
em
)
{
@media
only
screen
and
(
max-width
:
45
em
)
{
.document_table
table
thead
{
display
:
none
;
}
...
...
@@ -1104,13 +1104,13 @@ div[data-gadget-scope='erp5_searchfield'] button {
.document_table
table
tbody
tr
:active
{
background-color
:
#e0e0e0
;
}
@media
only
screen
and
(
min-width
:
70em
),
only
screen
and
(
min-width
:
28em
)
and
(
max-width
:
7
0em
)
{
@media
only
screen
and
(
min-width
:
90em
),
only
screen
and
(
min-width
:
45em
)
and
(
max-width
:
9
0em
)
{
.document_table
table
tbody
a
{
display
:
block
;
padding
:
3pt
;
}
}
@media
only
screen
and
(
max-width
:
28
em
)
{
@media
only
screen
and
(
max-width
:
45
em
)
{
.document_table
table
tbody
tr
{
display
:
block
;
overflow
:
hidden
;
...
...
@@ -1194,7 +1194,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
.document_table
table
tfoot
.ui-controlgroup-controls
a
:active
{
background-color
:
#e0e0e0
;
}
@media
only
screen
and
(
max-width
:
28
em
)
{
@media
only
screen
and
(
max-width
:
45
em
)
{
.document_table
table
tfoot
.ui-controlgroup-controls
a
{
overflow
:
hidden
;
text-indent
:
-9999px
;
...
...
@@ -1204,7 +1204,7 @@ div[data-gadget-scope='erp5_searchfield'] button {
.document_table
table
tfoot
.ui-controlgroup-controls
a
::before
{
margin-right
:
6pt
;
}
@media
only
screen
and
(
max-width
:
28
em
)
{
@media
only
screen
and
(
max-width
:
45
em
)
{
.document_table
table
tfoot
.ui-controlgroup-controls
a
::before
{
float
:
left
;
text-indent
:
6pt
;
...
...
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml
View file @
d69602da
...
...
@@ -242,7 +242,7 @@
</item>
<item>
<key>
<string>
serial
</string>
</key>
<value>
<string>
955.1
8008.27011.15018
</string>
</value>
<value>
<string>
955.1
9399.9037.3396
</string>
</value>
</item>
<item>
<key>
<string>
state
</string>
</key>
...
...
@@ -260,7 +260,7 @@
</tuple>
<state>
<tuple>
<float>
147921
6615.32
</float>
<float>
147921
8471.04
</float>
<string>
UTC
</string>
</tuple>
</state>
...
...
bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
View file @
d69602da
...
...
@@ -47,9 +47,9 @@
@panelwidth: @margin-size * 30;
// @panelwidth: 15em;
@smartphone: ~"only screen and (max-width:
28
em)";
@tablet: ~"only screen and (min-width:
28em) and (max-width: 7
0em)";
@desktop: ~"only screen and (min-width:
7
0em)";
@smartphone: ~"only screen and (max-width:
45
em)";
@tablet: ~"only screen and (min-width:
45em) and (max-width: 9
0em)";
@desktop: ~"only screen and (min-width:
9
0em)";
/**********************************************
...
...
@@ -1075,7 +1075,7 @@ div[data-gadget-scope='header'] .ui-header {
}
}
@media @desktop {
@media @
tablet, @
desktop {
.left, .right {
vertical-align: top;
display: inline-block;
...
...
@@ -1099,7 +1099,7 @@ div[data-gadget-scope='header'] .ui-header {
}
}
}
@media @desktop {
@media @
tablet, @
desktop {
// Align field on the left group's field
.center {
.ui-field-contain {
...
...
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