restyle portfolio and make all portfolio paths off of root and hide angular form until loaded
This commit is contained in:
Michael Q Larson
12
app.js
12
app.js
@ -252,10 +252,6 @@ app.get(
|
||||
'/challenges/:challengeNumber',
|
||||
challengesController.returnChallenge
|
||||
);
|
||||
app.get(
|
||||
'/campers/:username',
|
||||
userController.returnUser
|
||||
);
|
||||
app.all('/account', passportConf.isAuthenticated);
|
||||
app.get('/account/api', userController.getAccountAngular);
|
||||
// Unique Check API route
|
||||
@ -267,6 +263,14 @@ app.post('/account/password', userController.postUpdatePassword);
|
||||
app.post('/account/delete', userController.postDeleteAccount);
|
||||
app.get('/account/unlink/:provider', userController.getOauthUnlink);
|
||||
|
||||
|
||||
|
||||
//put this route last
|
||||
app.get(
|
||||
'/:username',
|
||||
userController.returnUser
|
||||
);
|
||||
|
||||
/**
|
||||
* API examples routes.
|
||||
* accepts a post request. the challenge id req.body.challengeNumber
|
||||
|
||||
@ -168,6 +168,10 @@ ul {
|
||||
margin-top: -10px;
|
||||
}
|
||||
|
||||
.negative-5 {
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.negative-15 {
|
||||
margin-top: -15px;
|
||||
}
|
||||
@ -303,7 +307,7 @@ ul {
|
||||
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.profile-image {
|
||||
border-radius: 10px;
|
||||
border-radius: 5px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding-left: 5px;
|
||||
@ -411,7 +415,9 @@ thead {
|
||||
}
|
||||
|
||||
.portfolio-image {
|
||||
max-height: 164px;
|
||||
height: 225px;
|
||||
width: 300px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.flat-top {
|
||||
@ -420,4 +426,35 @@ thead {
|
||||
|
||||
.negative-bottom {
|
||||
margin-bottom: -20px;
|
||||
}
|
||||
}
|
||||
|
||||
.min-height-1000 {
|
||||
min-height: 1000px;
|
||||
}
|
||||
|
||||
.points-on-top {
|
||||
color: #eee;
|
||||
font-size: 50px;
|
||||
z-index: 2;
|
||||
width: 50%;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.background-svg {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
background-image: url("https://s3.amazonaws.com/freecodecamp/certificate-icon.svg");
|
||||
background-size: 120%;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
//uncomment this to see the dimensions of all elements outlined in red
|
||||
//* {
|
||||
// border-color: red;
|
||||
// border-width: 1px;
|
||||
// border-style: solid;
|
||||
//}
|
||||
@ -51,6 +51,7 @@ profileValidation.controller('profileValidationController', ['$scope', '$http',
|
||||
$scope.storedEmail = data.user.email;
|
||||
$scope.user.email = $scope.user.email.toLowerCase();
|
||||
$scope.user.profile.twitterHandle = $scope.user.profile.twitterHandle.toLowerCase();
|
||||
$scope.asyncComplete = true;
|
||||
});
|
||||
}
|
||||
]);
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
extends ../layout
|
||||
block content
|
||||
.panel.panel-primary(ng-controller="profileValidationController")
|
||||
.panel.panel-primary.min-height-1000(ng-controller="profileValidationController")
|
||||
.panel-heading.text-center Update your profile here:
|
||||
.panel-body
|
||||
.container.text-center
|
||||
form.form-horizontal(action='/account/profile', method='POST', novalidate='novalidate', name='profileForm')
|
||||
form.form-horizontal(action='/account/profile', method='POST', novalidate='novalidate', name='profileForm' ng-show="asyncComplete")
|
||||
input(type='hidden', name='_csrf', value=_csrf)
|
||||
|
||||
.col-sm-4.col-sm-offset-5
|
||||
|
||||
@ -1,105 +1,105 @@
|
||||
extends ../layout
|
||||
block content
|
||||
.row
|
||||
.col-sm-12.col-md-8.col-xs-12
|
||||
.panel.panel-primary.min650
|
||||
.panel-heading.text-center @#{username}'s Portfolio:
|
||||
.panel-body
|
||||
if (website1Title && website1Link && website1Image)
|
||||
.row
|
||||
.col-xs-12.col-md-4
|
||||
img.img-responsive.portfolio-image.img-center(src=website1Image, alt="@#{username}'s #{website1Title")
|
||||
.col-xs-12.col-md-8
|
||||
.col-xs-12.col-sm-12.col-md-12
|
||||
.panel.panel-primary
|
||||
.panel-heading.text-center #{username}
|
||||
.panel-body
|
||||
.row
|
||||
.col-xs-12
|
||||
.col-xs-12.col-sm-12.col-md-5
|
||||
if picture
|
||||
img.img-center.img-responsive.public-profile-img(src=picture)
|
||||
else
|
||||
img.img-center.img-responsive.public-profile-img(src='#{user.gravatar(200)}')
|
||||
h1.text-center.negative-5
|
||||
- if (twitterHandle)
|
||||
a.ion-social-twitter.text-primary(title="@#{username}'s Twitter Profile", href="http://twitter.com/#{twitterHandle}")
|
||||
- if (githubProfile)
|
||||
a.ion-social-github.text-primary(title="@#{username}'s GitHub Profile", href=githubProfile)
|
||||
- if (linkedinProfile)
|
||||
a.ion-social-linkedin.text-primary(title="@#{username}'s LinkedIn Profile", href=linkedinProfile)
|
||||
- if (codepenProfile)
|
||||
a.ion-social-codepen.text-primary(title="@#{username}'s CodePen Profile", href=codepenProfile)
|
||||
- if (coderbyteProfile)
|
||||
a.ion-social-javascript.text-primary(title="@#{username}'s CoderByte Profile", href=coderbyteProfile)
|
||||
.visible-md.visible-lg
|
||||
.col-xs-12.col-sm-12.col-md-4.text-justify
|
||||
h1.flat-top.wrappable= name
|
||||
h3.flat-top.bolded.wrappable= location
|
||||
h4.flat-top.wrappable= bio
|
||||
.visible-xs.visible-sm
|
||||
.col-xs-12.col-sm-12.col-md-4.text-center
|
||||
h1.flat-top.wrappable= name
|
||||
h3.flat-top.bolded.wrappable= location
|
||||
h4.flat-top.wrappable= bio
|
||||
.col-xs-12.col-sm-12.col-md-3.text-center
|
||||
.background-svg.img-center
|
||||
.points-on-top
|
||||
= "[ " + points + " ]"
|
||||
|
||||
|
||||
.row
|
||||
.col-xs-12
|
||||
if (website1Title && website1Link && website1Image)
|
||||
.row
|
||||
.col-xs-12.col-md-5
|
||||
img.img-center.img-responsive.portfolio-image(src=website1Image, alt="@#{username}'s #{website1Title")
|
||||
.col-xs-12.col-md-7
|
||||
h3.text-center.wrappable.flat-top= website1Title
|
||||
a.btn.btn-lg.btn-block.btn-info(href=website1Link, target='_blank')
|
||||
i.fa.icon-beaker
|
||||
| Try it out
|
||||
br
|
||||
if (website1Title && website1Link && !website1Image)
|
||||
.col-xs-12.col-md-12
|
||||
h3.text-center.wrappable.flat-top= website1Title
|
||||
a.btn.btn-lg.btn-block.btn-info(href=website1Link, target='_blank')
|
||||
i.fa.icon-beaker
|
||||
| Try it out
|
||||
br
|
||||
if (website1Title && website1Link && !website1Image)
|
||||
.col-xs-12.col-md-12
|
||||
h3.text-center.wrappable.flat-top= website1Title
|
||||
a.btn.btn-lg.btn-block.btn-info(href=website1Link, target='_blank')
|
||||
i.fa.icon-beaker
|
||||
| Try it out
|
||||
br
|
||||
if (website2Title && website2Link && website2Image)
|
||||
.row
|
||||
.col-xs-12.col-md-5
|
||||
img.img-responsive.portfolio-image.img-center(src=website2Image, alt="@#{username}'s #{website2Title")
|
||||
.col-xs-12.col-md-7
|
||||
h3.text-center.wrappable.flat-top= website2Title
|
||||
a.btn.btn-lg.btn-block.btn-info(href=website2Link, target='_blank')
|
||||
i.fa.icon-beaker
|
||||
| Try it out
|
||||
br
|
||||
if (website2Title && website2Link && website2Image)
|
||||
.row
|
||||
.col-xs-12.col-md-4
|
||||
img.img-responsive.portfolio-image.img-center(src=website2Image, alt="@#{username}'s #{website2Title")
|
||||
.col-xs-12.col-md-8
|
||||
if (website2Title && website2Link && !website2Image)
|
||||
.col-xs-12.col-md-12
|
||||
h3.text-center.wrappable.flat-top= website2Title
|
||||
a.btn.btn-lg.btn-block.btn-info(href=website2Link, target='_blank')
|
||||
i.fa.icon-beaker
|
||||
| Try it out
|
||||
br
|
||||
if (website2Title && website2Link && !website2Image)
|
||||
.col-xs-12.col-md-12
|
||||
h3.text-center.wrappable.flat-top= website2Title
|
||||
a.btn.btn-lg.btn-block.btn-info(href=website2Link, target='_blank')
|
||||
i.fa.icon-beaker
|
||||
| Try it out
|
||||
br
|
||||
if (website3Title && website3Link && website3Image)
|
||||
.row
|
||||
.col-xs-12.col-md-4
|
||||
img.img-responsive.portfolio-image.img-center(src=website3Image, alt="@#{username}'s #{website1Title")
|
||||
.col-xs-12.col-md-8
|
||||
br
|
||||
if (website3Title && website3Link && website3Image)
|
||||
.row
|
||||
.col-xs-12.col-md-5
|
||||
img.img-responsive.portfolio-image.img-center(src=website3Image, alt="@#{username}'s #{website1Title")
|
||||
.col-xs-12.col-md-7
|
||||
h3.text-center.wrappable.flat-top= website3Title
|
||||
a.btn.btn-lg.btn-block.btn-info(href=website3Link, target='_blank')
|
||||
i.fa.icon-beaker
|
||||
| Try it out
|
||||
if (website3Title && website3Link && !website3Image)
|
||||
.col-xs-12.col-md-12
|
||||
h3.text-center.wrappable.flat-top= website3Title
|
||||
a.btn.btn-lg.btn-block.btn-info(href=website3Link, target='_blank')
|
||||
i.fa.icon-beaker
|
||||
| Try it out
|
||||
if (website3Title && website3Link && !website3Image)
|
||||
.col-xs-12.col-md-12
|
||||
h3.text-center.wrappable.flat-top= website3Title
|
||||
a.btn.btn-lg.btn-block.btn-info(href=website3Link, target='_blank')
|
||||
i.fa.icon-beaker
|
||||
| Try it out
|
||||
.col-sm-12.col-md-4.col-xs-12
|
||||
.panel.panel-primary.min650
|
||||
.panel-heading.text-center About @#{username}:
|
||||
.panel-body
|
||||
.col-xs-12
|
||||
if picture
|
||||
img.img-center.img-responsive.public-profile-img(src=picture)
|
||||
else
|
||||
img.img-center.img-responsive.public-profile-img(src='#{user.gravatar(200)}')
|
||||
.row
|
||||
.col-xs-4.text-right
|
||||
h1
|
||||
= "[ " + points + " ]"
|
||||
.col-xs-8.text-left
|
||||
h1
|
||||
- if (twitterHandle)
|
||||
a.ion-social-twitter.text-primary(title="@#{username}'s Twitter Profile", href="http://twitter.com/#{twitterHandle}")
|
||||
- if (githubProfile)
|
||||
a.ion-social-github.text-primary(title="@#{username}'s GitHub Profile", href=githubProfile)
|
||||
- if (linkedinProfile)
|
||||
a.ion-social-linkedin.text-primary(title="@#{username}'s LinkedIn Profile", href=linkedinProfile)
|
||||
- if (codepenProfile)
|
||||
a.ion-social-codepen.text-primary(title="@#{username}'s CodePen Profile", href=codepenProfile)
|
||||
- if (coderbyteProfile)
|
||||
a.ion-social-javascript.text-primary(title="@#{username}'s CoderByte Profile", href=coderbyteProfile)
|
||||
.col-xs-12.text-center
|
||||
h1.flat-top.wrappable= name
|
||||
h3.flat-top.bolded.wrappable= location
|
||||
h4.flat-top.wrappable= bio
|
||||
br
|
||||
|
||||
- if (ch[0] > 0)
|
||||
.row
|
||||
.col-sm-12
|
||||
.panel.panel-primary
|
||||
.panel-heading.text-center @#{username}'s Completed Challenges:
|
||||
.panel-body
|
||||
.col-sm-12
|
||||
table.table.table-striped
|
||||
thead
|
||||
- if (ch[0] > 0)
|
||||
.col-sm-12
|
||||
table.table.table-striped
|
||||
thead
|
||||
tr
|
||||
th Challenge
|
||||
th Date Finished
|
||||
for challenge in challenges
|
||||
if ch[challenge.challengeNumber] > 0
|
||||
tr
|
||||
th Challenge
|
||||
th Date Finished
|
||||
for challenge in challenges
|
||||
if ch[challenge.challengeNumber] > 0
|
||||
tr
|
||||
td= challenges[challenge.challengeNumber].name
|
||||
td= moment(ch[challenge.challengeNumber], 'X').format("MMM DD, YYYY")
|
||||
br
|
||||
td= challenges[challenge.challengeNumber].name
|
||||
td= moment(ch[challenge.challengeNumber], 'X').format("MMM DD, YYYY")
|
||||
br
|
||||
Reference in New Issue
Block a user