Make interface responsive

Adapt components size to view-port size and allow to show/hide menu

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);
+  }
+}

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;
+  }
+}

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);
+  }
+}

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;
+  }
+}

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);
+	}
+}

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;
+  }
+}

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;
+  }
+}

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 {
+@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 {
 	font-weight: bold;
 	font-size: 0.9em;
@@ -145,12 +149,41 @@ td.LSobject-list, tr.LSobject-list {
 
 /* ---- 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 {
@@ -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;
+  }
+}

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');
     }
 
 });

src/templates/default/base.tpl

@@ -3,6 +3,8 @@
 <html>
   <head>
     <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>
     <base href="{$public_root_url}/"/>
     <link rel="icon" href="image/favicon" />

src/templates/default/base_connected.tpl

@@ -3,6 +3,7 @@
 <table id='main'>
   <tr>
     <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>
 
       {if isset($LSsession_subDn) && $LSsession_subDn!=""}