com web/php: Various styling updates, including responsiveness (gasp!).: js/search.js styles/theme-base.css

Commit: 6429556f930a8103d8e21845cba05a1a7b8d6c20 Author: Adam Harvey <aharvey@php.net> Wed, 20 Nov 2013 10:46:55 -0800 Parents: 24baccd5fc2bb75bf51491ba4f4ca554971232f2 Branches: master Link: http://git.php.net/?p=web/php.git;a=commitdiff;h=6429556f930a8103d8e21845cba05a1a7b8d6c20 Log: Various styling updates, including responsiveness (gasp!). Changed paths: M js/search.js M styles/theme-base.css Diff: diff --git a/js/search.js b/js/search.js index 891745b..b5d6765 100644 --- a/js/search.js +++ b/js/search.js @@ -286,7 +286,7 @@ */ var enableSearchTypeahead = function (backends) { var template = "<h4>{{ name }}</h4>" + - "<span class='description'>{{ description }}</span>"; + "<span title='{{ description }}' class='description'>{{ description }}</span>"; // Build the typeahead options array. var typeaheadOptions = $.map(backends, function (backend, name) { @@ -331,26 +331,13 @@ // Grab what the user entered. var pattern = $(element).val(); - // Add "n more results" entries to each section. + // Add result totals to each section heading. $.each(results, function (name, numResults) { var container = $(".tt-dataset-" + name, $(element).parent()); - var more = numResults - options.limit; - var plural = (more == 1 ? "" : "s"); - var url = "/search.php?pattern=" + escape(pattern) + "&show=manual"; - - // Class lookups can be done pretty specifically. - if (name == "class") { - url = "/search.php?pattern=" + escape(pattern + " inurl:class.") + "&show=manual"; - } - - $(".more", container).remove(); - if (pattern.length > 2 && more > 0) { - $(container).append(moreTemplate.render({ - num: more, - plural: plural, - url: url - })); - } + var results = $("<span class='result-count' />").text(numResults); + + $("h3 .result-count", container).remove(); + $("h3", container).append(results); }); /* Add a global search option. Note that, as above, the diff --git a/styles/theme-base.css b/styles/theme-base.css index f4d860b..b53eb66 100755 --- a/styles/theme-base.css +++ b/styles/theme-base.css @@ -2676,9 +2676,16 @@ fieldset { } .tt-dropdown-menu { - background:#444449; - box-shadow:inset 0 0 2em rgba(0,0,0,.375); + background: rgb(102, 102, 153); + background: rgba(102, 102, 153, 0.98); color:#fff; + width: 100%; + -webkit-border-bottom-right-radius: 2px; + -webkit-border-bottom-left-radius: 2px; + -moz-border-radius-bottomright: 2px; + -moz-border-radius-bottomleft: 2px; + border-bottom-right-radius: 2px; + border-bottom-left-radius: 2px; } .tt-dropdown-menu h3 { @@ -2693,11 +2700,17 @@ fieldset { padding: 0.3em; } +.tt-dropdown-menu .result-count { + display: block; + float: right; + opacity: 0.5; + text-align: right; +} + .tt-suggestions { color: #ccc; } -.tt-dropdown-menu .more, .tt-dropdown-menu .search { border: none; color: white; @@ -2716,16 +2729,40 @@ fieldset { line-height: 1.3; } -.tt-suggestion .description { +/* Class and other matches descriptions tend to be useless. */ +.tt-dataset-0 .tt-suggestion .description { display: block; font-size: 0.8em; line-height: 1.3; + max-height: 1..3em; + overflow: hidden; + text-overflow: ellipsis; +} + +..tt-suggestion .description { + display: none; } /* Selected items. */ .tt-is-under-cursor { background: rgba(255, 255, 255, 0.1); } + +/* We need to crunch down the dropdown on smaller displays. Firstly we'll drop + * the descriptions, then classes (since they're two clicks away if you have + * matching functions). */ +@media screen and (max-height: 580px) { + .tt-dataset-0 .tt-suggestion .description { + display: none; + } +} + +@media screen and (max-height: 500px) { + .tt-dataset-1 { + /* Overriding an unfortunate element style. */ + display: none !important; + } +} /* }}} */ body.downloads #layout .span6 {