added and styled social links in associats

adminstyles.css

@@ -17,7 +17,7 @@ Theme URI: https://git.hangar.org/xarxaprod/
 Author: Hangar.org Tech Lab - hangar.org
 Author URI: https://hangar.org
 Description: theme for the <a href="https://xarxaprod.cat">XarxaProd</a>. Inclou la possibilitat de publicar, catalogar i cercar ajuts, resoldre dubtes amb FAQs i altres. Design by Eudald Van der Pla <a href="https://vanderpla.com">vanderpla.com</a>. Coding template and theme by <a href="https://vitrubio.net">Jorge - vitrubio.net</a>
-Version: 1.7.0
+Version: 1.7.2
 Tested up to: 6.5
 Requires PHP: 7.4
 License: GNU General Public License v3 or later
@@ -1416,6 +1416,59 @@ Add your custom styles in this file so it is easier to update the theme.
 	.edit-post-visual-editor__content-area .editor-styles-wrapper ul[id*="menu-social-media"] li a[href*="mastodon"]::before {
 		content: "mt";
 	}
+
+	.edit-post-visual-editor__content-area .editor-styles-wrapper ul[class*="xarxaprod-associat-social-links"] {
+		display: flex;
+		flex-flow: row;
+		margin: 0;
+	}
+
+	.edit-post-visual-editor__content-area .editor-styles-wrapper ul[class*="xarxaprod-associat-social-links"] li {
+		height: 1.5em;
+		width: 1.5em;
+		background-color: inherit;
+		border-radius: 5em;
+		border: none !important;
+		margin-right: 0.3em;
+		position: relative;
+	}
+
+	.edit-post-visual-editor__content-area .editor-styles-wrapper ul[class*="xarxaprod-associat-social-links"] li a {
+		font-size: 0;
+	}
+
+	.edit-post-visual-editor__content-area .editor-styles-wrapper ul[class*="xarxaprod-associat-social-links"] li a::before {
+		content: "";
+		display: inline-flex;
+		align-content: center;
+		justify-content: center;
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		width: 100%;
+		font-size: 1rem;
+	}
+
+	.edit-post-visual-editor__content-area .editor-styles-wrapper ul[class*="xarxaprod-associat-social-links"] li a[href*="instagram.com"]::before {
+		content: "in";
+	}
+
+	.edit-post-visual-editor__content-area .editor-styles-wrapper ul[class*="xarxaprod-associat-social-links"] li a[href*="youtube.com"]::before {
+		content: "yt";
+	}
+
+	.edit-post-visual-editor__content-area .editor-styles-wrapper ul[class*="xarxaprod-associat-social-links"] li a[href*="facebook.com"]::before {
+		content: "fb";
+	}
+
+	.edit-post-visual-editor__content-area .editor-styles-wrapper ul[class*="xarxaprod-associat-social-links"] li a[href*="twitter.com"]::before {
+		content: "tw";
+	}
+
+	.edit-post-visual-editor__content-area .editor-styles-wrapper ul[class*="xarxaprod-associat-social-links"] li a[href*="mastodon"]::before {
+		content: "mt";
+	}
 }
 
 .edit-post-visual-editor__content-area .editor-styles-wrapper embed,

sass/base/elements/_lists.scss

@@ -106,7 +106,7 @@ dd {
     padding-left: 0.8em;
     font-size: $font__size-body*0.8;
   }
-  ul[id*="menu-social-media"] {
+  ul[id*="menu-social-media"]{
     display:flex;
     flex-flow: row;
     li {
@@ -150,4 +150,51 @@ dd {
       }
     }
   }
+  ul[class*="xarxaprod-associat-social-links"] {
+    display:flex;
+    flex-flow: row;
+    margin: 0;
+    li {
+      height: 1.5em;
+      width: 1.5em;
+      background-color: inherit;
+      border-radius: 5em;
+      border: none !important;
+      margin-right: 0.3em;
+      position: relative;
+      a {
+        //margin-right: -10000em;
+        font-size: 0px;
+        &:before {
+          content:"";
+          display: inline-flex;
+          align-content: center;
+          justify-content: center;
+          position: absolute;
+          top: 0;
+          left: 0;
+          height: 100%;
+          width: 100%;
+          //color: $color__black;
+          font-size: $font__size-body*1;
+          //font-weight: 900;
+        }
+        &[href*="instagram.com"]:before{
+          content: "in";
+        }
+        &[href*="youtube.com"]:before{
+          content: "yt";
+        }
+        &[href*="facebook.com"]:before{
+          content: "fb";
+        }
+        &[href*="twitter.com"]:before{
+          content: "tw";
+        }
+        &[href*="mastodon"]:before{
+          content: "mt";
+        }
+      }
+    }
+  }
 }

sass/style.scss

