diff --git a/src/css/default/LSform.css b/src/css/default/LSform.css index 53d1947e..823b7435 100644 --- a/src/css/default/LSform.css +++ b/src/css/default/LSform.css @@ -12,6 +12,7 @@ ul.LSform_layout_active { padding: 0; margin: 1em; margin-bottom: 0; + clear: both; } li.LSform_layout a { @@ -160,3 +161,38 @@ p.LSform_listAvailableDataEntryForm { color: #0072b8; float: right; } + +@media (max-width: 1024px) { + div.LSform { + margin-left: 0.5rem; + } + + ul.LSform_layout_active { + margin-left: 0.5rem; + } + + dt.LSform { + width: 34vw; + } + + .LSform input[type=text], .LSform input[type=password], .LSform select, .LSform textarea { + width: 40vw; + } +} + +@media (max-width: 400px) { + dt.LSform { + position: initial; + width: 100%; + } + + dd.LSform { + margin-left: 1em; + margin-bottom: 0.5em; + width: 100%; + } + + .LSform input[type=text], .LSform input[type=password], .LSform select, .LSform textarea { + width: calc(100% - 1em); + } +} diff --git a/src/css/default/LSformElement_image.css b/src/css/default/LSformElement_image.css index d02e828d..42dc0265 100644 --- a/src/css/default/LSformElement_image.css +++ b/src/css/default/LSformElement_image.css @@ -33,3 +33,27 @@ ul.LSformElement_image_actions { visibility: hidden; cursor: pointer; } + +@media (max-width: 1024px) { + div.LSformElement_image { + float: none; + margin: auto; + width: 30vw; + max-width: calc(30vw - 0.6rem); + border-radius: 0.3rem; + padding: 0.3rem; + } + + img.LSformElement_image { + width: calc(100% - 0.6rem); + padding: 0; + margin: 0; + } + + ul.LSformElement_image_actions { + margin-top: 0; + margin-left: calc(30vw - 1rem - 20px); + border-radius: 3px; + padding: 2px; + } +} diff --git a/src/css/default/LSformElement_mail.css b/src/css/default/LSformElement_mail.css index fb9c014c..1687132f 100644 --- a/src/css/default/LSformElement_mail.css +++ b/src/css/default/LSformElement_mail.css @@ -27,3 +27,16 @@ li.LSformElement_mail_autocomplete_current { font-style: italic; color: #777; } + +@media (max-width: 1024px) { + ul.LSformElement_mail_autocomplete { + width: 40vw; + box-sizing: border-box; + } +} + +@media (max-width: 400px) { + ul.LSformElement_mail_autocomplete { + width: calc(100% - 1em); + } +} diff --git a/src/css/default/LSformElement_select_object.css b/src/css/default/LSformElement_select_object.css index 6d241fd3..766b057d 100644 --- a/src/css/default/LSformElement_select_object.css +++ b/src/css/default/LSformElement_select_object.css @@ -55,6 +55,7 @@ ul.LSformElement_select_object_searchAdd { overflow: auto; padding: 0; list-style-type: none; + background: white; } li.LSformElement_select_object_searchAdd { @@ -77,3 +78,27 @@ table.LSformElement_select_object_searchAdd, tr.LSformElement_select_object_sear padding: 0; vertical-align: top; } + +@media (max-width: 1024px) { + ul.LSformElement_select_object_edit { + width: 40vw; + } + + input.LSformElement_select_object_searchAdd, ul.LSformElement_select_object_searchAdd { + width: calc(20vw - 1rem)!important; + box-sizing: border-box; + } +} + +@media (max-width: 400px) { + ul.LSformElement_select_object_edit { + width: 80vw; + } + + input.LSformElement_select_object_searchAdd, ul.LSformElement_select_object_searchAdd { + display: block; + position: relative; + left: calc(-80vw - 6px); + width: calc(80vw + 2px)!important; + } +} diff --git a/src/css/default/LSformElement_wysiwyg.css b/src/css/default/LSformElement_wysiwyg.css index 6f612e05..c09b7f0d 100644 --- a/src/css/default/LSformElement_wysiwyg.css +++ b/src/css/default/LSformElement_wysiwyg.css @@ -1,8 +1,22 @@ div.LSformElement_wysiwyg_container { width: 32rem; + max-width: 80vw; } iframe.LSformElement_wysiwyg { width: 100%; border: 1px dotted #999; } + + +@media (max-width: 1024px) { + div.LSformElement_wysiwyg_container { + max-width: 59vw; + } +} + +@media (max-width: 400px) { + div.LSformElement_wysiwyg_container { + max-width: calc(100% - 1rem); + } +} diff --git a/src/css/default/LSselect.css b/src/css/default/LSselect.css index 3130e015..305dc45c 100644 --- a/src/css/default/LSselect.css +++ b/src/css/default/LSselect.css @@ -69,3 +69,15 @@ ul.LSselect_selectable_object_types li { ul.LSselect_selectable_object_types li.current { background-color: #0072B8; } + +@media (max-width: 1024px) { + div.LSobject-select { + width: 100%; + } + + #LSselect-object { + width: calc(98% - 1rem); + margin-left: 0.5rem; + margin-right: 0.5rem; + } +} diff --git a/src/css/default/base.css b/src/css/default/base.css index 328cb93e..c32b2f66 100644 --- a/src/css/default/base.css +++ b/src/css/default/base.css @@ -104,6 +104,10 @@ a img { * Menu ****************** */ +#toggle-menu { + display: none; +} + form.LSglobal_search { margin-top: 0.8em; border: 1px solid #0097c4; @@ -402,3 +406,104 @@ input[type='submit'].LSview_search { font-weight: bold; white-space: pre-wrap; } + +@media (max-width: 1024px) { + #main { + margin: 0; + border: none; + width: 100vw; + } + + #left { + display: block; + position: fixed; + z-index: 1001; + top: 0px; + height: 100%; + } + + #status { + width: 100vw; + display: block; + padding-left: 22px; + z-index: 1000; + height: auto; + min-height: 26px; + box-sizing: border-box; + } + + #main tr:first-of-type { + height: 1px; + } + + #right { + width: 100vw; + display: block; + } + + h1 { + margin-left: 0; + } + + table.LSobject-list { + width: 98vw; + margin-left: 1vw; + } + + ul.LSview-actions { + margin-right: 1.5em; + } + + /* + * Manage menu toggle + */ + #toggle-menu { + display: block; + float: right; + display: block; + background: white; + border: none; + cursor: pointer; + padding: 0; + margin: 0; + } + + #toggle-menu img { + margin: 3px; + height: 16px; + } + + #main:not(.menu-visible) #left > :not(#toggle-menu) { + display: none; + } + + #main:not(.menu-visible) #left { + width: 22px; + height: 22px; + top: 1px; + background: transparent; + } + + ul.LSview-actionse:not(.LSview-actions-visible) { + background: url('../image/generate') center no-repeat; + width: 22px; + height: 22px; + margin-right: 1rem; + cursor: pointer; + } + + ul.LSview-actionse:not(.LSview-actions-visible) li { + display: none; + } +} + +@media (max-width: 400px) { + h1 { + margin-top: 0; + } + + div.LSview_search { + float: none; + margin-bottom: 0.5rem; + } +} diff --git a/src/css/light-blue.css b/src/css/light-blue.css index 8ced52ed..0d4a985e 100644 --- a/src/css/light-blue.css +++ b/src/css/light-blue.css @@ -12,14 +12,16 @@ /* ---- Main interface elements ---- */ #main { - width: 98%; + box-sizing: border-box; + width: 100vw; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; border: none; + margin: 0; } #left { width: 165px; - background-color: transparent; + background-color: white; } #logo { @@ -27,6 +29,7 @@ border: none; margin-top: 6px; margin-left: 3px; + background: transparent; } #status { @@ -59,13 +62,14 @@ li.menu a { /* ---- Objects list ---- */ -table.LSobject-list { - width: 98%; - border: none; - margin-top: 1.8em; +@media (min-width: 1024px) { + table.LSobject-list { + width: 98%; + border: none; + margin-top: 1.8em; + } } - th.LSobject-list { font-weight: bold; font-size: 0.9em; @@ -145,12 +149,41 @@ td.LSobject-list, tr.LSobject-list { /* ---- LSform ---- */ -.LSform dt { - width: 24vw; -} +@media (min-width: 1024px) { + .LSform dt { + width: 24vw; + } -dd.LSform { - margin-left: 24vw; + dd.LSform { + margin-left: 24vw; + } + + div.LSformElement_image { + width: 10vw; + margin: 1vw; + } + + img.LSformElement_image { + width: 100%; + margin: 0; + border: none; + } + + ul.LSformElement_image_actions { + margin-top: 0; + margin-left: calc(10vw - 16px - 0.5vw); + border-radius: 3px; + padding: 2px; + } + + .LSform input[type=text], .LSform input[type=password], .LSform select, .LSform textarea, ul.LSformElement_mail_autocomplete, ul.LSformElement_select_object_edit, div.LSformElement_wysiwyg_container { + width: 32vw; + } + + input.LSformElement_select_object_searchAdd, ul.LSformElement_select_object_searchAdd { + width: 17vw!important; + box-sizing: border-box; + } } li.LSform_layout_active { @@ -169,8 +202,6 @@ div.LSformElement_image { padding: 0; border-radius: 0; -moz-border-radius: 0; - width: 10vw; - margin: 1vw; } img.LSformElement_image { @@ -180,20 +211,7 @@ img.LSformElement_image { } ul.LSformElement_image_actions { - margin-top: 0; - margin-left: calc(10vw - 16px - 0.5vw); background-color: rgba(255, 255, 255, 0.5); - border-radius: 3px; - padding: 2px; -} - -.LSform input[type=text], .LSform input[type=password], .LSform select, .LSform textarea, ul.LSformElement_mail_autocomplete, ul.LSformElement_select_object_edit, div.LSformElement_wysiwyg_container { - width: 32vw; -} - -input.LSformElement_select_object_searchAdd, ul.LSformElement_select_object_searchAdd { - width: 17vw!important; - box-sizing: border-box; } /* @@ -329,3 +347,10 @@ input[type=radio]:checked { margin-left: -.7rem; margin-bottom: 1.3rem; } + +@media (max-width: 1024px) { + table.LSobject-list { + width: 98vw; + margin-left: 1vw; + } +} diff --git a/src/images/default/toggle-menu.png b/src/images/default/toggle-menu.png new file mode 100644 index 00000000..389f4c88 Binary files /dev/null and b/src/images/default/toggle-menu.png differ diff --git a/src/includes/js/LSdefault.js b/src/includes/js/LSdefault.js index 0fda9908..a4f11a49 100644 --- a/src/includes/js/LSdefault.js +++ b/src/includes/js/LSdefault.js @@ -73,6 +73,9 @@ var LSdefault = new Class({ } this.initializeLang(); + + this.toggle_menu = $('toggle-menu'); + this.toggle_menu.addEvent('click', this.toggleMenu.bind(this)); }, initializeLang: function() { @@ -279,6 +282,10 @@ var LSdefault = new Class({ log: function(data) { this.LSdebug.addInfo(data); + }, + + toggleMenu: function() { + $('main').toggleClass('menu-visible'); } }); diff --git a/src/templates/default/base.tpl b/src/templates/default/base.tpl index 0e073f5c..88c33fa4 100644 --- a/src/templates/default/base.tpl +++ b/src/templates/default/base.tpl @@ -3,6 +3,8 @@ + + LdapSaisie{if isset($pagetitle) && $pagetitle} - {$pagetitle|escape:"htmlall"}{/if} diff --git a/src/templates/default/base_connected.tpl b/src/templates/default/base_connected.tpl index c164fffc..95d89ca7 100644 --- a/src/templates/default/base_connected.tpl +++ b/src/templates/default/base_connected.tpl @@ -3,6 +3,7 @@
+ {if isset($LSsession_subDn) && $LSsession_subDn!=""}