AREO#83998 Savepoint, oa; styling, routing, handtekening, otp, mobile-input-type-date, profielpagina, jquery-lijst-filter-panels -> bootstrap offcanvas, lijst-multiactions/bulkables

svn path=/Website/trunk/; revision=69323
2025-06-05 22:18:34 +00:00
parent dbbc8e8ad8
commit 4de23fa646
20 changed files with 347 additions and 379 deletions
--- a/APPL/AUT/login.asp
+++ b/APPL/AUT/login.asp
@@ -270,7 +270,7 @@ if (S("login_remember_days") > 0)
 %>
 <%IFACE.FORM_END();%>
 </form>
-<form name="ifl_f_pm" action="<%=rooturl%>/appl/aut/pass2mail_save.asp" method="post" onsubmit="do_submit();return false;" autocomplete="off" hidden>
+<form name="ifl_f_pm" action="<%=rooturl%>/appl/aut/pass2mail_save.asp" method="post" onsubmit="do_submit();return false;" autocomplete="off" style="display: none;">
      <div class="form-group passtomail">
        <input class="form-control required" type="text" maxlength="200" id="vismail" name="vis_mail" placeholder="<%=L("lcl_noti_sendbymail")%>">
      </div>
@@ -280,7 +280,7 @@ if (S("login_remember_days") > 0)
    CreateButtons(buttons, { entersubmit: true, vertical: true, showIcons: true, display: "flex" });
 %>
 </form>
-<form name="ifl_f_tm" action="<%=rooturl%>/appl/aut/pass2mail_save.asp" method="post" onsubmit="do_submit();return false;" autocomplete="off" hidden>
+<form name="ifl_f_tm" action="<%=rooturl%>/appl/aut/pass2mail_save.asp" method="post" onsubmit="do_submit();return false;" autocomplete="off" style="display: none;">
      <div class="form-group tokentomail">
        <input class="form-control required" type="text" maxlength="200" id="vistoken" name="vis_token" placeholder="<%=L("lcl_token2email")%>">
      </div>
@@ -290,7 +290,7 @@ if (S("login_remember_days") > 0)
    CreateButtons(buttons, { entersubmit: true, vertical: true, showIcons: true, display: "flex" });
 %>
 </form>
-<form name="ifl_f_sr" action="<%=rooturl%>/appl/prs/self_register_save.asp?" method="post" onsubmit="do_submit();return false;" autocomplete="off" hidden>
+<form name="ifl_f_sr" action="<%=rooturl%>/appl/prs/self_register_save.asp?" method="post" onsubmit="do_submit();return false;" autocomplete="off" style="display: none;">

      <div class="form-group selfregister">
        <input class="form-control required visselfregister" type="text" maxlength="200" autocomplete="off" name="prs_naam" placeholder="<%=L("lcl_prs_person_name")%>">
@@ -306,7 +306,7 @@ if (S("login_remember_days") > 0)
    CreateButtons(buttons, { entersubmit: true, vertical: true, showIcons: true, display: "flex" });
 %>
 </form>
-<form name="ifl_f_otp" action="<%=rooturl%>/appl/aut/login_save.asp" method="post" onsubmit="do_submit_otp();return false;" autocomplete="off" hidden>
+<form name="ifl_f_otp" action="<%=rooturl%>/appl/aut/login_save.asp" method="post" onsubmit="do_submit_otp();return false;" autocomplete="off" style="display: none;">
    <div class="form-group otp">
      <label for="otpcode"></label>
      <input class="form-control" type="text" maxlength="6" id="otpcode" name="otpcode">
--- a/APPL/Localscripts/signature/signature-pad.css
+++ b/APPL/Localscripts/signature/signature-pad.css
@@ -4,6 +4,18 @@
  box-sizing: border-box;
 }

+#page-signature {
+  -webkit-user-select: none;
+  user-select: none;
+
+  height: 100vh;
+
+  :is(.fclt-content,
+          #form-signature,
+          canvas) {
+    height: 100%;
+  }
+
  body {
    display: -webkit-box;
    display: -ms-flexbox;
@@ -38,13 +50,11 @@ body {
    font-size: 10px;
    width: 100%;
    height: 100%;
-  max-width: 700px;
-  max-height: 460px;
    border: 1px solid #e8e8e8;
    background-color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
    border-radius: 4px;
-  padding: 16px;
+    padding: 0;
  }

  .signature-pad::before,
@@ -86,14 +96,16 @@ canvas {
    top: 0;
    width: 100%;
    height: 100%;
+    max-height: 100%;
+    max-width: 100%;
    border-radius: 4px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
  }

  .signature-pad--footer {
+    font-size: 1rem;
    color: #C3C3C3;
    text-align: center;
-  font-size: 1.2em;
    margin-top: 8px;
  }

@@ -117,3 +129,4 @@ canvas {
      height: 90px;
    }
  }
+}
--- a/APPL/MSG/msg.inc
+++ b/APPL/MSG/msg.inc
@@ -143,7 +143,7 @@ msg = {
        if (msg_info.category_key) {
          carddata.category = msg_info.category_key;
        }
-        CARD_START({ "cls": "msg" + (mode == "show" ? "" : " preview"), "data": carddata });
+        CARD_START({ "cls": "msg" + (mode == "show" ? "" : " preview") + (mode == "list" ? " tappable" : ""), "data": carddata });
        var author = prs.prs_perslid(msg_info.author_key, { withPhoto: true });
 %>      <div class="msg-card-header">
            <span class="msg-info">
@@ -165,7 +165,7 @@ msg = {
            </div>
 <%        } %>
        </div>
-        <div class="card-content<%=(mode == "list" ? " tappable" : "")%>">
+        <div class="card-content">
            <div class="card-title"><%=safe.html(msg_info.msg_subject)%></div>
            <div class="card-descr"><%=safe.fclthtml(msg_info.msg_omschrijving, { "file_params": { "module": "MSG", "key": msg_key }})%></div>
        </div>
--- a/APPL/PDA/BijlagenSignature.asp
+++ b/APPL/PDA/BijlagenSignature.asp
@@ -71,7 +71,7 @@ if (params.extFilter != "xxx")
        }
        function sig_cancel()
        {
-            window.history.back();
+            mobile.changePage();
        }

        function uploadDone(json)