@@ -5,7 +5,7 @@ Theme URI: https://git.hangar.org/xarxaprod/
 Author: Hangar.org Tech Lab - hangar.org
 Author URI: https://hangar.org
 Description: theme for the <a href="https://xarxaprod.cat">XarxaProd</a>. Inclou la possibilitat de publicar, catalogar i cercar ajuts, resoldre dubtes amb FAQs i altres. Design by Eudald Van der Pla <a href="https://vanderpla.com">vanderpla.com</a>. Coding template and theme by <a href="https://vitrubio.net">Jorge - vitrubio.net</a>
-Version: 1.7.0
+Version: 1.7.2
 Tested up to: 6.5
 Requires PHP: 7.4
 License: GNU General Public License v3 or later

style.css

@@ -5,7 +5,7 @@ Theme URI: https://git.hangar.org/xarxaprod/
 Author: Hangar.org Tech Lab - hangar.org
 Author URI: https://hangar.org
 Description: theme for the <a href="https://xarxaprod.cat">XarxaProd</a>. Inclou la possibilitat de publicar, catalogar i cercar ajuts, resoldre dubtes amb FAQs i altres. Design by Eudald Van der Pla <a href="https://vanderpla.com">vanderpla.com</a>. Coding template and theme by <a href="https://vitrubio.net">Jorge - vitrubio.net</a>
-Version: 1.7.0
+Version: 1.7.2
 Tested up to: 6.5
 Requires PHP: 7.4
 License: GNU General Public License v3 or later
@@ -1273,6 +1273,59 @@ dd {
 	ul[id*="menu-social-media"] li a[href*="mastodon"]::before {
 		content: "mt";
 	}
+
+	ul[class*="xarxaprod-associat-social-links"] {
+		display: flex;
+		flex-flow: row;
+		margin: 0;
+	}
+
+	ul[class*="xarxaprod-associat-social-links"] li {
+		height: 1.5em;
+		width: 1.5em;
+		background-color: inherit;
+		border-radius: 5em;
+		border: none !important;
+		margin-right: 0.3em;
+		position: relative;
+	}
+
+	ul[class*="xarxaprod-associat-social-links"] li a {
+		font-size: 0;
+	}
+
+	ul[class*="xarxaprod-associat-social-links"] li a::before {
+		content: "";
+		display: inline-flex;
+		align-content: center;
+		justify-content: center;
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		width: 100%;
+		font-size: 1rem;
+	}
+
+	ul[class*="xarxaprod-associat-social-links"] li a[href*="instagram.com"]::before {
+		content: "in";
+	}
+
+	ul[class*="xarxaprod-associat-social-links"] li a[href*="youtube.com"]::before {
+		content: "yt";
+	}
+
+	ul[class*="xarxaprod-associat-social-links"] li a[href*="facebook.com"]::before {
+		content: "fb";
+	}
+
+	ul[class*="xarxaprod-associat-social-links"] li a[href*="twitter.com"]::before {
+		content: "tw";
+	}
+
+	ul[class*="xarxaprod-associat-social-links"] li a[href*="mastodon"]::before {
+		content: "mt";
+	}
 }
 
 /* Make sure embeds and iframes fit their containers. */

template-parts/content-xarxaprod-associat.php

@@ -69,14 +69,22 @@
 	      <?php if( get_field('xxp_associat_tel') ): ?>
 	      <li class="xarxaprod-associat-tel">
 	      	<h6>Telèfon:</h6>
-          <p><?php the_field('xxp_associat_tel'); ?></p>
+					<p><a href="tel:<?php the_field('xxp_associat_tel'); ?>"><?php the_field('xxp_associat_tel'); ?></a></p>
+
 	      </li>
 	  		<?php endif; ?>
 				
-        <?php if( get_field('xxp_associat_xarxes') ): ?>
+        <?php if( have_rows('xxp_asocciat_social_networks') ): ?>
-	      <li class="xarxaprod-associat-tel">
+	      <li class="xarxaprod-associat-social-networks">
-	      	<h6>Xarxes socials:</h6>
+					<h6>Xarxes:</h6>
-          <p><?php the_field('xxp_associat_xarxes'); ?></p>
+          <ul class="xarxaprod-associat-social-links">
+		       <?php while( have_rows('xxp_asocciat_social_networks') ): the_row(); ?>
+					 <li>
+						<?php $eachlink=get_sub_field('xxp_associat_link_social'); ?>
+		        <a href="<?php echo esc_attr($eachlink);?>" title="<?php echo esc_attr($eachlink);?>"><?php echo esc_attr($eachlink);?></a>
+					 </li>
+           <?php endwhile; //end while has rows associat social networks ?>
+          </ul>
 	      </li>
 	  		<?php endif; ?>
       </ul>