feature: add icon on user profil

src/custom-tzcld.js

@@ -246,11 +246,11 @@ import("./utils.js").then((utils) => {
         render += `</div>`; //col 1
         render += `<div id="tzcld-user-profile-col2" class="tzcld-user-profile-col2 segment width-60">
         <h2 class="tzcld-h2">Poste(s) occupé(s)</h2>
-        <div class="col-2-wrapper segment full shadow padding-left-small padding-bottom-small">`; 
+        <div class="col-2-wrapper segment full shadow padding-left-xxlarge padding-bottom-small">`; 
 
           
 
-        render += `<solid-display class="segment" bind-resources="" nested-field="tzcld_profile" fields="jobs" widget-jobs="customtzcld-display-user-profile-jobs" data-src="${tzcldprofile.id}" solid-resource=""  paginate-by="10"></solid-display>`;
+        render += `<solid-display class="segment full" bind-resources="" nested-field="tzcld_profile" fields="jobs" widget-jobs="customtzcld-display-user-profile-jobs" data-src="${tzcldprofile.id}" solid-resource=""  paginate-by="10"></solid-display>`;
 
         render += `</div></div>`; //col 2
 

src/widjets-display-user-tzcld.js

@@ -129,19 +129,29 @@ import("./utils.js").then((utils) => {
           let render = `<div class="segment full margin-top-small margin-bottom-small">`;
           for(let job of tzcldprofile.jobs) {
             if( await job.position !== null ) {
+              render +=  `<div class="full padding-top-large padding-bottom-medium">`;
               if(await job.organisation !="") {
                   if(await job.link !="") {
-                      render +=  `<h3 class="position text-medium padding-bottom-large whitespace-normal">${await job.position} à <a class="link text-top" target="_blank" href="${await job.link}">${await job.organisation}</a></h3>`;
+
+                    render +=  `<div class="segment icontz-mdi_account-outline icon-third text-xxlarge text-top padding-right-xsmall"></div>
+                    <div class="segment width-90">`;
+                      render +=  `<h3 class="position text-medium padding-bottom-large whitespace-normal margin-none">${await job.position} à <a class="link text-top" target="_blank" href="${await job.link}">${await job.organisation}</a></h3>`;
                   } else {
-                      render +=  `<h3 class="position text-medium padding-bottom-large whitespace-normal">${await job.position} à ${await job.organisation}</h3>`;
+                      render +=  `<h3 class="position text-medium padding-bottom-large whitespace-normal margin-none">${await job.position} à ${await job.organisation}</h3>`;
                   }
               } else {
-                  render +=  `<h3 class="position text-medium padding-bottom-large whitespace-normal">${await job.position}</h3>`;
+                  render +=  `<h3 class="position text-medium padding-bottom-large whitespace-normal margin-none">${await job.position}</h3>`;
               }
+              render +=  `</div>`;
 
-              render +=  `<div class="address padding-bottom-small whitespace-normal">${await job.address} <br/> ${await job.postal_code} ${await job.city}</div>`;
+              render +=  `<div class="full address padding-bottom-small whitespace-normal">
+                    <div class="segment icontz-mdi_map-marker icon-third text-xxlarge text-top padding-right-xsmall"></div>
+                    <div class="segment width-90">${await job.address} <br/> ${await job.postal_code} ${await job.city}</div>
+                  </div>`;
               if ((await job.mobile_phone != '' && await job.mobile_phone_public == true ) || (await job.phone != '' && await job.phone_public == true)) {
-                  render +=  `<div class="phone padding-bottom-small">`;
+                  render +=  `<div class="full phone padding-bottom-small ">
+                    <div class="segment icontz-ic_call icon-third text-xxlarge text-top padding-right-xsmall"></div>
+                    <div class="segment width-90">`;
               }
               
               if (await job.mobile_phone != '' && await job.mobile_phone_public == true) {
@@ -154,12 +164,18 @@ import("./utils.js").then((utils) => {
                   render +=  `${await job.phone}`;
               }
               if ((await job.mobile_phone != '' && await job.mobile_phone_public == true ) || (await job.phone != '' && await job.phone_public == true)) {
-                  render +=  `</div>`;
+                  render +=  `</div>
+                    </div>`;
               }
               
               if (await job.email != '' && await job.email_public == true) {
-                  render +=  `<div class="email padding-bottom-small"><a class="link text-top" href="mailto:${await job.email}">${await job.email}</a></div>`;
+                  render +=  `<div class="full email padding-bottom-small">
+                    <div class="segment icontz-mdi_email-outline icon-third text-xxlarge text-top padding-right-xsmall"></div>
+                    <div class="segment width-90">
+                      <a class="link text-top" href="mailto:${await job.email}">${await job.email}</a></div>
+                    </div>`;
               }
+              render +=  `</div>`;
             }
           }