updated grid and responsive login page

This commit is contained in:
Roland Gruber 2017-10-31 15:22:34 +01:00
parent 0d0cb17ae1
commit 21d7a381b7
5 changed files with 503 additions and 156 deletions

View File

@ -3480,6 +3480,7 @@ class htmlReCAPTCHA extends htmlElement {
*/ */
class htmlResponsiveRow extends htmlElement { class htmlResponsiveRow extends htmlElement {
/** @var htmlResponsiveCell[] cells */
private $cells = array(); private $cells = array();
/** /**

View File

@ -123,10 +123,22 @@ input {
margin: 2px; margin: 2px;
} }
.margin3 {
margin: 3px;
}
.margin5 { .margin5 {
margin: 5px; margin: 5px;
} }
.margin10 {
margin: 10px;
}
.margin20 {
margin: 20px;
}
.padding05 { .padding05 {
padding: 0.5em; padding: 0.5em;
} }
@ -365,8 +377,13 @@ td.loginLogo {
background-repeat:no-repeat; background-repeat:no-repeat;
background-position: center; background-position: center;
margin: 5px; margin: 5px;
height: 320px; height: 303px;
width: 65px; width: 63px;
}
td.loginRightBox {
margin: 5px;
width: 63px;
} }
.roundedShadowBox { .roundedShadowBox {

View File

@ -1,5 +1,5 @@
meta.foundation-version { meta.foundation-version {
font-family: "/5.5.2/"; } font-family: "/5.5.3/"; }
meta.foundation-mq-small { meta.foundation-mq-small {
font-family: "/only screen/"; font-family: "/only screen/";
@ -43,15 +43,12 @@ meta.foundation-data-attribute-namespace {
html, body { html, body {
height: 100%; } height: 100%; }
html {
box-sizing: border-box; }
*, *,
*:before, *:before,
*:after { *:after {
-webkit-box-sizing: inherit; -webkit-box-sizing: border-box;
-moz-box-sizing: inherit; -moz-box-sizing: border-box;
box-sizing: inherit; } box-sizing: border-box; }
html, html,
body { body {
@ -59,7 +56,7 @@ body {
body { body {
background: #fff; background: #fff;
color: #222222; color: #222;
cursor: auto; cursor: auto;
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-style: normal; font-style: normal;
@ -125,7 +122,7 @@ select {
.row { .row {
margin: 0 auto; margin: 0 auto;
max-width: 62.5em; max-width: 62.5rem;
width: 100%; } width: 100%; }
.row:before, .row:after { .row:before, .row:after {
content: " "; content: " ";
@ -140,7 +137,7 @@ select {
margin-left: 0; margin-left: 0;
margin-right: 0; } margin-right: 0; }
.row .row { .row .row {
margin: 0 -0.9375em; margin: 0 -0.9375rem;
max-width: none; max-width: none;
width: auto; } width: auto; }
.row .row:before, .row .row:after { .row .row:before, .row .row:after {
@ -160,8 +157,8 @@ select {
.column, .column,
.columns { .columns {
padding-left: 0.9375em; padding-left: 0.9375rem;
padding-right: 0.9375em; padding-right: 0.9375rem;
width: 100%; width: 100%;
float: left; } float: left; }
@ -302,8 +299,8 @@ select {
.column, .column,
.columns { .columns {
position: relative; position: relative;
padding-left: 0.9375em; padding-left: 0.9375rem;
padding-right: 0.9375em; padding-right: 0.9375rem;
float: left; } float: left; }
.small-1 { .small-1 {
@ -418,8 +415,8 @@ select {
margin-right: 0; } margin-right: 0; }
.row.small-uncollapse > .column, .row.small-uncollapse > .column,
.row.small-uncollapse > .columns { .row.small-uncollapse > .columns {
padding-left: 0.9375em; padding-left: 0.9375rem;
padding-right: 0.9375em; padding-right: 0.9375rem;
float: left; } } float: left; } }
@media only screen and (min-width: 40.0625em) { @media only screen and (min-width: 40.0625em) {
.medium-push-0 { .medium-push-0 {
@ -545,8 +542,8 @@ select {
.column, .column,
.columns { .columns {
position: relative; position: relative;
padding-left: 0.9375em; padding-left: 0.9375rem;
padding-right: 0.9375em; padding-right: 0.9375rem;
float: left; } float: left; }
.medium-1 { .medium-1 {
@ -661,8 +658,8 @@ select {
margin-right: 0; } margin-right: 0; }
.row.medium-uncollapse > .column, .row.medium-uncollapse > .column,
.row.medium-uncollapse > .columns { .row.medium-uncollapse > .columns {
padding-left: 0.9375em; padding-left: 0.9375rem;
padding-right: 0.9375em; padding-right: 0.9375rem;
float: left; } float: left; }
.push-0 { .push-0 {
@ -908,8 +905,8 @@ select {
.column, .column,
.columns { .columns {
position: relative; position: relative;
padding-left: 0.9375em; padding-left: 0.9375rem;
padding-right: 0.9375em; padding-right: 0.9375rem;
float: left; } float: left; }
.large-1 { .large-1 {
@ -1024,8 +1021,8 @@ select {
margin-right: 0; } margin-right: 0; }
.row.large-uncollapse > .column, .row.large-uncollapse > .column,
.row.large-uncollapse > .columns { .row.large-uncollapse > .columns {
padding-left: 0.9375em; padding-left: 0.9375rem;
padding-right: 0.9375em; padding-right: 0.9375rem;
float: left; } float: left; }
.push-0 { .push-0 {
@ -1147,3 +1144,365 @@ select {
position: relative; position: relative;
right: 91.66667%; right: 91.66667%;
left: auto; } } left: auto; } }
/* small displays */
@media only screen {
.show-for-small-only, .show-for-small-up, .show-for-small, .show-for-small-down, .hide-for-medium-only, .hide-for-medium-up, .hide-for-medium, .show-for-medium-down, .hide-for-large-only, .hide-for-large-up, .hide-for-large, .show-for-large-down, .hide-for-xlarge-only, .hide-for-xlarge-up, .hide-for-xlarge, .show-for-xlarge-down, .hide-for-xxlarge-only, .hide-for-xxlarge-up, .hide-for-xxlarge, .show-for-xxlarge-down {
display: inherit !important; }
.hide-for-small-only, .hide-for-small-up, .hide-for-small, .hide-for-small-down, .show-for-medium-only, .show-for-medium-up, .show-for-medium, .hide-for-medium-down, .show-for-large-only, .show-for-large-up, .show-for-large, .hide-for-large-down, .show-for-xlarge-only, .show-for-xlarge-up, .show-for-xlarge, .hide-for-xlarge-down, .show-for-xxlarge-only, .show-for-xxlarge-up, .show-for-xxlarge, .hide-for-xxlarge-down {
display: none !important; }
.visible-for-small-only, .visible-for-small-up, .visible-for-small, .visible-for-small-down, .hidden-for-medium-only, .hidden-for-medium-up, .hidden-for-medium, .visible-for-medium-down, .hidden-for-large-only, .hidden-for-large-up, .hidden-for-large, .visible-for-large-down, .hidden-for-xlarge-only, .hidden-for-xlarge-up, .hidden-for-xlarge, .visible-for-xlarge-down, .hidden-for-xxlarge-only, .hidden-for-xxlarge-up, .hidden-for-xxlarge, .visible-for-xxlarge-down {
position: static !important;
height: auto;
width: auto;
overflow: visible;
clip: auto; }
.hidden-for-small-only, .hidden-for-small-up, .hidden-for-small, .hidden-for-small-down, .visible-for-medium-only, .visible-for-medium-up, .visible-for-medium, .hidden-for-medium-down, .visible-for-large-only, .visible-for-large-up, .visible-for-large, .hidden-for-large-down, .visible-for-xlarge-only, .visible-for-xlarge-up, .visible-for-xlarge, .hidden-for-xlarge-down, .visible-for-xxlarge-only, .visible-for-xxlarge-up, .visible-for-xxlarge, .hidden-for-xxlarge-down {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px; }
table.show-for-small-only, table.show-for-small-up, table.show-for-small, table.show-for-small-down, table.hide-for-medium-only, table.hide-for-medium-up, table.hide-for-medium, table.show-for-medium-down, table.hide-for-large-only, table.hide-for-large-up, table.hide-for-large, table.show-for-large-down, table.hide-for-xlarge-only, table.hide-for-xlarge-up, table.hide-for-xlarge, table.show-for-xlarge-down, table.hide-for-xxlarge-only, table.hide-for-xxlarge-up, table.hide-for-xxlarge, table.show-for-xxlarge-down {
display: table !important; }
thead.show-for-small-only, thead.show-for-small-up, thead.show-for-small, thead.show-for-small-down, thead.hide-for-medium-only, thead.hide-for-medium-up, thead.hide-for-medium, thead.show-for-medium-down, thead.hide-for-large-only, thead.hide-for-large-up, thead.hide-for-large, thead.show-for-large-down, thead.hide-for-xlarge-only, thead.hide-for-xlarge-up, thead.hide-for-xlarge, thead.show-for-xlarge-down, thead.hide-for-xxlarge-only, thead.hide-for-xxlarge-up, thead.hide-for-xxlarge, thead.show-for-xxlarge-down {
display: table-header-group !important; }
tbody.show-for-small-only, tbody.show-for-small-up, tbody.show-for-small, tbody.show-for-small-down, tbody.hide-for-medium-only, tbody.hide-for-medium-up, tbody.hide-for-medium, tbody.show-for-medium-down, tbody.hide-for-large-only, tbody.hide-for-large-up, tbody.hide-for-large, tbody.show-for-large-down, tbody.hide-for-xlarge-only, tbody.hide-for-xlarge-up, tbody.hide-for-xlarge, tbody.show-for-xlarge-down, tbody.hide-for-xxlarge-only, tbody.hide-for-xxlarge-up, tbody.hide-for-xxlarge, tbody.show-for-xxlarge-down {
display: table-row-group !important; }
tr.show-for-small-only, tr.show-for-small-up, tr.show-for-small, tr.show-for-small-down, tr.hide-for-medium-only, tr.hide-for-medium-up, tr.hide-for-medium, tr.show-for-medium-down, tr.hide-for-large-only, tr.hide-for-large-up, tr.hide-for-large, tr.show-for-large-down, tr.hide-for-xlarge-only, tr.hide-for-xlarge-up, tr.hide-for-xlarge, tr.show-for-xlarge-down, tr.hide-for-xxlarge-only, tr.hide-for-xxlarge-up, tr.hide-for-xxlarge, tr.show-for-xxlarge-down {
display: table-row; }
th.show-for-small-only, td.show-for-small-only, th.show-for-small-up, td.show-for-small-up, th.show-for-small, td.show-for-small, th.show-for-small-down, td.show-for-small-down, th.hide-for-medium-only, td.hide-for-medium-only, th.hide-for-medium-up, td.hide-for-medium-up, th.hide-for-medium, td.hide-for-medium, th.show-for-medium-down, td.show-for-medium-down, th.hide-for-large-only, td.hide-for-large-only, th.hide-for-large-up, td.hide-for-large-up, th.hide-for-large, td.hide-for-large, th.show-for-large-down, td.show-for-large-down, th.hide-for-xlarge-only, td.hide-for-xlarge-only, th.hide-for-xlarge-up, td.hide-for-xlarge-up, th.hide-for-xlarge, td.hide-for-xlarge, th.show-for-xlarge-down, td.show-for-xlarge-down, th.hide-for-xxlarge-only, td.hide-for-xxlarge-only, th.hide-for-xxlarge-up, td.hide-for-xxlarge-up, th.hide-for-xxlarge, td.hide-for-xxlarge, th.show-for-xxlarge-down, td.show-for-xxlarge-down {
display: table-cell !important; } }
/* medium displays */
@media only screen and (min-width: 40.0625em) {
.hide-for-small-only, .show-for-small-up, .hide-for-small, .hide-for-small-down, .show-for-medium-only, .show-for-medium-up, .show-for-medium, .show-for-medium-down, .hide-for-large-only, .hide-for-large-up, .hide-for-large, .show-for-large-down, .hide-for-xlarge-only, .hide-for-xlarge-up, .hide-for-xlarge, .show-for-xlarge-down, .hide-for-xxlarge-only, .hide-for-xxlarge-up, .hide-for-xxlarge, .show-for-xxlarge-down {
display: inherit !important; }
.show-for-small-only, .hide-for-small-up, .show-for-small, .show-for-small-down, .hide-for-medium-only, .hide-for-medium-up, .hide-for-medium, .hide-for-medium-down, .show-for-large-only, .show-for-large-up, .show-for-large, .hide-for-large-down, .show-for-xlarge-only, .show-for-xlarge-up, .show-for-xlarge, .hide-for-xlarge-down, .show-for-xxlarge-only, .show-for-xxlarge-up, .show-for-xxlarge, .hide-for-xxlarge-down {
display: none !important; }
.hidden-for-small-only, .visible-for-small-up, .hidden-for-small, .hidden-for-small-down, .visible-for-medium-only, .visible-for-medium-up, .visible-for-medium, .visible-for-medium-down, .hidden-for-large-only, .hidden-for-large-up, .hidden-for-large, .visible-for-large-down, .hidden-for-xlarge-only, .hidden-for-xlarge-up, .hidden-for-xlarge, .visible-for-xlarge-down, .hidden-for-xxlarge-only, .hidden-for-xxlarge-up, .hidden-for-xxlarge, .visible-for-xxlarge-down {
position: static !important;
height: auto;
width: auto;
overflow: visible;
clip: auto; }
.visible-for-small-only, .hidden-for-small-up, .visible-for-small, .visible-for-small-down, .hidden-for-medium-only, .hidden-for-medium-up, .hidden-for-medium, .hidden-for-medium-down, .visible-for-large-only, .visible-for-large-up, .visible-for-large, .hidden-for-large-down, .visible-for-xlarge-only, .visible-for-xlarge-up, .visible-for-xlarge, .hidden-for-xlarge-down, .visible-for-xxlarge-only, .visible-for-xxlarge-up, .visible-for-xxlarge, .hidden-for-xxlarge-down {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px; }
table.hide-for-small-only, table.show-for-small-up, table.hide-for-small, table.hide-for-small-down, table.show-for-medium-only, table.show-for-medium-up, table.show-for-medium, table.show-for-medium-down, table.hide-for-large-only, table.hide-for-large-up, table.hide-for-large, table.show-for-large-down, table.hide-for-xlarge-only, table.hide-for-xlarge-up, table.hide-for-xlarge, table.show-for-xlarge-down, table.hide-for-xxlarge-only, table.hide-for-xxlarge-up, table.hide-for-xxlarge, table.show-for-xxlarge-down {
display: table !important; }
thead.hide-for-small-only, thead.show-for-small-up, thead.hide-for-small, thead.hide-for-small-down, thead.show-for-medium-only, thead.show-for-medium-up, thead.show-for-medium, thead.show-for-medium-down, thead.hide-for-large-only, thead.hide-for-large-up, thead.hide-for-large, thead.show-for-large-down, thead.hide-for-xlarge-only, thead.hide-for-xlarge-up, thead.hide-for-xlarge, thead.show-for-xlarge-down, thead.hide-for-xxlarge-only, thead.hide-for-xxlarge-up, thead.hide-for-xxlarge, thead.show-for-xxlarge-down {
display: table-header-group !important; }
tbody.hide-for-small-only, tbody.show-for-small-up, tbody.hide-for-small, tbody.hide-for-small-down, tbody.show-for-medium-only, tbody.show-for-medium-up, tbody.show-for-medium, tbody.show-for-medium-down, tbody.hide-for-large-only, tbody.hide-for-large-up, tbody.hide-for-large, tbody.show-for-large-down, tbody.hide-for-xlarge-only, tbody.hide-for-xlarge-up, tbody.hide-for-xlarge, tbody.show-for-xlarge-down, tbody.hide-for-xxlarge-only, tbody.hide-for-xxlarge-up, tbody.hide-for-xxlarge, tbody.show-for-xxlarge-down {
display: table-row-group !important; }
tr.hide-for-small-only, tr.show-for-small-up, tr.hide-for-small, tr.hide-for-small-down, tr.show-for-medium-only, tr.show-for-medium-up, tr.show-for-medium, tr.show-for-medium-down, tr.hide-for-large-only, tr.hide-for-large-up, tr.hide-for-large, tr.show-for-large-down, tr.hide-for-xlarge-only, tr.hide-for-xlarge-up, tr.hide-for-xlarge, tr.show-for-xlarge-down, tr.hide-for-xxlarge-only, tr.hide-for-xxlarge-up, tr.hide-for-xxlarge, tr.show-for-xxlarge-down {
display: table-row; }
th.hide-for-small-only, td.hide-for-small-only, th.show-for-small-up, td.show-for-small-up, th.hide-for-small, td.hide-for-small, th.hide-for-small-down, td.hide-for-small-down, th.show-for-medium-only, td.show-for-medium-only, th.show-for-medium-up, td.show-for-medium-up, th.show-for-medium, td.show-for-medium, th.show-for-medium-down, td.show-for-medium-down, th.hide-for-large-only, td.hide-for-large-only, th.hide-for-large-up, td.hide-for-large-up, th.hide-for-large, td.hide-for-large, th.show-for-large-down, td.show-for-large-down, th.hide-for-xlarge-only, td.hide-for-xlarge-only, th.hide-for-xlarge-up, td.hide-for-xlarge-up, th.hide-for-xlarge, td.hide-for-xlarge, th.show-for-xlarge-down, td.show-for-xlarge-down, th.hide-for-xxlarge-only, td.hide-for-xxlarge-only, th.hide-for-xxlarge-up, td.hide-for-xxlarge-up, th.hide-for-xxlarge, td.hide-for-xxlarge, th.show-for-xxlarge-down, td.show-for-xxlarge-down {
display: table-cell !important; } }
/* large displays */
@media only screen and (min-width: 64.0625em) {
.hide-for-small-only, .show-for-small-up, .hide-for-small, .hide-for-small-down, .hide-for-medium-only, .show-for-medium-up, .hide-for-medium, .hide-for-medium-down, .show-for-large-only, .show-for-large-up, .show-for-large, .show-for-large-down, .hide-for-xlarge-only, .hide-for-xlarge-up, .hide-for-xlarge, .show-for-xlarge-down, .hide-for-xxlarge-only, .hide-for-xxlarge-up, .hide-for-xxlarge, .show-for-xxlarge-down {
display: inherit !important; }
.show-for-small-only, .hide-for-small-up, .show-for-small, .show-for-small-down, .show-for-medium-only, .hide-for-medium-up, .show-for-medium, .show-for-medium-down, .hide-for-large-only, .hide-for-large-up, .hide-for-large, .hide-for-large-down, .show-for-xlarge-only, .show-for-xlarge-up, .show-for-xlarge, .hide-for-xlarge-down, .show-for-xxlarge-only, .show-for-xxlarge-up, .show-for-xxlarge, .hide-for-xxlarge-down {
display: none !important; }
.hidden-for-small-only, .visible-for-small-up, .hidden-for-small, .hidden-for-small-down, .hidden-for-medium-only, .visible-for-medium-up, .hidden-for-medium, .hidden-for-medium-down, .visible-for-large-only, .visible-for-large-up, .visible-for-large, .visible-for-large-down, .hidden-for-xlarge-only, .hidden-for-xlarge-up, .hidden-for-xlarge, .visible-for-xlarge-down, .hidden-for-xxlarge-only, .hidden-for-xxlarge-up, .hidden-for-xxlarge, .visible-for-xxlarge-down {
position: static !important;
height: auto;
width: auto;
overflow: visible;
clip: auto; }
.visible-for-small-only, .hidden-for-small-up, .visible-for-small, .visible-for-small-down, .visible-for-medium-only, .hidden-for-medium-up, .visible-for-medium, .visible-for-medium-down, .hidden-for-large-only, .hidden-for-large-up, .hidden-for-large, .hidden-for-large-down, .visible-for-xlarge-only, .visible-for-xlarge-up, .visible-for-xlarge, .hidden-for-xlarge-down, .visible-for-xxlarge-only, .visible-for-xxlarge-up, .visible-for-xxlarge, .hidden-for-xxlarge-down {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px; }
table.hide-for-small-only, table.show-for-small-up, table.hide-for-small, table.hide-for-small-down, table.hide-for-medium-only, table.show-for-medium-up, table.hide-for-medium, table.hide-for-medium-down, table.show-for-large-only, table.show-for-large-up, table.show-for-large, table.show-for-large-down, table.hide-for-xlarge-only, table.hide-for-xlarge-up, table.hide-for-xlarge, table.show-for-xlarge-down, table.hide-for-xxlarge-only, table.hide-for-xxlarge-up, table.hide-for-xxlarge, table.show-for-xxlarge-down {
display: table !important; }
thead.hide-for-small-only, thead.show-for-small-up, thead.hide-for-small, thead.hide-for-small-down, thead.hide-for-medium-only, thead.show-for-medium-up, thead.hide-for-medium, thead.hide-for-medium-down, thead.show-for-large-only, thead.show-for-large-up, thead.show-for-large, thead.show-for-large-down, thead.hide-for-xlarge-only, thead.hide-for-xlarge-up, thead.hide-for-xlarge, thead.show-for-xlarge-down, thead.hide-for-xxlarge-only, thead.hide-for-xxlarge-up, thead.hide-for-xxlarge, thead.show-for-xxlarge-down {
display: table-header-group !important; }
tbody.hide-for-small-only, tbody.show-for-small-up, tbody.hide-for-small, tbody.hide-for-small-down, tbody.hide-for-medium-only, tbody.show-for-medium-up, tbody.hide-for-medium, tbody.hide-for-medium-down, tbody.show-for-large-only, tbody.show-for-large-up, tbody.show-for-large, tbody.show-for-large-down, tbody.hide-for-xlarge-only, tbody.hide-for-xlarge-up, tbody.hide-for-xlarge, tbody.show-for-xlarge-down, tbody.hide-for-xxlarge-only, tbody.hide-for-xxlarge-up, tbody.hide-for-xxlarge, tbody.show-for-xxlarge-down {
display: table-row-group !important; }
tr.hide-for-small-only, tr.show-for-small-up, tr.hide-for-small, tr.hide-for-small-down, tr.hide-for-medium-only, tr.show-for-medium-up, tr.hide-for-medium, tr.hide-for-medium-down, tr.show-for-large-only, tr.show-for-large-up, tr.show-for-large, tr.show-for-large-down, tr.hide-for-xlarge-only, tr.hide-for-xlarge-up, tr.hide-for-xlarge, tr.show-for-xlarge-down, tr.hide-for-xxlarge-only, tr.hide-for-xxlarge-up, tr.hide-for-xxlarge, tr.show-for-xxlarge-down {
display: table-row; }
th.hide-for-small-only, td.hide-for-small-only, th.show-for-small-up, td.show-for-small-up, th.hide-for-small, td.hide-for-small, th.hide-for-small-down, td.hide-for-small-down, th.hide-for-medium-only, td.hide-for-medium-only, th.show-for-medium-up, td.show-for-medium-up, th.hide-for-medium, td.hide-for-medium, th.hide-for-medium-down, td.hide-for-medium-down, th.show-for-large-only, td.show-for-large-only, th.show-for-large-up, td.show-for-large-up, th.show-for-large, td.show-for-large, th.show-for-large-down, td.show-for-large-down, th.hide-for-xlarge-only, td.hide-for-xlarge-only, th.hide-for-xlarge-up, td.hide-for-xlarge-up, th.hide-for-xlarge, td.hide-for-xlarge, th.show-for-xlarge-down, td.show-for-xlarge-down, th.hide-for-xxlarge-only, td.hide-for-xxlarge-only, th.hide-for-xxlarge-up, td.hide-for-xxlarge-up, th.hide-for-xxlarge, td.hide-for-xxlarge, th.show-for-xxlarge-down, td.show-for-xxlarge-down {
display: table-cell !important; } }
/* xlarge displays */
@media only screen and (min-width: 90.0625em) {
.hide-for-small-only, .show-for-small-up, .hide-for-small, .hide-for-small-down, .hide-for-medium-only, .show-for-medium-up, .hide-for-medium, .hide-for-medium-down, .hide-for-large-only, .show-for-large-up, .hide-for-large, .hide-for-large-down, .show-for-xlarge-only, .show-for-xlarge-up, .show-for-xlarge, .show-for-xlarge-down, .hide-for-xxlarge-only, .hide-for-xxlarge-up, .hide-for-xxlarge, .show-for-xxlarge-down {
display: inherit !important; }
.show-for-small-only, .hide-for-small-up, .show-for-small, .show-for-small-down, .show-for-medium-only, .hide-for-medium-up, .show-for-medium, .show-for-medium-down, .show-for-large-only, .hide-for-large-up, .show-for-large, .show-for-large-down, .hide-for-xlarge-only, .hide-for-xlarge-up, .hide-for-xlarge, .hide-for-xlarge-down, .show-for-xxlarge-only, .show-for-xxlarge-up, .show-for-xxlarge, .hide-for-xxlarge-down {
display: none !important; }
.hidden-for-small-only, .visible-for-small-up, .hidden-for-small, .hidden-for-small-down, .hidden-for-medium-only, .visible-for-medium-up, .hidden-for-medium, .hidden-for-medium-down, .hidden-for-large-only, .visible-for-large-up, .hidden-for-large, .hidden-for-large-down, .visible-for-xlarge-only, .visible-for-xlarge-up, .visible-for-xlarge, .visible-for-xlarge-down, .hidden-for-xxlarge-only, .hidden-for-xxlarge-up, .hidden-for-xxlarge, .visible-for-xxlarge-down {
position: static !important;
height: auto;
width: auto;
overflow: visible;
clip: auto; }
.visible-for-small-only, .hidden-for-small-up, .visible-for-small, .visible-for-small-down, .visible-for-medium-only, .hidden-for-medium-up, .visible-for-medium, .visible-for-medium-down, .visible-for-large-only, .hidden-for-large-up, .visible-for-large, .visible-for-large-down, .hidden-for-xlarge-only, .hidden-for-xlarge-up, .hidden-for-xlarge, .hidden-for-xlarge-down, .visible-for-xxlarge-only, .visible-for-xxlarge-up, .visible-for-xxlarge, .hidden-for-xxlarge-down {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px; }
table.hide-for-small-only, table.show-for-small-up, table.hide-for-small, table.hide-for-small-down, table.hide-for-medium-only, table.show-for-medium-up, table.hide-for-medium, table.hide-for-medium-down, table.hide-for-large-only, table.show-for-large-up, table.hide-for-large, table.hide-for-large-down, table.show-for-xlarge-only, table.show-for-xlarge-up, table.show-for-xlarge, table.show-for-xlarge-down, table.hide-for-xxlarge-only, table.hide-for-xxlarge-up, table.hide-for-xxlarge, table.show-for-xxlarge-down {
display: table !important; }
thead.hide-for-small-only, thead.show-for-small-up, thead.hide-for-small, thead.hide-for-small-down, thead.hide-for-medium-only, thead.show-for-medium-up, thead.hide-for-medium, thead.hide-for-medium-down, thead.hide-for-large-only, thead.show-for-large-up, thead.hide-for-large, thead.hide-for-large-down, thead.show-for-xlarge-only, thead.show-for-xlarge-up, thead.show-for-xlarge, thead.show-for-xlarge-down, thead.hide-for-xxlarge-only, thead.hide-for-xxlarge-up, thead.hide-for-xxlarge, thead.show-for-xxlarge-down {
display: table-header-group !important; }
tbody.hide-for-small-only, tbody.show-for-small-up, tbody.hide-for-small, tbody.hide-for-small-down, tbody.hide-for-medium-only, tbody.show-for-medium-up, tbody.hide-for-medium, tbody.hide-for-medium-down, tbody.hide-for-large-only, tbody.show-for-large-up, tbody.hide-for-large, tbody.hide-for-large-down, tbody.show-for-xlarge-only, tbody.show-for-xlarge-up, tbody.show-for-xlarge, tbody.show-for-xlarge-down, tbody.hide-for-xxlarge-only, tbody.hide-for-xxlarge-up, tbody.hide-for-xxlarge, tbody.show-for-xxlarge-down {
display: table-row-group !important; }
tr.hide-for-small-only, tr.show-for-small-up, tr.hide-for-small, tr.hide-for-small-down, tr.hide-for-medium-only, tr.show-for-medium-up, tr.hide-for-medium, tr.hide-for-medium-down, tr.hide-for-large-only, tr.show-for-large-up, tr.hide-for-large, tr.hide-for-large-down, tr.show-for-xlarge-only, tr.show-for-xlarge-up, tr.show-for-xlarge, tr.show-for-xlarge-down, tr.hide-for-xxlarge-only, tr.hide-for-xxlarge-up, tr.hide-for-xxlarge, tr.show-for-xxlarge-down {
display: table-row; }
th.hide-for-small-only, td.hide-for-small-only, th.show-for-small-up, td.show-for-small-up, th.hide-for-small, td.hide-for-small, th.hide-for-small-down, td.hide-for-small-down, th.hide-for-medium-only, td.hide-for-medium-only, th.show-for-medium-up, td.show-for-medium-up, th.hide-for-medium, td.hide-for-medium, th.hide-for-medium-down, td.hide-for-medium-down, th.hide-for-large-only, td.hide-for-large-only, th.show-for-large-up, td.show-for-large-up, th.hide-for-large, td.hide-for-large, th.hide-for-large-down, td.hide-for-large-down, th.show-for-xlarge-only, td.show-for-xlarge-only, th.show-for-xlarge-up, td.show-for-xlarge-up, th.show-for-xlarge, td.show-for-xlarge, th.show-for-xlarge-down, td.show-for-xlarge-down, th.hide-for-xxlarge-only, td.hide-for-xxlarge-only, th.hide-for-xxlarge-up, td.hide-for-xxlarge-up, th.hide-for-xxlarge, td.hide-for-xxlarge, th.show-for-xxlarge-down, td.show-for-xxlarge-down {
display: table-cell !important; } }
/* xxlarge displays */
@media only screen and (min-width: 120.0625em) {
.hide-for-small-only, .show-for-small-up, .hide-for-small, .hide-for-small-down, .hide-for-medium-only, .show-for-medium-up, .hide-for-medium, .hide-for-medium-down, .hide-for-large-only, .show-for-large-up, .hide-for-large, .hide-for-large-down, .hide-for-xlarge-only, .show-for-xlarge-up, .hide-for-xlarge, .hide-for-xlarge-down, .show-for-xxlarge-only, .show-for-xxlarge-up, .show-for-xxlarge, .show-for-xxlarge-down {
display: inherit !important; }
.show-for-small-only, .hide-for-small-up, .show-for-small, .show-for-small-down, .show-for-medium-only, .hide-for-medium-up, .show-for-medium, .show-for-medium-down, .show-for-large-only, .hide-for-large-up, .show-for-large, .show-for-large-down, .show-for-xlarge-only, .hide-for-xlarge-up, .show-for-xlarge, .show-for-xlarge-down, .hide-for-xxlarge-only, .hide-for-xxlarge-up, .hide-for-xxlarge, .hide-for-xxlarge-down {
display: none !important; }
.hidden-for-small-only, .visible-for-small-up, .hidden-for-small, .hidden-for-small-down, .hidden-for-medium-only, .visible-for-medium-up, .hidden-for-medium, .hidden-for-medium-down, .hidden-for-large-only, .visible-for-large-up, .hidden-for-large, .hidden-for-large-down, .hidden-for-xlarge-only, .visible-for-xlarge-up, .hidden-for-xlarge, .hidden-for-xlarge-down, .visible-for-xxlarge-only, .visible-for-xxlarge-up, .visible-for-xxlarge, .visible-for-xxlarge-down {
position: static !important;
height: auto;
width: auto;
overflow: visible;
clip: auto; }
.visible-for-small-only, .hidden-for-small-up, .visible-for-small, .visible-for-small-down, .visible-for-medium-only, .hidden-for-medium-up, .visible-for-medium, .visible-for-medium-down, .visible-for-large-only, .hidden-for-large-up, .visible-for-large, .visible-for-large-down, .visible-for-xlarge-only, .hidden-for-xlarge-up, .visible-for-xlarge, .visible-for-xlarge-down, .hidden-for-xxlarge-only, .hidden-for-xxlarge-up, .hidden-for-xxlarge, .hidden-for-xxlarge-down {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px; }
table.hide-for-small-only, table.show-for-small-up, table.hide-for-small, table.hide-for-small-down, table.hide-for-medium-only, table.show-for-medium-up, table.hide-for-medium, table.hide-for-medium-down, table.hide-for-large-only, table.show-for-large-up, table.hide-for-large, table.hide-for-large-down, table.hide-for-xlarge-only, table.show-for-xlarge-up, table.hide-for-xlarge, table.hide-for-xlarge-down, table.show-for-xxlarge-only, table.show-for-xxlarge-up, table.show-for-xxlarge, table.show-for-xxlarge-down {
display: table !important; }
thead.hide-for-small-only, thead.show-for-small-up, thead.hide-for-small, thead.hide-for-small-down, thead.hide-for-medium-only, thead.show-for-medium-up, thead.hide-for-medium, thead.hide-for-medium-down, thead.hide-for-large-only, thead.show-for-large-up, thead.hide-for-large, thead.hide-for-large-down, thead.hide-for-xlarge-only, thead.show-for-xlarge-up, thead.hide-for-xlarge, thead.hide-for-xlarge-down, thead.show-for-xxlarge-only, thead.show-for-xxlarge-up, thead.show-for-xxlarge, thead.show-for-xxlarge-down {
display: table-header-group !important; }
tbody.hide-for-small-only, tbody.show-for-small-up, tbody.hide-for-small, tbody.hide-for-small-down, tbody.hide-for-medium-only, tbody.show-for-medium-up, tbody.hide-for-medium, tbody.hide-for-medium-down, tbody.hide-for-large-only, tbody.show-for-large-up, tbody.hide-for-large, tbody.hide-for-large-down, tbody.hide-for-xlarge-only, tbody.show-for-xlarge-up, tbody.hide-for-xlarge, tbody.hide-for-xlarge-down, tbody.show-for-xxlarge-only, tbody.show-for-xxlarge-up, tbody.show-for-xxlarge, tbody.show-for-xxlarge-down {
display: table-row-group !important; }
tr.hide-for-small-only, tr.show-for-small-up, tr.hide-for-small, tr.hide-for-small-down, tr.hide-for-medium-only, tr.show-for-medium-up, tr.hide-for-medium, tr.hide-for-medium-down, tr.hide-for-large-only, tr.show-for-large-up, tr.hide-for-large, tr.hide-for-large-down, tr.hide-for-xlarge-only, tr.show-for-xlarge-up, tr.hide-for-xlarge, tr.hide-for-xlarge-down, tr.show-for-xxlarge-only, tr.show-for-xxlarge-up, tr.show-for-xxlarge, tr.show-for-xxlarge-down {
display: table-row; }
th.hide-for-small-only, td.hide-for-small-only, th.show-for-small-up, td.show-for-small-up, th.hide-for-small, td.hide-for-small, th.hide-for-small-down, td.hide-for-small-down, th.hide-for-medium-only, td.hide-for-medium-only, th.show-for-medium-up, td.show-for-medium-up, th.hide-for-medium, td.hide-for-medium, th.hide-for-medium-down, td.hide-for-medium-down, th.hide-for-large-only, td.hide-for-large-only, th.show-for-large-up, td.show-for-large-up, th.hide-for-large, td.hide-for-large, th.hide-for-large-down, td.hide-for-large-down, th.hide-for-xlarge-only, td.hide-for-xlarge-only, th.show-for-xlarge-up, td.show-for-xlarge-up, th.hide-for-xlarge, td.hide-for-xlarge, th.hide-for-xlarge-down, td.hide-for-xlarge-down, th.show-for-xxlarge-only, td.show-for-xxlarge-only, th.show-for-xxlarge-up, td.show-for-xxlarge-up, th.show-for-xxlarge, td.show-for-xxlarge, th.show-for-xxlarge-down, td.show-for-xxlarge-down {
display: table-cell !important; } }
/* Orientation targeting */
.show-for-landscape,
.hide-for-portrait {
display: inherit !important; }
.hide-for-landscape,
.show-for-portrait {
display: none !important; }
/* Specific visibility for tables */
table.hide-for-landscape, table.show-for-portrait {
display: table !important; }
thead.hide-for-landscape, thead.show-for-portrait {
display: table-header-group !important; }
tbody.hide-for-landscape, tbody.show-for-portrait {
display: table-row-group !important; }
tr.hide-for-landscape, tr.show-for-portrait {
display: table-row !important; }
td.hide-for-landscape, td.show-for-portrait,
th.hide-for-landscape,
th.show-for-portrait {
display: table-cell !important; }
@media only screen and (orientation: landscape) {
.show-for-landscape,
.hide-for-portrait {
display: inherit !important; }
.hide-for-landscape,
.show-for-portrait {
display: none !important; }
/* Specific visibility for tables */
table.show-for-landscape, table.hide-for-portrait {
display: table !important; }
thead.show-for-landscape, thead.hide-for-portrait {
display: table-header-group !important; }
tbody.show-for-landscape, tbody.hide-for-portrait {
display: table-row-group !important; }
tr.show-for-landscape, tr.hide-for-portrait {
display: table-row !important; }
td.show-for-landscape, td.hide-for-portrait,
th.show-for-landscape,
th.hide-for-portrait {
display: table-cell !important; } }
@media only screen and (orientation: portrait) {
.show-for-portrait,
.hide-for-landscape {
display: inherit !important; }
.hide-for-portrait,
.show-for-landscape {
display: none !important; }
/* Specific visibility for tables */
table.show-for-portrait, table.hide-for-landscape {
display: table !important; }
thead.show-for-portrait, thead.hide-for-landscape {
display: table-header-group !important; }
tbody.show-for-portrait, tbody.hide-for-landscape {
display: table-row-group !important; }
tr.show-for-portrait, tr.hide-for-landscape {
display: table-row !important; }
td.show-for-portrait, td.hide-for-landscape,
th.show-for-portrait,
th.hide-for-landscape {
display: table-cell !important; } }
/* Touch-enabled device targeting */
.show-for-touch {
display: none !important; }
.hide-for-touch {
display: inherit !important; }
.touch .show-for-touch {
display: inherit !important; }
.touch .hide-for-touch {
display: none !important; }
/* Specific visibility for tables */
table.hide-for-touch {
display: table !important; }
.touch table.show-for-touch {
display: table !important; }
thead.hide-for-touch {
display: table-header-group !important; }
.touch thead.show-for-touch {
display: table-header-group !important; }
tbody.hide-for-touch {
display: table-row-group !important; }
.touch tbody.show-for-touch {
display: table-row-group !important; }
tr.hide-for-touch {
display: table-row !important; }
.touch tr.show-for-touch {
display: table-row !important; }
td.hide-for-touch {
display: table-cell !important; }
.touch td.show-for-touch {
display: table-cell !important; }
th.hide-for-touch {
display: table-cell !important; }
.touch th.show-for-touch {
display: table-cell !important; }
/* Screen reader-specific classes */
.show-for-sr {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px; }
.show-on-focus {
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute !important;
width: 1px; }
.show-on-focus:focus, .show-on-focus:active {
position: static !important;
height: auto;
width: auto;
overflow: visible;
clip: auto; }
/* Print visibility */
.print-only,
.show-for-print {
display: none !important; }
@media print {
.print-only,
.show-for-print {
display: block !important; }
.hide-on-print,
.hide-for-print {
display: none !important; }
table.show-for-print {
display: table !important; }
thead.show-for-print {
display: table-header-group !important; }
tbody.show-for-print {
display: table-row-group !important; }
tr.show-for-print {
display: table-row !important; }
td.show-for-print {
display: table-cell !important; }
th.show-for-print {
display: table-cell !important; } }

View File

@ -1,7 +1,7 @@
/* /*
* Foundation Responsive Library * Foundation Responsive Library
* http://foundation.zurb.com * http://foundation.zurb.com
* Copyright 2014, ZURB * Copyright 2015, ZURB
* Free to use under the MIT license. * Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php * http://www.opensource.org/licenses/mit-license.php
*/ */
@ -10,14 +10,12 @@
'use strict'; 'use strict';
var header_helpers = function (class_array) { var header_helpers = function (class_array) {
var i = class_array.length;
var head = $('head'); var head = $('head');
head.prepend($.map(class_array, function (class_name) {
while (i--) { if (head.has('.' + class_name).length === 0) {
if (head.has('.' + class_array[i]).length === 0) { return '<meta class="' + class_name + '" />';
head.append('<meta class="' + class_array[i] + '" />');
}
} }
}));
}; };
header_helpers([ header_helpers([
@ -290,21 +288,30 @@
return string; return string;
} }
function MediaQuery(selector) {
this.selector = selector;
this.query = '';
}
MediaQuery.prototype.toString = function () {
return this.query || (this.query = S(this.selector).css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''));
};
window.Foundation = { window.Foundation = {
name : 'Foundation', name : 'Foundation',
version : '5.5.2', version : '5.5.3',
media_queries : { media_queries : {
'small' : S('.foundation-mq-small').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''), 'small' : new MediaQuery('.foundation-mq-small'),
'small-only' : S('.foundation-mq-small-only').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''), 'small-only' : new MediaQuery('.foundation-mq-small-only'),
'medium' : S('.foundation-mq-medium').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''), 'medium' : new MediaQuery('.foundation-mq-medium'),
'medium-only' : S('.foundation-mq-medium-only').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''), 'medium-only' : new MediaQuery('.foundation-mq-medium-only'),
'large' : S('.foundation-mq-large').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''), 'large' : new MediaQuery('.foundation-mq-large'),
'large-only' : S('.foundation-mq-large-only').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''), 'large-only' : new MediaQuery('.foundation-mq-large-only'),
'xlarge' : S('.foundation-mq-xlarge').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''), 'xlarge' : new MediaQuery('.foundation-mq-xlarge'),
'xlarge-only' : S('.foundation-mq-xlarge-only').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, ''), 'xlarge-only' : new MediaQuery('.foundation-mq-xlarge-only'),
'xxlarge' : S('.foundation-mq-xxlarge').css('font-family').replace(/^[\/\\'"]+|(;\s?})+|[\/\\'"]+$/g, '') 'xxlarge' : new MediaQuery('.foundation-mq-xxlarge')
}, },
stylesheet : $('<style></style>').appendTo('head')[0].sheet, stylesheet : $('<style></style>').appendTo('head')[0].sheet,