@@ -84,7 +84,7 @@ if (params.extFilter != "xxx")
            // Sla de naam op in het hidden field met het name attribuut zodat we de naam ook in de kenmerk-tabel opslaan
            $("[name=" + btn.id + "]").val(json.safefilename || "");

-            var $img = $signatureButton.siblings("img.kenmerk").attr("src", json.fullPath || "");
+            $("#" + $signatureButton.attr("aria-controls")).attr("src", json.fullPath || "");

            if (save_url) {
                $.post(save_url, { flexVal: json.safefilename || "" }); // DIRECT opslaan in de database
@@ -95,7 +95,7 @@ if (params.extFilter != "xxx")
                                fullPath: json.fullPath || ""
                              };
            window.return_data = return_data;
-            window.history.back();
+            mobile.changePage();
        }

        function sig_init()
@@ -131,7 +131,7 @@ if (params.extFilter != "xxx")
        </div>
        <div class="signature-pad--footer">
 <%
-    CONTROLGROUP_START({ horizontal: true });
+    CONTROLGROUP_START();
        BUTTON(L("lcl_filedelete"), { click: "sig_clear()",   icon: "fa-trash-alt" });
        BUTTON(L("lcl_submit"),     { click: "sig_submit()",  icon: "fa-fclt-save" });
        BUTTON(L("lcl_cancel"),     { click: "sig_cancel()",  icon: "fa-fclt-cancel" });
--- a/APPL/PDA/Facilitor.asp
+++ b/APPL/PDA/Facilitor.asp
@@ -68,10 +68,8 @@ var thisUser = prs.prs_perslid(user_key, { withPhoto: true });

    portalnews(user.alg_locatie_key({withcurrent: true}), user.alg_gebouw_key({withcurrent: true}), 1, 1);

-    CARDS_WRAPPER_START({ "layout": "horizontal" });
    fac_list(0);
    fac_list(1);
-    CARDS_WRAPPER_END();

    CONTENT_END();
    FOOTER({ mswitch: true, banner: true, nousername: true, thisuser: thisUser });
--- a/APPL/PDA/attachments.js
+++ b/APPL/PDA/attachments.js
@@ -29,7 +29,7 @@ function addFile(inputEl, file, eagerUpload) {
      );
    }
    fileSpan.append(
-        $('<input>', { type: 'text', 'class': 'icon icon-attachment filename readonly', name: param +'[' + attachmentId + '][filename]', readonly: 'readonly'} ).val(file.name),
+        $('<input>', { type: 'text', 'class': 'icon icon-attachment filename readonly form-control-plaintext', name: param +'[' + attachmentId + '][filename]', readonly: 'readonly'} ).val(file.name),
        $('<input>', { type: 'hidden', 'class': 'token', name: param + '[' + attachmentId + '][token]'} )
        /* Gelijk een Delete knop invoegen is wat te complex */
    ).appendTo(attachmentsFields);
--- a/APPL/PDA/berichten.asp
+++ b/APPL/PDA/berichten.asp
@@ -103,6 +103,7 @@ var authparams = user.checkAutorisation("WEB_MSGUSE");
  </head>
  <body class="body-msg">
 <%
+PAGE_START();
  HEADER({ title: L("lcl_msg_community_title") });
  shared.registeraction("community", { daily: -1 }); // Registreer mijn laatste bezoek
  CONTENT_START();
@@ -138,6 +139,7 @@ var authparams = user.checkAutorisation("WEB_MSGUSE");
 %>    <a href="<%=rooturl + "/appl/pda/bericht.asp?msg_key=-1"%>" class="primary-action-button link-fixed-bottom-right" data-ajax="false"><%=I("fa-plus")%></a><%
  CONTENT_END();
  FOOTER();
+PAGE_END();
 %>
 <% PDA_PAGE_END(); %>
 	</body>
--- a/APPL/PDA/cnt_list.asp
+++ b/APPL/PDA/cnt_list.asp
@@ -33,11 +33,12 @@ var geb_key = getQParamInt("geb_key", -1);
 var ver_key = getQParamInt("ver_key", -1);
 var rui_key = getQParamInt("rui_key", -1);
 var cntnum = getQParam("cntnum", ""); // Contractnummer (zoekveld, unsafe)
-var cntFFut = getQParamInt("cntFFut", 0) == 1; // Fase toekomstig binnen status actief
-var cntFAct = getQParamInt("cntFAct", 0) == 1; // Fase actueel binnen status actief
-var cntFRap = getQParamInt("cntFRap", 0) == 1; // Fase rappel binnen status actief
-var cntFOpz = getQParamInt("cntFOpz", 0) == 1; // Fase in opzegtermijn binnen status actief
-var cntFVerl = getQParamInt("cntFVerl", 0) == 1; // Fase verlopen binnen status actief
+
+var cntFFut = getQParamSafe("cntFFut", "off") == "on"; // Fase toekomstig binnen status actief
+var cntFAct = getQParamSafe("cntFAct", "off") == "on"; // Fase actueel binnen status actief
+var cntFRap = getQParamSafe("cntFRap", "off") == "on"; // Fase rappel binnen status actief
+var cntFOpz = getQParamSafe("cntFOpz", "off") == "on"; // Fase in opzegtermijn binnen status actief
+var cntFVerl = getQParamSafe("cntFVerl", "off") == "on"; // Fase verlopen binnen status actief

 var cntAct = 1; // standard checked
 if (!cntFFut && !cntFAct && !cntFRap && !cntFOpz)
