Add the twitter X icon and update the social icons and replace the fo…

…nt with svg icons.
MichelGabriel · Jul 23, 2024 · 547aa4a · 547aa4a
1 parent fb966e3
commit 547aa4a
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 34 deletions.
diff --git a/web-ui/src/main/resources/catalog/components/search/mdview/partials/social.html b/web-ui/src/main/resources/catalog/components/search/mdview/partials/social.html
@@ -1,40 +1,45 @@
 <section class="gn-md-side-social">
   <h2 data-translate="">shareOn</h2>
-  <div class="btn-group">
+  <div>
     <a
       data-ng-href="https://twitter.com/share?url={{socialMediaLink | encodeURIComponent}}"
       title="{{'shareOnTwitter' | translate}}"
       target="_blank"
-      class="btn btn-default"
-      ><i class="fa fa-fw fa-twitter"></i
-    ></a>
+      class="btn btn-default btn-round"
+      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
+    </a>
     <a
       data-ng-href="https://www.facebook.com/sharer.php?u={{socialMediaLink | encodeURIComponent}}"
       title="{{'shareOnFacebook' | translate}}"
       target="_blank"
-      class="btn btn-default"
-      ><i class="fa fa-fw fa-facebook"></i
-    ></a>
+      class="btn btn-default btn-round"
+      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z"/></svg>
+    </a>
     <a
       data-ng-href="http://www.linkedin.com/sharing/share-offsite/?url={{socialMediaLink | encodeURIComponent}}"
       title="{{'shareOnLinkedIn' | translate}}"
       target="_blank"
-      class="btn btn-default"
-      ><i class="fa fa-fw fa-linkedin"></i
-    ></a>
+      class="btn btn-default btn-round"
+      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M100.3 448H7.4V148.9h92.9zM53.8 108.1C24.1 108.1 0 83.5 0 53.8a53.8 53.8 0 0 1 107.6 0c0 29.7-24.1 54.3-53.8 54.3zM447.9 448h-92.7V302.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V448h-92.8V148.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V448z"/></svg>
+    </a>
     <a
       data-ng-href="mailto:?subject={{md.resourceTitle}}&amp;body={{socialMediaLink | encodeURIComponent}}"
       title="{{'shareByEmail' | translate}}"
       target="_blank"
-      class="btn btn-default"
-      ><i class="fa fa-fw fa-envelope-o"></i
-    ></a>
+      class="btn btn-default btn-round"
+      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 112c-8.8 0-16 7.2-16 16l0 22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1l0-22.1c0-8.8-7.2-16-16-16L64 112zM48 212.2L48 384c0 8.8 7.2 16 16 16l384 0c8.8 0 16-7.2 16-16l0-171.8L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64l384 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128z"/></svg>
+    </a>
     <a
       data-ng-click="mdService.getPermalink(md)"
       href=""
       title="{{'permalink' | translate}}"
-      class="btn btn-default"
-      ><i class="fa fa-fw fa-link"></i
-    ></a>
+      class="btn btn-default btn-round"
+      >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
+    </a>
   </div>
 </section>
diff --git a/web-ui/src/main/resources/catalog/views/default/less/gn_footer_default.less b/web-ui/src/main/resources/catalog/views/default/less/gn_footer_default.less
@@ -22,4 +22,8 @@
       background-color: @gn-bottombar-background-hover !important;
     }
   }
+  svg {
+    height: 16px;
+    margin-top: 2px;
+  }
 }
diff --git a/web-ui/src/main/resources/catalog/views/default/less/gn_result_default.less b/web-ui/src/main/resources/catalog/views/default/less/gn_result_default.less
@@ -45,6 +45,14 @@
       margin: 0 5px 5px 0;
     }
     margin-bottom: 15px;
