mirror of
https://github.com/codeninjasllc/codecombat.git
synced 2024-11-27 17:45:40 -05:00
Navbars collapse below large screen sizes
This commit is contained in:
Scott Erickson
parent
cdddc24693
commit
7788608d2d
3 changed files with 55 additions and 29 deletions
|
|
@ -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;
|
||||
|
||||
|
|
|
|||
|
|
@ -125,6 +125,13 @@ $forest: #20572B
|
|||
.navbar-toggle
|
||||
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
|
||||
|
|
@ -136,19 +143,27 @@ $forest: #20572B
|
|||
height: 95px
|
||||
color: $burgandy
|
||||
text-shadow: 0 0 0
|
||||
|
||||
|
||||
&:hover
|
||||
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
|
||||
|
|
|
|||
|
|
@ -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
|
||||
block header
|
||||
nav#main-nav.navbar.navbar-default
|
||||
.container
|
||||
.container-fluid
|
||||
.row
|
||||
.col-md-3.col-sm-4
|
||||
.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")
|
||||
|
|
@ -14,9 +31,8 @@
|
|||
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
|
||||
ul.nav.navbar-nav
|
||||
li
|
||||
a(href="/about", data-i18n="nav.about")
|
||||
li
|
||||
|
|
@ -25,13 +41,22 @@
|
|||
a(href="/teachers/classes", data-i18n="nav.teachers")
|
||||
li
|
||||
a(href="https://discourse.codecombat.com/", data-i18n="nav.forum")
|
||||
if me.isAnonymous()
|
||||
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
|
||||
li.dropdown
|
||||
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
|
||||
|
|
@ -41,26 +66,12 @@
|
|||
a(href="/user/#{me.getSlugOrID()}")
|
||||
img.img-circle(src=me.getPhotoURL() class=(me.isTeacher() ? 'border-navy' : ''))
|
||||
h5=me.displayName()
|
||||
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")
|
||||
|
||||
li
|
||||
#language-dropdown-wrapper
|
||||
select.language-dropdown.form-control
|
||||
+accountLinks
|
||||
|
||||
li
|
||||
#language-dropdown-wrapper
|
||||
select.language-dropdown.form-control
|
||||
|
||||
block page_nav
|
||||
|
||||
block outer_content
|
||||
|
|
|
|||
Loading…
Reference in a new issue