bn8/ldapsaisie
1
0
Fork 0
mirror of https://gitlab.easter-eggs.com/ee/ldapsaisie.git synced 2024-11-18 00:09:06 +01:00
Code Issues Projects Releases Wiki Activity

Make interface responsive

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/css/default/LSform.css
View file

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

24
src/css/default/LSformElement_image.css
View file

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

13
src/css/default/LSformElement_mail.css
View file

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

25
src/css/default/LSformElement_select_object.css
View file

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

14
src/css/default/LSformElement_wysiwyg.css
View file

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

12
src/css/default/LSselect.css
View file

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

105
src/css/default/base.css
View file

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

79
src/css/light-blue.css
View file

@ -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
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 265 B

7
src/includes/js/LSdefault.js
View file

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

2
src/templates/default/base.tpl
View file

@ -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" />

1
src/templates/default/base_connected.tpl
View file

@ -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!=""}