diff --git a/app/partials/home/home-logged-in.jade b/app/partials/home/home-logged-in.jade index 017a5dd6..39d87b3a 100644 --- a/app/partials/home/home-logged-in.jade +++ b/app/partials/home/home-logged-in.jade @@ -3,8 +3,9 @@ div.profile.centered include ../includes/modules/profile/profile-bar div.main div.hero + include ../includes/modules/profile/profile-content-tabs div.content-wrapper - div.content - div.sidebar Sidebar + section.content + section.sidebar Sidebar diff --git a/app/partials/includes/modules/profile/profile-bar.jade b/app/partials/includes/modules/profile/profile-bar.jade index ae397850..740ab986 100644 --- a/app/partials/includes/modules/profile/profile-bar.jade +++ b/app/partials/includes/modules/profile/profile-bar.jade @@ -1,4 +1,4 @@ -div.profile-bar +section.profile-bar img.profile-img(src="http://i.imgur.com/gPiHzHN.jpg", alt="{{ user.nickname }}") a.button-green span Follow diff --git a/app/partials/includes/modules/profile/profile-content-tabs.jade b/app/partials/includes/modules/profile/profile-content-tabs.jade new file mode 100644 index 00000000..f28d9c3e --- /dev/null +++ b/app/partials/includes/modules/profile/profile-content-tabs.jade @@ -0,0 +1,13 @@ +nav.profile-content-tabs + a.tab.active(href="", title="Activity Tab") + span.icon.icon-plus + span activity + a.tab(href="", title="Projects Tab") + span.icon.icon-plus + span projects + a.tab(href="", title="Contacts Tab") + span.icon.icon-plus + span contacts + a.tab(href="", title="Favorites Tab") + span.icon.icon-plus + span favorites diff --git a/app/styles/layout/profile.scss b/app/styles/layout/profile.scss index dc0fdde3..f0beb45c 100644 --- a/app/styles/layout/profile.scss +++ b/app/styles/layout/profile.scss @@ -7,26 +7,27 @@ width: 200px; } .main { - background: #00f; display: flex; - flex: 4; + flex: 1; flex-direction: column; padding: 0; } + .hero { + background: lighten($whitish, 10%); + margin-bottom: .3rem; + min-height: 200px; + } .content-wrapper { display: flex; min-height: 100vh; } - .hero { - background: #0ff; - min-height: 10vh; - } .content { - background: #5dcd42; - flex: 4; + background: lighten($whitish, 10%); + flex: 1; + margin-right: 1rem; } .sidebar { background: #121212; - flex: .5; + width: 150px; } } diff --git a/app/styles/modules/profile/profile-bar.scss b/app/styles/modules/profile/profile-bar.scss new file mode 100644 index 00000000..83ddc082 --- /dev/null +++ b/app/styles/modules/profile/profile-bar.scss @@ -0,0 +1,92 @@ +.profile-bar { + .profile-img { + max-width: 100%; + } + .button-green { + display: block; + margin-bottom: 1rem; + } + h1, + h2 { + @extend %bold; + @extend %small; + line-height: 1; + margin-bottom: .5rem; + } + h1 { + @extend %xlarge; + text-transform: none; + } + h2 { + @extend %large; + color: $gray-light; + } + .location { + color: $gray-light; + margin-bottom: 1rem; + } + .profile-stats { + background: $whitish; + border-radius: 5px; + display: flex; + justify-content: space-between; + margin-bottom: 1rem; + padding: 1rem; + .stat { + padding: 0 .2rem; + text-align: center; + } + .stat-number { + @extend %xlarge; + @extend %title; + display: block; + margin-bottom: .3rem; + } + .stat-name { + @extend %title; + display: block; + } + } + .profile-badges { + display: flex; + justify-content: space-between; + margin-bottom: 1rem; + .badge { + background: $gray-light; + border-radius: 5px; + height: 45px; + margin-right: .2rem; + width: 45px; + } + } + + .profile-organizations { + border-bottom: 1px solid $whitish; + border-top: 1px solid $whitish; + margin-bottom: 1rem; + padding: 1rem 0; + h3 { + @extend %bold; + margin-bottom: .5rem; + } + .profile-organizations-wrapper { + display: flex; + justify-content: space-between; + } + .organization { + background: $gray-light; + border-radius: 5px; + height: 45px; + margin-right: .2rem; + width: 45px; + } + } + + .profile-quote { + @extend %title; + @extend %xlarge; + background: url('/images/quote.png') no-repeat top left; + line-height: 1.2; + padding: .5rem; + } +} diff --git a/app/styles/modules/profile/profile-content-tabs.scss b/app/styles/modules/profile/profile-content-tabs.scss new file mode 100644 index 00000000..b5905eb5 --- /dev/null +++ b/app/styles/modules/profile/profile-content-tabs.scss @@ -0,0 +1,25 @@ +.profile-content-tabs { + border-top: 1px solid $whitish; + .tab { + background: $white; + color: $gray-light; + display: inline-block; + padding: .3rem 1rem; + &:hover, + &.active { + color: $grayer; + .icon { + color: $green-taiga; + } + } + &.active { + border-left: 1px solid $whitish; + border-right: 1px solid $whitish; + position: relative; + top: 1px; + } + } + .icon { + margin-right: .3rem; + } +}