| Index: trunk/extensions/MobileFrontend/javascripts/beta_opensearch.js |
| — | — | @@ -4,7 +4,6 @@ |
| 5 | 5 | var apiUrl = '/api.php', timer = -1, typingDelay = 500, |
| 6 | 6 | numResults = 15, term, |
| 7 | 7 | search = document.getElementById( 'search' ), |
| 8 | | - sq = document.getElementById( 'sq' ), |
| 9 | 8 | sb = document.getElementById( 'searchbox' ), |
| 10 | 9 | content = document.getElementById( 'content' ), |
| 11 | 10 | footer = document.getElementById( 'footer' ), |
| — | — | @@ -39,7 +38,7 @@ |
| 40 | 39 | search.onfocus = function() { |
| 41 | 40 | var rrd, rrdD; |
| 42 | 41 | sb = document.getElementById( 'searchbox' ); |
| 43 | | - sq = document.getElementById( 'sq' ); |
| | 42 | + header = document.getElementById( 'header' ); |
| 44 | 43 | content = document.getElementById( 'content' ); |
| 45 | 44 | footer = document.getElementById( 'footer' ); |
| 46 | 45 | resetViewPort(); |
| — | — | @@ -56,7 +55,7 @@ |
| 57 | 56 | rrdD = document.createElement( 'div' ); |
| 58 | 57 | rrdD.setAttribute( 'id', 'left-arrow' ); |
| 59 | 58 | rrd.appendChild( rrdD ); |
| 60 | | - sq.insertBefore( rrd, sq.firstChild ); |
| | 59 | + header.insertBefore( rrd, header.firstChild ); |
| 61 | 60 | } |
| 62 | 61 | focused = true; |
| 63 | 62 | } |
| Index: trunk/extensions/MobileFrontend/stylesheets/images/close-button-beta.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: trunk/extensions/MobileFrontend/stylesheets/images/close-button-beta.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 64 | 63 | + application/octet-stream |
| Index: trunk/extensions/MobileFrontend/stylesheets/images/arrow-left-beta.png |
| Cannot display: file marked as a binary type. |
| svn:mime-type = application/octet-stream |
| Property changes on: trunk/extensions/MobileFrontend/stylesheets/images/arrow-left-beta.png |
| ___________________________________________________________________ |
| Added: svn:mime-type |
| 65 | 64 | + application/octet-stream |
| Index: trunk/extensions/MobileFrontend/stylesheets/beta_common.css |
| — | — | @@ -19,24 +19,21 @@ |
| 20 | 20 | } |
| 21 | 21 | |
| 22 | 22 | .clearlink { |
| 23 | | - background: url(images/close-button.png?v=1) no-repeat scroll 0 0 transparent; |
| 24 | | - background-position: center center; |
| | 23 | + top: 9px; |
| | 24 | + right: -18px; |
| | 25 | + width: 18px; |
| | 26 | + height: 20px; |
| | 27 | + background: url(images/close-button-beta.png) no-repeat scroll 0 0 transparent; |
| | 28 | + margin: 0; |
| | 29 | + display: block; |
| | 30 | + background-position: right center; |
| | 31 | + background-size: auto 12px; |
| 25 | 32 | cursor: pointer; |
| 26 | | - zoom: 1; |
| 27 | 33 | position: absolute; |
| 28 | | - right: 0.25em; |
| 29 | | - top: 10%; |
| 30 | | - margin: 1px; |
| 31 | | - height: 42px; |
| 32 | | - width: 42px; |
| 33 | | - margin-top: -6px; |
| 34 | | - z-index: 99; |
| 35 | | - border: 0px solid; |
| 36 | | - display: none; |
| 37 | 34 | } |
| 38 | 35 | |
| 39 | 36 | html[dir="rtl"] .clearlink { |
| 40 | | - left: 0.25em; |
| | 37 | + left: 0; |
| 41 | 38 | right: auto; |
| 42 | 39 | } |
| 43 | 40 | |
| — | — | @@ -151,7 +148,6 @@ |
| 152 | 149 | } |
| 153 | 150 | |
| 154 | 151 | .search_bar .search { |
| 155 | | - width: 90%; |
| 156 | 152 | -webkit-appearance: none; |
| 157 | 153 | border-top-width: 0px; |
| 158 | 154 | border-right-width: 0px; |
| — | — | @@ -161,6 +157,10 @@ |
| 162 | 158 | outline-width: initial; |
| 163 | 159 | outline-color: initial; |
| 164 | 160 | padding: 0; |
| | 161 | + font-size: 1.2em; |
| | 162 | + padding-right: 16px; |
| | 163 | + width: 100%; |
| | 164 | + vertical-align: middle; /* don't use line height here as placeholder on ripple positions incorrectly */ |
| 165 | 165 | } |
| 166 | 166 | |
| 167 | 167 | #search::-webkit-search-cancel-button { |
| — | — | @@ -546,13 +546,14 @@ |
| 547 | 547 | } |
| 548 | 548 | |
| 549 | 549 | #header { |
| 550 | | - margin: 8px 8px 0 8px; |
| | 550 | + margin: 0; |
| 551 | 551 | position: relative; |
| | 552 | + border-bottom: solid 1px #CCC; |
| 552 | 553 | } |
| 553 | 554 | |
| 554 | 555 | #content_wrapper { |
| 555 | 556 | clear: both; |
| 556 | | - margin: 0 8px; |
| | 557 | + margin: 22px 22px; |
| 557 | 558 | } |
| 558 | 559 | |
| 559 | 560 | #footer { |
| — | — | @@ -562,51 +563,60 @@ |
| 563 | 564 | |
| 564 | 565 | #logo { |
| 565 | 566 | position: absolute; |
| 566 | | - top: 4px; |
| 567 | | - left: 5px; |
| | 567 | + height: 22px; |
| | 568 | + cursor: pointer; |
| | 569 | + left: 22px; |
| | 570 | + top: 9px; |
| | 571 | + width: 35px; |
| 568 | 572 | } |
| 569 | 573 | |
| | 574 | +html[dir="rtl"] #searchbox { |
| | 575 | + padding: 0px 54px 0px 20px; |
| | 576 | +} |
| | 577 | + |
| 570 | 578 | #zero-language-search.search_bar, |
| 571 | 579 | #searchbox { |
| 572 | 580 | width: auto; |
| 573 | 581 | position: relative; |
| 574 | | - padding: 8px 32px 8px 44px; |
| 575 | | - border: 1px solid #cccccc; |
| | 582 | + padding: 0px 40px 0px 73px; /* right = width of #logo (35px) + 22px + 16px |
| | 583 | + left = width of close button + 22px */ |
| 576 | 584 | -webkit-border-radius: 2px; |
| 577 | 585 | -moz-border-radius: 2px; |
| | 586 | + -webkit-tap-highlight-color: rgba(255, 255, 255, 0); |
| 578 | 587 | } |
| 579 | 588 | |
| | 589 | +.full-screen-search #searchbox { |
| | 590 | + padding: 0px 40px 0px 54px; /* right = width of #logo (18px) + 22px + 16px */ |
| | 591 | +} |
| | 592 | + |
| 580 | 593 | #zero-language-search.search_bar { |
| 581 | 594 | padding: 8px 32px 8px 0px; |
| 582 | 595 | } |
| 583 | 596 | |
| 584 | | -#searchbox #form { |
| 585 | | - padding-right: 34px; |
| 586 | | - width: 100%; |
| 587 | | - margin-bottom: 0; |
| | 597 | +html[dir="rtl"] #remove-results, |
| | 598 | +html[dir="rtl"] #logo { |
| | 599 | + right: 18px; |
| | 600 | + left: auto; |
| 588 | 601 | } |
| 589 | 602 | |
| 590 | | -html[dir="rtl"] #logo, |
| 591 | 603 | .goButton { |
| 592 | 604 | position: absolute; |
| 593 | | - right: 2px; |
| | 605 | + right: -18px; |
| 594 | 606 | left: auto; |
| 595 | | -} |
| 596 | | - |
| 597 | | -.goButton { |
| 598 | | - top: 2px; |
| | 607 | + top: 0px; |
| 599 | 608 | border: 0; |
| 600 | | - background: url(images/s.gif) no-repeat top left; |
| | 609 | + background: url(images/s.gif) no-repeat center left; |
| 601 | 610 | background-size: 27px 25px; |
| 602 | | - height: 25px; |
| | 611 | + height: 40px; |
| 603 | 612 | width: 27px; |
| 604 | 613 | padding-bottom: 0; |
| 605 | 614 | text-indent: -999px; |
| | 615 | + cursor: pointer; |
| 606 | 616 | } |
| 607 | 617 | |
| 608 | 618 | html[dir="rtl"] .goButton { |
| 609 | 619 | right: auto; |
| 610 | | - left: 2px; |
| | 620 | + left: 0; |
| 611 | 621 | } |
| 612 | 622 | |
| 613 | 623 | #searchbox a, |
| — | — | @@ -725,34 +735,27 @@ |
| 726 | 736 | display: none; |
| 727 | 737 | } |
| 728 | 738 | |
| 729 | | -.full-screen-search #search { |
| 730 | | - height: 30px; /* height of #sq - 2px border */ |
| 731 | | - font-size: 1.2em; |
| | 739 | +#header, |
| | 740 | +#search, |
| | 741 | +#sq, |
| | 742 | +form, |
| | 743 | +#searchbox { |
| | 744 | + position: relative; |
| | 745 | + right: 0; |
| | 746 | + top: 0; |
| | 747 | + left: 0; |
| | 748 | + height: 40px; |
| 732 | 749 | } |
| 733 | 750 | |
| 734 | | -html[dir="rtl"] .full-screen-search #sq { |
| 735 | | - padding-left: 0; |
| 736 | | - padding-right: 44px; |
| | 751 | +#searchbox { |
| | 752 | + margin: 0 |
| 737 | 753 | } |
| 738 | 754 | |
| 739 | 755 | .full-screen-search #sq { |
| 740 | | - position: relative; |
| 741 | | - padding-left: 44px; |
| 742 | 756 | margin-right: 0; |
| 743 | 757 | font-size: 16px; |
| 744 | | - border: none; |
| 745 | | - background-color: transparent; |
| 746 | 758 | } |
| 747 | 759 | |
| 748 | | -.full-screen-search #searchbox { |
| 749 | | - position: absolute; |
| 750 | | - width: 100%; |
| 751 | | - padding: 0; |
| 752 | | - top: 0; |
| 753 | | - left: 0; |
| 754 | | - border: none; |
| 755 | | -} |
| 756 | | - |
| 757 | 760 | .full-screen-search #logo, |
| 758 | 761 | .full-screen-search .goButton { |
| 759 | 762 | display: none; |
| — | — | @@ -798,16 +801,16 @@ |
| 799 | 802 | #remove-results { |
| 800 | 803 | display: none; |
| 801 | 804 | position: absolute; |
| 802 | | - width: 40px; |
| | 805 | + width: 18px; |
| 803 | 806 | height: 40px; |
| 804 | 807 | text-align: center; |
| 805 | 808 | line-height: 40px; |
| 806 | | - background: url(images/arrow-left.png) no-repeat scroll 0 0 transparent; |
| 807 | | - background-position: center center; |
| | 809 | + background: url(images/arrow-left-beta.png) no-repeat scroll 0 0 transparent; |
| | 810 | + background-position: left center; |
| | 811 | + background-size: auto 18px; |
| 808 | 812 | cursor: pointer; |
| 809 | | - zoom: 1; |
| 810 | | - left: -3px; |
| 811 | | - top: 3px; |
| | 813 | + left: 24px; |
| | 814 | + top: 6px; /* (#header height - background height) / 2 */ |
| 812 | 815 | margin: 1px; |
| 813 | 816 | margin-top: -6px; |
| 814 | 817 | z-index: 99; |
| — | — | @@ -816,11 +819,6 @@ |
| 817 | 820 | overflow: hidden; |
| 818 | 821 | } |
| 819 | 822 | |
| 820 | | -html[dir="rtl"] #remove-results { |
| 821 | | - right: 0px; |
| 822 | | - left: auto; |
| 823 | | -} |
| 824 | | - |
| 825 | 823 | .full-screen-search #results { |
| 826 | 824 | display: block !important; |
| 827 | 825 | } |
| — | — | @@ -829,14 +827,6 @@ |
| 830 | 828 | display: block; |
| 831 | 829 | } |
| 832 | 830 | |
| 833 | | -.full-screen-search .clearlink { |
| 834 | | - background: url(images/close-button.png?v=1) no-repeat scroll 0 0 transparent; |
| 835 | | - top: 0px; |
| 836 | | - right: 0px; |
| 837 | | - height: 42px; |
| 838 | | - width: 42px; |
| 839 | | -} |
| 840 | | - |
| 841 | 831 | .full-screen-search #nav { |
| 842 | 832 | display: none !important; |
| 843 | 833 | } |