Add message to feature yourself on People

- Add default colors for <a> in styles
- Pass isMobile to <router-view>
- Conditional flow-direction for member social links buttons
- Add message at top of People page notifying visitors they may feature themselves by making a PR or emailing webmaster@nuhacks.io

Author: jennydaman

src/components/hacks-nav.vue

@@ -71,10 +71,6 @@ export default {
   display: block;
   margin: auto;
 
-  @media (max-width: $hacks-page-width) {
-    display: unset;
-  }
-
   &__button {
     line-height: 48px;
     cursor: pointer;
@@ -100,12 +96,12 @@ export default {
     text-decoration: none;
     font-weight: 900;
     size: 14px !important;
-    color: $hacks-nav-inactive-color;
+    color: $hacks-nav-inactive-color !important;
     font-size: $hacks-h2;
-    padding: 0.5em 1em;
+    padding: 0.5em;
 
     &.router-link-exact-active {
-      color: $hacks-nav-active-color;
+      color: $hacks-nav-active-color !important;
     }
 
     &:hover,
@@ -131,7 +127,7 @@ export default {
     display: flex;
     flex-wrap: wrap;
     align-items: baseline;
-    max-width: fit-content;
+    margin: unset;
     margin-top: 1em;
 
     :nth-child(1) {

src/styles/_default.scss

@@ -30,3 +30,16 @@ p {
   font-size: $hacks-text;
   margin: unset;
 }
+
+a,
+a:visited {
+  color: $hacks-a;
+}
+
+a:hover {
+  color: $hacks-a-hover;
+}
+
+a:active {
+  color: $hacks-a-active;
+}

src/styles/_variables.scss

@@ -18,3 +18,6 @@ $hacks-nav-inactive-color: #c5e0da;
 $hacks-text-color: #d2dad3;
 $hacks-dark-text-color: #52414c;
 $hacks-background-color: #1b263b;
+$hacks-a: #465775;
+$hacks-a-hover: #4e2c3d;
+$hacks-a-active: #a13d63;

src/views/Members.vue

@@ -1,18 +1,29 @@
 <template>
   <section class="hacks-members">
+    <p class="feature-message">
+      <small>
+        Want to feature yourself?
+        <br />Make a
+        <a
+          class="hacks-members__link"
+          href="https://github.com/hacks/hacks.github.io/blob/vue/src/data/members.js"
+        >PR</a>
+        or email
+        <a
+          class="hacks-members__link"
+          href="mailto:webmaster@nuhacks.io"
+        >webmaster@nuhacks.io</a>
+        your name, interests, and a photo!
+      </small>
+    </p>
+
     <div v-for="(person, index) in members" :key="index">
       <div class="hacks-members__row hacks-members__member">
-        <div class="hacks-members__column">
-          <hacks-button
-            v-if="person.links.website"
-            :link="person.links.website"
-          >
+        <div :style="{flexDirection: + isMobile ? 'row' : 'column'}" class="hacks-members__column">
+          <hacks-button v-if="person.links.website" :link="person.links.website">
             <img :src="cursorIcon" />
           </hacks-button>
-          <hacks-button
-            v-if="person.links.email"
-            :link="`mailto:${person.links.email}`"
-          >
+          <hacks-button v-if="person.links.email" :link="`mailto:${person.links.email}`">
             <img :src="outlookIcon" />
           </hacks-button>
           <hacks-button
@@ -32,9 +43,7 @@
         <div class="hacks-members__list">
           <p class="hacks-small-caps">interests</p>
           <ul>
-            <li v-for="(interest, index) in person.interests" :key="index">
-              {{ interest }}
-            </li>
+            <li v-for="(interest, index) in person.interests" :key="index">{{ interest }}</li>
           </ul>
         </div>
       </div>
@@ -51,17 +60,24 @@ export default {
   name: "hacks-members",
   components: {
     HacksProfileCard,
-    HacksButton,
+    HacksButton
+  },
+  props: {
+    isMobile: {
+      type: Boolean,
+      required: true,
+      default: false
+    }
   },
   data() {
     return {
       members: MEMBERS,
       githubIcon: require("../assets/GitHub-Mark-64px.png"),
       cursorIcon: require("../assets/cursor.svg"),
       linkedinIcon: require("../assets/linkedin.svg"),
-      outlookIcon: require("../assets/microsoft-outlook.svg"),
+      outlookIcon: require("../assets/microsoft-outlook.svg")
     };
-  },
+  }
 };
 </script>
 
@@ -114,13 +130,30 @@ export default {
   &__column {
     margin-top: 2em;
     display: flex;
-    flex-flow: column wrap;
   }
 
   &__column img {
     display: block;
     width: 20px;
     margin: auto 1em;
   }
+
+  .feature-message {
+    width: 100%;
+    margin-bottom: 1em;
+    border: 1px solid white;
+    border-radius: 25px;
+
+    a {
+      color: white !important;
+    }
+  }
+
+  .feature-message > * {
+    display: block;
+    width: 60vw;
+    margin: auto;
+    padding: 1em;
+  }
 }
 </style>

src/views/Page.vue

@@ -2,7 +2,7 @@
   <section class="hacks-page">
     <github-corner :is-mobile="isMobile" :link="link" />
     <hacks-nav :is-mobile="isMobile" />
-    <router-view />
+    <router-view :is-mobile="isMobile" />
   </section>
 </template>
 
@@ -23,7 +23,7 @@ export default {
     };
   },
   beforeMount() {
-    const breakpoint = window.matchMedia("( max-width: 981px )");
+    const breakpoint = window.matchMedia("( max-width: 710px )");
     this.addQuery(breakpoint, mq => {
       this.isMobile = mq.matches;
     });