@@ -122,15 +123,7 @@ var autfunction = (urole == "fe" ? "WEB_CNTUSE" : "WEB_CNTMAN");
    PAGE_START();
    HEADER({title: subject, back:!qrc});
 %>
-<script  type="text/javascript" >
-    function openFilterPanel()
-    {
-      $(function ()
-      {
-        $('.cntFilterPanel:visible').panel('open');
-      });
-    }
-
+  <script>
    function cnt_filter()
    {
        document.forms.cnt_filter_list.submit();
@@ -142,45 +135,36 @@ var autfunction = (urole == "fe" ? "WEB_CNTUSE" : "WEB_CNTMAN");
    }
  </script>

-    <div data-role="panel" data-display="overlay" id="cntFilterP" class="cntFilterPanel">
+<%  FILTER_PANEL_START(); %>
+
        <form name="u2" id="cnt_filter_list" action="<%=rooturl%>/appl/pda/cnt_list.asp" method="get">
            <input type="hidden" name="urole" id="urole" value="<%=urole%>">
            <input type="hidden" name="cntAct" id="cntAct" value="<%=params.cntAct%>">
 <%
        CONTROLGROUP_START();
-%>
-          <input type="checkbox" class="fldcntFfut" name="cntFFut" id="cntFFut" value="1" <%=params.cntFFutu? "checked" : ""%>>
-          <label for="cntFFut"><%=L("lcl_cnt_future")%></label>
-          <input type="checkbox" class="fldcntfact" name="cntFAct" id="cntFAct" value="1" <%=params.cntFAct? "checked" : ""%>>
-          <label for="cntFAct"><%=L("lcl_cnt_topical")%></label>
-          <input type="checkbox" class="fldcntfrap" name="cntFRap" id="cntFRap" value="1" <%=params.cntFRap? "checked" : ""%>>
-          <label for="cntFRap"><%=L("lcl_cnt_warn")%></label>
-          <input type="checkbox" class="fldcntfopz" name="cntFOpz" id="cntFOpz" value="1" <%=params.cntFOpz? "checked" : ""%>>
-          <label for="cntFOpz"><%=L("lcl_cnt_cancel")%></label>
-          <input type="checkbox" class="fldcntfverl" name="cntFVerl" id="cntFVerl" value="1" <%=params.cntFVerl? "checked" : ""%>>
-          <label for="cntFVerl"><%=L("lcl_cnt_past")%></label>
-<%
+          CHB_FIELD("cntFFut", L("lcl_cnt_future"), params.cntFFutu, { "inline": true });
+          CHB_FIELD("cntFAct", L("lcl_cnt_topical"), params.cntFAct, { "inline": true });
+          CHB_FIELD("cntFRap", L("lcl_cnt_warn"), params.cntFRap, { "inline": true });
+          CHB_FIELD("cntFOpz", L("lcl_cnt_cancel"), params.cntFOpz, { "inline": true });
+          CHB_FIELD("cntFVerl", L("lcl_cnt_past"), params.cntFVerl, { "inline": true });
        CONTROLGROUP_END();

        CONTROLGROUP_START();
-%>
-          <legend><%=L("lcl_cnt_intern_nr")%>:</legend>
-          <input type="text" class="fldcntnum" name="cntnum" value="<%=safe.htmlattr(cntnum)%>">
-<%
+          RWFIELD("cntnum", L("lcl_cnt_intern_nr"), cntnum);
        CONTROLGROUP_END();

-        CONTROLGROUP_START({ horizontal: true });
-            BUTTON(L("lcl_mobile_panel_filter"), { id: "search_submit", click: "cnt_filter()", icon: "fa-fclt-refresh", datarel: "close" });
-            //BUTTON(L("lcl_home"), { id: "home", click: "cnt_home()", icon: "fa-home", datarel: "close" });
+        CONTROLGROUP_START();
+            BUTTON(L("lcl_mobile_panel_filter"), { id: "search_submit", click: "cnt_filter()", icon: "fa-fclt-refresh" });
        CONTROLGROUP_END();
 %>
        </form>
