Org view improvements (fiqus#45)

* layout improvement to org list * improve org view (especially on mobile) * improve language bar and coop details display
camplight · Jan 3, 2020 · d0ed691 · d0ed691
1 parent d2bc962
commit d0ed691
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 50 deletions.
diff --git a/assets/css/app.css b/assets/css/app.css
@@ -29,14 +29,6 @@ div.line-mf {
     background-color: #00aad4;
 }
 
-.skill-mf .progress .progress-bar {
-    background-color: #00aad4;
-}
-
-.skill-mf .progress {
-    background-color: #b0f4ff;
-}
-
 .btn-link,
 a:hover {
     color: #00aad4;
@@ -149,4 +141,71 @@ a.card-fork {
     .counter-box {
         transform: scale(1);
     }
+}
+
+.lang-progress-bar {
+    display: flex;
+    width: 100%;
+}
+
+.lang-progress-bar>div {
+    display: inline-block;
+    height: 10px;
+}
+
+.lang-progress-bar-names {
+    display: flex;
+    justify-items: center;
+    width: 100%;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.lang-progress-bar-names>div {
+    display: flex;
+    padding: 10px;
+    align-items: center;
+}
+
+.lang-progress-bar-names span {
+    font-size: small;
+}
+
+.lang-color-circle {
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    border: .5px solid #4e4e4e;
+    margin-right: 10px;
+}
+
+.org-details-container {
+    display: flex;
+    justify-items: center;
+    width: 100%;
+    flex-wrap: wrap;
+    justify-content: center;
+}
+
+.org-details-container>div {
+    display: flex;
+    padding: 10px;
+    align-items: center;
+}
+
+.org-details-container svg {
+    margin-right: 5px;
+}
+
+.org-details-container a {
+    color: #4e4e4e;
+}
+
+.org-details-container a:hover {
+    color: #00aad4;
+    text-decoration: none;
+}
+
+.org-details-container a>svg {
+    margin-bottom: 3px;
 }
diff --git a/assets/js/components/LanguagesProgressBar.tsx b/assets/js/components/LanguagesProgressBar.tsx
@@ -1,31 +1,28 @@
 import React from 'react';
-import {Language} from "../types";
-import { Container } from 'reactstrap';
-import { HorizontalBar } from 'react-chartjs-2';
+import { Language } from "../types";
 import getLangColor from '../languageColors';
 
-const LanguagesProgressBar:React.FC<{languages: Array<Language>, maxLanguages: number}> = ({languages, maxLanguages}) => {
+const LanguagesProgressBar: React.FC<{ languages: Array<Language>, maxLanguages: number }> = ({ languages, maxLanguages }) => {
     let mainLanguages = languages.slice(0, maxLanguages);
-    const options = {
-        scales: {
-             xAxes: [{stacked: true, display: false}],
-             yAxes: [{stacked: true, display: false}]
-         },
-         tooltips: {enabled: false},
-         height: 10
-     }
-     mainLanguages.push({bytes: 0,lang: "other", percentage: 100.0 - (mainLanguages.reduce((acc, lang) => acc + lang.percentage, 0))})
-     const data ={ 
-       datasets: mainLanguages.map(i => {return {label: `${i.lang} (${Number(i.percentage).toFixed(2)}%)`, 
-                                                 barThickness: 10,
-                                                 backgroundColor: getLangColor(i.lang),
-                                                 data: [i.percentage]}}),
-       labels:['languages']
-     } 
+    mainLanguages.push({ bytes: 0, lang: "other", percentage: Math.round((100.0 - (mainLanguages.reduce((acc, lang) => acc + lang.percentage, 0))) * 100) / 100})
+    mainLanguages = mainLanguages.filter(l=>l.percentage > 0);
 
-    return (
-        <HorizontalBar height={20} data={data} options={options}></HorizontalBar>
-    );
+    return <>
+        <div className="lang-progress-bar">
+            {mainLanguages.map((l, key) => {
+                return <div key={key} style={{ width: `${l.percentage}%`, backgroundColor: getLangColor(l.lang) }}>
+                </div>
+            })}
+        </div>
+        <div className="lang-progress-bar-names">
+            {mainLanguages.map((l, key) => {
+                return <div key={key}>
+                    <div className="lang-color-circle" style={{backgroundColor: getLangColor(l.lang) }}></div>
+                    <span>{l.lang} - {l.percentage}%</span>
+                </div>
+            })}
+        </div>
+    </>;
 };
 
 export default LanguagesProgressBar;
diff --git a/assets/js/components/OrgHeader.tsx b/assets/js/components/OrgHeader.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {Container, ButtonGroup, Button, CardLink, Row} from "reactstrap";
+import {Container, ButtonGroup, Button, CardLink, Row, Col} from "reactstrap";
 import {GoLocation, GoLink, GoMail, IoMdCalendar, GoMarkGithub} from "react-icons/all";
 import {Org} from "../types";
 import LanguagesProgressBar from './LanguagesProgressBar';
@@ -47,42 +47,41 @@ const OrgHeader:React.FC<{org: Org, maxLanguages: number, starsSum: number}> = (
                 </Container>
             </Row>
 
-            <div className="line-mf mb-3"/>
-            <Row className="skill-mf">
+            <Row className="skill-mf mt-4">
                 <LanguagesProgressBar languages={org.languages} maxLanguages={maxLanguages}></LanguagesProgressBar>
             </Row>
 
             <Container className="text-center mb-4">
-                <ButtonGroup>
+                <div className="org-details-container">
                     {org.location &&
-                        <span>
+                        <div>
                             <GoLocation/> { org.location }
-                        </span>
+                        </div>
                     }
                     {org.email &&
-                        <span className="ml-4">
+                        <div>
                             <GoMail/> { org.email }
-                        </span>
+                        </div>
                     }
                     {org.blog &&
-                        <Button color="link" className="ml-4 pt-0">
-                            <CardLink href={org.blog} target="_blank"> 
+                        <div>
+                            <a className="btn btn-link" href={org.blog} target="_blank"> 
                                 <GoLink/> { org.blog }
-                            </CardLink>
-                        </Button>
+                            </a>
+                        </div>
                     }
                     {org.login &&
-                        <Button color="link" className="ml-4 pt-0">
-                            <CardLink href={`https://github.com/${org.login}`} target="_blank"> 
+                        <div>
+                            <a className="btn btn-link" href={`https://github.com/${org.login}`} target="_blank"> 
                                 <GoMarkGithub/> { org.login }
-                            </CardLink>
-                        </Button>
+                            </a>
+                        </div>
                     }
-                    <span className="ml-4">
+                    <div>
                         <IoMdCalendar />
                         Created in {createdDate}
-                    </span>
-                </ButtonGroup>
+                    </div>
+                </div>
             </Container>
         </Container>