Merge pull request #158 from ghuser-io/ui

Improve Profile Pages

README.md

@@ -49,12 +49,12 @@ We love the default GitHub profiles and we want to enhance them:
   GitHub. We are showing them **all**, even those you don't own and those owned by organizations
   you're not in.<sup>[1](#footnote1)</sup>
 * The GitHub profiles are listing all the repos you own but they sort them only by age of the
-  latest commit. We prefer to **sort repos** by a combination of how active they are, how much you
-  have contributed to them, how popular they are, etc. For each user we want to see first the latest
-  greatest repos they have most contributed to.
-* On GitHub only repos earn stars. We push it one step further by transferring these **stars to
-  users**. If you have built 23% of a 145 stars repo, you deserve 33 stars for that contribution. We
-  add all these stars and clearly show how many of them you earned in total.
+  latest commit. We prefer to **sort repos** by a combination of how much you
+  have contributed to them, their size, how popular they are, etc. For each user we want to see
+  first the latest greatest repos they have most contributed to.
+* On GitHub only repos earn stars. We push it one step further by having **users earn stars**:
+  You earn stars when you contribute to a repo.
+  We add all these earned stars and show how many you've earned in total.
 * The GitHub profiles don't clearly show how big your contribution to a repo was, when you don't own
   it. Maybe you wrote 5%. Maybe 90%. We **make it clear**.
 * GitHub detects programming languages. We want to also know about

docs/repo-settings.md

@@ -33,7 +33,8 @@ See [this example](../.ghuser.io.json).
 ```json
 {
   "_comment": "Repo metadata for ghuser.io. See https://github.com/ghuser-io/ghuser.io/blob/master/docs/repo-settings.md",
-  "techs": ["React", "Node.js", "Reframe", "Bootstrap", "Semantic UI", "AWS"]
+  "techs": ["React", "Node.js", "Reframe", "hapi", "Bootstrap", "Semantic UI", "AWS", "Ansible",
+            "Travis CI"]
 }
 ```
 

reframe/views/All.css

@@ -49,6 +49,10 @@ a:hover
   display: inline-block;
   color: #bcc0c4;
 }
