improve the profile layout and start building the public profile view
parent
b07ce48ce5
commit
bfe75a180d
|
@ -186,8 +186,9 @@ exports.returnUser = function(req, res, next) {
|
||||||
coderbyteProfile: user.profile.linkedinProfile,
|
coderbyteProfile: user.profile.linkedinProfile,
|
||||||
githubProfile: user.profile.githubProfile,
|
githubProfile: user.profile.githubProfile,
|
||||||
linkedinProfile: user.profile.linkedinProfile,
|
linkedinProfile: user.profile.linkedinProfile,
|
||||||
codepenProfile: user.codepenProfile,
|
codepenProfile: user.profile.codepenProfile,
|
||||||
twitterHandle: user.twitterHandle,
|
twitterHandle: user.profile.twitterHandle,
|
||||||
|
bio: user.profile.bio,
|
||||||
website1: user.portfolio.website1Link,
|
website1: user.portfolio.website1Link,
|
||||||
website1Title: user.portfolio.website1Title,
|
website1Title: user.portfolio.website1Title,
|
||||||
website1Image: user.portfolio.website1Image,
|
website1Image: user.portfolio.website1Image,
|
||||||
|
@ -281,6 +282,7 @@ exports.postUpdateProfile = function(req, res, next) {
|
||||||
user.profile.linkedinProfile = req.body.linkedinProfile || '';
|
user.profile.linkedinProfile = req.body.linkedinProfile || '';
|
||||||
user.profile.codepenProfile = req.body.codepenProfile || '';
|
user.profile.codepenProfile = req.body.codepenProfile || '';
|
||||||
user.profile.twitterHandle = req.body.twitterHandle || '';
|
user.profile.twitterHandle = req.body.twitterHandle || '';
|
||||||
|
user.profile.bio = req.body.bio || '';
|
||||||
user.portfolio.website1Title = req.body.website1Title || '';
|
user.portfolio.website1Title = req.body.website1Title || '';
|
||||||
user.portfolio.website1Link = req.body.website1Link || '';
|
user.portfolio.website1Link = req.body.website1Link || '';
|
||||||
user.portfolio.website1Image = req.body.website1Image || '';
|
user.portfolio.website1Image = req.body.website1Image || '';
|
||||||
|
|
|
@ -271,6 +271,10 @@ var userSchema = new mongoose.Schema({
|
||||||
lowercase: true,
|
lowercase: true,
|
||||||
trim: true
|
trim: true
|
||||||
},
|
},
|
||||||
|
bio: {
|
||||||
|
type: String,
|
||||||
|
defaults: ''
|
||||||
|
},
|
||||||
name: {
|
name: {
|
||||||
type: String,
|
type: String,
|
||||||
default: ''
|
default: ''
|
||||||
|
|
|
@ -386,9 +386,21 @@ thead {
|
||||||
font-size: 40px;
|
font-size: 40px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.public-profile-img {
|
||||||
|
height: 200px;
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
.ng-invalid.ng-dirty {
|
.ng-invalid.ng-dirty {
|
||||||
border-color: #FA787E;
|
border-color: #FA787E;
|
||||||
}
|
}
|
||||||
.ng-valid.ng-dirty {
|
.ng-valid.ng-dirty {
|
||||||
border-color: #78FA89;
|
border-color: #78FA89;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.desktop-narrow {
|
||||||
|
@media (min-width: 767px) {
|
||||||
|
marign: 0 auto;
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
}
|
|
@ -2,19 +2,19 @@ extends ../layout
|
||||||
block content
|
block content
|
||||||
.jumbotron.text-center
|
.jumbotron.text-center
|
||||||
h2 Sign in with one of these options:
|
h2 Sign in with one of these options:
|
||||||
a.btn.btn-lg.btn-block.btn-google-plus.btn-social(href='/auth/google')
|
a.btn.btn-lg.btn-block.btn-google-plus.btn-social-login(href='/auth/google')
|
||||||
i.fa.fa-google-plus
|
i.fa.fa-google-plus
|
||||||
| Sign in with Google
|
| Sign in with Google
|
||||||
a.btn.btn-lg.btn-block.btn-facebook.btn-social(href='/auth/facebook')
|
a.btn.btn-lg.btn-block.btn-facebook.btn-social-login(href='/auth/facebook')
|
||||||
i.fa.fa-facebook
|
i.fa.fa-facebook
|
||||||
| Sign in with Facebook
|
| Sign in with Facebook
|
||||||
//a.btn.btn-lg.btn-block.btn-github.btn-social(href='/auth/github')
|
//a.btn.btn-lg.btn-block.btn-github.btn-social-login(href='/auth/github')
|
||||||
// i.fa.fa-github
|
// i.fa.fa-github
|
||||||
// | Sign in with GitHub
|
// | Sign in with GitHub
|
||||||
a.btn.btn-lg.btn-block.btn-linkedin.btn-social(href='/auth/linkedin')
|
a.btn.btn-lg.btn-block.btn-linkedin.btn-social-login(href='/auth/linkedin')
|
||||||
i.fa.fa-linkedin
|
i.fa.fa-linkedin
|
||||||
| Sign in with LinkedIn
|
| Sign in with LinkedIn
|
||||||
a.btn.btn-lg.btn-block.btn-twitter.btn-social(href='/auth/twitter')
|
a.btn.btn-lg.btn-block.btn-twitter.btn-social-login(href='/auth/twitter')
|
||||||
i.fa.fa-twitter
|
i.fa.fa-twitter
|
||||||
| Sign in with Twitter
|
| Sign in with Twitter
|
||||||
br
|
br
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
extends ../layout
|
extends ../layout
|
||||||
block content
|
block content
|
||||||
link(href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css", rel="stylesheet")
|
.panel.panel-primary(ng-controller="profileValidationController")
|
||||||
.panel(ng-controller="profileValidationController")
|
.panel-heading.text-center Update your profile here:
|
||||||
|
.panel-body
|
||||||
.container.text-center
|
.container.text-center
|
||||||
h1 Update your profile here:
|
|
||||||
form.form-horizontal(action='/account/profile', method='POST', novalidate='novalidate', name='profileForm')
|
form.form-horizontal(action='/account/profile', method='POST', novalidate='novalidate', name='profileForm')
|
||||||
input(type='hidden', name='_csrf', value=_csrf)
|
input(type='hidden', name='_csrf', value=_csrf)
|
||||||
|
|
||||||
|
@ -11,9 +11,9 @@ block content
|
||||||
h2 Bio
|
h2 Bio
|
||||||
|
|
||||||
.form-group
|
.form-group
|
||||||
label.col-sm-3.col-sm-offset-2.control-label(for='name') Name
|
label.col-sm-3.col-sm-offset-2.control-label(for='name') Name *
|
||||||
.col-sm-4
|
.col-sm-4
|
||||||
input.form-control(type='text', placeholder='Name', name='name', ng-model='user.profile.name', ng-minlength='3', ng-maxlength='50', required='required', ng-focus='ng-focus', id='name')
|
input.form-control(type='text', placeholder='Name', name='name', ng-model='user.profile.name', ng-minlength='3', ng-maxlength='50', required='required', id='name')
|
||||||
.col-sm-4.col-sm-offset-5(ng-show="profileForm.name.$invalid && !profileForm.name.$pristine && profileForm.name.$error.required")
|
.col-sm-4.col-sm-offset-5(ng-show="profileForm.name.$invalid && !profileForm.name.$pristine && profileForm.name.$error.required")
|
||||||
alert(type='danger')
|
alert(type='danger')
|
||||||
span.ion-close-circled
|
span.ion-close-circled
|
||||||
|
@ -62,6 +62,15 @@ block content
|
||||||
.col-sm-4
|
.col-sm-4
|
||||||
input.form-control(type='text', name='location', id='location', ng-model='user.profile.location')
|
input.form-control(type='text', name='location', id='location', ng-model='user.profile.location')
|
||||||
|
|
||||||
|
.form-group
|
||||||
|
label.col-sm-3.col-sm-offset-2.control-label(for='bio') Bio (140 characters)
|
||||||
|
.col-sm-4
|
||||||
|
input.form-control(type='text', name='bio', ng-model='user.profile.bio', ng-maxlength='140', id='bio')
|
||||||
|
.col-sm-4.col-sm-offset-5(ng-show='profileForm.bio.$error.maxlength && !profileForm.bio.$pristine')
|
||||||
|
alert(type='danger')
|
||||||
|
span.ion-close-circled
|
||||||
|
| Your bio must be fewer than 140 characters.
|
||||||
|
|
||||||
.form-group
|
.form-group
|
||||||
.col-sm-offset-5.col-sm-4
|
.col-sm-offset-5.col-sm-4
|
||||||
button.btn.btn-primary.btn-block(type='submit', ng-disabled='profileForm.$invalid')
|
button.btn.btn-primary.btn-block(type='submit', ng-disabled='profileForm.$invalid')
|
||||||
|
|
|
@ -1,27 +1,31 @@
|
||||||
extends ../layout
|
extends ../layout
|
||||||
block content
|
block content
|
||||||
.panel.panel-primary
|
|
||||||
.panel-heading.text-center @#{username}
|
|
||||||
.panel-body
|
|
||||||
.row
|
.row
|
||||||
.col-xs-2.col-sm-1.col-md-1
|
.col-sm-12.col-md-8.col-xs-12
|
||||||
img(src="#{user.picture}")
|
.panel.panel-primary
|
||||||
.col-xs-4.col-sm-2.col-md-2
|
.panel-heading.text-center @#{username}'s Portfolio:
|
||||||
h2.nameline
|
.panel-body
|
||||||
|
.col-sm-12.col-md-4.col-xs-12
|
||||||
|
.panel.panel-primary
|
||||||
|
.panel-heading.text-center About @#{username}:
|
||||||
|
.panel-body
|
||||||
|
.col-xs-12
|
||||||
|
img.img-center.img-responsive.public-profile-img(src=picture)
|
||||||
|
.row
|
||||||
|
.col-xs-4
|
||||||
|
h1.text-center
|
||||||
= "[ " + user.points + " ]"
|
= "[ " + user.points + " ]"
|
||||||
.col-xs-6.col-sm-9.col-md-9
|
.col-xs-8
|
||||||
h2.nameline
|
h1
|
||||||
= name
|
- if (twitterHandle)
|
||||||
h4= location
|
a.ion-social-twitter.text-primary(title="@#{username}'s Twitter Profile", href="http://twitter.com/#{twitterHandle}")
|
||||||
a(href="http://twitter.com/#{user.profile.twitterHandle}")
|
a.ion-social-github.text-primary(title="@#{username}'s GitHub Profile", href=githubProfile)
|
||||||
|= "@#{twitterHandle} on Twitter"
|
a.ion-social-linkedin.text-primary(title="@#{username}'s LinkedIn Profile", href=linkedinProfile)
|
||||||
a(href="#{user.profile.coderbyteProfile")
|
a.ion-social-codepen.text-primary(title="@#{username}'s CodePen Profile", href=codepenProfile)
|
||||||
| Coderbyte Profile
|
a.ion-social-javascript.text-primary(title="@#{username}'s CoderByte Profile", href=coderbyteProfile)
|
||||||
a(href="#{user.profile.linkedin")
|
.col-xs-12
|
||||||
| LinkedIn Profile
|
h2= name
|
||||||
a(href="#{user.profile.codepen")
|
h3= location
|
||||||
| Codepen Portfolio
|
|
||||||
a(href=linkedin)
|
|
||||||
- if (ch[0] > 0)
|
- if (ch[0] > 0)
|
||||||
.container
|
.container
|
||||||
h1 Completed Challenges
|
h1 Completed Challenges
|
||||||
|
|
|
@ -27,7 +27,7 @@ block content
|
||||||
- if (cc)
|
- if (cc)
|
||||||
a.animated.fadeIn.delay-2.btn.btn-lg.btn-primary.btn-block.next-button(name='_csrf', value=_csrf, aria-hidden='true') Take me to my next challenge
|
a.animated.fadeIn.delay-2.btn.btn-lg.btn-primary.btn-block.next-button(name='_csrf', value=_csrf, aria-hidden='true') Take me to my next challenge
|
||||||
- if (points && points > 2)
|
- if (points && points > 2)
|
||||||
a.animated.fadeIn.delay-2.btn-twitter.btn.btn-lg.btn-info.btn-block(href="https://twitter.com/intent/tweet?text=I%20just%20#{verb}%20Free%20Code%20Camp%20Challenge%20%23#{number}:%20#{name}&url=http%3A%2F%2Ffreecodecamp.com/challenges/#{number}&hashtags=learntocode, javascript" target="_blank")
|
a.animated.fadeIn.delay-2.btn.btn-lg.btn-block.btn-twitter.btn-social.btn-social-tweet(href="https://twitter.com/intent/tweet?text=I%20just%20#{verb}%20Free%20Code%20Camp%20Challenge%20%23#{number}:%20#{name}&url=http%3A%2F%2Ffreecodecamp.com/challenges/#{number}&hashtags=learntocode, javascript" target="_blank")
|
||||||
i.fa.fa-twitter
|
i.fa.fa-twitter
|
||||||
= phrase
|
= phrase
|
||||||
- else
|
- else
|
||||||
|
|
|
@ -5,6 +5,8 @@ html(ng-app='profileValidation')
|
||||||
script(src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.min.js")
|
script(src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.min.js")
|
||||||
script(src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js")
|
script(src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap-tpls.min.js")
|
||||||
link(rel='shortcut icon', href='https://s3.amazonaws.com/freecodecamp/favicon.ico')
|
link(rel='shortcut icon', href='https://s3.amazonaws.com/freecodecamp/favicon.ico')
|
||||||
|
link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css')
|
||||||
|
//link(rel='stylesheet', href='http://code.ionicframework.com/ionicons/2.0.0/css/ionicons.min.css')
|
||||||
include partials/meta
|
include partials/meta
|
||||||
title #{title} | Free Code Camp
|
title #{title} | Free Code Camp
|
||||||
meta(charset='utf-8')
|
meta(charset='utf-8')
|
||||||
|
|
Loading…
Reference in New Issue