codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2025-03-24 03:40:00 -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
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -272,7 +272,7 @@ $grid-gutter-width: 30px !default;
// Navbar collapse // Navbar collapse
// Point at which the navbar becomes uncollapsed // 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 // Point at which the navbar begins collapsing
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default; $grid-float-breakpoint-max: ($grid-float-breakpoint - 1) !default;

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

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

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

@ -1,9 +1,26 @@
mixin accountLinks
li
a(href="/user/#{me.getSlugOrID()}", data-i18n="nav.profile")
li
a(href="/account/settings", data-i18n="play.settings")
unless me.isStudent()
li
a(href="/account/payments", data-i18n="account.payments")
unless me.isTeacher() || me.isStudent()
li
a(href="/account/subscription", data-i18n="account.subscription")
unless me.isStudent()
li
a(href="/account/prepaid", data-i18n="account.prepaid_codes")
li
a#logout-button(data-i18n="login.log_out")
.style-flat .style-flat
block header block header
nav#main-nav.navbar.navbar-default nav#main-nav.navbar.navbar-default
.container .container-fluid
.row .row
.col-md-3.col-sm-4 .col-lg-12
.navbar-header .navbar-header
button.navbar-toggle.collapsed(data-toggle='collapse', data-target='#navbar-collapse' aria-expanded='false') button.navbar-toggle.collapsed(data-toggle='collapse', data-target='#navbar-collapse' aria-expanded='false')
span.sr-only(data-i18n="home.toggle_nav") span.sr-only(data-i18n="home.toggle_nav")
@ -14,9 +31,8 @@
img#logo-img(src="/images/pages/base/logo.png") img#logo-img(src="/images/pages/base/logo.png")
span.glyphicon.glyphicon-home span.glyphicon.glyphicon-home
.col-md-9.col-sm-8
#navbar-collapse.collapse.navbar-collapse #navbar-collapse.collapse.navbar-collapse
ul.nav.navbar-nav.pull-left ul.nav.navbar-nav
li li
a(href="/about", data-i18n="nav.about") a(href="/about", data-i18n="nav.about")
li li
@ -25,13 +41,22 @@
a(href="/teachers/classes", data-i18n="nav.teachers") a(href="/teachers/classes", data-i18n="nav.teachers")
li li
a(href="https://discourse.codecombat.com/", data-i18n="nav.forum") a(href="https://discourse.codecombat.com/", data-i18n="nav.forum")
if me.isAnonymous() if me.isAnonymous()
ul.nav.navbar-nav
li li
a#create-account-link.signup-button(data-i18n="login.sign_up") a#create-account-link.signup-button(data-i18n="login.sign_up")
li li
a#login-link.login-button(data-i18n="login.log_in") a#login-link.login-button(data-i18n="login.log_in")
else else
li.dropdown 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") 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' : '')) img.img-circle.img-circle-small.m-r-1(src=me.getPhotoURL() class=(me.isTeacher() ? 'border-navy' : ''))
span.spr My Account span.spr My Account
@ -41,26 +66,12 @@
a(href="/user/#{me.getSlugOrID()}") a(href="/user/#{me.getSlugOrID()}")
img.img-circle(src=me.getPhotoURL() class=(me.isTeacher() ? 'border-navy' : '')) img.img-circle(src=me.getPhotoURL() class=(me.isTeacher() ? 'border-navy' : ''))
h5=me.displayName() h5=me.displayName()
li +accountLinks
a(href="/user/#{me.getSlugOrID()}", data-i18n="nav.profile")
li
a(href="/account/settings", data-i18n="play.settings")
unless me.isStudent()
li
a(href="/account/payments", data-i18n="account.payments")
unless me.isTeacher() || me.isStudent()
li
a(href="/account/subscription", data-i18n="account.subscription")
unless me.isStudent()
li
a(href="/account/prepaid", data-i18n="account.prepaid_codes")
li
a#logout-button(data-i18n="login.log_out")
li
#language-dropdown-wrapper
select.language-dropdown.form-control
li
#language-dropdown-wrapper
select.language-dropdown.form-control
block page_nav block page_nav
block outer_content block outer_content