From 4fa931e403ec3ae2f8f7f690c6c4040365f68ba9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 18:11:31 -0800 Subject: [PATCH] fix the navbar click and a few jank responsive problems --- docs/assets/css/bootstrap-responsive.css | 140 ++++++++++++++--------- docs/assets/css/bootstrap.css | 4 +- docs/assets/css/docs.css | 23 +++- docs/base-css.html | 2 +- docs/components.html | 81 +++++++------ docs/templates/pages/base-css.mustache | 2 +- docs/templates/pages/components.mustache | 81 +++++++------ less/navbar.less | 4 +- less/responsive.less | 25 ++-- 9 files changed, 209 insertions(+), 153 deletions(-) diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css index 631c904e79..b0fbd9d7ba 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -175,22 +175,23 @@ margin-bottom: 36px; } .navbar-inner { - padding: 10px; + padding: 5px; background-image: none; } .navbar .container { padding: 0; } .navbar .brand { - float: none; - display: block; - padding-left: 15px; - padding-right: 15px; - margin: 0; + padding-left: 10px; + padding-right: 10px; + margin: 0 0 0 -5px; + } + .navbar .nav-collapse { + clear: left; } .navbar .nav { float: none; - margin: 9px 0; + margin: 0 0 9px; } .navbar .nav > li { float: none; @@ -217,8 +218,10 @@ } .navbar .dropdown-menu { position: static; - display: block; + top: auto; + left: auto; float: none; + display: block; max-width: none; margin: 0 15px; padding: 0; @@ -263,60 +266,83 @@ height: 0; } } -/* @media (min-width: 1210px) { - - // Reset grid variables - @gridColumns: 12; - @gridColumnWidth: 70px; - @gridGutterWidth: 30px; - @siteWidth: 1170px; - - // Bring grid mixins to recalculate widths - .columns(@columns: 1) { - width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); - } - .offset(@columns: 1) { - margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); - } - .container { - width: @siteWidth; + width: 1170px; } .row { - margin-left: @gridGutterWidth * -1; + margin-left: -30px; } [class*="span"] { - margin-left: @gridGutterWidth; + margin-left: 30px; + } + .span1 { + width: 70px; + } + .span2 { + width: 170px; + } + .span3 { + width: 270px; + } + .span4 { + width: 370px; + } + .span5 { + width: 470px; + } + .span6 { + width: 570px; + } + .span7 { + width: 670px; + } + .span8 { + width: 770px; + } + .span9 { + width: 870px; + } + .span10 { + width: 970px; + } + .span11 { + width: 1070px; + } + .span12 { + width: 1170px; + } + .offset1 { + margin-left: 130px; + } + .offset2 { + margin-left: 230px; + } + .offset3 { + margin-left: 330px; + } + .offset4 { + margin-left: 430px; + } + .offset5 { + margin-left: 530px; + } + .offset6 { + margin-left: 630px; + } + .offset7 { + margin-left: 730px; + } + .offset8 { + margin-left: 830px; + } + .offset9 { + margin-left: 930px; + } + .offset10 { + margin-left: 1030px; + } + .offset11 { + margin-left: 1130px; } - - // Default columns - .span1 { .columns(1); } - .span2 { .columns(2); } - .span3 { .columns(3); } - .span4 { .columns(4); } - .span5 { .columns(5); } - .span6 { .columns(6); } - .span7 { .columns(7); } - .span8 { .columns(8); } - .span9 { .columns(9); } - .span10 { .columns(10); } - .span11 { .columns(11); } - .span12 { .columns(12); } - - // Offset column options - .offset1 { .offset(1); } - .offset2 { .offset(2); } - .offset3 { .offset(3); } - .offset4 { .offset(4); } - .offset5 { .offset(5); } - .offset6 { .offset(6); } - .offset7 { .offset(7); } - .offset8 { .offset(8); } - .offset9 { .offset(9); } - .offset10 { .offset(10); } - .offset11 { .offset(11); } - .offset12 { .offset(12); } - } -*/ \ No newline at end of file diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index bf1116f538..6916e9361a 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2315,8 +2315,8 @@ button.btn.small, input[type="submit"].btn.small { display: none; float: right; padding: 7px 10px; - margin-left: 10px; - margin-right: 10px; + margin-left: 5px; + margin-right: 5px; background-color: #2c2c2c; background-image: -moz-linear-gradient(top, #333333, #222222); background-image: -ms-linear-gradient(top, #333333, #222222); diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index b06065365f..cc7ca0c639 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -522,6 +522,7 @@ h2 + .row { /* Example sites showcase */ .example-sites img { max-width: 100%; + margin: 0 auto; } .marketing-byline { margin: -18px 0 27px; @@ -646,6 +647,10 @@ form.well { padding: 10px 14px; margin: 0 auto 10px; } + /* Masthead (home page jumbotron) */ + .masthead { + padding-top: 0; + } /* Don't space out quick links so much */ .quick-links { @@ -669,8 +674,9 @@ form.well { display: block; max-width: 300px; margin: 0 auto 18px; + text-align: center; } - .example-sites img { + .example-sites .thumbnail > img { max-width: 270px; } @@ -796,11 +802,20 @@ form.well { /* Unfloat brand */ .navbar-fixed-top .brand { - float: none; + float: left; margin-left: 0; - padding-left: 15px; - padding-right: 15px; + padding-left: 10px; + padding-right: 10px; } } +/* LARGE DESKTOP SCREENS */ +@media (min-width: 1210px) { + + /* Update subnav container */ + .subnav-fixed .nav { + width: 1168px; /* 2px less to account for left/right borders being removed when in fixed mode */ + } + +} diff --git a/docs/base-css.html b/docs/base-css.html index c68391261c..4651e9789c 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1497,7 +1497,7 @@ For example, <code>section</code> should be wrapped as inline.
- +
diff --git a/docs/components.html b/docs/components.html index a2fac7360b..950d1f35c7 100644 --- a/docs/components.html +++ b/docs/components.html @@ -662,40 +662,47 @@
+ + + + + Project name - -
- -
- +
+ +
+ +
+ +
@@ -733,7 +740,7 @@ <input type="text" class="search-query pull-left" placeholder="Search"> </form> - +

Nav links

Nav items are simple to add via unordered lists.

@@ -763,9 +770,9 @@ </li> </ul> -

Get the javascript →

-
- +

Get the javascript →

+ + diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 6cbb111acb..c15fcebd39 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1425,7 +1425,7 @@
- +
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache index 363ed1ba13..3a92953ae7 100644 --- a/docs/templates/pages/components.mustache +++ b/docs/templates/pages/components.mustache @@ -590,40 +590,47 @@
+ + + + + {{_i}}Project name{{/i}} - -
- -
- +
+ +
+ +
+ +
@@ -661,7 +668,7 @@ <input type="text" class="search-query pull-left" placeholder="{{_i}}Search{{/i}}"> </form> - +

{{_i}}Nav links{{/i}}

{{_i}}Nav items are simple to add via unordered lists.{{/i}}

@@ -691,9 +698,9 @@ </li> </ul> -

{{_i}}Get the javascript →{{/i}}

-
- +

{{_i}}Get the javascript →{{/i}}

+ + diff --git a/less/navbar.less b/less/navbar.less index 379cbb56d9..4fd8a9073d 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -21,8 +21,8 @@ display: none; float: right; padding: 7px 10px; - margin-left: 10px; - margin-right: 10px; + margin-left: 5px; + margin-right: 5px; .buttonBackground(@navbarBackgroundHighlight, @navbarBackground); @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075); .box-shadow(@shadow); diff --git a/less/responsive.less b/less/responsive.less index 6c3102c14f..0955710b6f 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -202,7 +202,7 @@ margin-bottom: @baseLineHeight * 2; } .navbar-inner { - padding: 10px; + padding: 5px; background-image: none; } .navbar .container { @@ -210,16 +210,18 @@ } // Account for brand name .navbar .brand { - float: none; - display: block; - padding-left: 15px; - padding-right: 15px; - margin: 0; + padding-left: 10px; + padding-right: 10px; + margin: 0 0 0 -5px; + } + // Nav collapse clears brand + .navbar .nav-collapse { + clear: left; } // Block-level the nav .navbar .nav { float: none; - margin: (@baseLineHeight / 2) 0; + margin: 0 0 (@baseLineHeight / 2); } .navbar .nav > li { float: none; @@ -248,8 +250,10 @@ // Dropdowns in the navbar .navbar .dropdown-menu { position: static; - display: block; + top: auto; + left: auto; float: none; + display: block; max-width: none; margin: 0 15px; padding: 0; @@ -301,7 +305,7 @@ // LARGE DESKTOP & UP // ------------------ -/* + @media (min-width: 1210px) { // Reset grid variables @@ -317,7 +321,6 @@ .offset(@columns: 1) { margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); } - .container { width: @siteWidth; } @@ -354,7 +357,5 @@ .offset9 { .offset(9); } .offset10 { .offset(10); } .offset11 { .offset(11); } - .offset12 { .offset(12); } } -*/ \ No newline at end of file