Merge pull request #15 from ArjanJ/staging

add project links on mobile through js
ArjanJ · Jul 15, 2019 · 29883ed · 29883ed
2 parents 71e4399 + 2963868
commit 29883ed
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 29 deletions.
diff --git a/includes/projects.pug b/includes/projects.pug
@@ -4,7 +4,7 @@ section.projects
       h2.common-section-title 01. Side Projects
 
     .projects-list
-      .projects-box.js-scroll
+      .projects-box.js-scroll(data-link="https://github.com/ArjanJ/teamwork")
         .projects-info
           h3.projects-name Teamwork
           p.projects-desc An app to keep track of feedback, schedule 1-on-1 meetings, and keep your team happy.
@@ -16,10 +16,11 @@ section.projects
             li.projects-tech-list-item Firebase
           a.projects-gh(href="https://github.com/ArjanJ/teamwork" rel="noopener" aria-label="GitHub repository for Teamwork" target="_blank") 
             include ./icons/gh-icon.pug
+            span See GitHub
         .projects-img.projects-box--sunset
           include ./teamwork.pug
 
-      .projects-box.projects-box--reverse.js-scroll
+      .projects-box.projects-box--reverse.js-scroll(data-link="https://github.com/ArjanJ/react-camera")
         .projects-info
           h3.projects-name React Camera
           p.projects-desc A flexible camera component for React DOM. Take photos using the latest WebRTC API's.
@@ -29,10 +30,11 @@ section.projects
             li.projects-tech-list-item Styled Components
           a.projects-gh(href="https://github.com/ArjanJ/react-camera" rel="noopener" aria-label="GitHub repository for React Camera" target="_blank") 
             include ./icons/gh-icon.pug
+            span See GitHub
         .projects-img.projects-box--redsky
           include ./react-camera.pug
 
-      .projects-box.js-scroll
+      .projects-box.js-scroll(data-link="https://github.com/ArjanJ/readit")
         .projects-info
           h3.projects-name Readit
           p.projects-desc Browse Reddit without visual noise. Built with React + Flux.
@@ -43,5 +45,6 @@ section.projects
             li.projects-tech-list-item Reddit API
           a.projects-gh(href="https://github.com/ArjanJ/readit" rel="noopener" aria-label="GitHub repository for Readit" target="_blank") 
             include ./icons/gh-icon.pug
+            span See GitHub
         .projects-img.projects-box--cyan
           include ./readit.pug
diff --git a/scripts/index.js b/scripts/index.js
@@ -1,13 +1,15 @@
 import { aboutModal } from './aboutModal';
+import { projectLinks } from './projectLinks';
 import { reactCameraAnimation } from './reactCameraAnimation';
 import { readitAnimation } from './readitAnimation';
 import { scrollAnimation } from './scrollAnimation';
 import { teamworkAnimation } from './teamworkAnimation';
 import { toggleScrollIndicator } from './toggleScrollIndicator';
 import { workAccordion } from './workAccordion';
 
-window.addEventListener('DOMContentLoaded', event => {
+window.addEventListener('DOMContentLoaded', () => {
   aboutModal();
+  projectLinks();
   reactCameraAnimation();
   readitAnimation();
   scrollAnimation();

diff --git a/scripts/projectLinks.js b/scripts/projectLinks.js
@@ -0,0 +1,36 @@
+import isMobile from 'is-mobile';
+
+/**
+ * projectsLinks
+ * On mobile the project links are added to the DOM
+ * using javascript because the actual link doesn't
+ * fit into the mobile design (it's hidden).
+ */
+export const projectLinks = () => {
+  const projects = document.querySelectorAll('.projects-box');
+
+  const handleClick = ({ target }) => {
+    const projectBox = target.closest('.projects-box');
+    const link = projectBox.getAttribute('data-link');
+
+    // Open project link in new tab.
+    window.open(link, '_blank');
+  };
+
+  const addEventListeners = () => {
+    for (let i = 0; i < projects.length; i++) {
+      projects[i].addEventListener('click', handleClick, false);
+    }
+  };
+
+  const init = () => {
+    // If we're on a desktop machine we don't need to bother adding links.
+    if (!isMobile()) {
+      return null;
+    }
+
+    addEventListeners();
+  };
+
+  init();
+};
diff --git a/styles/projects.scss b/styles/projects.scss
@@ -102,7 +102,7 @@
     display: flex;
     flex-wrap: wrap;
     list-style-type: none;
-    margin-bottom: 24px;
+    margin-bottom: 30px;
 
     &-item {
       background: rgba(white, 0.2);
@@ -145,37 +145,45 @@
   }
 
   &-gh {
-    align-items: center;
-    border-radius: 50%;
-    border: 2px solid white;
-    bottom: 12px;
-    display: flex;
-    height: 30px;
-    justify-content: center;
-    position: absolute;
-    right: 12px;
-    width: 30px;
+    display: none;
 
     @include mq($from: desktop) {
-      height: 36px;
-      position: static;
-      width: 36px;
+      color: white;
+      display: block;
+      font-weight: 700;
+      text-decoration: none;
+
+      span {
+        display: inline-block;
+        margin-left: 12px;
+        position: relative;
+
+        &::before {
+          background: white;
+          bottom: 0;
+          content: '';
+          height: 1px;
+          left: 0;
+          position: absolute;
+          transform-origin: left center;
+          transform: scaleX(0);
+          transition: transform 0.35s var(--ease-out-cubic);
+          width: 100%;
+        }
+      }
 
       svg {
-        height: 24px;
-        width: 24px;
+        transition: transform 0.35s var(--ease-out-cubic);
       }
-    }
 
-    svg {
-      height: 18px;
-      width: 18px;
-      transition: transform 0.25s var(--ease-out-cubic);
-    }
+      &:hover {
+        svg {
+          transform: rotateY(180deg);
+        }
 
-    &:hover {
-      svg {
-        transform: scale(1.25) rotate(360deg);
+        span::before {
+          transform: none;
+        }
       }
     }
   }