diff --git a/mail_signature/templates/mail_signature/index.html b/mail_signature/templates/mail_signature/index.html index d833f79a91126dc6ea3492cac2a70b43cf613e11..29546e3bb257d949488f360c10a9e433b143c9b5 100644 --- a/mail_signature/templates/mail_signature/index.html +++ b/mail_signature/templates/mail_signature/index.html @@ -65,12 +65,21 @@ <label class="basis-56 flex items-center font-bold" for="phone"> Telefonní číslo: </label> - <input - id="phone" - name="phone" - type="tel" - class="border border-gray-200 p-2 rounded-md grow w-full" - > + <div class="grow w-full flex gap-4 items-center"> + <input + id="phone-prefix" + name="phone-prefix" + type="text" + class="basis-16 w-16 border border-gray-200 p-2 rounded-md" + value="+420" + > + <input + id="phone" + name="phone" + type="number" + class="border border-gray-200 p-2 rounded-md grow w-full" + > + </div> </div> <div class="flex gap-4 items-center"> diff --git a/static_src/mail_signature.js b/static_src/mail_signature.js index 06ba5a886e4b6d93ddaa2c9ca8f620aefed55873..4c05aabc2b1dfb07310f161847af8637318389b2 100644 --- a/static_src/mail_signature.js +++ b/static_src/mail_signature.js @@ -71,7 +71,7 @@ const generateSignature = () => { let phone = escapeHTML($("#phone").val()); let web = escapeHTML($("#web").val()); - let mastodon = escapeHTML($("#web").val()); + let mastodon = escapeHTML($("#mastodon").val()); let twitter = escapeHTML($("#twitter").val()); let instagram = escapeHTML($("#instagram").val()); let linkedin = escapeHTML($("#linkedin").val()); @@ -85,14 +85,20 @@ const generateSignature = () => { if (email !== "") { result += `<div style="display:flex;column-gap:0.3em;margin-bottom:0.25em"> <img src="${emailDataURL}" aria-label="E-mail" title="E-mail" width="14"> - <a href="${email}" style="color:black!important">${email}</a> + <a href="mailto:${email}" style="color:black!important">${email}</a> </div>`; } if (phone !== "") { + phone = phone.replace(" ", ""); + let phoneGroups = phone.match(/.?.?.?/g); + + const formattedBasePhone = phoneGroups.join(" "); + const prefix = $("#phone-prefix").val(); + result += `<div style="display:flex;column-gap:0.3em;margin-bottom:0.25em"> <img src="${phoneDataURL}" aria-label="Telefonní číslo" title="Telefonní číslo" width="14"> - <a href="${phone}" style="color:black!important">${phone}</a> + <a href="tel:${prefix} ${formattedBasePhone}" style="color:black!important">${prefix} ${formattedBasePhone}</a> </div>`; } @@ -160,7 +166,7 @@ const generateSignature = () => { if (linkedin !== "") { result += `<a style="width:30px;height:30px;background:#1c84bb;text-decoration:none;display:flex;justify-content:center;align-items:center" - href="${instagram}" + href="${linkedin}" > <img src="${linkedInDataURL}"