Merge pull request #158 from ghuser-io/ui

Improve Profile Pages

Author: lourot

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"]
 }
 ```
 

docs/repo-settings.png

@@ -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;
+}

docs/screenshot-data-age.png

@@ -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;
 }

docs/screenshot.png

@@ -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/All.css

@@ -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/Avatar.css

@@ -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 :)" ||