FSN#38679 GUI: on focus van een inputveld het bijbehorende label 'active' maken

svn path=/Website/trunk/; revision=31899
This commit is contained in:
Jos Groot Lipman
2016-12-08 10:12:26 +00:00
parent d8a36472b2
commit 27785110e8
2 changed files with 157 additions and 76 deletions

View File

@@ -633,6 +633,8 @@ var protectRequest =
}
$(function () {
// Kijk of bij de buttons de teksten niet meer passen en we dus
// terugvallen op alleen de icons
$(window).on("resize", function ()
{
$("div.buttoncontainer").each(function ()
@@ -654,4 +656,22 @@ $(function () {
}
})
});
$(document).on('focus active', 'input,textarea,select',function(){
var thisid = $(this).attr('id');
if (thisid)
{
thisid = thisid.replace(/_show$/, "");
$('label[for='+thisid+']').addClass('active');
}
});
$(document).on('blur', 'input,textarea,select',function(){
var thisid = $(this).attr('id');
if (thisid)
{
thisid = thisid.replace(/_show$/, "");
$('label[for='+thisid+']').removeClass('active');
}
});
});

View File

@@ -52,7 +52,7 @@ th {
color:==logincolor==;
}
#loginhtml {
#loginhtml, #termshtml {
background-color: #F4F6F9;
background: url(==loginimage==) no-repeat center center fixed;
background-size: cover;
@@ -169,7 +169,7 @@ input, textarea, select {
margin: 0;
border: 1px solid #ccc;
border-radius: 2px;
background-color: #FFFDF6;
background-color: #fdf6ee;
}
td, th {
font-size: 1em;
@@ -189,14 +189,14 @@ select {
background-position: right 6px center;
}
select[multiple]
{
select[multiple] {
background-image: none;
}
select::-ms-expand { display: none;}
input[type=text], select {
background-color: #FFFDF6;
background-color: #fdf6ee;
}
input[type=text]:hover,
@@ -247,10 +247,13 @@ input[readonly]:hover, select[readonly]:hover, textarea[readonly]:hover {
/* label tag = de tekst */
label {
color: #444;
color: #555;
margin: 0;
/*white-space: nowrap;*/
}
label.active {
color: #00c;
}
label.selector {
float: left; /* links in de td */
}
@@ -307,9 +310,9 @@ form {
padding: 0;
}
th {
color: ==blockheadercolor==;
color: ==tableheadercolor==;
padding: 2px 3px 2px 3px;
background-color: ==blockheaderbackgroundcolor==;
background-color: ==tableheaderbackgroundcolor==;
}
/* tabs: sluitkruisje */
@@ -336,17 +339,21 @@ th {
}
.tabcloseall, .pincurrenttab {
color: #888; /*==iconcolor==*/
background-color:#ccc;
cursor: pointer;
font-size: 1.8em;
font-size: 1.5em;
float: right;
line-height: 31px;
padding: 0px 5px 3px 3px;
margin-top:-2px;
padding: 0px 4px 3px 1px;
}
.pincurrenttab {
padding: 1px 5px 0px 3px;
padding: 1px 1px 2px 4px;
}
div#maintabs ul.ui-tabs-nav {
margin-right:62px;
}
.hot,
.tabpinned i:hover,
.tabclose:hover,
.tabcloseall:hover {
color: red;
@@ -513,6 +520,19 @@ div.ias {
{
visibility:visible;
}
th.multiselect:hover input[type='checkbox'], td:hover input[type='checkbox'].multiselect {
outline: 1px solid red;
}
th.multiselect, td.multiselect {
width:3em;
text-align: center;
}
td.multiselect:hover {
cursor: pointer;
}
.rstable tbody tr.selected td {
background-color: #FFFFE0!important;
}
.ia { /*inline action span */
cursor: pointer;
@@ -680,9 +700,9 @@ input#menufilter {
}
div.filtermenukop {
display: none;
background-color: ==blockheaderbackgroundcolor==;
color: ==blockheadercolor==;
border: 1px solid ==blockheaderbackgroundcolor==;
background-color: ==tableheaderbackgroundcolor==;
color: ==tableheadercolor==;
border: 1px solid ==tableheaderbackgroundcolor==;
text-align:center;
}
@@ -710,6 +730,14 @@ div.filtermenukop {
border: 0px !important;
}
/* Anders lelijk in multi-dialoog */
.ui-datepicker-multi .ui-datepicker-group table td {
padding: 1px
}
.ui-datepicker-multi div.ui-datepicker-header {
height: 27px
}
.ui-datepicker-calendar th {
background: ==blockheaderbackgroundcolor== repeat-x left top;
font-weight: normal;
@@ -741,12 +769,16 @@ body.modal .fcltblock {
.fcltblockhead {
background-color:==blockheaderbackgroundcolor==;
color: ==blockheadercolor==;
font-weight: normal;
font-weight:bold;
font-size: 1.1em;
padding: 3px 0 0 6px;
height: 27px;
padding: 2px 0 0 2px;
height: 25px;
border-style: outset;
border-top: 1px solid #e8e8e8;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
}
.fcltblockhead img.details {
margin-bottom: -3px;
}
@@ -762,7 +794,7 @@ body.modal .fcltblockhead{
}
#showbody .fcltblockhead {
background-color: ==showblockheaderbackgroundcolor==;
color: ==textcolor==;
color: ==blockheadercolor==;
}
#showbody td,
#editbody td,
@@ -913,8 +945,8 @@ div.wbackground {
/*TODO height: 250px;*/
}
#mywelcomeinfo {
background-color: ==blockheaderbackgroundcolor==;
color: ==blockheadercolor==;
background-color: ==tableheaderbackgroundcolor==;
color: ==tableheadercolor==;
margin-top: 1px;
font-size: 1.2em;
}
@@ -1001,9 +1033,6 @@ ul.flikeopts li a img {
margin:0px;
text-align:left;
}
#search div.fcltblock label {
color: ==textcolor==;
}
#search div.fcltblockhead {
background-color: ==blockheaderbackgroundcolor==;
@@ -1058,7 +1087,7 @@ padding-right: 15px!important;
}
.busyoverlay {
background: #aaa;
opacity: .5;
opacity: .75;
filter: Alpha(Opacity=50); /* support: IE8 */
}
/*
@@ -1073,6 +1102,9 @@ padding-right: 15px!important;
margin-top:0px;
}
.notebuttons {
float:left;
}
#buttons ul {
padding: 3px 0px;
margin-left: 0;
@@ -1183,7 +1215,10 @@ span.button:hover {
#buttons.vertical {
/* float: none; */
}
#buttons.vertical ul li i {
color: ==frameheadercolor==;
background-color: ==frameheaderbackgroundcolor==;
}
#buttons.vertical ul li:hover {
color: ==blockheaderbackgroundcolor==;
background-color: transparent;
@@ -1261,7 +1296,7 @@ div.buttoncontainer {
{
width: 20px;
height: 20px;
background-image: url(../appl/Pictures/folder.png);
background-image: url(../appl/Pictures/folder.png); /*TODO*/
background-repeat: no-repeat;
border: 0;
background-color: transparent!important;
@@ -1313,7 +1348,9 @@ img.details, span.details, tr.details, i.details, div.ref {
margin: 0;
padding: 0;
}
.fa { /* is dat te dapper? */
cursor: pointer;
}
img.lendobj {
padding: 0px;
margin: 0px;
@@ -1374,29 +1411,23 @@ label.cadselect i.fa {
border: 0px!important;
}
i.bijlage, i.bijlage1 {
font-size: 1.4em;
i.bijlage, i.bijlage1, i.endicon {
font-size: 1.2em;
position: relative;
color: #7B7B7B;
z-index: 1;
top: 1px;
left: -22px;
left: -19px;
width: 0;
}
.materiaal {
background-image: url(../appl/Pictures/materiaal.png);
}
.uitvoerenden {
background-image: url(../appl/Pictures/materiaal.png);
background-repeat: no-repeat;
background-position: 3px;
padding: 4px 0 4px 25px;
width: 140px;
text-align: left;
}
#r_objs_button {
background-image: url(../appl/Pictures/hand_point.png);
background-repeat: no-repeat;
background-position: 6px;
}
@@ -1442,7 +1473,7 @@ div.mldhandlinghead {
line-height: 1.6em !important;
}
.mldhandlingdiv .system:before {
content: url(../appl/Pictures/info.png);
content: url(../appl/Pictures/info.png); /*TODO?*/
}
.mldhandlingdiv .system {
filter: alpha(opacity=60);
@@ -1586,8 +1617,8 @@ div.notetoggler.open {
}
.rstable thead th, .rstable tfoot td
{
color: ==blockheadercolor==;
background-color: ==blockheaderbackgroundcolor==;
color: ==tableheadercolor==;
background-color: ==tableheaderbackgroundcolor==;
font-weight: normal;
border-right: 1px ridge #ccc;
white-space: nowrap;
@@ -1631,16 +1662,16 @@ div.notetoggler.open {
/* Voor fin facturen */
.withinmargin td {
background: -webkit-linear-gradient(top, rgba(198, 239, 206, 1), rgba(198, 239, 206, 0.8) 90%); /* For Safari 5.1 to 6.0 */
background: -moz-linear-gradient(top, rgba(198, 239, 206, 1), rgba(198, 239, 206, 0.8) 90%); /* For Firefox 3.6 to 15 */
background: linear-gradient(to top, rgba(198, 239, 206, 1), rgba(198, 239, 206, 0.8) 90%); /* Standard syntax */
background: -webkit-linear-gradient(top, rgba(198, 239, 206, 1), rgba(198, 239, 206, 0.8) 150%); /* For Safari 5.1 to 6.0 */
background: -moz-linear-gradient(top, rgba(198, 239, 206, 1), rgba(198, 239, 206, 0.8) 150%); /* For Firefox 3.6 to 15 */
background: linear-gradient(to top, rgba(198, 239, 206, 1), rgba(198, 239, 206, 0.8) 150%); /* Standard syntax */
background-color: #C6EFCE\9;
color: #006100;
}
.outsidemargin td {
background: -webkit-linear-gradient(top, rgba(255, 199, 207, 1), rgba(255, 199, 207, 0.8) 90%); /* For Safari 5.1 to 6.0 */
background: -moz-linear-gradient(top, rgba(255, 199, 207, 1), rgba(255, 199, 207, 0.8) 90%); /* For Firefox 3.6 to 15 */
background: linear-gradient(to top,rgba(255, 199, 207, 1), rgba(255, 199, 207, 0.8) 90%); /* Standard syntax */
background: -webkit-linear-gradient(top, rgba(255, 199, 207, 1), rgba(255, 199, 207, 0.8) 150%); /* For Safari 5.1 to 6.0 */
background: -moz-linear-gradient(top, rgba(255, 199, 207, 1), rgba(255, 199, 207, 0.8) 150%); /* For Firefox 3.6 to 15 */
background: linear-gradient(to top,rgba(255, 199, 207, 1), rgba(255, 199, 207, 0.8) 150%); /* Standard syntax */
background-color: #FFC7CE\9; /* IE 8 and below */
color: #9C0006;
}
@@ -1750,14 +1781,14 @@ span.expired2 {
}
/* for colored rows and others*/ /* PF: ns even aanzien hoe de MS-kleuren uitpakken */
.cntrappel td, .expired1 td {
background: -webkit-linear-gradient(top, rgba(255, 254, 156, 1), rgba(255, 254, 156, 0.8) 90%); /* For Safari 5.1 to 6.0 */
background: -moz-linear-gradient(top, rgba(255, 254, 156, 1), rgba(255, 254, 156, 0.8) 90%); /* For Firefox 3.6 to 15 */
background: linear-gradient(to top, rgba(255, 254, 156, 1), rgba(255, 254, 156, 0.8) 90%); /* Standard syntax */
background: -webkit-linear-gradient(top, rgba(255, 254, 156, 1), rgba(255, 254, 156, 0.8) 150%); /* For Safari 5.1 to 6.0 */
background: -moz-linear-gradient(top, rgba(255, 254, 156, 1), rgba(255, 254, 156, 0.8) 150%); /* For Firefox 3.6 to 15 */
background: linear-gradient(to top, rgba(255, 254, 156, 1), rgba(255, 254, 156, 0.8) 150%); /* Standard syntax */
background-color: #FFEB9C\9; /* IE 8 and below */
color: #9C6500;
}
.cntopzeg td, .expired2 td {
background: linear-gradient(to top, rgba(255, 199, 207, 1), rgba(255, 199, 207, 0.8) 90%); /*#FFC7CE*/
background: linear-gradient(to top, rgba(255, 199, 207, 1), rgba(255, 199, 207, 0.8) 150%); /*#FFC7CE*/
background-color: #FFC7CE\9; /* IE 8 and below */
color: #9C0006;
}
@@ -1961,8 +1992,7 @@ input[type=password].required,
select.required, option.required,
textarea.required
{
background-color: rgba(252, 247, 222, 0.7);
background-color: #fcf7de\9; /* IE8 */
background-color: antiquewhite;
border-left: 2px solid ==requiredbordercolor==;
}
/* but maintain the button properties even if required */
@@ -2045,24 +2075,28 @@ input[type=text].mldres {
}
/* label class = de td of div of zo */
@media all and (min-width: 20em){
/* tot 53em zijn we single-column */
@media all and (min-width: 23em){
.label {
width: 124px; /* bij 124px past Contactpersoon:+morinfo */
min-width: 124px; /* bij 124px past Contactpersoon:+morinfo */
width: 124px;
}
}
@media all and (min-width: 50em) {
@media all and (min-width: 20em) {
.label {
min-width: 170px;
width: 170px;
}
}
@media all and (min-width: 70em) {
@media all and (min-width: 72em) {
.label {
min-width: 200px;
width: 200px;
}
}
@media all and (min-width: 90em) {
.label {
min-width: 250px;
width: 250px;
}
}
@@ -2072,7 +2106,6 @@ input[type=text].mldres {
padding: 2px 0 0 4px;
margin: 0;
color: ==textcolor==;
border-bottom: 1px solid white; /* aanzien of dit leuk is */
}
.orglcl {
font-style: italic;
@@ -2236,7 +2269,7 @@ div#statusboxes {
}
/* two columns at wider screens */
@media all and (min-width: 50em) {
@media all and (min-width: 53em) {
div.leftcontainer,
#algFlex,
#algInfo,
@@ -2563,7 +2596,7 @@ input.materiaal
max-width: 50px;
}
@media all and (min-width: 60em) {
@media all and (min-width: 68em){
/* inputs en suggests */
.fld, .fldkp,
.fldreg, .flddis, .fldloc, .fldbld, .fldflr, .fldroom, .fldworklocation, .fldwpl, .fldpers, .fldcontactpers, .flduitvoerende,
@@ -2804,7 +2837,9 @@ div#lcldialect .label
color: ==iconcolor==;
background-color: ==frameheaderbackgroundcolor==;
}
.besartbtns #buttons ul li.hasIcon i {
}
.besdetailtd {
border: 0px solid #ccc;
vertical-align: top;
@@ -2842,14 +2877,14 @@ tr.flexcollapsable td {
}
.flexcollapsable .lhint {
background-image: url(../appl/Pictures/up.png);
background-image: url(../appl/Pictures/up.png); /*TODO*/
background-repeat: no-repeat;
background-position: right 7px;
padding-right: 22px;
}
.flexcollapsed .lhint {
background-image: url(../appl/Pictures/down.png);
background-image: url(../appl/Pictures/down.png); /*TODO*/
background-repeat: no-repeat;
background-position: right 5px;
}
@@ -2935,6 +2970,7 @@ body.likemodal {
#mod_besprijs {min-width:350px;}
#mod_besretour {min-width:600px;}
#mod_besweging {min-width:500px;}
#mod_bezcheckin {min-width:600px;}
#mod_cntsplit {min-width:500px;}
#mod_cntsplit .label {min-width: 180px;}
#mod_req_move {min-width:500px;}
@@ -3001,6 +3037,7 @@ body#mod_resmulti div#show_date_from { height: 250px }
div#mldsimilar {
padding: 4px 4px 4px 10px;
}
#mod_movewerkplek { min-width: 500px; }
/* ==== menu styles ==== */
/* voor de tabjes boven het menu */
@@ -3761,10 +3798,10 @@ td.selectable {
color: ==blockheadercolor==;
}
.openFG {
background-image:url(../appl/Pictures/up.png);
background-image:url(../appl/Pictures/up.png); /*TODO*/
}
.closedFG {
background-image:url(../appl/Pictures/down.png);
background-image:url(../appl/Pictures/down.png); /*TODO*/
}
.fixedFG {
line-height: 2em;
@@ -3856,8 +3893,8 @@ table.filter {
margin-bottom: 10px;
}
table.filter th {
background-color: ==blockheaderbackgroundcolor==;
color: ==blockheadercolor==;
background-color: ==tableheaderbackgroundcolor==;
color: ==tableheadercolor==;
font-weight: normal;
font-size: 1.1em;
margin-bottom: 2px;
@@ -3941,7 +3978,7 @@ table.filter img {
}
span.removetag {
background-image:url(../appl/Pictures/deletegrey.png);
background-image:url(../appl/Pictures/deletegrey.png); /*TODO?*/
background-repeat: no-repeat;
background-position:-1px -1px;
padding-right: 10px;
@@ -3987,8 +4024,8 @@ input[readonly], select[readonly], textarea[readonly] {
background-color: ==frameheaderbackgroundcolor==;
}
.tmenutab {
background-color: ==blockheaderbackgroundcolor==;
color: ==blockheadercolor==;
background-color: ==tableheaderbackgroundcolor==;
color: ==tableheadercolor==;
border: 2px solid ==frameheadercolor==;
}
#tabletmenu #luser {
@@ -4126,7 +4163,7 @@ body.floorscreen3d {
}
.icontxt {
color:==icontextcolor==;
font-size: 0.9em;
font-size: 0.85em;
text-transform: uppercase;
}
@@ -4156,6 +4193,9 @@ li.hasIcon.dialog i.fa
div.smallbuttons .icontxt {
display: none;
}
div.smallbuttons li.byHamburger .icontxt {
display: inline;
}
.ui-widget-content{
border:0px;
@@ -4267,12 +4307,12 @@ span.draggable .mjborgbedrag {
color: ==linkcolor==;
}
.mjbafbouw {
background-image: url(../appl/Pictures/minus.png) !important;
background-image: url(../appl/Pictures/minus.png) !important; /*TODO*/
background-repeat: no-repeat !important;
background-position: center !important;
}
.mjbverval, .mjbplanned.mjbverval {
background-image: url(../appl/Pictures/minus-circle.png) !important;
background-image: url(../appl/Pictures/minus-circle.png) !important; /*TODO*/
background-repeat: no-repeat !important;
background-position: center !important;
}
@@ -4333,7 +4373,7 @@ li#printhamburger {
z-index: 1;
margin-top: -8px;
left: -14px;
top: 28%;
top: 30%;
}
tr.mldhandlingself .bubble {
@@ -4342,7 +4382,7 @@ tr.mldhandlingself .bubble {
tr.mldhandlingself .bubble:after {
border-color: transparent #90E9A6 !important;
}
/* reset all styling for the framtabs, then restyle */
/* reset all styling for the frametabs, then restyle */
.frametabs,
.frametabs li {
border: 0 !important;
@@ -4367,4 +4407,25 @@ tr.mldhandlingself .bubble:after {
#multilabel, .footerbutton {
padding: 6px 8px 5px 8px!important;
border-right: 1px solid rgba(255,255,255,0.25)!important;
}
}
#termshtml body {
width: 96%;
margin-left: 2.5%;
margin-top:5%;
}
div#terms {
height: 40em;
overflow-y:scroll;
padding: 1em;
}
div#prsAV {
border: 2px solid #aaa;
}
@media all and (min-width: 40em){
#termshtml body {
width: 60%;
margin-left: 20%;
margin-top:10%;
}
}