FCLT#78270 Savepoint; kleuren+namen, verticale card-lijsten, swipe-acties, random kleurtjes, card-klikacties gegeneraliseerd, footer, berichten badge + kunnen verwijderen v. berichten, headerImage verplaatst naar z'n eigen element, profile knopje rechtsbovenin op de voorpagina, semantic html toegepast, berichten uit /PDA/fac_list.inc gehaald
svn path=/Website/trunk/; revision=61683
This commit is contained in:
@@ -87,8 +87,8 @@ label.ui-btn {
|
||||
-----------------------------------------------------------------------------------------------------------*/
|
||||
/* Class ui-btn-corner-all deprecated in 1.4 */
|
||||
.ui-corner-all {
|
||||
-webkit-border-radius: 0em /*{global-radii-blocks}*/;
|
||||
border-radius: 0em /*{global-radii-blocks}*/;
|
||||
-webkit-border-radius: 0 /*{global-radii-blocks}*/;
|
||||
border-radius: 0 /*{global-radii-blocks}*/;
|
||||
}
|
||||
/* Buttons */
|
||||
.ui-btn-corner-all,
|
||||
@@ -99,8 +99,8 @@ label.ui-btn {
|
||||
.ui-flipswitch.ui-corner-all,
|
||||
/* Count bubble */
|
||||
.ui-li-count {
|
||||
-webkit-border-radius: 0.1em /*{global-radii-buttons}*/;
|
||||
border-radius: 0.1em /*{global-radii-buttons}*/;
|
||||
-webkit-border-radius: var(--fclt-border-radius);
|
||||
border-radius: var(--fclt-border-radius);
|
||||
}
|
||||
/* Icon-only buttons */
|
||||
.ui-btn-icon-notext.ui-btn-corner-all,
|
||||
@@ -116,22 +116,22 @@ label.ui-btn {
|
||||
}
|
||||
/* Popup arrow */
|
||||
.ui-popup.ui-corner-all > .ui-popup-arrow-guide {
|
||||
left: 0em /*{global-radii-blocks}*/;
|
||||
right: 0em /*{global-radii-blocks}*/;
|
||||
top: 0em /*{global-radii-blocks}*/;
|
||||
bottom: 0em /*{global-radii-blocks}*/;
|
||||
left: 0 /*{global-radii-blocks}*/;
|
||||
right: 0 /*{global-radii-blocks}*/;
|
||||
top: 0 /*{global-radii-blocks}*/;
|
||||
bottom: 0 /*{global-radii-blocks}*/;
|
||||
}
|
||||
/* Shadow
|
||||
-----------------------------------------------------------------------------------------------------------*/
|
||||
.ui-shadow {
|
||||
-webkit-box-shadow: 0 1px 1px /*{global-box-shadow-size}*/ rgba(52,63,77,0.4) /*{global-box-shadow-color}*/;
|
||||
-moz-box-shadow: 0 1px 1px /*{global-box-shadow-size}*/ rgba(52,63,77,0.4) /*{global-box-shadow-color}*/;
|
||||
box-shadow: 0 1px 1px /*{global-box-shadow-size}*/ rgba(52,63,77,0.4) /*{global-box-shadow-color}*/;
|
||||
-webkit-box-shadow: 0 1px 1px /*{global-box-shadow-size}*/ var(--fclt-color-grey-40) /*{global-box-shadow-color}*/;
|
||||
-moz-box-shadow: 0 1px 1px /*{global-box-shadow-size}*/ var(--fclt-color-grey-40) /*{global-box-shadow-color}*/;
|
||||
box-shadow: 0 1px 1px /*{global-box-shadow-size}*/ var(--fclt-color-grey-40) /*{global-box-shadow-color}*/;
|
||||
}
|
||||
.ui-shadow-inset {
|
||||
-webkit-box-shadow: inset 0 1px 1px /*{global-box-shadow-size}*/ rgba(52,63,77,0.4) /*{global-box-shadow-color}*/;
|
||||
-moz-box-shadow: inset 0 1px 1px /*{global-box-shadow-size}*/ rgba(52,63,77,0.4) /*{global-box-shadow-color}*/;
|
||||
box-shadow: inset 0 1px 1px /*{global-box-shadow-size}*/ rgba(52,63,77,0.4) /*{global-box-shadow-color}*/;
|
||||
-webkit-box-shadow: inset 0 1px 1px /*{global-box-shadow-size}*/ var(--fclt-color-grey-40) /*{global-box-shadow-color}*/;
|
||||
-moz-box-shadow: inset 0 1px 1px /*{global-box-shadow-size}*/ var(--fclt-color-grey-40) /*{global-box-shadow-color}*/;
|
||||
box-shadow: inset 0 1px 1px /*{global-box-shadow-size}*/ var(--fclt-color-grey-40) /*{global-box-shadow-color}*/;
|
||||
}
|
||||
.ui-overlay-shadow {
|
||||
-webkit-box-shadow: 0 0 12px rgba(0,0,0,.6);
|
||||
@@ -204,7 +204,7 @@ html .ui-alt-icon .ui-radio-off:after {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-style: solid;
|
||||
}
|
||||
.ui-alt-icon.ui-btn.ui-radio-on:after,
|
||||
.ui-alt-icon .ui-btn.ui-radio-on:after {
|
||||
|
||||
30
APPL/Localscripts/theme/facilitor20231.min.css
vendored
30
APPL/Localscripts/theme/facilitor20231.min.css
vendored
@@ -87,8 +87,8 @@ label.ui-btn {
|
||||
-----------------------------------------------------------------------------------------------------------*/
|
||||
/* Class ui-btn-corner-all deprecated in 1.4 */
|
||||
.ui-corner-all {
|
||||
-webkit-border-radius: 0em /*{global-radii-blocks}*/;
|
||||
border-radius: 0em /*{global-radii-blocks}*/;
|
||||
-webkit-border-radius: 0 /*{global-radii-blocks}*/;
|
||||
border-radius: 0 /*{global-radii-blocks}*/;
|
||||
}
|
||||
/* Buttons */
|
||||
.ui-btn-corner-all,
|
||||
@@ -99,8 +99,8 @@ label.ui-btn {
|
||||
.ui-flipswitch.ui-corner-all,
|
||||
/* Count bubble */
|
||||
.ui-li-count {
|
||||
-webkit-border-radius: 0.1em /*{global-radii-buttons}*/;
|
||||
border-radius: 0.1em /*{global-radii-buttons}*/;
|
||||
-webkit-border-radius: var(--fclt-border-radius);
|
||||
border-radius: var(--fclt-border-radius);
|
||||
}
|
||||
/* Icon-only buttons */
|
||||
.ui-btn-icon-notext.ui-btn-corner-all,
|
||||
@@ -116,22 +116,22 @@ label.ui-btn {
|
||||
}
|
||||
/* Popup arrow */
|
||||
.ui-popup.ui-corner-all > .ui-popup-arrow-guide {
|
||||
left: 0em /*{global-radii-blocks}*/;
|
||||
right: 0em /*{global-radii-blocks}*/;
|
||||
top: 0em /*{global-radii-blocks}*/;
|
||||
bottom: 0em /*{global-radii-blocks}*/;
|
||||
left: 0 /*{global-radii-blocks}*/;
|
||||
right: 0 /*{global-radii-blocks}*/;
|
||||
top: 0 /*{global-radii-blocks}*/;
|
||||
bottom: 0 /*{global-radii-blocks}*/;
|
||||
}
|
||||
/* Shadow
|
||||
-----------------------------------------------------------------------------------------------------------*/
|
||||
.ui-shadow {
|
||||
-webkit-box-shadow: 0 1px 1px /*{global-box-shadow-size}*/ rgba(52,63,77,0.4) /*{global-box-shadow-color}*/;
|
||||
-moz-box-shadow: 0 1px 1px /*{global-box-shadow-size}*/ rgba(52,63,77,0.4) /*{global-box-shadow-color}*/;
|
||||
box-shadow: 0 1px 1px /*{global-box-shadow-size}*/ rgba(52,63,77,0.4) /*{global-box-shadow-color}*/;
|
||||
-webkit-box-shadow: 0 1px 1px /*{global-box-shadow-size}*/ var(--fclt-color-grey-40) /*{global-box-shadow-color}*/;
|
||||
-moz-box-shadow: 0 1px 1px /*{global-box-shadow-size}*/ var(--fclt-color-grey-40) /*{global-box-shadow-color}*/;
|
||||
box-shadow: 0 1px 1px /*{global-box-shadow-size}*/ var(--fclt-color-grey-40) /*{global-box-shadow-color}*/;
|
||||
}
|
||||
.ui-shadow-inset {
|
||||
-webkit-box-shadow: inset 0 1px 1px /*{global-box-shadow-size}*/ rgba(52,63,77,0.4) /*{global-box-shadow-color}*/;
|
||||
-moz-box-shadow: inset 0 1px 1px /*{global-box-shadow-size}*/ rgba(52,63,77,0.4) /*{global-box-shadow-color}*/;
|
||||
box-shadow: inset 0 1px 1px /*{global-box-shadow-size}*/ rgba(52,63,77,0.4) /*{global-box-shadow-color}*/;
|
||||
-webkit-box-shadow: inset 0 1px 1px /*{global-box-shadow-size}*/ var(--fclt-color-grey-40) /*{global-box-shadow-color}*/;
|
||||
-moz-box-shadow: inset 0 1px 1px /*{global-box-shadow-size}*/ var(--fclt-color-grey-40) /*{global-box-shadow-color}*/;
|
||||
box-shadow: inset 0 1px 1px /*{global-box-shadow-size}*/ var(--fclt-color-grey-40) /*{global-box-shadow-color}*/;
|
||||
}
|
||||
.ui-overlay-shadow {
|
||||
-webkit-box-shadow: 0 0 12px rgba(0,0,0,.6);
|
||||
@@ -204,7 +204,7 @@ html .ui-alt-icon .ui-radio-off:after {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-style: solid;
|
||||
}
|
||||
.ui-alt-icon.ui-btn.ui-radio-on:after,
|
||||
.ui-alt-icon .ui-btn.ui-radio-on:after {
|
||||
|
||||
@@ -120,9 +120,6 @@
|
||||
line-height: 1.05em;
|
||||
color: #111;
|
||||
}
|
||||
.cardorders {
|
||||
}
|
||||
|
||||
|
||||
.planopdrflag,
|
||||
.planopdrflag0,
|
||||
@@ -154,8 +151,8 @@
|
||||
|
||||
div.latecard {
|
||||
background-color: #FFF0F0;
|
||||
color: #9C0006;
|
||||
border-color: #9C0006;
|
||||
color: var(--fclt-color-bad);
|
||||
border-color: var(--fclt-color-bad);
|
||||
}
|
||||
div.pholder {
|
||||
background-color: #DAA520; /* Voor het testen pholder zichtbaar (show()) en rood (#DA0000) maken. Dan is de clone kaart goed zichtbaar. */
|
||||
@@ -173,20 +170,10 @@ div.selectedcard {
|
||||
background-color: #DAA520;
|
||||
}
|
||||
div.disable-sort-item, span.disable-sort-item {
|
||||
background-color: #F5F5F5;
|
||||
/* Maak alle tekst unselectable */
|
||||
-webkit-touch-callout: none; /* iOS Safari */
|
||||
-webkit-user-select: none; /* Safari */
|
||||
-khtml-user-select: none; /* Konqueror HTML */
|
||||
-moz-user-select: none; /* Firefox */
|
||||
-ms-user-select: none; /* Internet Explorer/Edge */
|
||||
user-select: none; /* Non-prefixed version, currently
|
||||
supported by Chrome and Opera */
|
||||
background-color: #F5F5F5;
|
||||
user-select: none;
|
||||
}
|
||||
.cardopdrnochange {
|
||||
/*font-size: 1em; */
|
||||
/*vertical-align: top; */
|
||||
/*margin-top: 3px; */
|
||||
color: #CC0000;
|
||||
}
|
||||
div.activecard {
|
||||
@@ -197,12 +184,8 @@ div.activecard.halt {
|
||||
background-color: #FFCA7B; /*#E8FFE8;*/
|
||||
border-color: #333;
|
||||
}
|
||||
/* div.activecard.resume {
|
||||
background-color: #FFE57A; / *#E8FFE8;* /
|
||||
border-color: #333;
|
||||
} */
|
||||
div.afgewezen {
|
||||
background-color: rgba(204, 86, 86, 0.33); /* 33% Aareon Grapefruit */
|
||||
background-color: rgba(var(--aareon-rgb-grapefruit), 33%);
|
||||
}
|
||||
div.legendaright {
|
||||
float: right;
|
||||
@@ -214,10 +197,7 @@ div.legendaleft {
|
||||
}
|
||||
.placeholderclass {
|
||||
background: red !important;
|
||||
/*visibility: visible; */
|
||||
display:none;
|
||||
/*width: inherited; */
|
||||
/*height:inherited; */
|
||||
}
|
||||
div.cardprio1 {
|
||||
box-shadow: 0px 0px 2px 3px #f00;
|
||||
|
||||
@@ -60,22 +60,12 @@ var thisUser = prs.prs_perslid(user_key, { withPhoto: true });
|
||||
});
|
||||
CONTENT_START();
|
||||
|
||||
CARD_START({ "title": user_time_based_greeting() + " " + user.naam(), "cls": "frontpage-menu" });
|
||||
%> <section><%
|
||||
CARD_START({ "title": user_time_based_greeting() + " " + user.naam() });
|
||||
var pmode = Session("app_build") ? 5 : 4;
|
||||
generateMenu(pmode, { "getFavTop": 3 });
|
||||
CARD_END({ "moreLink": "menu.asp" });
|
||||
%>
|
||||
<script>
|
||||
$(() => {
|
||||
$(".card").on("vclick", (e) => {
|
||||
let fac_nieuws_key = $(e.currentTarget).data("fac_nieuws_key");
|
||||
if (fac_nieuws_key > 0) {
|
||||
window.location.href = "portalnews.asp?fac_nieuws_key=" + fac_nieuws_key;
|
||||
}
|
||||
});
|
||||
})
|
||||
</script>
|
||||
<%
|
||||
%> </section><%
|
||||
|
||||
portalnews(user.alg_locatie_key({withcurrent: true}), user.alg_gebouw_key({withcurrent: true}), 1, 1);
|
||||
|
||||
|
||||
@@ -539,6 +539,10 @@ div.dbezet .plantime {
|
||||
.ui-collapsible .ui-btn {
|
||||
white-space: break-spaces !important; /* bv meldingomschrijving */
|
||||
}
|
||||
/* Ben ik een collapsible block die komt na iets anders dan een anders collapsible block (maar dus wel /iets/) */
|
||||
.ui-collapsible:not(.ui-collapsible + .ui-collapsible, :first-of-type) {
|
||||
padding-top: 1em;
|
||||
}
|
||||
.bijlagepopup-ext1 {
|
||||
width: 100% !important;
|
||||
min-width: 400px;
|
||||
@@ -741,6 +745,7 @@ button,
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
background-color: white;
|
||||
border-top: 1px solid var(--fclt-border-color);
|
||||
}
|
||||
@@ -752,7 +757,7 @@ button,
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: stretch;
|
||||
padding: 0;
|
||||
padding: 1px 0 0 0;
|
||||
margin: 0;
|
||||
background-color: var(--fclt-border-color);
|
||||
gap: 1px; /* Sneaky border */
|
||||
@@ -766,6 +771,23 @@ button,
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
a[data-badge]::after {
|
||||
content: attr(data-badge);
|
||||
position: absolute;
|
||||
font-size: .9em;
|
||||
transform: translate(-1em, -1em);
|
||||
height: 1em;
|
||||
width: 1em;
|
||||
padding: 0.2em;
|
||||
border: 1px solid white;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
background-color: var(--fclt-color-bad);
|
||||
color: white;
|
||||
}
|
||||
.page-footer i {
|
||||
color: var(--textcolor);
|
||||
}
|
||||
@@ -844,7 +866,7 @@ div.ui-controlgroup-label {
|
||||
}
|
||||
|
||||
.ui-mobile label {
|
||||
font-size: 0.8em;
|
||||
font-size: 0.875em;
|
||||
margin: 1em 0 0;
|
||||
font-weight: 400;
|
||||
}
|
||||
@@ -1061,6 +1083,19 @@ input[type="file"] {
|
||||
.mldflag8 i, .resflag8 i, .opdrflag8 i, .bezflag8 i { color: #b276b2 !important }
|
||||
.mldflag9 i, .resflag9 i, .opdrflag9 i, .bezflag9 i { color: #b2912f !important }
|
||||
|
||||
.sensoralert {
|
||||
font-size: 1.4em;
|
||||
color: #d33121;
|
||||
}
|
||||
.sensorok {
|
||||
font-size: 1.4em;
|
||||
color: #45ca45;
|
||||
}
|
||||
.statedate {
|
||||
font-size: 0.8em;
|
||||
opacity: 0.8;
|
||||
margin-left: 6px;
|
||||
}
|
||||
.suggest {
|
||||
background-color: #FFFFFF !important; /* harde kleur.. */
|
||||
}
|
||||
@@ -1135,10 +1170,10 @@ ul#stdmldtable li h3 {
|
||||
/* FireFox */
|
||||
.suggestautocompleteContainer.embedded {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(52, 63, 77, 0.2) rgba(0, 0, 0, 0);
|
||||
scrollbar-color: var(--fclt-color-grey-25) rgba(0, 0, 0, 0);
|
||||
}
|
||||
.suggestautocompleteContainer.embedded:hover {
|
||||
scrollbar-color: rgba(52, 63, 77, 0.3) rgba(0, 0, 0, 0);
|
||||
scrollbar-color: var(--fclt-color-grey-40) rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
/* Andere browsers */
|
||||
@@ -1149,7 +1184,7 @@ ul#stdmldtable li h3 {
|
||||
|
||||
/* Het beweegbare gedeelte vd scrollbalk */
|
||||
.suggestautocompleteContainer.embedded::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(52, 63, 77, 0.2);
|
||||
background-color: var(--fclt-color-grey-25);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@@ -1157,7 +1192,7 @@ ul#stdmldtable li h3 {
|
||||
|
||||
.suggestautocompleteContainer.embedded::-webkit-scrollbar-thumb:hover,
|
||||
.suggestautocompleteContainer.embedded:hover::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(52, 63, 77, 0.3);
|
||||
background-color: var(--fclt-color-grey-40);
|
||||
}
|
||||
|
||||
/* De balk zelf */
|
||||
@@ -1275,7 +1310,7 @@ body {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* POC horizontal scrolling cards */
|
||||
/* Boven de card-array-wrapper */
|
||||
h2.section-title {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
@@ -1289,45 +1324,70 @@ h2.section-title {
|
||||
align-self: flex-end;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.horizontal-container {
|
||||
/* CARDS_WRAPPER */
|
||||
.ui-content :is(.horizontal-card-array, .vertical-card-array) {
|
||||
margin: -1em;
|
||||
}
|
||||
:is(.horizontal-card-array, .vertical-card-array) {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
gap: 1em;
|
||||
width: 100%;
|
||||
overflow-y: hidden;
|
||||
margin: 0 -1em;
|
||||
padding: 1em;
|
||||
scrollbar-width: none; /* Firefox */
|
||||
}
|
||||
.horizontal-container::-webkit-scrollbar { /* Webkit browsers */
|
||||
:is(.horizontal-card-array, .vertical-card-array)::-webkit-scrollbar { /* Webkit browsers */
|
||||
display: none;
|
||||
}
|
||||
.horizontal-container > .card {
|
||||
flex: 0 0 calc(100% - 1.5em - 2px); /* 100% min 2x 0.75em padding min 2x 1px border */
|
||||
:is(.horizontal-card-array, .vertical-card-array) a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.horizontal-container > .card:not(:only-child) {
|
||||
flex-basis: calc(90% - 1.5em - 2px);
|
||||
/* Alleen horizontaal */
|
||||
.horizontal-card-array .card {
|
||||
flex: 0 0 calc(90% - 1.5em - 2px);
|
||||
}
|
||||
.horizontal-card-array .card:only-child {
|
||||
flex-basis: calc(100% - 1.5em - 2px); /* 100% min 2x 0.75em padding min 2x 1px border */
|
||||
}
|
||||
/* Alleen verticaal */
|
||||
.vertical-card-array {
|
||||
flex-direction: column;
|
||||
}
|
||||
.vertical-card-array .card {
|
||||
flex: 1;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.vertical-card-array .card.with-icon > :first-child {
|
||||
margin-bottom: .75rem;
|
||||
}
|
||||
/* CARD */
|
||||
.card {
|
||||
display: flex;
|
||||
background-color: white;
|
||||
color: var(--textcolor);
|
||||
padding: 0.75em;
|
||||
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.05),
|
||||
-2px 2px 2px rgba(0, 0, 0, .05)
|
||||
}
|
||||
/* NEWS-CARD */
|
||||
.frontpage-news > .card {
|
||||
.card.with-icon {
|
||||
height: 4em;
|
||||
gap: 1em;
|
||||
column-gap: 1em;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
/* :first-child is het icoontje/plaatje */
|
||||
.frontpage-news > .card > :first-child {
|
||||
.icon-color-1 > i:first-child { background-color: var(--fclt-color-hard-1); }
|
||||
.icon-color-2 > i:first-child { background-color: var(--fclt-color-hard-2); }
|
||||
.icon-color-3 > i:first-child { background-color: var(--fclt-color-hard-3); }
|
||||
.icon-color-4 > i:first-child { background-color: var(--fclt-color-hard-4); }
|
||||
.icon-color-5 > i:first-child { background-color: var(--fclt-color-soft-1); }
|
||||
.icon-color-6 > i:first-child { background-color: var(--fclt-color-soft-2); }
|
||||
.icon-color-7 > i:first-child { background-color: var(--fclt-color-soft-3); }
|
||||
.icon-color-8 > i:first-child { background-color: var(--fclt-color-soft-4); }
|
||||
|
||||
.card.with-icon > :first-child {
|
||||
border-radius: inherit;
|
||||
}
|
||||
.frontpage-news > .card > i:first-child {
|
||||
font-size: 3rem;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
@@ -1337,38 +1397,73 @@ h2.section-title {
|
||||
align-items: center;
|
||||
color: white;
|
||||
}
|
||||
.frontpage-news > .card:nth-child(4n + 1) > i:first-child { background-color: var(--fclt-color-soft-1); }
|
||||
.frontpage-news > .card:nth-child(4n + 2) > i:first-child { background-color: var(--fclt-color-soft-2); }
|
||||
.frontpage-news > .card:nth-child(4n + 3) > i:first-child { background-color: var(--fclt-color-soft-3); }
|
||||
.frontpage-news > .card:nth-child(4n + 4) > i:first-child { background-color: var(--fclt-color-soft-4); }
|
||||
.frontpage-news .card-content {
|
||||
.card.with-icon > :first-child + *, /* .card-content, of .card-title */
|
||||
.card-content:first-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
height: 100%;
|
||||
max-width: calc(100% - 5em); /* 4em icon + 1em gap */
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
.frontpage-news .card-title,
|
||||
.frontpage-news .card-descr {
|
||||
.card.with-icon > :first-child + * {
|
||||
width: calc(100% - 5em); /* 4em icon + 1em gap */
|
||||
}
|
||||
.card-content > .card-title,
|
||||
.card-content > .card-descr {
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-moz-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
.frontpage-news .card-title {
|
||||
font-weight: 600;
|
||||
.card-content > .card-title {
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
.frontpage-news .card-descr {
|
||||
font-size: 0.9em;
|
||||
.card-content > .card-descr {
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-weight: 600;
|
||||
}
|
||||
.card-descr {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
a.card-link {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
}
|
||||
.vertical-card-array :is(.card-title, .card-descr),
|
||||
.card-content:first-child {
|
||||
width: 100%;
|
||||
}
|
||||
.card-removing {
|
||||
transition: none 200ms ease-in-out;
|
||||
transition-property: flex-basis, padding, margin;
|
||||
}
|
||||
.card-remove {
|
||||
flex-basis: 0!important;
|
||||
padding: 0!important;
|
||||
margin: -0.5em!important; /* Om de gap: 1em -> 0 te simuleren */
|
||||
}
|
||||
/* MENU-CARD */
|
||||
.frontpage-menu.card .card-title {
|
||||
h2.card-title {
|
||||
text-align: center;
|
||||
}
|
||||
/* FAQ-CARD */
|
||||
.faq {
|
||||
background-color: #F7CE5F;
|
||||
}
|
||||
.faq.card > :first-child {
|
||||
color: inherit;
|
||||
}
|
||||
.faq .card-descr {
|
||||
background-color: rgba(255, 255, 255, 0.95); /* 95% wit, 5% wat hierboven staat */
|
||||
padding: calc(1px + 0.75em);
|
||||
margin: calc(-1px - 0.75em);
|
||||
margin-top: 0;
|
||||
border-radius: inherit;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
|
||||
/*////////////////////////////////////////////////////////
|
||||
// //
|
||||
|
||||
@@ -28,8 +28,8 @@ var qrc = getQParamInt("qrc", 0) != 0;
|
||||
var subject = L("lcl_mobile_lopendezaken");
|
||||
|
||||
// TODO: Je denkt status.getresfostatustext(), maar res.inc hebben we sowieso al nodig
|
||||
function res_getfostatustext (p){
|
||||
return res.getfostatustext(p);
|
||||
function res_getfostatustext (p) {
|
||||
return res.getfostatustext(p);
|
||||
}
|
||||
|
||||
function fncolLink(oRs)
|
||||
@@ -322,59 +322,6 @@ function fncolHeader(oRs)
|
||||
%></div><%
|
||||
CONTENT_END();
|
||||
|
||||
|
||||
// Nu nog mijn recente berichten van max 2 dagen terug. De rest is vast irrelevant maar zoek die
|
||||
// desnoods zelf maar via menu-optie message_list.
|
||||
var sqlm = "SELECT m.web_user_mess_dsc"
|
||||
+ ", sn.fac_srtnotificatie_url"
|
||||
+ ", COALESCE(m.web_user_mess_action_params, ' ') web_user_mess_action_params"
|
||||
+ ", m.web_user_mess_action_status"
|
||||
+ ", m.web_user_mess_action_datum"
|
||||
+ ", m.web_user_message_key"
|
||||
+ ", web_user_mess_prioriteit"
|
||||
+ ", sn.fac_srtnotificatie_xmlnode"
|
||||
+ " FROM web_user_messages m, fac_srtnotificatie sn"
|
||||
+ " WHERE m.prs_perslid_key_receiver = " + user_key
|
||||
+ " AND sn.fac_srtnotificatie_key(+)=m.fac_srtnotificatie_key"
|
||||
+ " AND TRUNC(m.web_user_mess_action_datum) > TRUNC(SYSDATE) - " + 2
|
||||
+ " ORDER BY m.web_user_mess_action_datum DESC, m.web_user_message_key DESC";
|
||||
|
||||
function fncolLinkM(oRs)
|
||||
{
|
||||
var action;
|
||||
if (oRs("fac_srtnotificatie_url").Value != null ) {
|
||||
action = rooturl + "/default.asp?u=" + oRs("fac_srtnotificatie_xmlnode").Value + "&k=" + oRs("web_user_mess_action_params").Value;
|
||||
action = action.replace(/\#/g, "&");
|
||||
}
|
||||
return action;
|
||||
};
|
||||
function fnUrgentieM(oRs)
|
||||
{
|
||||
var displ = "";
|
||||
switch (oRs("web_user_mess_prioriteit").value)
|
||||
{
|
||||
case 1: displ = "<span id='urg_hoog1'>" + I("fa-exclamation-triangle") + " </span>"; break;
|
||||
case 2: displ = ""; break;
|
||||
case 3: displ = "<span id='urg_laag1'>" + I("fa-arrow-circle-down") + " </span>"; break;
|
||||
}
|
||||
return displ;
|
||||
}
|
||||
|
||||
CONTENT_START();
|
||||
var rst = new ResultsetTable({sql: sqlm,
|
||||
keyColumn: "web_user_message_key",
|
||||
linkColumn: fncolLinkM,
|
||||
headerColumn: "web_user_mess_action_datum",
|
||||
detailColumn: "web_user_mess_dsc",
|
||||
asideColumn: fnUrgentieM,
|
||||
ID: "messagestable",
|
||||
noSearch: false,
|
||||
showAll: true
|
||||
});
|
||||
|
||||
var cnt = rst.processResultset();
|
||||
CONTENT_END();
|
||||
|
||||
FOOTER();
|
||||
PAGE_END();
|
||||
PDA_PAGE_END(); %>
|
||||
|
||||
@@ -60,8 +60,8 @@ function HEADER(params)
|
||||
if (params.title && params.title != " ") var safe_title = safe.html(params.title);
|
||||
var use_title = safe_title || params.title;
|
||||
|
||||
if (getQParamInt("modal", 0) == 1 || params.modal) // Dan params.title in de modal-dialog titel stoppen en geen buttons
|
||||
{
|
||||
if (getQParamInt("modal", 0) == 1 || params.modal) // Dan params.title in de modal-dialog titel stoppen en geen buttons
|
||||
{
|
||||
if (params.title)
|
||||
{
|
||||
%><title><%=use_title%></title>
|
||||
@@ -73,17 +73,21 @@ function HEADER(params)
|
||||
</script><%
|
||||
}
|
||||
if (bannerUrl) { %>
|
||||
<div data-role="header" data-theme="<%=jQHeaderTheme%>" data-position="fixed"<%=(bannerUrl ? " style=\"background-image: url('" + bannerUrl + "')\"" : "")%>>
|
||||
<header class="page-banner" style="background-image: url('<%=safe.htmlattr(bannerUrl)%>')">
|
||||
<div class="ui-title<%=params.bigtitle ? ' bigtitle' : '' %>"><%=(params.title ? use_title : L("lcl_mobile_title"))%></div>
|
||||
</div>
|
||||
</header>
|
||||
<% }
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
%><div data-role="header" data-theme="<%=jQHeaderTheme%>" data-position="fixed"<%=(bannerUrl ? " style=\"background-image: url('" + bannerUrl + "')\"" : "")%>>
|
||||
<%if (L("lcl_facilitor_header_prefix") != "") { %>
|
||||
if (bannerUrl) { %>
|
||||
<header class="page-banner" style="background-image: url('<%=safe.htmlattr(bannerUrl)%>')">
|
||||
<div class="ui-title<%=params.bigtitle ? ' bigtitle' : '' %>"><%=(params.title ? use_title : L("lcl_mobile_title"))%></div>
|
||||
</header>
|
||||
<% } %><div data-role="header" data-theme="<%=jQHeaderTheme%>" data-position="fixed">
|
||||
<% if (L("lcl_facilitor_header_prefix") != "") { %>
|
||||
<div class='headerprefix'><%=L("lcl_facilitor_header_prefix") %></div>
|
||||
<%} %>
|
||||
<% } %>
|
||||
<div class="ui-btn-left">
|
||||
<%
|
||||
if (params.go) {
|
||||
@@ -100,7 +104,9 @@ function HEADER(params)
|
||||
}
|
||||
%>
|
||||
</div><!-- ui-btn-left -->
|
||||
<div class="ui-title<%=params.bigtitle ? ' bigtitle' : '' %>"><%=(params.title ? use_title : L("lcl_mobile_title"))%></div>
|
||||
<% if (!bannerUrl) { %>
|
||||
<div class="ui-title<%=params.bigtitle ? ' bigtitle' : '' %>"><%=(params.title ? use_title : L("lcl_mobile_title"))%></div>
|
||||
<% } %>
|
||||
<div class="ui-btn-right">
|
||||
<%
|
||||
// nog kiezen wat het leukst is
|
||||
@@ -113,6 +119,12 @@ function HEADER(params)
|
||||
if (params.location) {
|
||||
%><a href="<%=rooturl + "/appl/pda/"%>setlocation.asp" data-role="button" data-icon="fa fa-map-marker-alt" data-iconpos="<%=jQButtonIconpos%>" data-direction="reverse" data-ajax='false'><%=L("lcl_mobile_setlocation")%></a><%
|
||||
}
|
||||
if (params.profile) {
|
||||
var thisuser = prs.prs_perslid(user_key, { withPhoto: true });
|
||||
%><a href="<%=rooturl%>/appl/pda/user_info.asp" data-ajax="false">
|
||||
<div class="profile-photo" style="background-image: url('<%=safe.htmlattr(thisuser.photopaththumb)%>');"></div>
|
||||
</a><%
|
||||
}
|
||||
if (params.addaction) {
|
||||
%><a href="<%=params.addaction%>" data-role="button" data-icon="fa fa-plus" data-iconpos="<%=jQButtonIconpos%>" data-ajax='false'><%=L("lcl_add")%></a><%
|
||||
}
|
||||
@@ -133,25 +145,33 @@ function HEADER(params)
|
||||
|
||||
function FOOTER(params)
|
||||
{
|
||||
if (!params) params = {};
|
||||
// no footer at all when used modal (as a popup somewhere)
|
||||
if (true || getQParamInt("modal", 0) == 1 || params.modal)
|
||||
return;
|
||||
%><div data-role="footer" data-theme="<%=jQHeaderTheme%>" data-position="fixed"><% /* ff proberen */
|
||||
if (params.banner) {
|
||||
%> <div id="fbanner"> <%
|
||||
if (params.thisuser)
|
||||
{
|
||||
%> <a href="<%=rooturl%>/appl/pda/user_info.asp" data-ajax="false">
|
||||
<img alt="<%=safe.htmlattr(L("fac_profiel")) + " " + safe.htmlattr(L("lcl_photos"))%>" id="photo" src="<%=safe.htmlattr(params.thisuser.photopaththumb)%>" class="footerphoto">
|
||||
</a>
|
||||
<% }
|
||||
%> </div> <%
|
||||
if (!params) params = {};
|
||||
// no footer at all when used modal (as a popup somewhere)
|
||||
if (getQParamInt("modal", 0) == 1 || params.modal) {
|
||||
return;
|
||||
}
|
||||
if (params.back) {%><a data-role="button" data-icon="fa fa-arrow-left" data-iconpos="<%=jQButtonIconpos%>" onclick="window.history.back(1)"><%=L("lcl_back")%></a><%}%>
|
||||
<div class="f1">
|
||||
|
||||
var sql = "SELECT COUNT(*) berichten"
|
||||
+ " FROM web_user_messages"
|
||||
+ " WHERE prs_perslid_key_receiver = " + user_key
|
||||
+ " AND web_user_mess_action_status = 1"
|
||||
+ " AND web_user_mess_action_datum > SYSDATE - " + 14;
|
||||
var oRs = Oracle.Execute(sql);
|
||||
var berichten = Math.min(99, oRs("berichten").Value) || "";
|
||||
oRs.Close();
|
||||
|
||||
%>
|
||||
<nav class="page-footer" data-role="footer" data-position="fixed">
|
||||
<ul>
|
||||
<li><a href="Facilitor.asp" data-ajax="false"><%=I("fa-home fa-xl")%></a></li>
|
||||
<li><a href="fac_list.asp" data-ajax="false"><%=I("fa-ballot-check fa-xl")%></a></li>
|
||||
<li><a href="message_list.asp" data-ajax="false"<%=berichten ? ' data-badge="' + berichten + '"' : ''%>><%=I("fa-bell fa-xl")%></a></li>
|
||||
<li><a href="#" data-ajax="false"><%=I("fa-bars fa-xl")%></a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<%
|
||||
if (params.mswitch && !device.isapp())
|
||||
if (0) { // ff niet
|
||||
if (params.mswitch && !device.isapp()) {
|
||||
var txt = "<span class='mobile2touch'>"
|
||||
+ "<a href='#' onclick='toTouch();' target=_top>"+L("lcl_mobile_classicmode")+"</a>"
|
||||
+ ((Application("otap_environment") == "O") ? "<a href='#' onclick='toDesktop();' target=_top>"+L("lcl_desktop_classicmode")+"</a>" : "")
|
||||
@@ -159,35 +179,37 @@ function FOOTER(params)
|
||||
// else
|
||||
// var txt = "<span style='float:right'><small>"+toDateTimeString(new Date)+"</small></span>";
|
||||
Response.Write(txt)
|
||||
}
|
||||
|
||||
if (Application("otap_environment") == "O")
|
||||
{ // Afmelden: alleen beschikbaar voor ontwikkeling!
|
||||
var txt = "<span class='mobilelogging' id='logoff' onclick='logOff()'><a href=''>Afmelden</a></span>";
|
||||
Response.Write(txt)
|
||||
Response.Write(txt);
|
||||
%>
|
||||
<script>
|
||||
function logOff()
|
||||
{
|
||||
var data = {};
|
||||
<% protectRequest.dataToken("data"); %>
|
||||
$.post( "<%=rooturl%>/appl/aut/LogOff.asp"
|
||||
function logOff()
|
||||
{
|
||||
var data = {};
|
||||
<% protectRequest.dataToken("data"); %>
|
||||
$.post(
|
||||
"<%=rooturl%>/appl/aut/LogOff.asp"
|
||||
, data
|
||||
, McltCallbackAndThen(logOffCallback)
|
||||
, "json"
|
||||
);
|
||||
return true; // disable button
|
||||
}
|
||||
function logOffCallback(json, textStatus)
|
||||
{
|
||||
if (json && json.message)
|
||||
logOffCancel();
|
||||
else
|
||||
parent.location.href = json.return_url;
|
||||
}
|
||||
function logoff_cancel()
|
||||
{
|
||||
window.history.back();
|
||||
}
|
||||
);
|
||||
return true; // disable button
|
||||
}
|
||||
function logOffCallback(json, textStatus)
|
||||
{
|
||||
if (json && json.message)
|
||||
logOffCancel();
|
||||
else
|
||||
parent.location.href = json.return_url;
|
||||
}
|
||||
function logoff_cancel()
|
||||
{
|
||||
window.history.back();
|
||||
}
|
||||
</script>
|
||||
<%
|
||||
}
|
||||
@@ -225,12 +247,13 @@ function FOOTER(params)
|
||||
|
||||
}
|
||||
%>
|
||||
</div>
|
||||
|
||||
<div class="f2">
|
||||
<% = !params.nousername && user_key > 0 ? safe.html(user.naam()) : "" %>
|
||||
<% = !params.noplaats && user.alg_locatie_key({withcurrent:true}) >-1 ? L("lcl_mobile_currentpos") + safe.html(CurrentPosition) : "" %>
|
||||
</div>
|
||||
</div><!-- data-role=footer --><%
|
||||
<%
|
||||
}
|
||||
}
|
||||
|
||||
var bannerUrl = null;
|
||||
@@ -243,6 +266,7 @@ function PAGE_START(params)
|
||||
bannerUrl = params.headerImage;
|
||||
}
|
||||
} else if (typeof params.headerImage !== "undefined" && params.headerImage) { // true of 1 => Foto van standplaats gebouw/locatie
|
||||
params.pclass = (params.pclass || "") + " may-pop-under"; // Deze variant staat toe dat er content over de banner heen wordt gezet
|
||||
var geb_key = user.alg_gebouw_key({ "withcurrent": true, "currentIsOptional": true });
|
||||
if (geb_key > -1) {
|
||||
var sql = "SELECT alg_gebouw_image FROM alg_gebouw WHERE alg_gebouw_key = " + geb_key;
|
||||
@@ -307,7 +331,9 @@ function BLOCK_START_HTML(params)
|
||||
if (params.title && params.title != L("lcl_flexblok")) // Het algemene flexblok wil ik onderdrukken, totdat je een betekenisvolle naam geeft
|
||||
{
|
||||
if (params.safe !== false && params.title && params.title != " ") var safe_title = safe.html(params.title);
|
||||
return "<div"+(params.pId ? " id='"+params.pId+"'" : "")+" data-role='collapsible' data-collapsed-icon='fa fa-chevron-up' data-expanded-icon='fa fa-chevron-down' data-theme='b' data-inset=false data-content-theme='d' data-collapsed='"+(params.collapsed? "true": "false")+"' data-mini='"+(params.mini? "true": "false")+"'><h3>"+(safe_title || params.title)+"</h3>";
|
||||
return "<div"+(params.pId ? " id='"+params.pId+"'" : "")+" data-role='collapsible' data-collapsed-icon='fa fa-chevron-right' data-expanded-icon='fa fa-chevron-down'"
|
||||
+ " data-theme='b' data-inset=false data-content-theme='d' data-collapsed='"+(params.collapsed? "true": "false")+"' data-mini='"+(params.mini? "true": "false")+"'>"
|
||||
+ "<h3>"+(safe_title || params.title)+(params.count ? '<span class="ui-li-count">' + params.count + '</span>' : '')+"</h3>";
|
||||
}
|
||||
else
|
||||
return "<div"+(params.pId ? " id='"+params.pId+"'" : "")+">";
|
||||
@@ -315,7 +341,7 @@ function BLOCK_START_HTML(params)
|
||||
}
|
||||
function BLOCK_END_HTML()
|
||||
{
|
||||
return "</div><!-- data-role=collapsible -->";
|
||||
return "</div>";
|
||||
}
|
||||
function BLOCK_START(params)
|
||||
{
|
||||
@@ -326,27 +352,27 @@ function BLOCK_END()
|
||||
Response.Write(BLOCK_END_HTML());
|
||||
}
|
||||
|
||||
/* Een horizontaal scrollbare container met daarbinnen CARD's */
|
||||
function HORI_SCROLL_START_HTML(params) {
|
||||
/* Een container met daarbinnen CARD's */
|
||||
function CARDS_WRAPPER_START_HTML(params) {
|
||||
params = params || "";
|
||||
var result = "";
|
||||
var result = "<section>";
|
||||
if (params.title) {
|
||||
result += "<h2 class='section-title'>" + params.title + "</h2>";
|
||||
}
|
||||
if (params.moreLink) {
|
||||
result += "<a class='more-link' href='" + params.moreLink + "' data-ajax='false'>" + L("lcl_rs_truncated") + "</a>";
|
||||
}
|
||||
result += "<div class='horizontal-container" + (params.cls ? " " + params.cls : "") + "'>";
|
||||
result += "<div class='" + (params.layout && params.layout === "horizontal" ? "horizontal" : "vertical") + "-card-array" + (params.cls ? " " + params.cls : "") + "'>";
|
||||
return result;
|
||||
}
|
||||
function HORI_SCROLL_END_HTML() {
|
||||
return "</div>";
|
||||
function CARDS_WRAPPER_END_HTML() {
|
||||
return "</div></section>";
|
||||
}
|
||||
function HORI_SCROLL_START(params) {
|
||||
Response.Write(HORI_SCROLL_START_HTML(params));
|
||||
function CARDS_WRAPPER_START(params) {
|
||||
Response.Write(CARDS_WRAPPER_START_HTML(params));
|
||||
}
|
||||
function HORI_SCROLL_END() {
|
||||
Response.Write(HORI_SCROLL_END_HTML());
|
||||
function CARDS_WRAPPER_END() {
|
||||
Response.Write(CARDS_WRAPPER_END_HTML());
|
||||
}
|
||||
|
||||
function CARD_START_HTML(params) {
|
||||
|
||||
@@ -22,26 +22,61 @@ var subject = L("lcl_recent_news");
|
||||
<html>
|
||||
<head>
|
||||
<% FCLTMHeader.Generate({}); %>
|
||||
<script>
|
||||
function swipeLeftAction(elem) {
|
||||
swipeRightAction(elem);
|
||||
}
|
||||
function swipeRightAction(elem) {
|
||||
if (!(elem.dataset.web_user_message_key > 0)) {
|
||||
return;
|
||||
}
|
||||
var data = { messKey: elem.dataset.web_user_message_key };
|
||||
protectRequest.dataToken(data);
|
||||
removeCardAnimated(elem);
|
||||
$.post(
|
||||
"../FAC/fac_user_messages_setReadFlag.asp?messKey=" + data.messKey + "&purge=1",
|
||||
data,
|
||||
() => {
|
||||
[...document.getElementsByClassName("jq-toast-wrap")].forEach(elem => {
|
||||
elem.remove();
|
||||
});
|
||||
$.toast({
|
||||
text: L("lcl_mobile_message_deleted"),
|
||||
icon: "success",
|
||||
bgColor: "var(--fclt-color-green-contrast)",
|
||||
textColor: "var(--fclt-color-green)",
|
||||
position : "top-left",
|
||||
hideAfter: 1500
|
||||
});
|
||||
},
|
||||
"json"
|
||||
);
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<%
|
||||
if (user_key != -1)
|
||||
{
|
||||
var sql = "SELECT m.web_user_mess_dsc"
|
||||
+ ", sn.fac_srtnotificatie_url"
|
||||
+ ", COALESCE(m.web_user_mess_action_params, ' ') web_user_mess_action_params"
|
||||
+ ", m.web_user_mess_action_status"
|
||||
+ ", m.web_user_mess_action_datum"
|
||||
+ ", m.web_user_message_key"
|
||||
+ ", web_user_mess_prioriteit"
|
||||
+ ", sn.fac_srtnotificatie_xmlnode"
|
||||
+ " FROM web_user_messages m, fac_srtnotificatie sn"
|
||||
+ " WHERE m.prs_perslid_key_receiver = " + user_key
|
||||
+ " AND sn.fac_srtnotificatie_key(+)=m.fac_srtnotificatie_key"
|
||||
+ " AND m.web_user_mess_action_datum > SYSDATE - " + 14
|
||||
+ " ORDER BY m.web_user_mess_action_datum DESC, m.web_user_message_key DESC";
|
||||
var sql = "UPDATE web_user_messages"
|
||||
+ " SET web_user_mess_action_status = 2"
|
||||
+ " WHERE prs_perslid_key_receiver = " + user_key
|
||||
+ " AND web_user_mess_action_datum > SYSDATE - " + 14;
|
||||
Oracle.Execute(sql); // We lezen ze -nu-
|
||||
|
||||
sql = "SELECT m.web_user_mess_dsc"
|
||||
+ " , sn.fac_srtnotificatie_url"
|
||||
+ " , COALESCE(m.web_user_mess_action_params, ' ') web_user_mess_action_params"
|
||||
+ " , m.web_user_mess_action_status"
|
||||
+ " , m.web_user_mess_action_datum"
|
||||
+ " , m.web_user_message_key"
|
||||
+ " , web_user_mess_prioriteit"
|
||||
+ " , sn.fac_srtnotificatie_xmlnode"
|
||||
+ " FROM web_user_messages m, fac_srtnotificatie sn"
|
||||
+ " WHERE m.prs_perslid_key_receiver = " + user_key
|
||||
+ " AND sn.fac_srtnotificatie_key(+)=m.fac_srtnotificatie_key"
|
||||
+ " AND m.web_user_mess_action_datum > SYSDATE - " + 14
|
||||
+ " ORDER BY m.web_user_mess_action_datum DESC, m.web_user_message_key DESC";
|
||||
|
||||
function fncolLink(oRs)
|
||||
{
|
||||
@@ -53,23 +88,22 @@ if (user_key != -1)
|
||||
action = action.replace(/\#/g, "&");
|
||||
}
|
||||
return action;
|
||||
};
|
||||
function fnUrgentie(oRs)
|
||||
{
|
||||
var displ = "";
|
||||
switch (oRs("web_user_mess_prioriteit").value)
|
||||
{
|
||||
case 1: displ = "<span id='urg_hoog1'>" + I("fa-exclamation-triangle") + " </span>"; break;
|
||||
case 2: displ = ""; break;
|
||||
case 3: displ = "<span id='urg_laag1'>" + I("fa-arrow-circle-down") + " </span>"; break;
|
||||
}
|
||||
return displ;
|
||||
}
|
||||
}
|
||||
|
||||
function fncolSubHeader(oRs)
|
||||
{
|
||||
return "";
|
||||
};
|
||||
function fnUrgentie(oRs)
|
||||
{
|
||||
var displ = "";
|
||||
switch (oRs("web_user_mess_prioriteit").value) {
|
||||
case 1: displ = I("fa-exclamation-triangle"); break;
|
||||
case 3: displ = I("fa-arrow-circle-down"); break;
|
||||
}
|
||||
return displ;
|
||||
}
|
||||
|
||||
function fncolSubHeader(oRs)
|
||||
{
|
||||
return "";
|
||||
}
|
||||
|
||||
PAGE_START();
|
||||
HEADER({title: subject, back:!qrc, home: !qrc});
|
||||
@@ -77,13 +111,15 @@ if (user_key != -1)
|
||||
|
||||
var rst = new ResultsetTable({sql: sql,
|
||||
keyColumn: "web_user_message_key",
|
||||
layout: "card",
|
||||
linkColumn: fncolLink,
|
||||
iconColumn: fnUrgentie,
|
||||
headerColumn: "web_user_mess_action_datum",
|
||||
detailColumn: "web_user_mess_dsc",
|
||||
asideColumn: fnUrgentie,
|
||||
ID: "messagestable",
|
||||
noSearch: true,
|
||||
showAll: true
|
||||
contentColumn: "web_user_mess_dsc",
|
||||
showAll: true,
|
||||
emptySetString: L("lcl_mobile_no_messages"),
|
||||
swipeable: true,
|
||||
data: ["web_user_message_key"]
|
||||
});
|
||||
|
||||
var cnt = rst.processResultset();
|
||||
|
||||
@@ -98,8 +98,83 @@ $(function() {
|
||||
$(document).on("popupafterclose", ".ui-popup", function() {
|
||||
$(this).remove();
|
||||
});
|
||||
|
||||
let touchstart = { "x": 0, "y": 0 };
|
||||
const SWIPE_THRESHOLD = {
|
||||
"x": window.innerWidth / 2,
|
||||
"y": window.innerHeight / 2
|
||||
}
|
||||
let touchmoveHandler = e => {
|
||||
let translateX = (e.touches[0].screenX - touchstart.x);
|
||||
// let translateY = (e.touches[0].screenY - touchstart.y);
|
||||
if (translateX > 0 && typeof swipeRightAction === "function" ||
|
||||
translateX < 0 && typeof swipeLeftAction === "function") {
|
||||
e.currentTarget.style.transform = "translateX(" + translateX + "px)";
|
||||
e.currentTarget.style.opacity = 1 - Math.abs(translateX) / window.innerWidth;
|
||||
// } else if ( translateY < 0 && typeof swipeUpAction === "function" ||
|
||||
// translateY > 0 && typeof swipeDownAction === "function") {
|
||||
// e.currentTarget.style.transform = "translateY(" + translateX + "px)";
|
||||
// e.currentTarget.style.opacity = 1 - translateY / window.innerHeight;
|
||||
} else {
|
||||
e.currentTarget.style.transform = null;
|
||||
}
|
||||
}
|
||||
let swipeables = document.getElementsByClassName("swipeable");
|
||||
[...swipeables].forEach(element => {
|
||||
element.addEventListener("touchstart", e => {
|
||||
touchstart.x = e.touches[0].screenX;
|
||||
touchstart.y = e.touches[0].screenY;
|
||||
e.currentTarget.addEventListener("touchmove", touchmoveHandler);
|
||||
});
|
||||
element.addEventListener("touchend", e => {
|
||||
if (touchstart.x === 0 && touchstart.y === 0) {
|
||||
return;
|
||||
}
|
||||
let touchend = {
|
||||
"x": e.changedTouches[0].screenX,
|
||||
"y": e.changedTouches[0].screenY
|
||||
};
|
||||
let swipeFunc;
|
||||
// if (touchstart.y - touchend.y > SWIPE_THRESHOLD.y) { // UP
|
||||
// swipeFunc = window["swipeUpAction"];
|
||||
// } else if (touchend.y - touchstart.y > SWIPE_THRESHOLD.y) { // DOWN
|
||||
// swipeFunc = window["swipeDownAction"];
|
||||
// }
|
||||
if (touchstart.x - touchend.x > SWIPE_THRESHOLD.x) { // LEFT
|
||||
swipeFunc = window["swipeLeftAction"];
|
||||
} else if (touchend.x - touchstart.x > SWIPE_THRESHOLD.x) { // RIGHT
|
||||
swipeFunc = window["swipeRightAction"];
|
||||
}
|
||||
if (typeof swipeFunc === "function") {
|
||||
e.currentTarget.removeEventListener("touchmove", touchmoveHandler);
|
||||
swipeFunc(e.currentTarget);
|
||||
}
|
||||
touchstart = { "x": 0, "y": 0 };
|
||||
if (e.currentTarget) {
|
||||
e.currentTarget.style.transform = null;
|
||||
e.currentTarget.style.opacity = null;
|
||||
e.currentTarget.removeEventListener("touchmove", touchmoveHandler);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
function removeCardAnimated(elem) {
|
||||
const elemStyle = window.getComputedStyle(elem);
|
||||
let padding = parseInt(elemStyle.paddingTop) + parseInt(elemStyle.paddingBottom);
|
||||
elem.style.flexBasis = elem.clientHeight - padding + "px";
|
||||
elem.style.visibility = "hidden";
|
||||
while (elem.lastChild) { // Vanilla .empty();
|
||||
elem.removeChild(elem.lastChild);
|
||||
}
|
||||
elem.offsetHeight; // Flushes the CSS changes
|
||||
elem.classList.add("card-removing"); // Sets transition duration
|
||||
elem.addEventListener("transitionend", () => {
|
||||
elem.remove();
|
||||
}, { once: true });
|
||||
elem.classList.add("card-remove"); // Animate object vertically disappearing
|
||||
}
|
||||
|
||||
function McltCallbackAndThen(afterAction) {
|
||||
return function(json, textStatus) {
|
||||
if (json.message) alert(json.message); // Normaal door FcltMgr.closeDetail
|
||||
|
||||
@@ -99,15 +99,15 @@ function portalnews(ploc, pgeb, pshowInt, mode, fac_nieuws_key)
|
||||
return (oRs("fac_nieuws_omschrijving").Value? "<div class='portalnewstext'>" + safe_oms + "</div>" : "");
|
||||
}
|
||||
|
||||
function fnLinkColumn(oRs) {
|
||||
return "portalnews.asp?fac_nieuws_key=" + oRs("fac_nieuws_key").Value;
|
||||
}
|
||||
|
||||
function fnNieuwsTitel (oRs) {
|
||||
var titel = oRs("fac_nieuws_titel").Value || "";
|
||||
if (S("fac_html_strictness") == 1) {
|
||||
titel = safe.html(titel);
|
||||
}
|
||||
var icon = oRs("fac_nieuws_image").Value;
|
||||
if (mode === 0 && icon && icon.match(/^fa-/)) {
|
||||
titel = I(icon + " fa-2x") + titel;
|
||||
}
|
||||
return titel;
|
||||
}
|
||||
|
||||
@@ -115,21 +115,21 @@ function portalnews(ploc, pgeb, pshowInt, mode, fac_nieuws_key)
|
||||
sql: sqln,
|
||||
headerColumn: fnNieuwsTitel,
|
||||
ID: "newstable",
|
||||
layout: "card",
|
||||
iconColumn: "fac_nieuws_image",
|
||||
contentColumn: fnNieuwsOmschrijving,
|
||||
linkColumn: fnLinkColumn,
|
||||
emptySetString: "",
|
||||
noSearch: true,
|
||||
showAll: true
|
||||
};
|
||||
|
||||
if (mode === 1) {
|
||||
params.layout = "horizontal";
|
||||
params.title = L("lcl_mynews");
|
||||
params.moreLink = "portalnews.asp";
|
||||
params.iconColumn = "fac_nieuws_image";
|
||||
params.data = ["fac_nieuws_key"];
|
||||
params.contentColumn = fnNieuwsOmschrijving;
|
||||
params.containerClass = "frontpage-news";
|
||||
} else {
|
||||
params.subheaderColumn = fnNieuwsOmschrijving;
|
||||
params.wrapper = {
|
||||
"layout": "horizontal",
|
||||
"title": L("lcl_mynews"),
|
||||
"moreLink": "portalnews.asp"
|
||||
}
|
||||
}
|
||||
|
||||
var rst = new ResultsetTable(params);
|
||||
|
||||
@@ -26,6 +26,10 @@ function ResultsetTable(params)
|
||||
this.inset = false;
|
||||
this.Counter = {};
|
||||
|
||||
// Card layout params
|
||||
this.wrapper = { "layout": "vertical" };
|
||||
this.extraClass = "";
|
||||
|
||||
var param;
|
||||
// Neem alle meegegeven parameters mee.
|
||||
for (param in params) {
|
||||
@@ -85,8 +89,11 @@ function __rsProcessResultset(processParams)
|
||||
if (this.groupColumn && this.groupSelect == "")
|
||||
{ // we tonen alleen het aantal regels. Laat dan alle complexe processing achterwege
|
||||
ResultsetTable.prototype.makeTableRow = function __rsCountTableRow(oRs, cnt) { return "dummy" };
|
||||
} else if (this.layout === "horizontal") {
|
||||
} else if (this.layout === "card") {
|
||||
ResultsetTable.prototype.makeTableRow = __rsMakeCard;
|
||||
if (this.swipeable) {
|
||||
this.extraClass = this.extraClass + (this.extraClass ? " " : "") + "swipeable";
|
||||
}
|
||||
}
|
||||
|
||||
for (cnt = 0; (cnt < (S("qp_maxrows_mobile")) || this.showAll ) &&
|
||||
@@ -201,14 +208,10 @@ function __rsProcessResultset(processParams)
|
||||
|
||||
if (this.groupSelect == "")
|
||||
html += "</ul>";
|
||||
if (this.layout === "horizontal") {
|
||||
html += HORI_SCROLL_START_HTML({
|
||||
"title": this.title || "",
|
||||
"moreLink": this.moreLink || "",
|
||||
"cls": this.containerClass || ""
|
||||
})
|
||||
if (this.layout === "card") {
|
||||
html += CARDS_WRAPPER_START_HTML(this.wrapper)
|
||||
+ lines.join("")
|
||||
+ HORI_SCROLL_END_HTML();
|
||||
+ CARDS_WRAPPER_END_HTML();
|
||||
} else if (!this.groupColumn) {
|
||||
var html = "<ul data-role='listview' data-theme='c' data-inset='" + (this.inset? "true" : "false") + "' data-divider-theme='b'" + (this.ID? " id='"+this.ID+"'" : "") + " data-icon='fa fa-angle-right'";
|
||||
if (!this.noSearch && cnt > filterCutOff) {
|
||||
@@ -241,36 +244,35 @@ function __rsProcessResultset(processParams)
|
||||
|
||||
function __rsMakeCard(oRs, cnt) {
|
||||
// HIER START EEN NIEUWE REGEL
|
||||
var line = "";
|
||||
|
||||
var data = {};
|
||||
if (this.data) {
|
||||
for (var i in this.data) {
|
||||
data[this.data[i]] = oRs(this.data[i]).Value;
|
||||
}
|
||||
}
|
||||
line += CARD_START_HTML({ data: data });
|
||||
|
||||
var icon = "";
|
||||
var cardClass = this.extraClass;
|
||||
if (this.iconColumn) {
|
||||
var icon = __fnContent(this.iconColumn)(oRs, this.processParams);
|
||||
icon = __fnContent(this.iconColumn)(oRs, this.processParams);
|
||||
if (icon) {
|
||||
if (icon.match(/^<img/)) { // Ik ben al een plaatje :)
|
||||
line += icon;
|
||||
} else if (icon.match(/^fa-/)) {
|
||||
line += I(icon);
|
||||
addedI = true;
|
||||
} else if (icon.match(/^</)) { // safe html, bv een <div> of <i>
|
||||
line += icon;
|
||||
addedI = true;
|
||||
} else {
|
||||
line += '<img loading="lazy" src="' + safe.htmlattr(icon) + '" alt="' + L("lcl_photos") + '">';
|
||||
if (icon.match(/^fa-/)) {
|
||||
icon = I(icon);
|
||||
} else if (!icon.match(/^</)) { // Zal wel een src van een plaatje zijn dan
|
||||
icon = '<img loading="lazy" src="' + safe.htmlattr(icon) + '" alt="' + L("lcl_photos") + '">';
|
||||
}
|
||||
} else {
|
||||
line += '<i class="card-icon-placeholder"></i>';
|
||||
var rand = ~~(Math.random() * 8) + 1;
|
||||
cardClass = cardClass + (cardClass ? " " : "") + "with-icon icon-color-" + rand;
|
||||
}
|
||||
}
|
||||
|
||||
line += "<div class='card-content'>";
|
||||
var line = CARD_START_HTML({ data: data, cls: cardClass });
|
||||
|
||||
line += icon;
|
||||
|
||||
if (this.wrapper.layout === "horizontal") {
|
||||
line += "<div class='card-content'>";
|
||||
}
|
||||
|
||||
line += "<div class='card-title'>";
|
||||
if (this.headerColumn) {
|
||||
@@ -284,7 +286,16 @@ function __rsMakeCard(oRs, cnt) {
|
||||
}
|
||||
line += "</div>";
|
||||
|
||||
line += "</div>";
|
||||
if (this.wrapper.layout === "horizontal") {
|
||||
line += "</div>";
|
||||
}
|
||||
|
||||
if (this.linkColumn) {
|
||||
var lnk = __fnContent(this.linkColumn)(oRs, this.processParams);
|
||||
if (lnk) {
|
||||
line += "<a href='" + safe.htmlattr(lnk) + "' class='card-link' data-ajax='false'></a>";
|
||||
}
|
||||
}
|
||||
|
||||
this.rowNum++;
|
||||
line += CARD_END_HTML();
|
||||
|
||||
@@ -125,32 +125,28 @@ span.maxgridrows {
|
||||
|
||||
.res_optie_eigen div.arrowleft,
|
||||
.res_optie_eigen div.arrowright {
|
||||
border-left-color: #F59D04;
|
||||
border-right-color: #F59D04;
|
||||
border-left-color: var(--aareon-tangerine);
|
||||
border-right-color: var(--aareon-tangerine);
|
||||
}
|
||||
|
||||
/* Tangerine */
|
||||
.res_definitief_eigen div.arrowleft,
|
||||
.res_definitief_eigen div.arrowright {
|
||||
border-left-color: #CC5252;
|
||||
border-right-color: #CC5252;
|
||||
border-left-color: var(--aareon-grapefruit);
|
||||
border-right-color: var(--aareon-grapefruit);
|
||||
}
|
||||
|
||||
/* Grapefruit */
|
||||
.res_optie div.arrowleft,
|
||||
.res_optie div.arrowright {
|
||||
border-left-color: #0FD3BB;
|
||||
border-right-color: #0FD3BB;
|
||||
border-left-color: var(--aareon-ocean-green);
|
||||
border-right-color: var(--aareon-ocean-green);
|
||||
}
|
||||
|
||||
/* Ocean Green */
|
||||
.res_definitief div.arrowleft,
|
||||
.res_definitief div.arrowright {
|
||||
border-left-color: #007764;
|
||||
border-right-color: #007764;
|
||||
border-left-color: var(--aareon-pine-green);
|
||||
border-right-color: var(--aareon-pine-green);
|
||||
}
|
||||
|
||||
/* Pine Green */
|
||||
.res_blok div.arrowleft,
|
||||
.res_blok div.arrowright {
|
||||
border-left-color: rgba(255, 255, 255, 0.6);
|
||||
@@ -168,11 +164,10 @@ span.maxgridrows {
|
||||
/* hex-kleuren met 4 of 8 karakters worden niet in IE11 ondersteund (rgba() wel) */
|
||||
.res_vervallen div.arrowleft,
|
||||
.res_vervallen div.arrowright {
|
||||
border-left-color: #73007E;
|
||||
border-right-color: #73007E;
|
||||
border-left-color: var(--aareon-berry);
|
||||
border-right-color: var(--aareon-berry);
|
||||
}
|
||||
|
||||
/* Berry */
|
||||
.res_nietvrij div.arrowleft,
|
||||
.res_nietvrij div.arrowright {
|
||||
border-left-color: #B1B3B4;
|
||||
@@ -195,21 +190,20 @@ span.maxgridrows {
|
||||
/* Via API (extern_id) gereserveerd */
|
||||
.res_fatal div.arrowleft,
|
||||
.res_fatal div.arrowright {
|
||||
border-left-color: #EC1818;
|
||||
border-right-color: #EC1818;
|
||||
border-left-color: var(--fclt-color-bad);
|
||||
border-right-color: var(--fclt-color-bad);
|
||||
}
|
||||
|
||||
.res_optie_eigen div.arrowleft,
|
||||
.res_optie_eigen div.arrowright {
|
||||
border-left-color: #F59D04;
|
||||
border-right-color: #F59D04;
|
||||
border-left-color: var(--aareon-tangerine);
|
||||
border-right-color: var(--aareon-tangerine);
|
||||
}
|
||||
|
||||
/* Tangerine */
|
||||
.res_definitief_eigen div.arrowleft,
|
||||
.res_definitief_eigen div.arrowright {
|
||||
border-left-color: #CC5252;
|
||||
border-right-color: #CC5252;
|
||||
border-left-color: var(--aareon-grapefruit);
|
||||
border-right-color: var(--aareon-grapefruit);
|
||||
}
|
||||
|
||||
.res_optie_eigen:not(div.overflowleft, div.overflowright),
|
||||
@@ -327,7 +321,7 @@ body.modal .grid {
|
||||
/* Enkele aanpassingen voor planbord inline (voorzieningen subframe bijvoorbeeld) */
|
||||
.card-body .grid {
|
||||
width: 100%;
|
||||
outline: 1px solid rgba(52, 63, 77, 0.2);
|
||||
outline: 1px solid var(--fclt-border-color);
|
||||
}
|
||||
.card-body [id$="-body"].planbordgrid {
|
||||
margin-bottom: -5px;
|
||||
@@ -337,7 +331,7 @@ body.modal .grid {
|
||||
/* sensor-classes */
|
||||
.icongrid { font-size: 1.4em;}
|
||||
.sens-blocked { color: #0b0bae;}
|
||||
.sens-fatal { color: red;}
|
||||
.sens-fatal { color: var(--fclt-color-bad);}
|
||||
.sens-free { color: #45ca45;}
|
||||
.sens-occupied { color: #d33121;}
|
||||
.sens-uncertain { color: #aea8a8;}
|
||||
@@ -436,12 +430,12 @@ div.rrdet {
|
||||
color: var(--textcolor);
|
||||
}
|
||||
div.rc-compact, div.rc {
|
||||
background-color: rgba(52,63,77,0.2); /* urban grey */
|
||||
background-color: var(--fclt-color-grey-25);
|
||||
z-index: 0;
|
||||
}
|
||||
div.labelgrid, div.capaciteitgrid {
|
||||
white-space: normal;
|
||||
background-color: rgba(52,63,77,0.1); /* urban grey */
|
||||
background-color: var(--fclt-color-grey-10);
|
||||
}
|
||||
div.capaciteitgrid {
|
||||
z-index: 1;
|
||||
@@ -527,8 +521,8 @@ div.locatiegrid.collapsed::before, div.insdiscgrid.collapsed::before {
|
||||
}
|
||||
|
||||
#resselector .fatal {
|
||||
background-color: #FFC7CE;
|
||||
color: #9C0006;
|
||||
background-color: var(--fclt-color-bad-contrast);
|
||||
color: var(--fclt-color-bad);
|
||||
}
|
||||
|
||||
#selectedDates{
|
||||
@@ -825,7 +819,7 @@ tr.res_nofit.selected, div.grid div.labelgrid.res_nofit.selected
|
||||
tr.res_nofit td { color: #808080; }
|
||||
tr.res_nofit label,
|
||||
div.grid div.labelgrid.res_nofit label
|
||||
{ color: red; }
|
||||
{ color: var(--fclt-color-bad); }
|
||||
tr.extern td { background-color: #F7F7F7; }
|
||||
|
||||
tr.unselected div.res_current:before {
|
||||
@@ -873,23 +867,24 @@ tr div.res_fatal { background-color: #ccc;
|
||||
z-index: 1; }
|
||||
|
||||
span.res_fatal,
|
||||
input[type=text].button.required.res_fatal
|
||||
{ background-color: #F88 !important;
|
||||
border: 1px solid #D44444;
|
||||
input[type=text].button.required.res_fatal {
|
||||
background-color: var(--fclt-color-bad-contrast)!important;
|
||||
border: 1px solid var(--fclt-color-bad);
|
||||
background-repeat: no-repeat;
|
||||
background-image:url(../pictures/resdirty.png)!important;
|
||||
background-image: url(../pictures/resdirty.png)!important;
|
||||
padding-left : 20px;
|
||||
z-index: 1; }
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#timetip {position:absolute;border:1px solid #666;background-color:#fff;padding:2px;z-index:999;display:none;}
|
||||
|
||||
.res_optie_eigen { background-color: #F59D04; color: #fff; } /* Tangerine */
|
||||
.res_definitief_eigen { background-color: #CC5252; color: #fff; } /* Grapefruit */
|
||||
.res_optie { background-color: #0FD3BB; color: #333; } /* Ocean Green */
|
||||
.res_definitief { background-color: #007764; color: #fff; } /* Pine Green */
|
||||
.res_optie_eigen { background-color: var(--aareon-tangerine); color: #fff; }
|
||||
.res_definitief_eigen { background-color: var(--aareon-grapefruit); color: #fff; }
|
||||
.res_optie { background-color: var(--aareon-ocean-green); color: #333; }
|
||||
.res_definitief { background-color: var(--aareon-pine-green); color: #fff; }
|
||||
.res_blok { background-color: rgba(255, 255, 255, 0.6); color: #333;} /* bijna als planbordgrid-achtergrond*/
|
||||
.res_lunchblok { background-color: #fffb;} /* bijna als planbordgrid-achtergrond */ /* hex-kleuren met 4 of 8 karakters worden niet in IE11 ondersteund (rgba() wel) */
|
||||
.res_vervallen { background-color: #73007E; color: #fff;} /* Berry */
|
||||
.res_vervallen { background-color: var(--aareon-berry); color: #fff;}
|
||||
.res_afgemeld { background-color: #323033; color: #ddd;} /* Antraciet */
|
||||
.res_nietvrij { background-color: #B1B3B4; color: #000; } /* Niet beschikbaar: oranje LICHTGROEN */
|
||||
.res_cleaning { border-left-style: solid;
|
||||
@@ -899,8 +894,8 @@ input[type=text].button.required.res_fatal
|
||||
}
|
||||
.res_extern { background-color: #4e85db; color: #fff;} /* Via API (extern_id) gereserveerd */
|
||||
.res_fatal {
|
||||
background-color: #EC1818;
|
||||
color: #fff;
|
||||
background-color: var(--fclt-color-bad);
|
||||
color: var(--fclt-color-bad-contrast);
|
||||
}
|
||||
|
||||
@media print
|
||||
|
||||
@@ -78,10 +78,10 @@ input.fldshort,
|
||||
input#autofilter
|
||||
{
|
||||
background-color: var(--inputbackgroundcolor);
|
||||
border-left: 2px solid var(--fclt-color-grey-10);
|
||||
border-left: 2px solid var(--fclt-border-color);
|
||||
}
|
||||
input#autofilter {
|
||||
border: 1px solid var(--fclt-color-grey-40);
|
||||
border: 1px solid var(--fclt-border-color);
|
||||
}
|
||||
input.suggest {
|
||||
padding-right: 20px; /* Voor het suggest-icoontje */
|
||||
@@ -110,7 +110,7 @@ textarea.fld
|
||||
} */
|
||||
|
||||
.leftcontainer { /* te elimeren */
|
||||
border: 1px solid red;
|
||||
border: 1px solid var(--fclt-color-bad);
|
||||
}
|
||||
|
||||
|
||||
@@ -652,14 +652,14 @@ button#loggingon {
|
||||
font-size:10px;
|
||||
}
|
||||
#badschema {
|
||||
background-color: red;
|
||||
background-color: var(--fclt-color-bad);
|
||||
font-size: 2.0em;
|
||||
z-index: 9999;
|
||||
left: 200px;
|
||||
position: absolute;
|
||||
}
|
||||
#badobjects {
|
||||
background-color: red;
|
||||
background-color: var(--fclt-color-bad);
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
z-index: 9999;
|
||||
@@ -840,7 +840,7 @@ div.seperator {
|
||||
color: var(--textcolor);
|
||||
font-family: var(--fontfamily_titles);
|
||||
text-align: center;
|
||||
border-bottom: 1px solid rgba(52, 63, 77, 0.2);
|
||||
border-bottom: 1px solid var(--fclt-border-color);
|
||||
background: linear-gradient(to right, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 1) 35%, rgba(255, 255, 255, 1) 65%, rgba(255, 255, 255, 0) 70%);
|
||||
}
|
||||
|
||||
@@ -890,7 +890,7 @@ div.iconmenu,
|
||||
}
|
||||
div.besicmenu div.iconitem,
|
||||
div.mldicmenu div.iconitem {
|
||||
border: 1px solid rgba(52, 63, 77, 0.2);
|
||||
border: 1px solid var(--fclt-border-color);
|
||||
}
|
||||
|
||||
:is(.mld-menu-col, .bes-menu-col) .row:hover .iconitem:not(:hover),
|
||||
@@ -1353,7 +1353,7 @@ div.ias {
|
||||
}
|
||||
|
||||
th.multiselect:hover input[type='checkbox']/*, td:hover input[type='checkbox'].multiselect alext*/ {
|
||||
outline: 1px solid red;
|
||||
outline: 1px solid var(--fclt-color-bad);
|
||||
}
|
||||
th.multiselect, td.multiselect {
|
||||
width:3em;
|
||||
@@ -1410,12 +1410,12 @@ td.listid
|
||||
color: var(--listsubjectcolor);
|
||||
}
|
||||
.ac, .ac2, .ac128 {
|
||||
color: #9C0006;
|
||||
color: var(--fclt-color-bad);
|
||||
}
|
||||
.opdrsubstatus,
|
||||
.mldshowactie {
|
||||
font-weight: bold;
|
||||
background-color: #9C0006;
|
||||
background-color: var(--fclt-color-bad);
|
||||
color: white;
|
||||
padding: 3px 5px;
|
||||
border-radius: 5px;
|
||||
@@ -1593,7 +1593,7 @@ div.widget {
|
||||
padding: 1px 1px 1px 2px;
|
||||
}
|
||||
.expiredcredentials {
|
||||
background-color: red;
|
||||
background-color: var(--fclt-color-bad);
|
||||
color: black;
|
||||
padding: 1px 1px 1px 2px;
|
||||
}
|
||||
@@ -1607,7 +1607,7 @@ div.widget {
|
||||
justify-content: center;
|
||||
}
|
||||
.recentlychanged .fa-plus-square-o {
|
||||
color:red;
|
||||
color:var(--fclt-color-bad);
|
||||
}
|
||||
.recentlychanged #buttons {
|
||||
position: absolute;
|
||||
@@ -2150,7 +2150,7 @@ span.subtab-badge {
|
||||
margin-left: 2px;
|
||||
}
|
||||
.subtab-badge-missing {
|
||||
color: red;
|
||||
color: var(--fclt-color-bad);
|
||||
}
|
||||
.subtabs li.ui-tab:not(.ui-state-active):hover a {
|
||||
color: var(--buttonhoverbackgroundcolor); /* dat is natuurlijk niet altijd goed */
|
||||
@@ -2286,8 +2286,8 @@ tr.bessrtgroepname td {
|
||||
rgba(0, 0, 0, 0.03),
|
||||
rgba(0, 0, 0, 0.03));
|
||||
border-top-left-radius: 0.3em;
|
||||
border-left: 2px solid var(--fclt-color-grey-25);
|
||||
border-top: 1px solid var(--fclt-color-grey-25);
|
||||
border-left: 2px solid var(--fclt-border-color);
|
||||
border-top: 1px solid var(--fclt-border-color);
|
||||
}
|
||||
.text-styles.closed {
|
||||
border: 0;
|
||||
@@ -2488,7 +2488,7 @@ hr.nieuwsep {
|
||||
color: var(--linkhovercolor);
|
||||
}
|
||||
|
||||
.newstextFreshRed td {font-weight: bold; color: red;}
|
||||
.newstextFreshRed td {font-weight: bold; color: var(--fclt-color-bad);}
|
||||
.newstextFresh td {font-weight: normal; color: var(--textcolor);}
|
||||
.newstext td{
|
||||
color: var(--textcolor);
|
||||
@@ -2586,7 +2586,7 @@ table.fill {
|
||||
|
||||
.anointotext1 {
|
||||
font-weight: bold;
|
||||
color: red;
|
||||
color: var(--fclt-color-bad);
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -3199,7 +3199,7 @@ span:is(.starticon, .endicon) {
|
||||
}
|
||||
|
||||
.exceeded {
|
||||
color: red;
|
||||
color: var(--fclt-color-bad);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
@@ -3401,15 +3401,15 @@ div.mldhandlinghead {
|
||||
|
||||
/* Voor fin facturen */
|
||||
.withinmargin td {
|
||||
background-color: rgb(198, 239, 206, 1);
|
||||
color: #006100;
|
||||
background-color: var(--fclt-color-good-contrast);
|
||||
color: var(--fclt-color-good);
|
||||
}
|
||||
.outsidemargin td {
|
||||
background-color: rgb(255, 199, 207);
|
||||
color: #9C0006;
|
||||
background-color: var(--fclt-color-bad-contrast);
|
||||
color: var(--fclt-color-bad);
|
||||
}
|
||||
tr.rejected td {
|
||||
color: red;
|
||||
color: var(--fclt-color-bad);
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
@@ -3468,7 +3468,7 @@ tr.rejected td {
|
||||
}
|
||||
|
||||
|
||||
#urg_kritiek1 {color: red;}
|
||||
#urg_kritiek1 {color: var(--fclt-color-bad);}
|
||||
/* flexkenmerken voor alle modules */
|
||||
#flextable {
|
||||
width: 100%;
|
||||
@@ -3515,7 +3515,7 @@ span.rating {
|
||||
color: gold;
|
||||
}
|
||||
span.rating:hover i { /* zoals de suggestklikker */
|
||||
color: red;
|
||||
color: var(--fclt-color-bad);
|
||||
}
|
||||
.prodsrchmess {
|
||||
margin: 20px;
|
||||
@@ -3546,12 +3546,12 @@ span.expired2 {
|
||||
}
|
||||
/* for colored rows and others*/ /* PF: ns even aanzien hoe de MS-kleuren uitpakken */
|
||||
.cntrappel td, .expired1 td {
|
||||
background: linear-gradient(to top, rgb(255, 254, 156), rgb(255, 254, 156));
|
||||
color: #9C6500;
|
||||
background: linear-gradient(to top, var(--fclt-color-neutral-contrast), var(--fclt-color-neutral-contrast));
|
||||
color: var(--fclt-color-neutral);
|
||||
}
|
||||
.cntopzeg td, .expired2 td, .mjbexpired td {
|
||||
background: linear-gradient(to top, rgb(255, 199, 207), rgb(255, 199, 207)); /*#FFC7CE*/
|
||||
color: #9C0006;
|
||||
background: linear-gradient(to top, var(--fclt-color-bad-contrast), var(--fclt-color-bad-contrast));
|
||||
color: var(--fclt-color-bad);
|
||||
}
|
||||
.expired3 td {
|
||||
background-color: #F1DCF6;
|
||||
@@ -3705,7 +3705,7 @@ div.res_remark {
|
||||
|
||||
#rsEndText {
|
||||
color: white;
|
||||
background-color: #9C0006;
|
||||
background-color: var(--fclt-color-bad);
|
||||
font-weight: bold;
|
||||
padding: 1px 8px 2px 8px;
|
||||
margin: 0;
|
||||
@@ -3719,7 +3719,7 @@ div.res_remark {
|
||||
|
||||
#statusline {
|
||||
background-color: yellow;
|
||||
color: red;
|
||||
color: var(--fclt-color-bad);
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
padding: 2px 4px 2px 4px;
|
||||
@@ -3814,7 +3814,7 @@ textarea.bad {
|
||||
|
||||
div.bad {
|
||||
font-weight: bold;
|
||||
color: red;
|
||||
color: var(--fclt-color-bad);
|
||||
}
|
||||
.subtab-missing
|
||||
|
||||
@@ -3904,9 +3904,9 @@ div#statusboxes {
|
||||
}
|
||||
|
||||
.bezPoolBinnen td {
|
||||
color: #006100;
|
||||
background-color: #C6EFCE;
|
||||
font-weight:bold;
|
||||
color: var(--fclt-color-good);
|
||||
background-color: var(--fclt-color-good-contrast);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bezPoolLoketself td {
|
||||
@@ -3930,14 +3930,23 @@ div#statusboxes {
|
||||
position: fixed;
|
||||
}
|
||||
.objphoto {
|
||||
background-color: #fff;
|
||||
border: 1px solid #eee;
|
||||
padding: 5px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #eee;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
max-width: 60px;
|
||||
vertical-align:top;
|
||||
box-shadow: 3px 3px 3px #eee;
|
||||
}
|
||||
.sensoralert {
|
||||
font-size: 1.4em;
|
||||
color: #d33121;
|
||||
}
|
||||
.sensorok {
|
||||
font-size: 1.4em;
|
||||
color: #45ca45;
|
||||
}
|
||||
|
||||
#insphoto {
|
||||
float: right;
|
||||
margin-right: 8px;
|
||||
@@ -4070,6 +4079,11 @@ input.button {
|
||||
}
|
||||
|
||||
/* kennisbank cards met post-it flavour */
|
||||
.card-body {
|
||||
border-radius: inherit;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
#mldFaq,
|
||||
#mldFaqedit {
|
||||
background-color: #F7CE5F;
|
||||
@@ -4235,14 +4249,10 @@ input[type=color].unsupported + .default-clickable-icon {
|
||||
.fldmldurentotal {
|
||||
width: 4em !important;
|
||||
}
|
||||
#fldmldurentotal.afwijk {
|
||||
color: red;
|
||||
}
|
||||
.fldtotalbtw.afwijk {
|
||||
color: red;
|
||||
}
|
||||
#fldmldurentotal.afwijk,
|
||||
.fldtotalbtw.afwijk,
|
||||
.fldexturl {
|
||||
color: red;
|
||||
color: var(--fclt-color-bad);
|
||||
}
|
||||
.fldfacrefresh {
|
||||
font-size: 1.4em;
|
||||
@@ -4445,19 +4455,19 @@ label.expression.flexexpr, .expression.flexexpr {
|
||||
}
|
||||
|
||||
span.besprijsup {
|
||||
color:red;
|
||||
color: var(--fclt-color-bad);
|
||||
}
|
||||
span.besprijsdown {
|
||||
color:green;
|
||||
color: var(--fclt-color-good);
|
||||
}
|
||||
|
||||
tr.unauthorized {
|
||||
background-color:#ddd;
|
||||
color: red;
|
||||
color: var(--fclt-color-bad);
|
||||
}
|
||||
|
||||
#plaatsselect {
|
||||
border: 0px green solid;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -5289,7 +5299,7 @@ td.bessrtdeelfoto {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.alg_deleted, .cnt_deleted, .prs_deleted, .res_deleted, .cnt_inactive, .ins_deleted {
|
||||
background-color: red;
|
||||
background-color: var(--fclt-color-bad);
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
@@ -5298,7 +5308,7 @@ td.bessrtdeelfoto {
|
||||
font-variant: small-caps;
|
||||
}
|
||||
.outofbounds {
|
||||
color: red;
|
||||
color: var(--fclt-color-bad);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@@ -5308,11 +5318,11 @@ input[readonly].activeinterval,
|
||||
input.notapproved,
|
||||
span.notapproved {
|
||||
font-weight: bold;
|
||||
color: red;
|
||||
color: var(--fclt-color-bad);
|
||||
}
|
||||
|
||||
.fatal {
|
||||
background-color: red;
|
||||
background-color: var(--fclt-color-bad);
|
||||
color: yellow;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
@@ -5321,18 +5331,18 @@ div.fatal {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
tr.res_fatal td { background-color: #F88 !important; }
|
||||
tr.res_fatal td { background-color: var(--fclt-color-bad-contrast)!important; }
|
||||
|
||||
tr.res_fatal td:before {
|
||||
content: "\f00d";
|
||||
font-family: "Font Awesome 6 Pro";
|
||||
font-weight: 400;
|
||||
color: rgba(183, 59, 46, 1);
|
||||
color: var(--fclt-color-bad);
|
||||
font-size: 1.25em;
|
||||
white-space: nowrap;
|
||||
padding: 0px 3px 0px 1px;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
tr.resactive td {
|
||||
background-color: #444444;
|
||||
@@ -5380,7 +5390,7 @@ tr.res_fatal td.multiselect:before, tr.res_fatal td.hambCont:before, tr.res_fata
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
tr.listfatal td {
|
||||
background-color: red;
|
||||
background-color: var(--fclt-color-bad);
|
||||
color: yellow;
|
||||
font-weight: bold;
|
||||
}
|
||||
@@ -5390,7 +5400,7 @@ tr.listfatal.updated td {
|
||||
.noshow, #fldnoshow {
|
||||
color: yellow;
|
||||
font-weight: bold;
|
||||
background-color: red;
|
||||
background-color: var(--fclt-color-bad);
|
||||
}
|
||||
.rsSummary {
|
||||
float: left;
|
||||
@@ -5525,7 +5535,7 @@ td.selectable {
|
||||
}
|
||||
.fglock {
|
||||
cursor: pointer;
|
||||
color: red; /* styling todo */
|
||||
color: var(--fclt-color-bad);
|
||||
float: left;
|
||||
margin-left: -0.75em;
|
||||
padding: 0.5em 1em 0.5em 0;
|
||||
@@ -5537,7 +5547,7 @@ td.selectable {
|
||||
padding: 1px 4px;
|
||||
}
|
||||
.draggable {
|
||||
color: red;
|
||||
color: var(--fclt-color-bad);
|
||||
text-decoration: none !important;
|
||||
font-weight: bold;
|
||||
cursor: grab !important;
|
||||
@@ -5545,10 +5555,10 @@ td.selectable {
|
||||
.drag {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
color: red;
|
||||
color: var(--fclt-color-bad);
|
||||
}
|
||||
.dragging {
|
||||
color: red;
|
||||
color: var(--fclt-color-bad);
|
||||
font-weight: bold;
|
||||
cursor: move;
|
||||
padding: 0 4px;
|
||||
@@ -5717,7 +5727,7 @@ td.selectable {
|
||||
opacity: 0.7;
|
||||
}
|
||||
.area_diff {
|
||||
color: red;
|
||||
color: var(--fclt-color-bad);
|
||||
}
|
||||
|
||||
label > span.facmgtmultilang::before,
|
||||
@@ -6301,8 +6311,8 @@ td.mjbexecute {
|
||||
}
|
||||
|
||||
td.mjbcompleted {
|
||||
background-color: rgba(198, 239, 206, 1);
|
||||
color: #006100;
|
||||
background-color: var(--fclt-color-good-contrast);
|
||||
color: var(--fclt-color-good);
|
||||
}
|
||||
|
||||
td.mjbrejected {
|
||||
@@ -7295,7 +7305,7 @@ label[data-toggle-type] + input[type=checkbox] {
|
||||
============= */
|
||||
|
||||
.note-date-wrapper {
|
||||
border-top: 1px solid var(--fclt-color-grey-25);
|
||||
border-top: 1px solid var(--fclt-border-color);
|
||||
margin: 0.75em 2%;
|
||||
}
|
||||
|
||||
@@ -7480,12 +7490,12 @@ label[data-toggle-type] + input[type=checkbox] {
|
||||
}
|
||||
|
||||
/* Dropdown-knop/icoon */
|
||||
.note-button-more {
|
||||
:is([class$=-button-more], [class*=-button-more ]) {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Dit element zorgt ervoor dat je met een klik op de achtergrond het dropdownmenu dichtklapt */
|
||||
.note-button-more.open::after {
|
||||
:is([class$=-button-more], [class*=-button-more ]).open::after {
|
||||
content: "";
|
||||
z-index: 11;
|
||||
position: fixed;
|
||||
@@ -7497,13 +7507,13 @@ label[data-toggle-type] + input[type=checkbox] {
|
||||
}
|
||||
|
||||
/* Het actiemenu bij individuele notities (alleen als meer dan 1 actie mogelijk is) */
|
||||
.note-actions-menu {
|
||||
[class$=-action-menu] {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
min-width: 200px;
|
||||
border-radius: 8px;
|
||||
border-radius: var(--fclt-border-radius);
|
||||
padding: .8em 0;
|
||||
background-color: var(--notesbackgroundcolor);
|
||||
background-image: linear-gradient(
|
||||
@@ -7514,22 +7524,22 @@ label[data-toggle-type] + input[type=checkbox] {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.note-button-more.open > .note-actions-menu {
|
||||
:is([class$=-button-more], [class*=-button-more ]).open > [class$=-action-menu] {
|
||||
z-index: 12;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.note-actions-menu > [class^=note-button-] {
|
||||
[class$=-action-menu] > [class*=-button-] {
|
||||
z-index: 13;
|
||||
line-height: 2.8em;
|
||||
padding: 0 0.75em;
|
||||
}
|
||||
|
||||
.note-actions-menu > [class^=note-button-]:hover {
|
||||
[class$=-action-menu] > [class*=-button-]:hover {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.note-actions-menu > [class^=note-button-] > i {
|
||||
[class$=-action-menu] > [class*=-button-] > i {
|
||||
margin-right: 0.5em;
|
||||
color: var(--notesbackgroundcolor);
|
||||
}
|
||||
@@ -7670,14 +7680,14 @@ label[data-toggle-type] + input[type=checkbox] {
|
||||
.resizing-col-wrapper > .widget-col,
|
||||
.widget-col-wrapper > .widget-col,
|
||||
.empty-col-wrapper > .empty-col {
|
||||
border: 3.5px solid rgba(52, 63, 77, 0.25);
|
||||
border: 3.5px solid var(--fclt-color-grey-25);
|
||||
margin: 5px;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.widget-col-wrapper:not(.resizing-col-wrapper, .ui-draggable-dragging):hover > .widget-col,
|
||||
.empty-col-wrapper:not(.resizing-col-wrapper ~ .empty-col-wrapper):hover > .empty-col {
|
||||
border-color: rgba(52, 63, 77, 0.5);
|
||||
border-color: var(--fclt-color-grey-40);
|
||||
}
|
||||
|
||||
.empty-col-wrapper > .empty-col {
|
||||
@@ -8031,10 +8041,10 @@ li[inmore]:not([inmore="0"]) {
|
||||
/* Firefox */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(52, 63, 77, 0.2) rgba(0, 0, 0, 0);
|
||||
scrollbar-color: var(--fclt-color-grey-25) rgba(0, 0, 0, 0);
|
||||
}
|
||||
*:hover {
|
||||
scrollbar-color: rgba(52, 63, 77, 0.3) rgba(0, 0, 0, 0);
|
||||
scrollbar-color: var(--fclt-color-grey-40) rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
/* De rest (excl IE11) */
|
||||
@@ -8045,7 +8055,7 @@ li[inmore]:not([inmore="0"]) {
|
||||
|
||||
/* Het beweegbare gedeelte vd scrollbalk */
|
||||
*:not(textarea)::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(52, 63, 77, 0.2);
|
||||
background-color: var(--fclt-color-grey-25);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
@@ -8055,7 +8065,7 @@ body::-webkit-scrollbar-thumb:horizontal { border-radius: 4px/50%; }
|
||||
|
||||
*:not(textarea)::-webkit-scrollbar-thumb:hover,
|
||||
*:not(textarea):hover::-webkit-scrollbar-thumb {
|
||||
background-color: rgba(52, 63, 77, 0.3);
|
||||
background-color: var(--fclt-color-grey-40);
|
||||
}
|
||||
|
||||
/* De balk zelf */
|
||||
|
||||
@@ -421,7 +421,7 @@ notes =
|
||||
}
|
||||
else if (actions.length > 1)
|
||||
{
|
||||
var ddMenu = "<div class='note-actions-menu'>";
|
||||
var ddMenu = "<div class='note-action-menu'>";
|
||||
for (x in actions)
|
||||
{
|
||||
var action = actions[x];
|
||||
|
||||
@@ -49,6 +49,14 @@
|
||||
--fclt-color-grey-25: rgba(var(--aareon-rgb-urban-grey), 25%);
|
||||
--fclt-color-grey-40: rgba(var(--aareon-rgb-urban-grey), 40%);
|
||||
|
||||
/* General */
|
||||
--fclt-color-bad: rgb(156, 0, 6);
|
||||
--fclt-color-bad-contrast: rgb(255, 199, 206);
|
||||
--fclt-color-good: rgb(0, 97, 0);
|
||||
--fclt-color-good-contrast: rgb(198, 239, 206);
|
||||
--fclt-color-neutral: rgb(156, 101, 0);
|
||||
--fclt-color-neutral-contrast: rgb(255, 235, 156);
|
||||
|
||||
/* BORDERS */
|
||||
--fclt-border-radius: .25rem;
|
||||
--fclt-border-radius-lg: var(--bs-border-radius, .375rem);
|
||||
|
||||
Reference in New Issue
Block a user