-    </div>
-<%
-    var p_useraction = { icon: "fa-filter-list", action: "openFilterPanel()", label: L("lcl_mld_filter") };
-    HEADER({title: subject,
+<%  FILTER_PANEL_END();
+
+    HEADER({
+        title: subject,
        back: false,
-            useraction: p_useraction});
+        filterPanel: true
+    });
    CONTENT_START();

    var rst = new ResultsetTable({sql: sql,
--- a/APPL/PDA/factuur.asp
+++ b/APPL/PDA/factuur.asp
@@ -50,7 +50,7 @@ var subject = L("lcl_fin_invoice") + " " + fin_key;
      }
 <%    if (fin_key > -1 && this_fin.canAccept) { %>
        function fin_reject_confirm() {
-          $.mobile.changePage("#frej-1-<%=fin_key%>");
+          mobile.changePage("frej-1-<%=fin_key%>");
          return false;
        };
 <%    } %>
--- a/APPL/PDA/ins_deel.asp
+++ b/APPL/PDA/ins_deel.asp
@@ -876,7 +876,7 @@ if (alg_typ == "R" || alg_typ == "W" || alg_typ == "T")
            else
            {
                if (btns["ins_save"] && (this_ins.canChangeAlg || this_ins.canChange)) {
-                    BUTTON(L("lcl_cancel"), {datarel: "back", icon: "fa-fclt-cancel"} );
+                    BUTTON(L("lcl_cancel"), {click: "mobile.changePage();", icon: "fa-fclt-cancel"} );
                }
            }
            CONTROLGROUP_END();
--- a/APPL/PDA/ins_inspect_list.asp
+++ b/APPL/PDA/ins_inspect_list.asp
@@ -104,22 +104,19 @@ else
  <head>
 <%  FCLTMHeader.Generate({}); %>
    <script>
-      function openFilterPanel() {
-        $(".inspectFilterPanel").panel("open");
-      }

      function onClickDone() {
        if (document.getElementById("insInspDone").checked)
        {
          $("[id^=donedate_]").closest("div").show();
          $("[id^=inspsoon_]").closest("div").hide();
-          $("#insInspBusy, #insInspClosed, #insInspSoon").closest(".ui-checkbox").hide();
+          $("#insInspBusy, #insInspClosed, #insInspSoon").closest(".<%=MOBILE_UI_CLASSES.checkbox_wrapper.replace(/^\s*/, "")%>").hide();
        }
        else
        {
          $("[id^=donedate_]").closest("div").hide();
          $("[id^=inspsoon_]").closest("div").show();
-          $("#insInspBusy, #insInspClosed, #insInspSoon").closest(".ui-checkbox").show();
+          $("#insInspBusy, #insInspClosed, #insInspSoon").closest(".<%=MOBILE_UI_CLASSES.checkbox_wrapper.replace(/^\s*/, "")%>").show();
        }
      }

@@ -132,18 +129,23 @@ else
  <body>
 <%
    PAGE_START();
-%>
-    <div data-role="panel" data-display="overlay" id="inspectFilterP" class="inspectFilterPanel">
+
+    FILTER_PANEL_START(); %>
+
        <form name="u2" id="inspect_filter_list" action="<%=rooturl%>/appl/pda/ins_inspect_list.asp" method="get">
          <input type="hidden" name="urole" value="<%=urole%>">
 <%
+
+        CONTROLGROUP_START();
          FCLTdienstselector("dienst_key", "dienst_key",
                      { dienstKey : dienst_key,
                        filtercode: (urole == "b2" ? "OWN" : null),
                        label: L("lcl_prs_companies_dienst")
                      });
+        CONTROLGROUP_END();

-        CHB_FIELD("insInspDone", L("lcl_ins_controle_done"), (inspDone ? 1 : 0));
+        CONTROLGROUP_START();
+          CHB_FIELD("insInspDone", L("lcl_ins_controle_done"), (inspDone ? 1 : 0), { "inline": true });

          FCLTcalendar("donedate_from",
                      {
@@ -167,10 +169,12 @@ else
                        mobile: true
                      });

-        CHB_FIELD("insInspBusy", L("lcl_ins_controle_busy"), (inspBusy ? 1 : 0));
-        CHB_FIELD("insInspClosed", L("lcl_ins_controle_act_req"), (inspClosed ? 1 : 0));
-        CHB_FIELD("insInspSoon", L("lcl_ins_controle_soon"), (inspSoon ? 1 : 0));
+          CHB_FIELD("insInspBusy", L("lcl_ins_controle_busy"), (inspBusy ? 1 : 0), { "inline": true });
+          CHB_FIELD("insInspClosed", L("lcl_ins_controle_act_req"), (inspClosed ? 1 : 0), { "inline": true });
+          CHB_FIELD("insInspSoon", L("lcl_ins_controle_soon"), (inspSoon ? 1 : 0), { "inline": true });
+        CONTROLGROUP_END();

+        CONTROLGROUP_START();
          FCLTcalendar("inspsoon_from",
                      {
                        label: L("lcl_period_from"),
@@ -190,20 +194,18 @@ else
                        trhidden: inspDone,
                        mobile: true
                      });
+        CONTROLGROUP_END();

-        CONTROLGROUP_START({ horizontal: true });
+        CONTROLGROUP_START();
            BUTTON(L("lcl_mobile_panel_filter"), { id: "search_submit", click: "document.forms.inspect_filter_list.submit();", icon: "fa-fclt-refresh", datarel: "close" });
        CONTROLGROUP_END();
 %>
        </form>
-    </div>
-<%
+<%  FILTER_PANEL_END();
+
    HEADER({
        title: subject,
-      useraction: {
-        icon: "fa-filter-list",
-        action: "openFilterPanel()"
-      }
+        filterPanel: true
    });
    CONTENT_START();

--- a/APPL/PDA/mld_list.asp
+++ b/APPL/PDA/mld_list.asp
@@ -740,7 +740,7 @@ var canAdd = addparams && addparams.ALGwritelevel;
               )
             + "</div>"
           + (oRs("mld_melding_onderwerp").Value != null ? "<span class='subject'>" + safe.html(oRs("mld_melding_onderwerp").Value) + "</span><br>" : "")
-           + (oRs("mld_melding_omschrijving").Value? "<div class='listbodytext'>" + safe.html(shorttxt(shared.stripbbcodes(oRs("mld_melding_omschrijving").Value), S("rs_mobile_maxchar"))) + "</div>" : "");
+           + (oRs("mld_melding_omschrijving").Value? "<div class='listbodytext limit-lines-2'>" + safe.html(shorttxt(shared.stripbbcodes(oRs("mld_melding_omschrijving").Value), S("rs_mobile_maxchar"))) + "</div>" : "");
    };

    function fncolStatus(oRs)
@@ -754,15 +754,7 @@ var canAdd = addparams && addparams.ALGwritelevel;
    PAGE_START({ datacache: false });

 %>
-<script  type="text/javascript" >
-    function openFilterPanel()
-    {
-      $(function ()
-      {
-        $('.mldFilterPanel:visible').panel('open');
-      });
-    }
-
+  <script>
    function mld_filter()
    {
          document.forms.mld_filter_list.submit();
@@ -795,7 +787,8 @@ var canAdd = addparams && addparams.ALGwritelevel;
     );

  </script>
