makary/phpbb
1
0
Fork 0
mirror of https://github.com/phpbb/phpbb.git synced 2025-06-28 14:18:52 +00:00
Code Issues Projects Releases Packages Wiki Activity

[ticket/12598] Improve search box styling

Browse source 
PHPBB3-12598
This commit is contained in:
PayBas 2014-07-07 15:49:56 +02:00
parent 3066cd700a
commit 470e6d5edf
13 changed files with 137 additions and 81 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
phpBB/styles/prosilver/template/overall_header.html
View file

@ -70,12 +70,13 @@
</div>
<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<div id="search-box">
<div id="search-box" class="search-box">
<form action="{U_SEARCH}" method="get" id="search">
<fieldset>
<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
<input class="button2" value="{L_SEARCH}" type="submit" /><br />
<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
<input name="keywords" id="keywords" type="search" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search tiny" size="20" value="{SEARCH_WORDS}" placeholder="{L_SEARCH_MINI}" />
<button class="button icon-button search-icon" type="submit" title="{L_SEARCH}">{L_SEARCH}</button>
<a href="{U_SEARCH}" class="button icon-button search-adv-icon" title="{L_SEARCH_ADV}">{L_SEARCH_ADV}</a>
{S_SEARCH_HIDDEN_FIELDS}
</fieldset>
</form>
</div>

15
phpBB/styles/prosilver/template/search_results.html
View file

@ -12,16 +12,17 @@
<!-- ENDIF -->
<!-- IF .pagination or SEARCH_MATCHES or PAGE_NUMBER -->
<form method="post" action="{S_SEARCH_ACTION}">
<div class="action-bar top">
<!-- IF SEARCH_MATCHES -->
<div class="search-box">
<!-- IF SEARCH_IN_RESULTS -->
<label for="add_keywords">{L_SEARCH_IN_RESULTS}{L_COLON} <input type="search" name="add_keywords" id="add_keywords" value="" class="inputbox narrow" /></label>
<input class="button2" type="submit" name="submit" value="{L_SEARCH}" />
<!-- ENDIF -->
<form method="post" action="{S_SEARCH_ACTION}">
<fieldset>
<input class="inputbox search tiny" type="search" name="add_keywords" id="add_keywords" value="" placeholder="{L_SEARCH_IN_RESULTS}" />
<button class="button icon-button search-icon" type="submit" title="{L_SEARCH}">{L_SEARCH}</button>
<a href="{U_SEARCH}" class="button icon-button search-adv-icon" title="{L_SEARCH_ADV}">{L_SEARCH_ADV}</a>
</fieldset>
</form>
</div>
<!-- ENDIF -->
@ -34,8 +35,6 @@
<!-- ENDIF -->
</div>
</div>
</form>
<!-- ENDIF -->
<!-- IF S_SHOW_TOPICS -->

3
phpBB/styles/prosilver/template/viewforum_body.html
View file

@ -50,7 +50,8 @@
<form method="get" id="forum-search" action="{S_SEARCHBOX_ACTION}">
<fieldset>
<input class="inputbox search tiny" type="search" name="keywords" id="search_keywords" size="20" placeholder="{L_SEARCH_FORUM}" />
<input class="button2" type="submit" value="{L_SEARCH}" />
<button class="button icon-button search-icon" type="submit" title="{L_SEARCH}">{L_SEARCH}</button>
<a href="{U_SEARCH}" class="button icon-button search-adv-icon" title="{L_SEARCH_ADV}">{L_SEARCH_ADV}</a>
{S_SEARCH_LOCAL_HIDDEN_FIELDS}
</fieldset>
</form>

3
phpBB/styles/prosilver/template/viewtopic_body.html
View file

@ -42,7 +42,8 @@
<form method="get" id="topic-search" action="{S_SEARCHBOX_ACTION}">
<fieldset>
<input class="inputbox search tiny" type="search" name="keywords" id="search_keywords" size="20" placeholder="{L_SEARCH_TOPIC}" />
<input class="button2" type="submit" value="{L_SEARCH}" />
<button class="button icon-button search-icon" type="submit" title="{L_SEARCH}">{L_SEARCH}</button>
<a href="{U_SEARCH}" class="button icon-button search-adv-icon" title="{L_SEARCH_ADV}">{L_SEARCH_ADV}</a>
{S_SEARCH_LOCAL_HIDDEN_FIELDS}
</fieldset>
</form>

