codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2025-05-03 17:33:31 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

Navbars collapse below large screen sizes

Browse source
This commit is contained in:
Scott Erickson 2016-04-27 16:07:48 -07:00
parent cdddc24693
commit 7788608d2d
3 changed files with 55 additions and 29 deletions

2
app/styles/bootstrap/_variables.scss
View file

@ -272,7 +272,7 @@ $grid-gutter-width: 30px !default;
// Navbar collapse
// Point at which the navbar becomes uncollapsed
$grid-float-breakpoint: $screen-sm-min !default;
$grid-float-breakpoint: $screen-lg-min !default;
// Point at which the navbar begins collapsing
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;

17
app/styles/style-flat.sass
View file

@ -126,6 +126,13 @@ $forest: #20572B
color: black
margin: 30px 25px 0
@media (min-width: $screen-lg-min)
#navbar-collapse
float: right
#navbar-collapse
max-height: none
.nav > li > a
// TODO: Move this to bootstrap variables for navbars
font-weight: bold
@ -141,14 +148,22 @@ $forest: #20572B
background: $burgandy
color: white
.nav > li.disabled > a
color: black
&:hover
background: white
color: black
cursor: default
#language-dropdown-wrapper
display: inline-block
padding: 30px 10px
width: 100%
@media (max-width: $screen-sm-min)
@media (max-width: $screen-lg-min)
.nav > li > a
padding: 10px 20px
height: 45px
#language-dropdown-wrapper
display: inline-block
padding: 10px 10px

97
app/templates/base-flat.jade
View file

@ -1,46 +1,4 @@
.style-flat
block header
nav#main-nav.navbar.navbar-default
.container
.row
.col-md-3.col-sm-4
.navbar-header
button.navbar-toggle.collapsed(data-toggle='collapse', data-target='#navbar-collapse' aria-expanded='false')
span.sr-only(data-i18n="home.toggle_nav")
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(href="/")
img#logo-img(src="/images/pages/base/logo.png")
span.glyphicon.glyphicon-home
.col-md-9.col-sm-8
#navbar-collapse.collapse.navbar-collapse
ul.nav.navbar-nav.pull-left
li
a(href="/about", data-i18n="nav.about")
li
a(href="/courses", data-i18n="nav.students")
li
a(href="/teachers/classes", data-i18n="nav.teachers")
li
a(href="https://discourse.codecombat.com/", data-i18n="nav.forum")
if me.isAnonymous()
li
a#create-account-link.signup-button(data-i18n="login.sign_up")
li
a#login-link.login-button(data-i18n="login.log_in")
else
li.dropdown
a.dropdown-toggle(href="#", data-toggle="dropdown" role="button" aroa-haspopup="true" aria-expanded="false")
img.img-circle.img-circle-small.m-r-1(src=me.getPhotoURL() class=(me.isTeacher() ? 'border-navy' : ''))
span.spr My Account
ul.dropdown-menu
li.user-dropdown-header.text-center
span.user-level= me.level()
a(href="/user/#{me.getSlugOrID()}")
img.img-circle(src=me.getPhotoURL() class=(me.isTeacher() ? 'border-navy' : ''))
h5=me.displayName()
mixin accountLinks
li
a(href="/user/#{me.getSlugOrID()}", data-i18n="nav.profile")
li
@ -57,6 +15,59 @@
li
a#logout-button(data-i18n="login.log_out")
.style-flat
block header
nav#main-nav.navbar.navbar-default
.container-fluid
.row
.col-lg-12
.navbar-header
button.navbar-toggle.collapsed(data-toggle='collapse', data-target='#navbar-collapse' aria-expanded='false')
span.sr-only(data-i18n="home.toggle_nav")
span.icon-bar
span.icon-bar
span.icon-bar
a.navbar-brand(href="/")
img#logo-img(src="/images/pages/base/logo.png")
span.glyphicon.glyphicon-home
#navbar-collapse.collapse.navbar-collapse
ul.nav.navbar-nav
li
a(href="/about", data-i18n="nav.about")
li
a(href="/courses", data-i18n="nav.students")
li
a(href="/teachers/classes", data-i18n="nav.teachers")
li
a(href="https://discourse.codecombat.com/", data-i18n="nav.forum")
if me.isAnonymous()
ul.nav.navbar-nav
li
a#create-account-link.signup-button(data-i18n="login.sign_up")
li
a#login-link.login-button(data-i18n="login.log_in")
else
ul.nav.navbar-nav.hidden-lg
li.disabled
a
img.img-circle.img-circle-small.m-r-1(src=me.getPhotoURL() class=(me.isTeacher() ? 'border-navy' : ''))
span= me.displayName()
+accountLinks
ul.nav.navbar-nav
li.dropdown.hidden-xs.hidden-sm.hidden-md
a.dropdown-toggle(href="#", data-toggle="dropdown" role="button" aroa-haspopup="true" aria-expanded="false")
img.img-circle.img-circle-small.m-r-1(src=me.getPhotoURL() class=(me.isTeacher() ? 'border-navy' : ''))
span.spr My Account
ul.dropdown-menu
li.user-dropdown-header.text-center
span.user-level= me.level()
a(href="/user/#{me.getSlugOrID()}")
img.img-circle(src=me.getPhotoURL() class=(me.isTeacher() ? 'border-navy' : ''))
h5=me.displayName()
+accountLinks
li
#language-dropdown-wrapper
select.language-dropdown.form-control