Make interface responsive

Adapt components size to view-port size and allow to show/hide menu
This commit is contained in:
Benjamin Renard 2020-06-02 19:56:40 +02:00
parent 78fefb6c8f
commit ba41b527c0
12 changed files with 291 additions and 27 deletions

View file

@ -12,6 +12,7 @@ ul.LSform_layout_active {
padding: 0; padding: 0;
margin: 1em; margin: 1em;
margin-bottom: 0; margin-bottom: 0;
clear: both;
} }
li.LSform_layout a { li.LSform_layout a {
@ -160,3 +161,38 @@ p.LSform_listAvailableDataEntryForm {
color: #0072b8; color: #0072b8;
float: right; 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);
}
}

View file

@ -33,3 +33,27 @@ ul.LSformElement_image_actions {
visibility: hidden; visibility: hidden;
cursor: pointer; 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;
}
}

View file

@ -27,3 +27,16 @@ li.LSformElement_mail_autocomplete_current {
font-style: italic; font-style: italic;
color: #777; 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);
}
}

View file

@ -55,6 +55,7 @@ ul.LSformElement_select_object_searchAdd {
overflow: auto; overflow: auto;
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
background: white;
} }
li.LSformElement_select_object_searchAdd { li.LSformElement_select_object_searchAdd {
@ -77,3 +78,27 @@ table.LSformElement_select_object_searchAdd, tr.LSformElement_select_object_sear
padding: 0; padding: 0;
vertical-align: top; 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;
}
}

View file

@ -1,8 +1,22 @@
div.LSformElement_wysiwyg_container { div.LSformElement_wysiwyg_container {
width: 32rem; width: 32rem;
max-width: 80vw;
} }
iframe.LSformElement_wysiwyg { iframe.LSformElement_wysiwyg {
width: 100%; width: 100%;
border: 1px dotted #999; 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);
}
}

View file

@ -69,3 +69,15 @@ ul.LSselect_selectable_object_types li {
ul.LSselect_selectable_object_types li.current { ul.LSselect_selectable_object_types li.current {
background-color: #0072B8; 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;
}
}

View file

@ -104,6 +104,10 @@ a img {
* Menu * Menu
****************** ******************
*/ */
#toggle-menu {
display: none;
}
form.LSglobal_search { form.LSglobal_search {
margin-top: 0.8em; margin-top: 0.8em;
border: 1px solid #0097c4; border: 1px solid #0097c4;
@ -402,3 +406,104 @@ input[type='submit'].LSview_search {
font-weight: bold; font-weight: bold;
white-space: pre-wrap; 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;
}
}

View file

@ -12,14 +12,16 @@
/* ---- Main interface elements ---- */ /* ---- Main interface elements ---- */
#main { #main {
width: 98%; box-sizing: border-box;
width: 100vw;
font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;
border: none; border: none;
margin: 0;
} }
#left { #left {
width: 165px; width: 165px;
background-color: transparent; background-color: white;
} }
#logo { #logo {
@ -27,6 +29,7 @@
border: none; border: none;
margin-top: 6px; margin-top: 6px;
margin-left: 3px; margin-left: 3px;
background: transparent;
} }
#status { #status {
@ -59,13 +62,14 @@ li.menu a {
/* ---- Objects list ---- */ /* ---- Objects list ---- */
table.LSobject-list { @media (min-width: 1024px) {
width: 98%; table.LSobject-list {
border: none; width: 98%;
margin-top: 1.8em; border: none;
margin-top: 1.8em;
}
} }
th.LSobject-list { th.LSobject-list {
font-weight: bold; font-weight: bold;
font-size: 0.9em; font-size: 0.9em;
@ -145,12 +149,41 @@ td.LSobject-list, tr.LSobject-list {
/* ---- LSform ---- */ /* ---- LSform ---- */
.LSform dt { @media (min-width: 1024px) {
width: 24vw; .LSform dt {
} width: 24vw;
}
dd.LSform { dd.LSform {
margin-left: 24vw; 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 { li.LSform_layout_active {
@ -169,8 +202,6 @@ div.LSformElement_image {
padding: 0; padding: 0;
border-radius: 0; border-radius: 0;
-moz-border-radius: 0; -moz-border-radius: 0;
width: 10vw;
margin: 1vw;
} }
img.LSformElement_image { img.LSformElement_image {
@ -180,20 +211,7 @@ img.LSformElement_image {
} }
ul.LSformElement_image_actions { ul.LSformElement_image_actions {
margin-top: 0;
margin-left: calc(10vw - 16px - 0.5vw);
background-color: rgba(255, 255, 255, 0.5); 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-left: -.7rem;
margin-bottom: 1.3rem; margin-bottom: 1.3rem;
} }
@media (max-width: 1024px) {
table.LSobject-list {
width: 98vw;
margin-left: 1vw;
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 265 B

View file

@ -73,6 +73,9 @@ var LSdefault = new Class({
} }
this.initializeLang(); this.initializeLang();
this.toggle_menu = $('toggle-menu');
this.toggle_menu.addEvent('click', this.toggleMenu.bind(this));
}, },
initializeLang: function() { initializeLang: function() {
@ -279,6 +282,10 @@ var LSdefault = new Class({
log: function(data) { log: function(data) {
this.LSdebug.addInfo(data); this.LSdebug.addInfo(data);
},
toggleMenu: function() {
$('main').toggleClass('menu-visible');
} }
}); });

View file

@ -3,6 +3,8 @@
<html> <html>
<head> <head>
<meta http-equiv="content-type" content="text/html; charset={$LSencoding}"> <meta http-equiv="content-type" content="text/html; charset={$LSencoding}">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>LdapSaisie{if isset($pagetitle) && $pagetitle} - {$pagetitle|escape:"htmlall"}{/if}</title> <title>LdapSaisie{if isset($pagetitle) && $pagetitle} - {$pagetitle|escape:"htmlall"}{/if}</title>
<base href="{$public_root_url}/"/> <base href="{$public_root_url}/"/>
<link rel="icon" href="image/favicon" /> <link rel="icon" href="image/favicon" />

View file

@ -3,6 +3,7 @@
<table id='main'> <table id='main'>
<tr> <tr>
<td rowspan=2 id='left'> <td rowspan=2 id='left'>
<button id="toggle-menu"><img src="{img name='toggle-menu'}" alt='{tr msg="Show/hide menu"}' title='{tr msg="Show/hide menu"}'/></button>
<a href=''><img src='{img name='logo'}' alt='Logo' id='logo'/></a> <a href=''><img src='{img name='logo'}' alt='Logo' id='logo'/></a>
{if isset($LSsession_subDn) && $LSsession_subDn!=""} {if isset($LSsession_subDn) && $LSsession_subDn!=""}