37
phpBB/styles/prosilver/theme/bidi.css
View file

@ -29,20 +29,10 @@
--------------------------------------------- */
.rtl #search-box {
float: left;
text-align: left;
margin-right: 0;
margin-left: 5px;
}
.rtl #search-box li {
text-align: left;
}
.rtl #search-box img {
margin-right: 0;
margin-left: 3px;
}
.rtl #site-description {
float: right;
}
@ -643,6 +633,11 @@ li.breadcrumbs span:first-child > a {
float: right;
}
.rtl .buttons .button, .rtl .dropdown-select {
margin-left: 5px;
margin-right: 0;
}
/* Icon images
---------------------------------------- */
.rtl .small-icon {
@ -952,11 +947,29 @@ li.breadcrumbs span:first-child > a {
/* Topic and forum Search */
.rtl .search-box {
margin-right: 5px;
margin-left: 0;
float: right;
}
.rtl .search-box .inputbox {
border-left-width: 0;
border-right-width: 1px;
border-radius: 0 4px 4px 0;
float: right;
padding: 3px;
}
.rtl .search-box .button {
float: right;
}
.rtl .search-box a.button {
border-left-width: 1px;
border-right-width: 0;
border-radius: 4px 0 0 4px;
padding-left: 5px;
padding-right: 3px;
}
.rtl input.search {
background-position: right 1px;
padding-right: 17px;

11
phpBB/styles/prosilver/theme/buttons.css
View file

@ -85,7 +85,7 @@
font-size: 0;
}
.tools-icon:before, .modtools-icon:before {
.tools-icon:before, .modtools-icon:before, .search-adv-icon:before {
background-position: -80px 0;
height: 16px;
margin-top: 2px;
@ -95,6 +95,9 @@
.dropdown-visible .tools-icon:before,
.nojs .dropdown-container:hover .tools-icon:before { background-position: -80px -20px; }
.search-adv-icon:before { background-position: -245px 0; }
.search-adv-icon:hover:before { background-position: -245px -20px; }
.modtools-icon:before { background-position: -225px 0; }
.dropdown-visible .modtools-icon:before,
.nojs .dropdown-container:hover .modtools-icon:before { background-position: -225px -20px; }
@ -239,3 +242,9 @@ ul.linklist.bulletin > li.small-icon:before {
.hasjs .postbody .post-buttons {
max-width: 40%;
}
/* Browser-specific tweaks */
button::-moz-focus-inner {
padding: 0;
border: 0
}

20
phpBB/styles/prosilver/theme/colours.css
View file

@ -30,15 +30,21 @@ hr {
--------------------------------------------- */
#search-box {
color: #FFFFFF;
box-shadow: 0 0 10px #0075B0;
}
#search-box #keywords {
background-color: #FFF;
#search-box .inputbox:hover,
#search-box .inputbox:focus,
#search-box .button:hover {
border-color: #C7C3BF;
}
#search-box input {
border-color: #0075B0;
.search-box .inputbox {
border-color: #C7C3BF;
}
.search-box button.search-icon:before {
background-image: url("./images/icon_textbox_search.gif");
}
/* Round cornered boxes and backgrounds
@ -249,11 +255,11 @@ a { color: #105289; }
a:hover { color: #D31141; }
/* Links on gradient backgrounds */
#search-box a, .navbg a, .forumbg .header a, .forabg .header a, th a {
.navbg a, .forumbg .header a, .forabg .header a, th a {
color: #FFFFFF;
}
#search-box a:hover, .navbg a:hover, .forumbg .header a:hover, .forabg .header a:hover, th a:hover {
.navbg a:hover, .forumbg .header a:hover, .forabg .header a:hover, th a:hover {
color: #A8D8FF;
}

47
phpBB/styles/prosilver/theme/common.css
View file

@ -212,51 +212,26 @@ ol ol ul, ol ul ul, ul ol ul, ul ul ul {
text-decoration: none;
}
/* Search box
--------------------------------------------- */
#search-box {
position: relative;
margin-top: 30px;
margin-right: 5px;
display: block;
float: right;
text-align: right;
white-space: nowrap; /* For Opera */
}
#search-box #keywords {
width: 95px;
}
#search-box input {
border: 1px solid transparent;
}
/* .button1 style defined later, just a few tweaks for the search button version */
#search-box input.button1 {
padding: 1px 5px;
}
#search-box li {
text-align: right;
margin-top: 4px;
}
#search-box img {
vertical-align: middle;
margin-right: 3px;
}
/* Site description and logo */
#site-description {
float: left;
width: 70%;
width: 65%;
}
#site-description h1 {
margin-right: 0;
}
/* Search box
--------------------------------------------- */
#search-box {
border-radius: 4px;
display: block;
float: right;
margin-right: 5px;
margin-top: 30px;
}
/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {

45
phpBB/styles/prosilver/theme/forms.css
View file

@ -289,6 +289,10 @@ input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-s
display: none;
}
input[type="search"]::-webkit-search-cancel-button {
cursor: pointer;
}
/* Form button styles
---------------------------------------- */
input.button1, input.button2 {
@ -352,12 +356,46 @@ input.button1:focus, input.button2:focus, input.button3:focus {
/* Topic and forum Search */
.search-box {
margin-top: 3px;
margin-left: 5px;
float: left;
}
.search-box input {
.search-box .inputbox {
background-image: none;
border-right-width: 0;
border-radius: 4px 0 0 4px;
float: left;
height: 24px;
padding: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.search-box button {
float: left;
}
.search-box button.search-icon {
border-radius: 0;
font-size: 0;
height: 24px;
margin: 0;
padding: 3px;
position: relative;
}
.search-box button.search-icon:before {
margin: 0 3px;
height: 14px;
width: 16px;
}
.search-box a.button {
border-left-width: 0;
border-radius: 0 4px 4px 0;
font-size: 0;
margin: 0;
padding: 2px 5px 2px 3px;
}
input.search {
@ -371,4 +409,3 @@ input.search {
.medium { width: 50%;}
.narrow { width: 25%;}
.tiny { width: 10%;}

BIN
phpBB/styles/prosilver/theme/images/icons_button.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.3 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

4
phpBB/styles/prosilver/theme/links.css
View file

@ -18,11 +18,11 @@ a:hover { text-decoration: underline; }
}
/* Links on gradient backgrounds */
#search-box a, .navbg a, .forumbg .header a, .forabg .header a, th a {
.navbg a, .forumbg .header a, .forabg .header a, th a {
text-decoration: none;
}
#search-box a:hover, .navbg a:hover, .forumbg .header a:hover, .forabg .header a:hover, th a:hover {
.navbg a:hover, .forumbg .header a:hover, .forabg .header a:hover, th a:hover {
text-decoration: underline;
}

15
phpBB/styles/prosilver/theme/responsive.css
View file

@ -351,6 +351,13 @@ fieldset.quick-login label[for="autologin"] {
}
}
@media only screen and (max-width: 430px), only screen and (max-device-width: 430px)
{
.section-viewtopic .search-box .inputbox {
width: 110px;
}
}
@media only screen and (max-width: 320px), only screen and (max-device-width: 320px)
{
select, .inputbox {
@ -511,7 +518,11 @@ fieldset.display-actions {
p.responsive-center {
float: none;
text-align: center;
margin: 0;
margin-bottom: 5px;
}
action-bar > div {
margin-bottom: 5px;
}
.action-bar > .pagination {
@ -525,7 +536,7 @@ fieldset.display-actions {
margin: 0 2px;
}
.action-bar > div.search-box, p.jumpbox-return {
p.jumpbox-return {
display: none;
}

5
phpBB/styles/prosilver/theme/tweaks.css
View file

@ -24,4 +24,7 @@ dd label input { vertical-align: text-bottom\9; }
/* IE 9 Tweaks
------------------------------------------------------------------------------*/
/* Border-radius bleed fix in IE9 */
#search-box, #search-box .inputbox, #search-box a.button {
border-radius: 0;
}