fix: add missing hrefs, change obj to div

Author: luiskcs89

src/index.html

@@ -101,7 +101,7 @@
   height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
   <!-- End Google Tag Manager (noscript) -->
 
-  <app-nav-header />
+  <app-nav-header></app-nav-header>
 
   <open-forge-app></open-forge-app>
 

src/pages/app-about/app-about.scss

@@ -79,6 +79,24 @@
       margin: 0 auto 3rem;
       max-width: 768px;
     }
+
+    .integrity {
+      background: url('assets/svg/about-graphic-integrity.svg') center center no-repeat;
+      height: 164px;
+      width: 220px;
+    }
+
+    .honesty {
+      background: url('assets/svg/about-graphic-honesty.svg') center center no-repeat;
+      height: 164px;
+      width: 220px;
+    }
+
+    .transparency {
+      background: url('assets/svg/about-graphic-transparency.svg') center center no-repeat;
+      height: 164px;
+      width: 220px;
+    }
   }
 
   .value-text {

src/pages/app-about/app-about.tsx

@@ -273,15 +273,15 @@ export class AppAbout {
             </div>
             <div class="row">
               <div class="col-md-4 col-sm-12 d-flex flex-column align-items-center">
-                <object data="assets/svg/about-graphic-integrity.svg" height="164px" width="220px" />
+                <div class="integrity" />
                 <app-translate class="value-text" key="about.values.value2" />
               </div>
               <div class="col-md-4 col-sm-12 d-flex flex-column align-items-center">
-                <object data="assets/svg/about-graphic-honesty.svg" height="164px" width="220px" />
+                <div class="honesty" />
                 <app-translate class="value-text" key="about.values.value1" />
               </div>
               <div class="col-md-4 col-sm-12 d-flex flex-column align-items-center">
-                <object data="assets/svg/about-graphic-transparency.svg" height="164px" width="220px" />
+                <div class="transparency" />
                 <app-translate class="value-text" key="about.values.value3" />
               </div>
             </div>

src/pages/app-blog/app-blog.tsx

@@ -220,7 +220,7 @@ export class AppBlog {
       }
       return (
         <li class={filterClass}>
-          <a onClick={() => this.handleFilter(filter.slug)} class={filterLinkClass}>
+          <a onClick={() => this.handleFilter(filter.slug)} href="#" class={filterLinkClass}>
             {filter.name}
           </a>
         </li>
@@ -276,7 +276,7 @@ export class AppBlog {
         const pageLinkClass = currentPage === i + 1 ? 'blog-page-item active' : 'blog-page-item';
         return (
           <li class={pageItemClass}>
-            <a id={`nav-to-page-${i + 1}`} onClick={e => this.handlePaging(e)} class={pageLinkClass}>
+            <a id={`nav-to-page-${i + 1}`} onClick={e => this.handlePaging(e)} href="#" class={pageLinkClass}>
               {i + 1}
             </a>
           </li>

src/pages/app-detailed-service/app-detailed-service.scss

@@ -72,6 +72,11 @@
     @include media-breakpoint-down(sm) {
       text-align: center;
     }
+
+    .img-services {
+      width: 250px;
+      height: 250px;
+    }
   }
 
   .our-work {

src/pages/app-detailed-service/app-detailed-service.tsx

@@ -180,7 +180,7 @@ export class AppDetailedService {
             </div>
             <div class="row text-sm-center text-md-left">
               <div class="col-md-4 col-sm-12 d-flex justify-content-center align-items-center">
-                <object data={this.imgs[this.match.params.service].services.first} height="250" width="250" />
+                <img class="img-services" src={this.imgs[this.match.params.service].services.first} />
               </div>
               <div class="col-md-8 col-sm-12 d-flex flex-column align-self-center">
                 <h3>
@@ -193,7 +193,7 @@ export class AppDetailedService {
             </div>
             <div class="row text-sm-center text-md-right">
               <div class="col-md-4 col-sm-12 d-flex order-md-2 justify-content-center align-items-center">
-                <object data={this.imgs[this.match.params.service].services.second} height="250" width="250" />
+                <img class="img-services" src={this.imgs[this.match.params.service].services.second} />
               </div>
               <div class="col-md-8 col-sm-12 order-md-1 d-flex flex-column align-self-center">
                 <h3>
@@ -206,7 +206,7 @@ export class AppDetailedService {
             </div>
             <div class="row text-sm-center text-md-left">
               <div class="col-md-4 col-sm-12 d-flex justify-content-center align-items-center">
-                <object data={this.imgs[this.match.params.service].services.third} height="250" width="250" />
+                <img class="img-services" src={this.imgs[this.match.params.service].services.third} />
               </div>
               <div class="col-md-8 col-sm-12 d-flex flex-column align-self-center">
                 <h3>

src/pages/app-home/app-home.scss

@@ -12,10 +12,12 @@
     margin-top: 115px;
 
     .svg-header-desktop {
-      display: initial;
+      background: url('assets/svg/home-graphic-header.svg') center center no-repeat;
+      height: 542px;
+      display: block;
 
       @include media-breakpoint-up(md) {
-        display: initial;
+        display: block;
       }
 
       @include media-breakpoint-down(sm) {
@@ -24,14 +26,16 @@
     }
 
     .svg-header-mobile {
+      background: url('assets/svg/home-graphic-header-mobile.svg') center center no-repeat;
+      height: 768px;
       display: none;
 
       @include media-breakpoint-up(md) {
         display: none;
       }
 
       @include media-breakpoint-down(sm) {
-        display: initial;
+        display: block;
       }
     }
 

src/pages/app-home/app-home.tsx

@@ -130,8 +130,8 @@ export class AppHome {
                 <h2>
                   <app-translate key="home.hero.subTitle" />
                 </h2>
-                <object data="/assets/svg/home-graphic-header.svg" class="svg-header-desktop" aria-label="header" />
-                <object data="/assets/svg/home-graphic-header-mobile.svg" class="svg-header-mobile" aria-label="header" />
+                <div class="svg-header-desktop" aria-label="header" />
+                <div class="svg-header-mobile" aria-label="header" />
               </div>
             </div>
           </div>

src/pages/app-services/app-services.scss

@@ -29,10 +29,19 @@
       }
 
       .services-graphic-background {
+        background: url('assets/svg/services-graphic-background.svg') center top no-repeat;
+        width: 100%;
         position: absolute;
+        padding-top: 58.35%;
         top: 50px;
       }
 
+      .svg-header-desktop {
+        background: url('assets/svg/services-graphic-header.svg') center center no-repeat;
+        width: 100%;
+        padding-top: 56.22%;
+      }
+
       h1 {
         position: absolute;
         width: 100%;

src/pages/app-services/app-services.tsx

@@ -38,13 +38,13 @@ export class AppServices {
         {/* header - hero */}
         <header class="hero">
           <div class="container desktop">
-            <object data="/assets/svg/services-graphic-background.svg" class="services-graphic-background" aria-label="header" />
+            <div class="services-graphic-background" aria-label="header" />
             <div class="row align-items-center">
               <div class="col-12 flex-column">
                 <h1>
                   <app-translate key="services.landing.hero.title" />
                 </h1>
-                <object data="/assets/svg/services-graphic-header.svg" class="svg-header-desktop" aria-label="header" />
+                <div class="svg-header-desktop" aria-label="header" />
               </div>
             </div>
             <div class="row align-items-center">