gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

make all navbar layouts wide style, redirect logo to challenge map, improve navbar collapse

Browse Source
This commit is contained in:
Quincy Larson
2015-04-24 01:31:59 -07:00
parent bf723b522b
commit e5e47136ea
8 changed files with 103 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
controllers/home.js
View File

@ -5,7 +5,7 @@
exports.index = function(req, res) { exports.index = function(req, res) {
if (req.user) { if (req.user) {
res.redirect('/challenges/') res.redirect('/map')
} else { } else {
res.render('home', { res.render('home', {
title: 'Learn to Code JavaScript and get a Coding Job by Helping Nonprofits' title: 'Learn to Code JavaScript and get a Coding Job by Helping Nonprofits'

51
public/css/main.less
View File

@ -273,11 +273,6 @@ ul {
height: 30px; height: 30px;
margin-top: -5px; margin-top: -5px;
} }
@media (min-width: 767px) and (max-width: 890px) {
height: 30px;
margin-top: -5px;
}
} }
.navbar-right { .navbar-right {
@ -790,10 +785,52 @@ iframe.iphone {
transition: background .2s ease-in-out, border .2s ease-in-out; transition: background .2s ease-in-out, border .2s ease-in-out;
} }
@media (max-width: 991px) {
.navbar-header {
float: none;
}
.navbar-toggle {
display: block;
}
.navbar-collapse.collapse {
display: none !important;
}
.navbar-nav {
float: none !important;
margin: 7.5px -15px;
}
.navbar-nav > li {
float: none;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
.navbar-text {
float: none;
margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in {
display: block !important;
}
.collapsing {
overflow: hidden !important;
}
}
.hamburger { .hamburger {
width: 80px; width: 80px;
padding-left: 0px; padding-left: 0px;
padding-right: 0px; padding-right: 8px;
margin-left: 0px; margin-left: 0px;
margin-right: 2px; margin-right: 2px;
text-align:left; text-align:left;
@ -804,7 +841,7 @@ iframe.iphone {
line-height: 0.75em; line-height: 0.75em;
margin-top: 10px; margin-top: 10px;
font-size: 16px; font-size: 16px;
margin-left: -5px; margin-left: -8px;
} }
.tight-h3 { .tight-h3 {

11
views/account/show.jade
View File

@ -8,10 +8,13 @@ block content
h1 #{username}'s portfolio h1 #{username}'s portfolio
.panel-body .panel-body
if (user && user.profile.username === username) if (user && user.profile.username === username)
.col-xs-12 .row.text-center
.text-center .col-xs-12.col-sm-10.col-sm-offset-1
a.btn.btn-big.btn-primary(href="/account") Update my portfolio page or manage my account a.btn.btn-big.btn-primary.btn-block(href="/account") Update my portfolio page or manage my account
br .spacer
.col-xs-12.col-sm-10.col-sm-offset-1
a.btn.btn-big.btn-success.btn-block(href="/signout") Sign out of Free Code Camp
.spacer
.row .row
.col-xs-12 .col-xs-12
.col-xs-12.col-sm-12.col-md-5 .col-xs-12.col-sm-12.col-md-5

4
views/layout-wide.jade
View File

@ -6,8 +6,8 @@ html(ng-app='profileValidation', lang='en')
body.no-top-and-bottom-margins.full-screen-body-background body.no-top-and-bottom-margins.full-screen-body-background
include partials/css-cdns include partials/css-cdns
include partials/navbar-wide include partials/navbar
include partials/flash include partials/flash
block content block content
include partials/footer include partials/footer
!= js('application') != js('application')

2
views/layout.jade
View File

@ -5,7 +5,7 @@ html(ng-app='profileValidation', lang='en')
!= css('main') != css('main')
body.top-and-bottom-margins body.top-and-bottom-margins
include partials/css-cdns include partials/css-cdns
include partials/navbar-narrow include partials/navbar
.container .container
include partials/flash include partials/flash
block content block content

1
views/partials/navbar-narrow.jade
View File

@ -1 +0,0 @@

2
views/partials/navbar-wide.jade
View File

@ -1,2 +0,0 @@
nav.navbar.navbar-default.navbar-fixed-top.nav-height
include ./navbar

94
views/partials/navbar.jade
View File

@ -1,54 +1,56 @@
.navbar-header nav.navbar.navbar-default.navbar-fixed-top.nav-height
button.hamburger.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse') .navbar-header
.col-xs-6 button.hamburger.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
span.hamburger-text Menu .col-xs-6
.col-xs-6 span.hamburger-text Menu
span.sr-only Toggle navigation .col-xs-6
span.icon-bar span.sr-only Toggle navigation
span.icon-bar span.icon-bar
span.icon-bar span.icon-bar
a.navbar-brand(href='/') span.icon-bar
img.img-responsive.nav-logo(src='https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg.gz', alt='learn to code javascript at Free Code Camp logo') a.navbar-brand(href='/')
.collapse.navbar-collapse img.img-responsive.nav-logo(src='https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg.gz', alt='learn to code javascript at Free Code Camp logo')
ul.nav.navbar-nav.navbar-right.hamburger-dropdown .collapse.navbar-collapse
ul.nav.navbar-nav.navbar-right.hamburger-dropdown
li
a(href='/map') Map
if (user && user.sentSlackInvite)
li li
a(href='/chat', target='_blank') Chat a(href='/challenges') Next Challenge
else
li li
a(href='/challenges/join-our-chat-room') Chat a(href='/map') Map
li if (user && user.sentSlackInvite)
a(href='/stories/hot') News li
li a(href='/chat', target='_blank') Chat
a(href='/field-guide') Field Guide else
if !user li
li       a(href='/challenges/join-our-chat-room') Chat
li li
a.btn.signup-btn.signup-btn-nav(href='/login') Sign in a(href='/stories/hot') News
else
li li
if (user.profile.username) a(href='/field-guide') Field Guide
if !user
a(href='/' + user.profile.username) [ #{user.progressTimestamps.length} ] li      
li
else a.btn.signup-btn.signup-btn-nav(href='/login') Sign in
a(href='/account') [ #{user.progressTimestamps.length} ] else
.hidden-xs li
if user.profile.picture
if (user.profile.username) if (user.profile.username)
a(href='/' + user.profile.username)
img.profile-picture.float-right(src='#{user.profile.picture}') a(href='/' + user.profile.username) [ #{user.progressTimestamps.length} ]
else else
a(href='/account') a(href='/account') [ #{user.progressTimestamps.length} ]
img.profile-picture.float-right(src='#{user.profile.picture}') .hidden-xs.hidden-sm
else if user.profile.picture
if (user.profile.username) if (user.profile.username)
a(href='/' + user.profile.username) a(href='/' + user.profile.username)
img.profile-picture.float-right(src='#{user.gravatar(60)}') img.profile-picture.float-right(src='#{user.profile.picture}')
else
a(href='/account')
img.profile-picture.float-right(src='#{user.profile.picture}')
else else
a(href='/account') if (user.profile.username)
img.profile-picture.float-right(src='#{user.gravatar(60)}') a(href='/' + user.profile.username)
img.profile-picture.float-right(src='#{user.gravatar(60)}')
else
a(href='/account')
img.profile-picture.float-right(src='#{user.gravatar(60)}')