+/* avoid external link icon above to be shown in a new line */
+.external {
+  white-space: nowrap;
+}
 
 .container-lg {
   max-width: 1012px;
@@ -64,3 +68,22 @@ a:hover
 .text-bold {
   font-weight: 600;
 }
+
+body {
+  padding-bottom: 90px;
+}
+
+.emoji {
+  height: 1.3em;
+  width: auto;
+}
+
+.icon-vertical-align {
+  vertical-align: middle !important;
+}
+
+/* TODO remove this */
+/* this is too global */
+.icon {
+  vertical-align: middle !important;
+}

reframe/views/profile/Avatar.css

@@ -1,8 +1,32 @@
 .avatar {
   max-width: 100%;
   height: auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
 }
 
+.avatar-small {
+  float: left;
+  width: 50px;
+  height: 50px;
+  margin-right: .5em;
+  margin-bottom: -.5em;
+}
+
+.avatar-add {
+  border-width: medium !important;
+  text-align: center;
+  opacity: 0.55;
+  transition: opacity 0.5s;
+}
+.avatar-add:hover {
+  opacity: 1;
+}
 .avatar-add-sign {
+  display: inline-block;
   vertical-align: middle;
+  background-color: #eee;
+  width: 24px;
+  margin-top: -5px;
 }

reframe/views/profile/Avatar.js

@@ -2,13 +2,8 @@ import React from 'react';
 
 import './Avatar.css';
 
-const Avatar = props => {
-  if (props.type == "add") { // special button for explaining how to add an avatar
-    return <div className={`avatar border border-white rounded ${props.classes}`}>
-             <span className="avatar-add-sign">+</span>
-           </div>;
-  }
-  return <img className={`avatar border border-white rounded ${props.classes}`} src={props.url} />;
-};
+const Avatar = ({classes, url}) => (
+  <img className={`avatar border border-white rounded ${classes}`} src={url} />
+);
 
 export default Avatar;

reframe/views/profile/AvatarAdd.js

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export default AvatarAdd;
+
+function AvatarAdd() {
+    return (
+      <div className="avatar border border-white rounded avatar-small avatar-add">
+        <span className="avatar-add-sign text-gray">+</span>
+      </div>
+    );
+}

reframe/views/profile/leftpanel/LeftPanel.js

@@ -8,20 +8,17 @@ import VCardDetails from './VCardDetails';
 import './LeftPanel.css';
 import Avatar from '../Avatar';
 import {urls} from '../../../ghuser';
+import {getTotalEarnedStars} from './../rightpanel/contrib/badges/Badges';
 
 const LeftPanel = props => {
-  let stars = 0;
-  for (const repo in props.contribs && props.contribs.repos) {
-    const contrib = props.contribs.repos[repo];
-    stars += contrib.percentage * contrib.stargazers_count / 100;
-  }
+  const totalEarnedStars = getTotalEarnedStars(props.contribs);
 
   return (
     <div className="col-3 p-0 pr-4">
       <Avatar url={props.user.avatar_url || AvatarUnknown} classes="avatar-user" />
       <VCard login={props.user.login}
              name={!props.user.ghuser_created_at && 'Your name here' || props.user.name}
-             url={props.user.html_url} stars={stars} />
+             url={props.user.html_url} stars={totalEarnedStars} />
       <Bio text={
         props.user.ghuser_being_created && "This profile is being created..." ||
         !props.user.ghuser_created_at && "I love coding and I'm about to create my profile on ghuser.io :)" ||

reframe/views/profile/leftpanel/Orgs.js

@@ -11,39 +11,21 @@ const Orgs = props => {
     </a>
   );
 
-  const memberOf = [];
-  for (const org of props.userOrgs) {
-    if (props.allOrgs[org]) {
-      memberOf.push(orgAvatar(org));
-    }
-  }
   const contributedTo = [];
   for (const org of props.contribOrgs) {
     if (props.allOrgs[org]) {
       contributedTo.push(orgAvatar(org));
     }
   }
 
-  if (!memberOf.length && !contributedTo.length) {
-    return <div></div>;
-  }
-
-  const sections = [];
-  let classes = 'mb-1';
-  if (memberOf.length) {
-    sections.push(<div key='memberOf'><h4 className={classes}>Member of</h4>{memberOf}</div>);
-  }
-  if (contributedTo.length) {
-    if (memberOf.length) {
-      classes = `mt-4 ${classes}`;
-    }
-    sections.push(
-      <div key='contributedTo'><h4 className={classes}>Contributed to</h4>{contributedTo}</div>
-    );
+  if( contributedTo.length===0 ) {
+    return null;
   }
 
   return (
-    <div className={withSeparator('top', 3)}>{sections}</div>
+    <div className={withSeparator('top', 3)}>
+      <div key='contributedTo'><h4 className="mb-1">Contributed to</h4>{contributedTo}</div>
+    </div>
   );
 };
 

reframe/views/profile/leftpanel/VCard.css

@@ -20,4 +20,13 @@
 
 .vcard-stars {
   white-space: nowrap;
+  position: relative;
+  border-radius: 5px;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  padding-left: 5px;
+  padding-right: 7px;
+
+  border: 1px solid #e0e0e0;
+  background-color: #fafafa;
 }

reframe/views/profile/leftpanel/VCard.js

@@ -1,21 +1,31 @@
 import React from 'react';
 
 import './VCard.css';
-import {bigNum} from '../numbers';
+import {bigNum} from '../../utils/pretty-numbers';
 
-const VCard = props => {
-  const stars = Math.round(props.stars);
+const VCard = props => (
+  <div className="py-3">
+    <h1>
+      <div className="vcard-fullname">{props.name}</div>
+      <div className="vcard-username" style={{marginTop: -3, lineHeight: '1.7em'}}>
+        <a className="vcard-username-login mr-3" href={props.url} target="_blank"><i className="fab fa-github"></i> {props.login}</a>
+        <Stars {...props}/>
+      </div>
+    </h1>
+  </div>
+);
 
+const Stars = ({stars, login}) => {
+  stars = Math.round(stars);
+  if( stars < 1 ) {
+    return null;
+  }
   return (
-    <div className="py-3">
-      <h1>
-        <div className="vcard-fullname">{props.name}</div>
-        <div className="vcard-username">
-          <a className="vcard-username-login mr-3" href={props.url} target="_blank"><i className="fab fa-github"></i> {props.login}</a>
-          {stars >= 1 && <span className="vcard-stars">★ {bigNum(stars)}</span>}
-        </div>
-      </h1>
-    </div>
+    <span className="vcard-stars" title={login+" has earned a total of "+stars+" stars"}>
+      <span className="earned-stars-icon-color">★</span>
+      &nbsp;
+      <span className="earned-stars-text-color">{bigNum(stars)}</span>
+    </span>
   );
 };
 

reframe/views/profile/rightpanel/RightPanel.js

@@ -6,8 +6,8 @@ import * as Parser from 'html-react-parser';
 import {urls} from '../../../ghuser';
 import CreateYourProfile from './CreateYourProfile';
 import ProfileBeingCreated from './ProfileBeingCreated';
-import Contrib from './contrib/Contrib';
-import './RightPanel.css';
+import {Contrib} from './contrib/Contrib';
+import {getContribDisplayOrder} from './contrib/getContribScore';
 
 const RightPanel = props => {
   // Use these queues to avoid filling up the event loop:
@@ -21,24 +21,23 @@ const RightPanel = props => {
     );
   };
 
-  const compare = (a, b) => {
-    if (a.total_score < b.total_score) {
-      return 1;
-    }
-    if (a.total_score > b.total_score) {
-      return -1;
-    }
-    return 0;
-  };
-
   const repos = [];
 
   if (props.contribs) {
     const contribs = Object.values(props.contribs.repos);
-    contribs.sort(compare);
+    contribs.sort(getContribDisplayOrder);
 
     const uniqueNames = [];
-    for (const contrib of contribs) {
+    for (const i in contribs) {
+      const contrib = contribs[i];
+
+      // Don't include repos where user has made 0 commits. This happens when a user
+      // makes a PR that is not merged.
+      if( contrib.percentage===0 ) {
+        continue;
+      }
+
+
       // We don't want to have two repos with the same name. This happens when a user is
       // contributing to a project and has a fork with the same name:
       if (uniqueNames.indexOf(contrib.name) > -1) {
@@ -48,6 +47,7 @@ const RightPanel = props => {
 
       repos.push(
           <Contrib key={contrib.full_name} username={props.username} contrib={contrib}
+                   i={i}
                    pushToFunctionQueue={pushToFunctionQueue} />
       );
     }
@@ -93,22 +93,12 @@ const RightPanel = props => {
 
   return (
     <div className="col-9 pl-2 pr-0">
-      <div className="user-profile-nav">
-        <nav className="UnderlineNav-body">
-          <a href="javascript:;" className="UnderlineNav-item selected" aria-selected="true" role="tab">
-            Contributions
-          </a>
-          {/*<a href="javascript:;" className="UnderlineNav-item" aria-selected="false" role="tab">
-            Other tab
-          </a>*/}
-        </nav>
-      </div>
-      <div className="contribs">
+      <div style={{fontSize: '14px'}}>
         {repos}
       </div>
       {
         props.contribs &&
-        <div className="updated-hint text-gray">
+        <div className="text-gray" style={{textAlign: 'right'}}>
           <small><i>Updated {moment(props.fetchedat).fromNow()}.</i></small>
         </div>
       }