From 0472b7eb651ba174f829806663e4db43d6e40911 Mon Sep 17 00:00:00 2001 From: Sebastian Gutierrez Date: Fri, 25 Oct 2019 17:07:14 -0500 Subject: [PATCH] Redesign friends graph page --- public/FriendsGraph.html | 51 ++++++++++++++++----- public/js/profileGen.js | 97 +++++++++++++++++----------------------- public/style.css | 49 ++++++++++++++++++++ 3 files changed, 130 insertions(+), 67 deletions(-) diff --git a/public/FriendsGraph.html b/public/FriendsGraph.html index 3aac9c7..f1193d9 100644 --- a/public/FriendsGraph.html +++ b/public/FriendsGraph.html @@ -13,6 +13,10 @@ integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"> + @@ -22,7 +26,7 @@ - + -
-
-
-

-
- 

-            

-            

-                

+    

+        

+            

+                

+                

+                    

+                         

+                              
+                                  
+                              
+                             
Interactive friend chart

+                         

+                         
+                    

+                

             

+           

+               

+                   

+               

+               

+                   

+                        

+                        

+                   

+               

+           

         

+    

+
+
 
 
 
diff --git a/public/js/profileGen.js b/public/js/profileGen.js
index 0a438a8..fcdfb18 100644
--- a/public/js/profileGen.js
+++ b/public/js/profileGen.js
@@ -8,60 +8,43 @@ function profileGen(username, container)
             window.location.href = "./GraphGenerator.html";
         }
         parseOrgs(user.login).then( (orgsReturn) => {
-            let html = 
-            "
 \
-                 \
-                
 \
-                    
 \
-                        
"+
-                            (user.name != null ? "
"+user.name+"
" : "") +" \
-                            
"+user.login+"
 \
-                        
 \
-                    
 \
-                    
 \
-                         \
-                    
 \
-                    
 \
-                         \
-                    
 \
-                
 \
-                    
 \
-                        
"+user.html_url+"
 \ " +
-                        (user.blog != null ? "
"+user.blog+"
" : "")+" \
-                    
 \
-                    
     \
-                        
  • Followers: "+user.followers+"
    •  \
-                        
  • Following: "+user.following+"
    •  \
-                        
  • Repositories: "+user.public_repos+"
    • " +
-                        (user.bio != null ? "
  • Bio: "+user.bio+"
    • " : "")+
-                        (user.location != null ? "
  • Location: "+user.location+"
    • " : "")+
-                        (user.email != null ? "
  • Email: "+user.email+"
    • " : "")+
-                        (user.company != null ? "
  • Company: "+user.company+"
    • " : "")+
-                        (orgsReturn != [] ? "
  • "+orgsReturn+"
    • " : "")+ " \
-                    
 \
-            
";
+            let html = `
+                

+                    

+                        ${user.avatar_url}
+                        

+                            
+                                
+                                    
+                                
+                            
+                            
+                                
+                                    
+                                
+                            
+                        

+                    

+                    

+                        
${user.name}

+                        ${user.login}
+                        ${user.bio != null ? `
${user.bio}
` : ""}
+                        
    
+                            ${user.blog != null ? `
  • ${user.blog}
    • ` : ""}
+                            ${user.email != null ? `
  • Email: ${user.email}
    • ` : ""}
+                            ${user.location != null ? `
  • Location: ${user.location}
    • ` : ""}
+                            ${user.company != null ? `
  • Company: ${user.company}
    • ` : ""}
+                        

+                        

+                        
    
+                            
  • Followers: ${user.followers}
    • 
+                            
  • Following: ${user.following}
    • 
+                            
  • Repositories: ${user.public_repos}
    • 
+                        

+                        ${orgsReturn != [] ? `
 
Organizations
 ${orgsReturn}` : ""}
+                    

+                

+            `;
             $("#"+container).html(html);
         })
     }, () =>
@@ -75,7 +58,7 @@ function parseOrgs(name) {
     return new Promise( (resolve, reject) => {
         let urlpath = `api/users/${name}/orgs`;
         let orgs_final = [];
-    
+
         queryUrl(urlpath, (orgs) => {
             var prom= [];
 
@@ -83,7 +66,7 @@ function parseOrgs(name) {
                 prom.push( new Promise( (res, rej) => {
                         url = orgs[i].url;
                         queryUrl(url, (orgData) => {
-                            orgs_final.push("");
+                            orgs_final.push("");
                             res();
                         }, (error) => {
                             console.log(error);
@@ -108,4 +91,4 @@ function graphUrl(user) {
 
 function timelineUrl(user) {
     return "/TimeLineGraph.html?name="+user;
-}
\ No newline at end of file
+}
diff --git a/public/style.css b/public/style.css
index 5e3f729..d1f00b0 100644
--- a/public/style.css
+++ b/public/style.css
@@ -37,6 +37,11 @@ body {
     font-weight: 600;
 }
 
+.container-xl {
+    max-width: 1280px;
+    margin: auto;
+}
+
 
 .main {
     background: linear-gradient(180deg, var(--dark-2) 0%, var(--dark-2) 420px, var(--white) 420px);
@@ -65,6 +70,50 @@ body {
     }
 }
 
+@media screen and (min-width: 768px) {
+    .friends-graph-page #profileGen {
+        margin-top: -84px
+    }
+}
+
+.card .actions {
+    position: absolute;
+    right: 16px;
+    bottom: 16px;
+}
+
+.card .actions .btns {
+    display: inline-block;
+    padding: 8px;
+    margin-left: 8px;
+    height: 40px;
+    width: 40px;
+    border-radius: 50%;
+    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), 0px 1px 3px rgba(0, 0, 0, 0.1);
+    background-color: white;
+    transition: box-shadow .3s ease-out;
+}
+
+.card .actions .btns:hover {
+    box-shadow: 0px 10px 16px rgba(0, 0, 0, 0.1), 0px 4px 6px rgba(0, 0, 0, 0.06);
+}
+
+.card .actions .btns svg {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    height: 24px;
+    width: 24px;
+    fill: var(--dark-2);
+    opacity: 0.64;
+    transition: opacity .3s ease-out;
+}
+
+.card .actions .btns:hover svg {
+    fill: var(--primary);
+    opacity: 1;
+}
+
 #error-code {
     font-family: Comfortaa;
     font-size: 200px;