fix(app-members): removing hover overlay and text from mobile

Author: PottertheJavaOtter

src/components/app-members/app-members.tsx

@@ -1,4 +1,5 @@
 import { Component, Prop, h } from '@stencil/core';
+import { isMobile } from '../../shared/mobile-check';
 
 @Component({
   tag: 'app-members',
@@ -19,12 +20,14 @@ export class AppMembers {
                 <figure class="member">
                   <stencil-route-link url={member.url} exact={true}>
                     <app-img class="member--image" src={member.image} alt={member.name} />
-                    <div class="member--overlay">
-                      <figcaption class="member--text">
-                        <span class="">{member.name}</span>
-                        <span class="">{member.title}</span>
-                      </figcaption>
-                    </div>
+                    {!isMobile() && (
+                      <div class="member--overlay">
+                        <figcaption class="member--text">
+                          <span class="">{member.name}</span>
+                          <span class="">{member.title}</span>
+                        </figcaption>
+                      </div>
+                    )}
                   </stencil-route-link>
                 </figure>
               );
@@ -33,12 +36,14 @@ export class AppMembers {
               <figure class="member">
                 <stencil-route-link url={member.url} exact={true}>
                   <app-img class="member--image" src={member.image} alt={member.name} />
-                  <div class="member--overlay">
-                    <figcaption class="member--text">
-                      <span class="">{member.name}</span>
-                      <span class="">{member.title}</span>
-                    </figcaption>
-                  </div>
+                  {!isMobile() && (
+                    <div class="member--overlay">
+                      <figcaption class="member--text">
+                        <span class="">{member.name}</span>
+                        <span class="">{member.title}</span>
+                      </figcaption>
+                    </div>
+                  )}
                 </stencil-route-link>
               </figure>
             );
@@ -47,12 +52,14 @@ export class AppMembers {
             <figure class="member">
               <a href={member.url} target="_blank" rel="noopener">
                 <app-img class="member--image" src={member.image} alt={member.name} />
-                <div class="member--overlay">
-                  <figcaption class="member--text">
-                    <span class="">{member.name}</span>
-                    <span class="">{member.title}</span>
-                  </figcaption>
-                </div>
+                {!isMobile() && (
+                  <div class="member--overlay">
+                    <figcaption class="member--text">
+                      <span class="">{member.name}</span>
+                      <span class="">{member.title}</span>
+                    </figcaption>
+                  </div>
+                )}
               </a>
             </figure>
           );

src/shared/mobile-check.ts

@@ -0,0 +1,3 @@
+export function isMobile() {
+  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+}