+    .btn-round {
+      padding: 15px;
+      width: 50px;
+      height: 50px;
+    }
+    svg {
+      height: 16px;
+    }
   }
   // highlight the active view
   .gn-view-menu-button {

diff --git a/web-ui/src/main/resources/catalog/views/default/templates/footer.html b/web-ui/src/main/resources/catalog/views/default/templates/footer.html
@@ -18,9 +18,9 @@
     </a>
   </li>
   <li class="hidden-sm">
-    <a href="https://github.com/geonetwork/core-geonetwork">
-      <span class="fa fa-fw fa-github"></span>
-      <span data-translate="">github</span>
+    <a href="https://github.com/geonetwork/core-geonetwork" class="flex-row flex-align-center">
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
+      <span class="gn-margin-left-sm" data-translate="">github</span>
     </a>
   </li>
   <li>
@@ -44,7 +44,7 @@
       title="{{'shareOnTwitter' | translate}}"
       aria-label="{{'shareOnTwitter' | translate}}"
     >
-      <span class="fa fa-twitter"></span>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
     </a>
   </li>
   <li>
@@ -54,7 +54,7 @@
       title="{{'shareOnFacebook' | translate}}"
       aria-label="{{'shareOnFacebook' | translate}}"
     >
-      <span class="fa fa-facebook"></span>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z"/></svg>
     </a>
   </li>
   <li>
@@ -64,7 +64,7 @@
       title="{{'shareOnLinkedIn' | translate}}"
       aria-label="{{'shareOnLinkedIn' | translate}}"
     >
-      <span class="fa fa-linkedin"></span>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M100.3 448H7.4V148.9h92.9zM53.8 108.1C24.1 108.1 0 83.5 0 53.8a53.8 53.8 0 0 1 107.6 0c0 29.7-24.1 54.3-53.8 54.3zM447.9 448h-92.7V302.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V448h-92.8V148.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V448z"/></svg>
     </a>
   </li>
   <li>
@@ -74,7 +74,7 @@
       title="{{'shareByEmail' | translate}}"
       aria-label="{{'shareByEmail' | translate}}"
     >
-      <span class="fa fa-envelope-o"></span>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 112c-8.8 0-16 7.2-16 16l0 22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1l0-22.1c0-8.8-7.2-16-16-16L64 112zM48 212.2L48 384c0 8.8 7.2 16 16 16l384 0c8.8 0 16-7.2 16-16l0-171.8L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64l384 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128z"/></svg>
     </a>
   </li>
   <li>
@@ -84,8 +84,8 @@
       title="{{'permalink' | translate}}"
       aria-label="{{'permalink' | translate}}"
     >
-      <span class="fa fa-fw fa-link"></span
-    ></a>
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
+    </a>
   </li>
   <li
     data-ng-if="info['microservices/enabled'] === true"

diff --git a/web/src/main/webapp/WEB-INF/data/data/formatter/xslt/render-layout.xsl b/web/src/main/webapp/WEB-INF/data/data/formatter/xslt/render-layout.xsl
@@ -228,26 +228,26 @@
                 <a href="https://twitter.com/share?url={encode-for-uri($nodeUrl)}api%2Frecords%2F{$metadataUuid}"
                    target="_blank"
                    aria-label="Twitter"
-                   class="btn btn-default">
-                  <i class="fa fa-fw fa-twitter"></i>
+                   class="btn btn-default btn-round">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>
                 </a>
                 <a href="https://www.facebook.com/sharer.php?u={encode-for-uri($nodeUrl)}api%2Frecords%2F{$metadataUuid}"
                    target="_blank"
                    aria-label="Facebook"
-                   class="btn btn-default">
-                  <i class="fa fa-fw fa-facebook"></i>
+                   class="btn btn-default btn-round">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M80 299.3V512H196V299.3h86.5l18-97.8H196V166.9c0-51.7 20.3-71.5 72.7-71.5c16.3 0 29.4 .4 37 1.2V7.9C291.4 4 256.4 0 236.2 0C129.3 0 80 50.5 80 159.4v42.1H14v97.8H80z"/></svg>
                 </a>
                 <a href="http://www.linkedin.com/shareArticle?mini=true&amp;summary=&amp;url={encode-for-uri($nodeUrl)}api%2Frecords%2F{$metadataUuid}"
                    target="_blank"
                    aria-label="LinkedIn"
-                   class="btn btn-default">
-                  <i class="fa fa-fw fa-linkedin"></i>
+                   class="btn btn-default btn-round">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M100.3 448H7.4V148.9h92.9zM53.8 108.1C24.1 108.1 0 83.5 0 53.8a53.8 53.8 0 0 1 107.6 0c0 29.7-24.1 54.3-53.8 54.3zM447.9 448h-92.7V302.4c0-34.7-.7-79.2-48.3-79.2-48.3 0-55.7 37.7-55.7 76.7V448h-92.8V148.9h89.1v40.8h1.3c12.4-23.5 42.7-48.3 87.9-48.3 94 0 111.3 61.9 111.3 142.3V448z"/></svg>
                 </a>
                 <a href="mailto:?subject={$title}&amp;body={encode-for-uri($nodeUrl)}api%2Frecords%2F{$metadataUuid}"
                    target="_blank"
                    aria-label="Email"
-                   class="btn btn-default">
-                  <i class="fa fa-fw fa-envelope-o"></i>
+                   class="btn btn-default btn-round">
+                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 112c-8.8 0-16 7.2-16 16l0 22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1l0-22.1c0-8.8-7.2-16-16-16L64 112zM48 212.2L48 384c0 8.8 7.2 16 16 16l384 0c8.8 0 16-7.2 16-16l0-171.8L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64l384 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128z"/></svg>
                 </a>
               </section>
             </xsl:if>
@@ -403,7 +403,7 @@
     <xsl:if test="$isDisplayed">
       <div id="gn-view-{generate-id()}" class="gn-tab-content">
         <xsl:apply-templates mode="render-view" select="@xpath"/>
-        
+
       </div>
     </xsl:if>
   </xsl:template>