FIX: Member details card (#171)

* Base for member details

* FIX: varied team member card width on mobile

* Removed unwanted pages

Author: rumaan

config.js

@@ -1,6 +1,3 @@
-module.exports ={
-    feedback_days:7,
-  
-        
-    }
-
+module.exports = {
+  feedback_days: 7,
+}

gatsby-config.js

@@ -14,6 +14,10 @@ module.exports = {
       title: 'SOSC - Blog',
       siteUrl: 'https://sosc.org.in/blog',
     },
+    memberDetails: {
+      title: 'SOSC - Member Details',
+      siteUrl: 'https://sosc.org.in/member-details',
+    },
   },
   plugins: [
     'gatsby-plugin-react-helmet',

gatsby-node.js

@@ -1,50 +1,48 @@
-const path = require('path');
-
-exports.createPages = ({actions, graphql}) => {
-    const {createPage} = actions;
-
-    const blogTemplate = path.resolve('src/templates/blog.js');
-    const eventTemplate = path.resolve('src/templates/event.js');
-
-    return graphql(
-        `{
-            allMarkdownRemark {
-                edges {
-                    node {
-                        id
-                        frontmatter {
-                            slug
-                        }
-
-                    }
-                }
+const path = require('path')
+
+exports.createPages = ({ actions, graphql }) => {
+  const { createPage } = actions
+
+  const blogTemplate = path.resolve('src/templates/blog.js')
+  const eventTemplate = path.resolve('src/templates/event.js')
+
+  return graphql(
+    `
+      {
+        allMarkdownRemark {
+          edges {
+            node {
+              id
+              frontmatter {
+                slug
+              }
             }
-        }`
-    ).then(res => {
-        if (res.errors) {
-            return Promise.reject(errors);
+          }
         }
-
-
-        res.data.allMarkdownRemark.edges.map(element => {
-
-            let slug = element.node.frontmatter.slug;
-
-            if (slug) {
-                //create page for blog using template
-                if (slug.includes(`/blog/`)) {
-                    createPage({
-                        path: slug,
-                        component: blogTemplate
-                    })
-                } else if (slug.includes(`/events/`)) {
-                    createPage({
-                        path: slug,
-                        component: eventTemplate
-                    })
-                }
-            }
-            
-        });
+      }
+    `
+  ).then(res => {
+    if (res.errors) {
+      return Promise.reject(errors)
+    }
+
+    res.data.allMarkdownRemark.edges.map(element => {
+      let slug = element.node.frontmatter.slug
+
+      if (slug) {
+        //create page for blog using template
+        if (slug.includes(`/blog/`)) {
+          createPage({
+            path: slug,
+            component: blogTemplate,
+          })
+        } else if (slug.includes(`/events/`)) {
+          createPage({
+            path: slug,
+            component: eventTemplate,
+          })
+        }
+      }
     })
-}
+  })
+}

src/components/header.js

@@ -1,39 +1,51 @@
-import React from 'react';
-import Link from 'gatsby-link';
-import favicon from '../images/favicon.ico';
-import Helmet from 'react-helmet';
+import React from 'react'
+import Link from 'gatsby-link'
+import favicon from '../images/favicon.ico'
+import Helmet from 'react-helmet'
 import GatsbyConfig from '../../gatsby-config'
 
-
 const Header = ({ siteTitle }) => (
   <div className="nav-bar">
     <Helmet
       title={GatsbyConfig.siteMetadata.title}
       meta={[
         { name: 'description', content: 'Sahyadri Open-Source Community' },
-        { name: 'keywords', content: 'Community, OpenSource, SOSC, sahyadri, student' },
-      ]}
-      link={[
-        { rel: 'shortcut icon', type: 'image/ico', href: `${favicon}` }
+        {
+          name: 'keywords',
+          content: 'Community, OpenSource, SOSC, sahyadri, student',
+        },
       ]}
+      link={[{ rel: 'shortcut icon', type: 'image/ico', href: `${favicon}` }]}
     />
 
     <div className="container">
       <div className="nav-items">
-        <span className="brand">
-          {siteTitle}
-        </span>
+        <span className="brand">{siteTitle}</span>
         <ul>
-          <li><Link to="/" exact={true} activeClassName="active">Home</Link></li>
-          <li><Link to="/events" exact={true} activeClassName="active">Events</Link></li>
-          <li><Link to="/blog" exact={true} activeClassName="active">Blogs</Link></li>
-          <li><Link to="/team" exact={true} activeClassName="active">Team</Link></li>
+          <li>
+            <Link to="/" exact={true} activeClassName="active">
+              Home
+            </Link>
+          </li>
+          <li>
+            <Link to="/events" exact={true} activeClassName="active">
+              Events
+            </Link>
+          </li>
+          <li>
+            <Link to="/blog" exact={true} activeClassName="active">
+              Blogs
+            </Link>
+          </li>
+          <li>
+            <Link to="/team" exact={true} activeClassName="active">
+              Team
+            </Link>
+          </li>
         </ul>
       </div>
     </div>
   </div>
 )
 
 export default Header
-
-

src/pages/blog.js

@@ -4,14 +4,14 @@ import Layout from '../components/indexLayout'
 import { graphql } from 'gatsby'
 
 function getBlogs(data) {
-  let blogs = [];
-  let blogList = data.allMarkdownRemark.edges;
+  let blogs = []
+  let blogList = data.allMarkdownRemark.edges
 
   blogList.forEach(element => {
-    blogs.push(<BlogCard data={element.node.frontmatter} />);
-  });
-  
-  return blogs;
+    blogs.push(<BlogCard data={element.node.frontmatter} />)
+  })
+
+  return blogs
 }
 
 const BlogsPage = ({ data }) => (
@@ -20,14 +20,14 @@ const BlogsPage = ({ data }) => (
       <div className="container">
         <section className="blog-section">
           <div className="blog-posts">{getBlogs(data)}</div>
-          { /*
+          {/*
+          
             <div className="blog-newsletter">
               <div className="news-card">
                 <img alt="" src="" />
               </div>
             </div>
-            */
-          }
+            */}
         </section>
       </div>
     </div>

src/sass/index.scss

@@ -1,6 +1,8 @@
 @import 'components/components';
 @import 'partials/base';
 
+$font : 'Varela Round';
+
 :focus {outline:none;}
 ::-moz-focus-inner {border:0;}
 
@@ -17,7 +19,7 @@ body {
   position: relative;
   margin: 0;
   min-height: 100%;
-  font-family: 'Varela Round', sans-serif;
+  font-family: $font, sans-serif;
   font-display: optional;
   color: #373738;
   background-color: #f3f3f3;

src/sass/partials/_layout.scss

@@ -2,6 +2,7 @@
 @import 'layouts/events';
 @import 'layouts/blogs';
 @import 'layouts/team';
+@import 'layouts/member';
 
 #flexContainer {
     display: flex;

src/sass/partials/layouts/_events.scss

@@ -40,7 +40,7 @@
       height: 100%;
       width: 100%;
       z-index: 1;
-      
+
       .card-header-text {
         width: 100%;
         text-align: center;

src/sass/partials/layouts/_member.scss

@@ -0,0 +1,61 @@
+.profile-container {
+  background: red;
+  width: 100%;
+  height: calc(100vh - 10px);
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  align-items: stretch;
+  // grid-template-columns: 0.4fr 1fr;
+
+  .profile-details {
+    background-color: black;
+    flex: 1 1 auto;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    .avatar {
+      flex: 1 1 auto;
+      background-color: aqua;
+    }
+    .links {
+      flex: 1 1 auto;
+      background-color: blue;
+    }
+    .random-info {
+      flex: 1 1 auto;
+      background-color: green;
+    }
+    .quote {
+      flex: 1 1 auto;
+      background-color: red;
+    }
+  }
+
+  .profile-content {
+    background-color: yellow;
+    flex: 3 1 auto;
+    .section {
+        display: flex;
+        flex-direction: column;
+        .skills {
+            flex: 1 1 auto;
+        }
+        .about {
+            flex: 1 1 auto;
+        }
+        .blogs {
+            flex: 1 1 auto;
+        }
+    }
+  }
+
+  @media #{$media-mobile} {
+    flex-direction: column;
+    width: 100%;
+  }
+  @media #{$media-small} {
+    flex-direction: column;
+    width: 100%;
+  }
+}