mirror of
https://gitlab.easter-eggs.com/ee/ldapsaisie.git
synced 2024-06-29 06:53:43 +02:00
Make interface responsive
Adapt components size to view-port size and allow to show/hide menu
This commit is contained in:
Benjamin Renard
parent
78fefb6c8f
commit
ba41b527c0
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
BIN
src/images/default/toggle-menu.png
Normal file
BIN
src/images/default/toggle-menu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 265 B |
|
|
@ -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');
|
||||
}
|
||||
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -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!=""}
|
||||
|
|
|
|||
Loading…
Reference in a new issue