-    <div data-role="panel" data-display="overlay" id="mldFilterP" class="mldFilterPanel">
+
+<%  FILTER_PANEL_START(); %>
        <form name="u2" id="mld_filter_list" action="<%=rooturl%>/appl/pda/mld_list.asp" method="get" accept-charset="utf-8">
            <input type="hidden" name="grp" id="grp" value="<%=safe.htmlattr(grp_sel)%>">
            <input type="hidden" name="urole" value="<%=urole%>">
@@ -807,25 +800,24 @@ var canAdd = addparams && addparams.ALGwritelevel;
            <input type="hidden" name="has_actiecodeFE" id="has_actiecodeFE" value="<%=has_actiecodeFE%>">
            <input type="hidden" name="cnt_disc" id="cnt_disc" value="<%=p_cnt_disc%>">
            <input type="hidden" name="cnt_mld" id="cnt_mld" value="<%=p_cnt_mld%>">
-
 <%
-        CONTROLGROUP_START();
-        if (S('mld_melding_flags') > 1)
+        if (S("mld_melding_flags") > 1)
        {
-            for (flagkey=0; flagkey < S("mld_melding_flags"); flagkey++)
-            { %>
-                <label for="flag<%=flagkey%>">
-                  <input type="checkbox"  name="flag<%=flagkey%>" data-mini="true" id="flag<%=flagkey%>" <%=((checkboxParams[flagkey] == "on") ? "checked" : "")%>>
-                  <span class="mldflag<%=flagkey%> mlds">
-                    <%=I("fa-fclt-flag" + (flagkey == 0 ? "0" : ""))%>
-                  </span>&nbsp;<%=safe.html(L("lcl_mld_flag" + flagkey))%>
-                </label><%
+          CONTROLGROUP_START();
+            for (flagkey=0; flagkey < S("mld_melding_flags"); flagkey++) {
+              var label_html = '<span class="mldflag' + flagkey + ' flag">' + I("fa-fclt-flag" + (flagkey == 0 ? "0" : ""))
+                             + '  <span>' + L("lcl_mld_flag" + flagkey)
+                             + '</span>';
+              CHB_FIELD("flag" + flagkey, label_html, checkboxParams[flagkey] == "on", { "inline": true });
            }
+          CONTROLGROUP_END();
        }
-%>
-        <label for="actiecodeFE"><input type="checkbox" name="actiecodeFE" data-mini="true" id="actiecodeFE" <%=((actiecodeFE == "on") ? "checked" : "")%>><span class="mlds"><%=I("fa-user-circle", { fastyle: "fas" })%></span>&nbsp;<%=safe.html(L("lcl_mld_actiecodeFEchk"))%></label>
-        <label for="actiecodeATT"><input type="checkbox" name="actiecodeATT" data-mini="true" id="actiecodeATT" <%=((actiecodeATT == "on") ? "checked" : "")%>><span class="mlds"><%=I("fa-bell", { fastyle: "fas" })%></span>&nbsp;<%=safe.html(L("lcl_mld_actiecodeATTchk"))%></label>
-<%
+
+        CONTROLGROUP_START();
+
+          CHB_FIELD("actiecodeFE", I("fa-user-circle", { fastyle: "fas" }) + "<span>" + L("lcl_mld_actiecodeFEchk") + "</span>", (actiecodeFE == "on"), { "inline": true });
+          CHB_FIELD("actiecodeATT", I("fa-bell", { fastyle: "fas" }) + "<span>" + L("lcl_mld_actiecodeATTchk") + "</span>", (actiecodeATT == "on"), { "inline": true });
+
        CONTROLGROUP_END();
        if (S("mld_restrict_mobile_to_me") == 1 && self <= 0)
        {
@@ -835,44 +827,39 @@ var canAdd = addparams && addparams.ALGwritelevel;
        else
        {
          CONTROLGROUP_START();
-%>
-         	<input type="radio" name="self" id="mldbehall" data-mini="true" value="-1" <%=((self<=0) ? "checked" : "")%>  />
-         	<label for="mldbehall"><%=safe.html(L("lcl_mld_melding_all"))%></label>
-         	<input type="radio" name="self" id="mldbehown" data-mini="true" value="1" <%=((self > 0) ? "checked" : "")%>  />
-         	<label for="mldbehown"><%=safe.html(L("lcl_mld_melding_own"))%></label>
-<%
+
+            var radios = [
+              { id: "mldbehall", value: "-1", checked: (self <= 0), label: L("lcl_mld_melding_all") },
+              { id: "mldbehown", value: "1", checked: (self > 0), label: L("lcl_mld_melding_own") }
+            ]
+            RADIO_GROUP("self", radios);
+
          CONTROLGROUP_END();
        }
+
+        if (status.length == 0) {
          CONTROLGROUP_START();
-        if (status.length == 0)
-        {
-%>
-         	<input type="checkbox" name="fase1" id="mldtebeh" value="1" <%=((fase & 1) ? "checked" : "")%>  />
-         	<label for="mldtebeh"><%=safe.html(L("lcl_mld_chk_bo_mldNew"))%></label>
-         	<input type="checkbox" name="fase2" id="mldinbeh" value="2" <%=((fase &  2) ? "checked" : "")%>  />
-         	<label for="mldinbeh"><%=safe.html(L("lcl_mld_chk_bo_mldSelf"))%></label>
-         	<input type="checkbox" name="fase4" id="mldafm" value="4" <%=((fase &  4) ? "checked" : "")%>  />
-         	<label for="mldafm"><%=safe.html(L("lcl_mld_chk_bo_mldAfm"))%></label>
-<%
-        }
+            CHB_FIELD("mldtebeh", L("lcl_mld_chk_bo_mldNew"), (fase & 1) == 1, { "inline": true });
+            CHB_FIELD("mldinbeh", L("lcl_mld_chk_bo_mldSelf"), (fase & 2) == 1, { "inline": true });
+            CHB_FIELD("mldafm", L("lcl_mld_chk_bo_mldAfm"), (fase & 4) == 1, { "inline": true });
          CONTROLGROUP_END();
+        }
+
        CONTROLGROUP_START();
        if (behandel3_key < 0 && !(S("mld_restrict_mobile_to_me") == 1 && self <= 0))
        {
 %>
-        <div>
-        <label style="float: left;" for="behandel"><%=safe.html(L("lcl_mld_no_handler"))%></label>
-        <select name="behandel" style="float: left;" id="behandel" data-role="slider" data-mini="true">
+        <label for="behandel"><%=safe.html(L("lcl_mld_no_handler"))%></label>
+        <select name="behandel" id="behandel" class="<%=MOBILE_UI_CLASSES.select%>">
            <option value="-2" <%=((behandel3_key == -2) ? "selected" : "")%> ><%=safe.html(L("lcl_Yes"))%></option>
            <option value="-1" <%=((behandel3_key == -1) ? "selected" : "")%> ><%=safe.html(L("lcl_No"))%></option>
        </select>
-        </div>
 <%      }
        CONTROLGROUP_END();

        CONTROLGROUP_START();
-%>        <input type="text" placeholder="<%=L("lcl_call_number")%>" class="fldmld_key" id="mld_key" name="mld_key" <%=(mld_key > 0) ? "value='" + mld_key + "'" : ""%>>
-          <input type="text" placeholder="<%=L("lcl_search_diff_fields")%>" class="searchtekst" id="searchtekst" name="searchtekst" <%=(searchtekst != "") ? "value='" + safe.htmlattr(searchtekst) + "'" : ""%>>
+%>        <input type="text" placeholder="<%=L("lcl_call_number")%>" class="<%=MOBILE_UI_CLASSES.input%>" id="mld_key" name="mld_key" <%=(mld_key > 0) ? "value='" + mld_key + "'" : ""%>>
+          <input type="text" placeholder="<%=L("lcl_search_diff_fields")%>" class="<%=MOBILE_UI_CLASSES.input%>" id="searchtekst" name="searchtekst" <%=(searchtekst != "") ? "value='" + safe.htmlattr(searchtekst) + "'" : ""%>>
 <%
          if (inArray(filterLevel, ["L", "D", "A"])) { // Anders is een gebouwfilter niet relevant

@@ -923,20 +910,13 @@ var canAdd = addparams && addparams.ALGwritelevel;

        CONTROLGROUP_END();

-        CONTROLGROUP_START({ horizontal: true });
-            BUTTON(L("lcl_mobile_panel_filter"), {id: "search_submit", click: "mld_filter()", icon: "fa-fclt-refresh", datarel: "close" });
-            // Sinds 2024.1 zit dit in de navbar BUTTON(L("lcl_home"), {id: "home", click: "mld_home()", icon: "fa-home", datarel: "close"});
-            // Moet er niet een knop bij voor het weer inklappen van het zoekpanel? Voor wie wil kijken waarop gefilterd is?
-            // Dat kan "gewoon" door naast het panel te klikken
+        CONTROLGROUP_START();
+            BUTTON(L("lcl_mobile_panel_filter"), { id: "search_submit", click: "mld_filter()", icon: "fa-fclt-refresh" });
        CONTROLGROUP_END();
 %>
        </form>
-    </div>
-<%
+<%  FILTER_PANEL_END();
    var withContext = (ruimte_key > -1 || ins_key > -1 || rsv_ruimte_key > -1);
-
-    var p_useraction = {icon: "fa-filter-list", action: "openFilterPanel()", label: L("lcl_mld_filter")};
-
    var multiactions = [];
    if (user.has("WEB_MLDFOF") || user.has("WEB_MLDBOF")) {
        multiactions.push({ icon: "fa-flag-checkered", action: "mld_close", caption: L("lcl_close") });
@@ -946,7 +926,7 @@ var canAdd = addparams && addparams.ALGwritelevel;
    HEADER({
      title: subject,
      back: (!qrc && withContext),
-      useraction: (!withContext ? p_useraction : null),
+      filterPanel: !withContext,
      addaction: canAdd? (rooturl + "/appl/pda/melding.asp?mld_key=-1" + (ins_key > -1? "&ins_key=" + ins_key : "") + (ruimte_key > -1? "&ruimte_key=" + ruimte_key : "") + "&meldbronkey=" + meldbron_key + (deelsrtcont_key>-1 ? "&deelsrtcont_key=" + deelsrtcont_key : "")) : false,
      multiactions: !group && multiactions.length
    });
--- a/APPL/PDA/notitie.asp
+++ b/APPL/PDA/notitie.asp
@@ -661,7 +661,7 @@ else

        CONTROLGROUP_START();
          BUTTON(L("lcl_submit"), {click: "note_submit()", icon: "fa-fclt-save", singlepress: true});
-          BUTTON(L("lcl_cancel"), {datarel: "back", icon: "fa-fclt-cancel"} );
+          BUTTON(L("lcl_cancel"), {click: "history.back()", icon: "fa-fclt-cancel"} );
        CONTROLGROUP_END();
      IFACE.FORM_END();
 %>
--- a/APPL/PDA/orders_list.asp
+++ b/APPL/PDA/orders_list.asp
@@ -453,14 +453,7 @@ if (!hasParamFlag)

    PAGE_START({datacache:false});
    %>
-  <script  type="text/javascript" >
-    function openFilterPanel()
-    {
-      $(function ()
-      {
-        $('.ordersFilterPanel:visible').panel('open');
-      });
-    }
+  <script>

    function orders_filter()
    {
@@ -494,47 +487,34 @@ if (!hasParamFlag)
    }

  </script>
-    <div data-role="panel" data-display="overlay" id="ordersFilterP" class="ordersFilterPanel">
+
+<%  FILTER_PANEL_START(); %>
+
        <form name="u2" id="orders_filter_list" action="<%=rooturl%>/appl/pda/orders_list.asp" method="get">
            <input type="hidden" name="grp" id="grp" value="<%=safe.htmlattr(grp_sel)%>">
            <input type="hidden" name="grpby" id="grpby" value="<%=disc_type%>">
            <input type="hidden" name="qrc" id="qrc" value="<%=(qrc ? 1 : 0)%>">
            <input type="hidden" name="deelsrtcont_key" id="deelsrtcont_key" value="<%=deelsrtcont_key%>">
-
 <%
+        if (S("mld_opdracht_flags") > 1)
+        {
          CONTROLGROUP_START();
-        if (S('mld_opdracht_flags') > 1)
-        {
-            for (flagkey=0; flagkey < S("mld_opdracht_flags"); flagkey++)
-            { %>
-              <label for="flag<%=flagkey%>">
-                <input type="checkbox" name="flag<%=flagkey%>" data-mini="true" id="flag<%=flagkey%>" <%=((checkboxParams[flagkey] == "on") ? "checked" : "")%>>
-                <span class="opdrflag<%=flagkey%> opdrs">
-                  <%=I("fa-fclt-flag" + (flagkey == 0 ? "0" : ""))%>
-                </span>&nbsp;<%=safe.html(L("lcl_opdr_flag"+flagkey))%>
-              </label>
-<%          }
+            for (flagkey=0; flagkey < S("mld_opdracht_flags"); flagkey++) {
+              var label_html = '<span class="opdrflag' + flagkey + ' flag">' + I("fa-fclt-flag" + (flagkey == 0 ? "0" : ""))
+                             + '  <span>' + L("lcl_opdr_flag" + flagkey) + '</span>'
+                             + '</span>';
+              CHB_FIELD("flag" + flagkey, label_html, checkboxParams[flagkey] == "on", { "inline": true });
            }
-
          CONTROLGROUP_END();
-
-        CONTROLGROUP_START({ horizontal: true });
-        if (S("mld_opdracht_flags") > 0)
-        {
-            BUTTON(L("lcl_mobile_panel_filter"), {id: "search_submit", click: "orders_filter()", icon: "fa-fclt-refresh", datarel: "close" });
        }
-        //BUTTON(L("lcl_home"), {id: "home", click: "orders_home()", icon: "fa-home", datarel: "close"});
+
+        CONTROLGROUP_START();
+            BUTTON(L("lcl_mobile_panel_filter"), { id: "search_submit", click: "orders_filter()", icon: "fa-fclt-refresh" });
        CONTROLGROUP_END();
 %>
        </form>
-    </div>
 <%
-    var p_useraction;
-    // Het filterpanel moet alleen als er content is, dus hetzelfde criterium als hierboven. Dat mag tzt best uitgebreider.
-    if (S("mld_opdracht_flags") > 0)
-    {
-        p_useraction = {icon: "fa-filter-list", action: "openFilterPanel()", label: L("lcl_mld_filter")};
-    }
+    FILTER_PANEL_END();

    var multiactions = [];
    if (user.has("WEB_ORDBOF") || user.has("WEB_ORDBO2")) {
@@ -551,10 +531,12 @@ if (!hasParamFlag)
    }
    var isGrouped = (grp_sel == "" && listmode == 2);

-    HEADER({title: listtitle,
-            useraction: p_useraction,
+    HEADER({
+        title: listtitle,
+        filterPanel: S("mld_opdracht_flags") > 0,
        addaction: addaction,
-            multiactions: !isGrouped && multiactions.length});
+        multiactions: !isGrouped && multiactions.length
+    });

    CONTENT_START();

--- a/APPL/PDA/setlocation.asp
+++ b/APPL/PDA/setlocation.asp
@@ -158,7 +158,7 @@ function showError(error)
 }

 function loc_submit() {
-    var $selected = $("#alg_key.ui-controlgroup").find(".selected");
+    var $selected = $("#alg_key").find(".selected");
    if (!$selected.length)
    {
        jqToast(L("lcl_select_location"));
@@ -236,12 +236,15 @@ $(function()
    else
        gps_btn_params.click = "selectByGPS();";
    BUTTON(L("lcl_mobile_currentgps"), gps_btn_params);
-%>  <input type="text" placeholder="<%=L("lcl_autofilter")%>" id="filter">
-<%
+    CONTROLGROUP_END();
+    CONTROLGROUP_START();
+%>  <input type="text" id="filter" class="<%=MOBILE_UI_CLASSES.input%>" placeholder="<%=L("lcl_autofilter")%>">
+<%  CONTROLGROUP_END();
+    CONTROLGROUP_START();
    var oRs = Oracle.Execute(sql);
    if (!oRs.EoF)
    {
-%>      <fieldset id="alg_key" data-role="controlgroup" data-mini="true" data-filter="true" data-input="#filter"><%
+%>      <fieldset id="alg_key"><%
        while (!oRs.EoF)
        {
            BUTTON(safe.html(oRs("descr").Value), {
@@ -253,6 +256,8 @@ $(function()
 %>      </fieldset ><%
    }
    oRs.Close();
+    CONTROLGROUP_END();
+    CONTROLGROUP_START();
    BUTTON(L("lcl_select"), { click: "loc_submit()", icon: "fa-fclt-save" });
    CONTROLGROUP_END();
    IFACE.FORM_END();
--- a/APPL/PDA/user_info.asp
+++ b/APPL/PDA/user_info.asp
@@ -126,7 +126,7 @@ var photoMap  = thisUser.photomap;   // map waarin de foto wordt opgeslagen
    }

 </script>
-        <div style="text-align:center;">
+        <div>
        <form name="u2Photo" id="u2photo" method="post" enctype="multipart/form-data">
          <input type="hidden" name="noresize" id="noresize" value="0">
          <img id="photo" alt="<%=safe.htmlattr(L("fac_profiel")) + " " + safe.htmlattr(L("lcl_photos"))%>"
@@ -135,7 +135,9 @@ var photoMap  = thisUser.photomap;   // map waarin de foto wordt opgeslagen
 <%
        if (S("prs_use_edit_photo") && canChange)
        {
-            %><label><%=L("lcl_pda_change_photo")%></label><%
+            %>
+          <div class="flex-center">
+            <label for="photo"><%=L("lcl_pda_change_photo")%></label><%
 %>          <div class="attachments_form" style="display: none;">
                <span class="attachments_form">
                  <span class="attachments_fields"></span>
@@ -154,6 +156,7 @@ var photoMap  = thisUser.photomap;   // map waarin de foto wordt opgeslagen
                  </span>
                </span>
            </div>
+          </div>
 <%
            IFACE.FORM_END();
        }
--- a/APPL/Shared/calendar.inc
+++ b/APPL/Shared/calendar.inc
@@ -184,7 +184,7 @@ function _FCLTcalendar (fieldID, params)
  <input id="show_<%=fieldID%>"
         class="flddate<%=params.required?" required":""%><%=isMobile ? MOBILE_UI_CLASSES.input : ""%><%=params.addClass? " " + params.addClass : ""%>"
         type="<%=params.hidden?'hidden':(isMobile ? 'date' : 'text')%>" <%=hiddentag%>
-         value="<%=safe.htmlattr(iniTextDate)%>"
+         value="<%=safe.htmlattr(isMobile ? iniDateDate : iniTextDate)%>"
         autocomplete="off"
         nofollow="<%=params.nofollow? 1 : 0%>">

@@ -349,7 +349,7 @@ function _FCLTcalendar (fieldID, params)
                                                  return fnBeforeShowDay(date, selectableDay);
                                                }
             }).change(cal_show_onChange)
-               .val("<%=safe.jsstring(iniTextDate)%>");
+               .val("<%=safe.jsstring(isMobile ? iniDateDate : iniTextDate)%>");
             $("#show_<%=fieldID%>").on('focus', function() { $("#show_<%=fieldID%>").datepicker('show'); });

       <% if (params.autoopen){ %>
--- a/APPL/Shared/default.css
+++ b/APPL/Shared/default.css
@@ -232,34 +232,6 @@ i.btn_disabled
    pointer-events: none;
 }

-/* **************************************************** */
-/* **************************************************** */
-/* ******           UTILITY CLASSES            ******** */
-/* **************************************************** */
-/* **************************************************** */
-.pointer {
-    cursor: pointer;
-}
-
-.limit-lines-1,
-.limit-lines-2 {
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-box-orient: vertical;
-}
-.limit-lines-1 {
-    -webkit-line-clamp: 1;
-    line-clamp: 1;
-}
-.limit-lines-2 {
-    -webkit-line-clamp: 2;
-    line-clamp: 2;
-}
-
-.semibold {
-    font-weight: 600;
-}
-
 /* **************************************************** */
 /* *****                                          ***** */
 /* *****             LOGIN / PORTAL               ***** */
@@ -362,7 +334,8 @@ i.btn_disabled
    }
 }

-.otp label {
+.otp label,
+.otp label.active {
    color: #ffffff; /* todo */
    font-size: 1.25em;
 }
@@ -8821,6 +8794,29 @@ body::-webkit-scrollbar-thumb:horizontal { border-radius: 4px/50%; }
 //                 Utility classes                      //
 //                                                      //
 ////////////////////////////////////////////////////////*/
+.pointer {
+    cursor: pointer;
+}
+
+.limit-lines-1,
+.limit-lines-2 {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+}
+.limit-lines-1 {
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+}
+.limit-lines-2 {
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+}
+
+.semibold {
+    font-weight: 600;
+}
+
 .default-clickable-button {
    cursor: pointer;
    box-shadow: 0 1px 2px var(--fclt-body-color-25);
--- a/APPL/Shared/kenmerk_common.inc
+++ b/APPL/Shared/kenmerk_common.inc
@@ -641,7 +641,7 @@ function BijlagenButton(tfield, tprops, tparams)

        // Handtekening plaatje
        if (tfield.kdimensie == "xxx") {
-            res += "<img alt='" + safe.htmlattr(L("lcl_flex_preview")) + "' class='preview kenmerk'"
+            res += "<img alt='" + safe.htmlattr(L("lcl_flex_preview")) + "' id='preview_" + tprops.nameprefix + tfield.idCounter + "' class='preview kenmerk'"
                 + " onClick='" + safe.htmlattr(blg) + "'";
            if (lijst.length) {
                res += " src=' " + protectQS.create(OpenFlexFile(tparams.module, lijst[0].key, { mime_type: "image/png", contentdp: "inline" }));
@@ -687,7 +687,8 @@ function BijlagenButton(tfield, tprops, tparams)
                "click": blg,
                "attributes": {
                    "isBijlage": "1",
-                    "nBijlagen": lijst.length
+                    "nBijlagen": lijst.length,
+                    "aria-controls": "preview_" + tprops.nameprefix + tfield.idCounter
                }
            });
            res = "<div>" + res + "</div>"; // Wrap in divje om conditionele zichtbaarheid makkelijker te kunnen togglen
--- a/APPL/Shared/variables.css
+++ b/APPL/Shared/variables.css
@@ -62,6 +62,8 @@
    --fclt-body-bg: var(--bs-body-bg);
    --fclt-body-bg-rgb: var(--bs-body-bg-rgb);

+    --fclt-body-color-5: rgba(var(--fclt-body-color-rgb), 5%);
+    --fclt-body-color-10: rgba(var(--fclt-body-color-rgb), 10%);
    --fclt-body-color-25: rgba(var(--fclt-body-color-rgb), 25%);
    --fclt-body-color-50: rgba(var(--fclt-body-color-rgb), 50%);
    --fclt-body-color-100: rgba(var(--fclt-body-color-rgb), 100%);