View File

@ -3,19 +3,19 @@ namespace LAM\LOGIN;
use LAM\LIB\TWO_FACTOR\TwoFactorProviderService; use LAM\LIB\TWO_FACTOR\TwoFactorProviderService;
use \LAMConfig; use \LAMConfig;
use \LAMCfgMain; use \LAMCfgMain;
use \htmlTable;
use \htmlSpacer; use \htmlSpacer;
use \htmlOutputText; use \htmlOutputText;
use \htmlSelect; use \htmlSelect;
use \htmlElement; use \htmlElement;
use \htmlInputField; use \htmlInputField;
use \htmlGroup; use \htmlGroup;
use \htmlHiddenInput;
use \htmlInputCheckbox; use \htmlInputCheckbox;
use \htmlButton; use \htmlButton;
use \htmlStatusMessage; use \htmlStatusMessage;
use \htmlHorizontalLine; use \htmlHorizontalLine;
use \Ldap; use \Ldap;
use \htmlResponsiveRow;
use \htmlDiv;
/* /*
$Id$ $Id$
@ -194,7 +194,10 @@ function display_LoginPage(LAMConfig $config_object, LAMCfgMain $cfgMain, $licen
echo $_SESSION["header"]; echo $_SESSION["header"];
?> ?>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LDAP Account Manager</title> <title>LDAP Account Manager</title>
<link rel="stylesheet" type="text/css" href="../style/responsive/105_normalize.css">
<link rel="stylesheet" type="text/css" href="../style/responsive/110_foundation.css">
<?php <?php
// include all CSS files // include all CSS files
$cssDirName = dirname(__FILE__) . '/../style'; $cssDirName = dirname(__FILE__) . '/../style';
@ -215,7 +218,7 @@ function display_LoginPage(LAMConfig $config_object, LAMCfgMain $cfgMain, $licen
<link rel="shortcut icon" type="image/x-icon" href="../graphics/favicon.ico"> <link rel="shortcut icon" type="image/x-icon" href="../graphics/favicon.ico">
<link rel="icon" href="../graphics/logo136.png"> <link rel="icon" href="../graphics/logo136.png">
</head> </head>
<body onload="focusLogin()"> <body class="admin" onload="focusLogin()">
<?php <?php
// include all JavaScript files // include all JavaScript files
$jsDirName = dirname(__FILE__) . '/lib'; $jsDirName = dirname(__FILE__) . '/lib';
@ -229,6 +232,8 @@ function display_LoginPage(LAMConfig $config_object, LAMCfgMain $cfgMain, $licen
foreach ($jsFiles as $jsEntry) { foreach ($jsFiles as $jsEntry) {
echo "<script type=\"text/javascript\" src=\"lib/" . $jsEntry . "\"></script>\n"; echo "<script type=\"text/javascript\" src=\"lib/" . $jsEntry . "\"></script>\n";
} }
echo "<script type=\"text/javascript\" src=\"lib/extra/responsive/200_modernizr.js\"></script>\n";
echo "<script type=\"text/javascript\" src=\"lib/extra/responsive/250_foundation.js\"></script>\n";
// upgrade if pdf/profiles contain single files // upgrade if pdf/profiles contain single files
if (containsFiles('../config/profiles') || containsFiles('../config/pdf')) { if (containsFiles('../config/profiles') || containsFiles('../config/pdf')) {
@ -280,15 +285,23 @@ function display_LoginPage(LAMConfig $config_object, LAMCfgMain $cfgMain, $licen
<table border=0 width="100%" class="lamHeader ui-corner-all"> <table border=0 width="100%" class="lamHeader ui-corner-all">
<tr> <tr>
<td align="left" height="30"> <td align="left" height="30">
<a class="lamLogo" href="http://www.ldap-account-manager.org/" target="new_window">LDAP Account Manager</a> <a class="lamLogo" href="http://www.ldap-account-manager.org/" target="new_window">
LDAP Account Manager
<?php
if (isLAMProVersion()) {
echo 'Pro ';
}
echo ' - ' . LAMVersion();
?>
</a>
</td> </td>
<td align="right" height=20> <td align="right" height=20>
<a href="./config/index.php"><IMG alt="configuration" src="../graphics/tools.png">&nbsp;<?php echo _("LAM configuration") ?></a> <a href="./config/index.php"><IMG alt="configuration" src="../graphics/tools.png">&nbsp;<span class="hide-for-small"><?php echo _("LAM configuration") ?></span></a>
</td> </td>
</tr> </tr>
</table> </table>
<br><br> <br>
<?php <?php
if (!empty($config_object)) { if (!empty($config_object)) {
@ -348,24 +361,19 @@ function display_LoginPage(LAMConfig $config_object, LAMCfgMain $cfgMain, $licen
?> ?>
<br><br> <br><br>
<div class="centeredTable"> <div class="centeredTable">
<div class="roundedShadowBox" style="position:relative; z-index:5;"> <div class="roundedShadowBox limitWidth" style="position:relative; z-index:5;">
<table align="center" border="0" rules="none" bgcolor="white" class="ui-corner-all"> <table border="0" rules="none" bgcolor="white" class="ui-corner-all">
<tr> <tr>
<td class="loginLogo" style="border-style:none" rowspan="2"> <td class="loginLogo hide-for-small" style="border-style:none" rowspan="3">
</td> </td>
<td style="border-style:none"> <td style="border-style:none">
<form action="login.php" method="post"> <form action="login.php" method="post">
<?php <?php
$table = new htmlTable('500px'); $tabindex = 1;
$spacer = new htmlSpacer(null, '30px'); $row = new htmlResponsiveRow();
$spacer->colspan = 3; $row->add(new htmlSpacer(null, '30px'), 0, 12, 12);
$table->addElement($spacer, true);
// user name // user name
$userLabel = new htmlOutputText(_("User name")); $row->addLabel(new htmlOutputText(_("User name")));
$userLabel->alignment = htmlElement::ALIGN_RIGHT;
$table->addElement($userLabel);
$gap = new htmlSpacer('5px', '30px');
$table->addElement($gap);
if ($config_object->getLoginMethod() == LAMConfig::LOGIN_LIST) { if ($config_object->getLoginMethod() == LAMConfig::LOGIN_LIST) {
$admins = $config_object->get_Admins(); $admins = $config_object->get_Admins();
$adminList = array(); $adminList = array();
@ -385,49 +393,40 @@ function display_LoginPage(LAMConfig $config_object, LAMCfgMain $cfgMain, $licen
} }
$userSelect = new htmlSelect('username', $adminList, $selectedAdmin); $userSelect = new htmlSelect('username', $adminList, $selectedAdmin);
$userSelect->setHasDescriptiveElements(true); $userSelect->setHasDescriptiveElements(true);
$userSelect->setTransformSingleSelect(false);
$userSelect->alignment = htmlElement::ALIGN_LEFT; $userSelect->alignment = htmlElement::ALIGN_LEFT;
$table->addElement($userSelect); $row->addField($userSelect);
} }
else { else {
if ($config_object->getHttpAuthentication() == 'true') { if ($config_object->getHttpAuthentication() == 'true') {
$httpAuth = new htmlOutputText($_SERVER['PHP_AUTH_USER']); $httpAuth = new htmlDiv(null, new htmlOutputText($_SERVER['PHP_AUTH_USER'] . '&nbsp;', false));
$httpAuth->alignment = htmlElement::ALIGN_LEFT; $httpAuth->setCSSClasses(array('text-left', 'margin3'));
$table->addElement($httpAuth); $row->addField($httpAuth);
} }
else { else {
$user = ''; $user = '';
if (isset($_COOKIE["lam_login_name"])) { if (isset($_COOKIE["lam_login_name"])) {
$user = $_COOKIE["lam_login_name"]; $user = $_COOKIE["lam_login_name"];
} }
$userInput = new htmlInputField('username', $user); $userInput = new htmlDiv(null, new htmlInputField('username', $user));
$userInput->alignment = htmlElement::ALIGN_LEFT; $row->addField($userInput);
$table->addElement($userInput);
} }
} }
$table->addNewLine();
// password // password
$passwordLabel = new htmlOutputText(_("Password")); $row->addLabel(new \htmlOutputText(_("Password")));
$passwordLabel->alignment = htmlElement::ALIGN_RIGHT;
$table->addElement($passwordLabel);
$table->addElement($gap);
if (($config_object->getLoginMethod() == LAMConfig::LOGIN_SEARCH) && ($config_object->getHttpAuthentication() == 'true')) { if (($config_object->getLoginMethod() == LAMConfig::LOGIN_SEARCH) && ($config_object->getHttpAuthentication() == 'true')) {
$passwordInputFake = new htmlOutputText('**********'); $passwordInputFake = new htmlDiv(null, new htmlOutputText('**********'));
$passwordInputFake->alignment = htmlElement::ALIGN_LEFT; $passwordInputFake->setCSSClasses(array('text-left', 'margin3'));
$table->addElement($passwordInputFake); $row->addField($passwordInputFake);
} }
else { else {
$passwordInput = new htmlInputField('passwd'); $passwordInput = new htmlInputField('passwd');
$passwordInput->alignment = htmlElement::ALIGN_LEFT;
$passwordInput->setIsPassword(true); $passwordInput->setIsPassword(true);
$passwordInput->setFieldSize('20px'); $passwordInput->setFieldSize('20px');
$table->addElement($passwordInput); $row->addField($passwordInput);
} }
$table->addNewLine();
// language // language
$languageLabel = new htmlOutputText(_("Language")); $row->addLabel(new htmlOutputText(_("Language")));
$languageLabel->alignment = htmlElement::ALIGN_RIGHT;
$table->addElement($languageLabel);
$table->addElement($gap);
$possibleLanguages = getLanguages(); $possibleLanguages = getLanguages();
$languageList = array(); $languageList = array();
$defaultLanguage = array(); $defaultLanguage = array();
@ -439,16 +438,11 @@ function display_LoginPage(LAMConfig $config_object, LAMCfgMain $cfgMain, $licen
} }
$languageSelect = new htmlSelect('language', $languageList, $defaultLanguage); $languageSelect = new htmlSelect('language', $languageList, $defaultLanguage);
$languageSelect->setHasDescriptiveElements(true); $languageSelect->setHasDescriptiveElements(true);
$languageSelect->alignment = htmlElement::ALIGN_LEFT; $row->addField($languageSelect, true);
$table->addElement($languageSelect, true);
// remember login user // remember login user
if (($config_object->getLoginMethod() == LAMConfig::LOGIN_SEARCH) && !($config_object->getHttpAuthentication() == 'true')) { if (($config_object->getLoginMethod() == LAMConfig::LOGIN_SEARCH) && !($config_object->getHttpAuthentication() == 'true')) {
$rememberLabel = new htmlOutputText(''); $row->add(new htmlOutputText('&nbsp;', false), 0, 6, 6);
$rememberLabel->alignment = htmlElement::ALIGN_RIGHT;
$table->addElement($rememberLabel);
$table->addElement($gap);
$rememberGroup = new htmlGroup(); $rememberGroup = new htmlGroup();
$rememberGroup->alignment = htmlElement::ALIGN_LEFT;
$doRemember = false; $doRemember = false;
if (isset($_COOKIE["lam_login_name"])) { if (isset($_COOKIE["lam_login_name"])) {
$doRemember = true; $doRemember = true;
@ -456,62 +450,54 @@ function display_LoginPage(LAMConfig $config_object, LAMCfgMain $cfgMain, $licen
$rememberGroup->addElement(new htmlInputCheckbox('rememberLogin', $doRemember)); $rememberGroup->addElement(new htmlInputCheckbox('rememberLogin', $doRemember));
$rememberGroup->addElement(new htmlSpacer('1px', null)); $rememberGroup->addElement(new htmlSpacer('1px', null));
$rememberGroup->addElement(new htmlOutputText(_('Remember user name'))); $rememberGroup->addElement(new htmlOutputText(_('Remember user name')));
$table->addElement($rememberGroup, true); $rememberDiv = new htmlDiv(null, $rememberGroup);
$rememberDiv->setCSSClasses(array('text-left', 'margin3'));
$row->add($rememberDiv, 12, 6, 6);
} }
// login button // login button
$table->addElement(new htmlSpacer(null, '35px')); $row->add(new htmlSpacer(null, '20px'), 12);
$table->addElement(new htmlHiddenInput('checklogin', 'checklogin')); $row->add(new htmlButton('checklogin', _("Login")), 12);
$loginButton = new htmlButton('submit', _("Login"));
$loginButton->alignment = htmlElement::ALIGN_LEFT;
$table->addElement($loginButton, true);
// error message // error message
if(!empty($error_message)) { if(!empty($error_message)) {
$row->add(new \htmlSpacer(null, '5px'), 12);
$message = new htmlStatusMessage('ERROR', $error_message); $message = new htmlStatusMessage('ERROR', $error_message);
$message->colspan = 3; $message->colspan = 3;
$table->addElement($message, true); $row->add($message, 12);
} }
$tabindex = 1; parseHtml(null, $row, array(), false, $tabindex, 'user');
parseHtml(null, $table, array(), false, $tabindex, 'user');
?> ?>
</form> </form>
</td> </td>
<td class="loginRightBox hide-for-small" style="border-style:none">
</td>
</tr> </tr>
<tr> <tr>
<td align="left" style="border-style:none"> <td colspan="2" style="border-style:none;">
<hr class="margin20">
</td>
</tr>
<tr>
<td style="border-style:none;">
<form action="login.php" method="post"> <form action="login.php" method="post">
<?php <?php
$table = new htmlTable('500px'); $row = new htmlResponsiveRow();
$table->setCSSClasses(array('login-dialog-bottom')); $row->addLabel(new htmlOutputText(_("LDAP server")));
$line = new htmlHorizontalLine(); $serverUrl = new htmlOutputText($config_object->getServerDisplayNameGUI());
$line->colspan = 2; $serverUrlDiv = new htmlDiv(null, $serverUrl);
$table->addElement($line, true); $serverUrlDiv->setCSSClasses(array('text-left', 'margin3'));
$subTable = new htmlTable(); $row->addField($serverUrlDiv);
$subTable->alignment = htmlElement::ALIGN_LEFT; $row->addLabel(new htmlOutputText(_("Server profile")));
// LDAP server
$serverLabel = new htmlOutputText(_("LDAP server"));
$serverLabel->alignment = htmlElement::ALIGN_RIGHT;
$subTable->addElement($serverLabel);
$subTable->addElement($gap);
$serverName = new htmlOutputText($config_object->getServerDisplayNameGUI());
$serverName->alignment = htmlElement::ALIGN_LEFT;
$subTable->addElement($serverName, true);
// server profile
$profileLabel = new htmlOutputText(_("Server profile"));
$profileLabel->alignment = htmlElement::ALIGN_RIGHT;
$subTable->addElement($profileLabel);
$subTable->addElement($gap);
$profileSelect = new htmlSelect('profile', $profiles, array($_SESSION['config']->getName())); $profileSelect = new htmlSelect('profile', $profiles, array($_SESSION['config']->getName()));
$profileSelect->alignment = htmlElement::ALIGN_LEFT;
$profileSelect->setOnchangeEvent('loginProfileChanged(this)'); $profileSelect->setOnchangeEvent('loginProfileChanged(this)');
$subTable->addElement($profileSelect, true); $row->addField($profileSelect);
$subTable->addElement(new htmlSpacer(null, '10px'));
$table->addElement($subTable);
parseHtml(null, $table, array(), true, $tabindex, 'user'); parseHtml(null, $row, array(), true, $tabindex, 'user');
?> ?>
</form> </form>
</td> </td>
<td class="loginRightBox hide-for-small" style="border-style:none">
</td>
</tr> </tr>
</table> </table>
</div> </div>
@ -520,43 +506,20 @@ function display_LoginPage(LAMConfig $config_object, LAMCfgMain $cfgMain, $licen
} }
?> ?>
<br><br> <br><br>
<TABLE style="position:absolute; bottom:10px;" border="0" width="99%">
<tr><td colspan=2><HR></td></tr>
<TR>
<td align="left">
<?PHP <?PHP
if (!isLAMProVersion()) { if (isLAMProVersion() && $licenseValidator->isExpiringSoon()) {
echo "<a href=\"http://www.ldap-account-manager.org/lamcms/lamPro\">" . _("Want more features? Get LAM Pro!") . "</a>"; $licenseMessage = sprintf(_('Your licence expires on %s.'), $licenseValidator->getLicense()->getExpirationDate()->format('Y-m-d'));
} StatusMessage('WARN', $licenseMessage);
elseif ($licenseValidator->isExpiringSoon()) {
echo '<b>';
echo sprintf(_('Your licence expires on %s.'), $licenseValidator->getLicense()->getExpirationDate()->format('Y-m-d'));
echo '</b>';
} }
?> ?>
</td> <br><br>
<TD align="right">
<SMALL>
<?php
if (isLAMProVersion()) {
echo "LDAP Account Manager Pro - " . LAMVersion() . "&nbsp;&nbsp;&nbsp;";
logNewMessage(LOG_DEBUG, "LAM Pro " . LAMVersion());
}
else {
echo "LDAP Account Manager - " . LAMVersion() . "&nbsp;&nbsp;&nbsp;";
logNewMessage(LOG_DEBUG, "LAM " . LAMVersion());
}
?>
</SMALL>
</TD></TR>
</TABLE>
</body> </body>
</html> </html>
<?php <?php
} }
// checking if the submitted username/password is correct. // checking if the submitted username/password is correct.
if(!empty($_POST['checklogin'])) { if(isset($_POST['checklogin'])) {
include_once("../lib/ldap.inc"); // Include ldap.php which provides Ldap class include_once("../lib/ldap.inc"); // Include ldap.php which provides Ldap class
$_SESSION['ldap'] = new Ldap($_SESSION['config']); // Create new Ldap object $_SESSION['ldap'] = new Ldap($_SESSION['config']); // Create new Ldap object