Skip to content
Browse files

[Bug 846281] Search Form Refinements

  • Loading branch information...
1 parent 003a1a8 commit 5de3c9303e2cc2e5f65b1d312667d2d7758adebb Joshua Smith committed with rlr Mar 1, 2013
View
4 apps/gallery/templates/gallery/gallery.html
@@ -15,9 +15,9 @@
{% block content %}
<div class="cf">
<div class="grid_6">
- <form action="{{ url('gallery.search', media_type=media_type) }}" method="get" id="gallery-search">
+ <form action="{{ url('gallery.search', media_type=media_type) }}" method="get" class="simple-search-form" id="gallery-search">
<input class="searchbox" type="search" name="q" required="required" placeholder="{{ _('Search Gallery') }}" />
- <button title="{{ _('Search') }}" type="submit">
+ <button class="submit-button" title="{{ _('Search') }}" type="submit">
</button>
</form>
</div>
View
4 apps/gallery/templates/gallery/search.html
@@ -14,9 +14,9 @@
<article id="gallery-list" class="main">
<div class="cf">
<div class="grid_6">
- <form action="{{ url('gallery.search', media_type) }}" method="get" id="gallery-search">
+ <form action="{{ url('gallery.search', media_type) }}" method="get" class="simple-search-form" id="gallery-search">
<input class="searchbox" type="search" name="q" required="required" placeholder="{{ _('Search Gallery') }}" />
- <button title="{{ _('Search') }}" type="submit">
+ <button class="submit-button" title="{{ _('Search') }}" type="submit">
</button>
</form>
</div>
View
14 media/less/gallery.less
@@ -16,19 +16,9 @@ h1 {
#gallery-search {
float: left;
- position: relative;
+
.searchbox {
- width: 275px;
- }
- button {
- background:url('../img/icons-sprite.png') -50px -50px no-repeat;
- border:0;
- height:17px;
- position:absolute;
- right:12px;
- text-indent:-9999px;
- top:6px;
- width:17px;
+ width: 270px;
}
}
View
81 media/less/main.less
@@ -1220,13 +1220,10 @@ input[type=button],
}
}
-#support-search {
- display: block;
- float: right;
- margin: 35px 0 0 0;
+.simple-search-form {
position: relative;
- button {
+ .submit-button {
background: url('../img/icons-sprite.png') -50px -50px no-repeat;
border: 0;
height: 17px;
@@ -1236,56 +1233,62 @@ input[type=button],
top: 6px;
width: 17px;
}
-
- input {
- padding: 6px 42px 6px 20px;
- width: 238px;
- }
-}
-
-#support-search input,
-input.searchbox {
- .linear-gradient-top(#8d969e, #8d969e, 0%, #a8b0b7, 100%, url('../img/grain.png'));
- border: 0;
- .border-radius(30px);
- .box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5));
- color: #fff;
- font-size: 14px;
- height: 18px;
- padding: 6px 20px;
-
- &:focus {
- outline: none;
-
+
+ .searchbox {
+ .linear-gradient-top(#8d969e, #8d969e, 0%, #a8b0b7, 100%, url('../img/grain.png'));
+ border: 0;
+ .border-radius(30px);
+ .box-shadow(inset 1px 1px 1px rgba(0, 0, 0, 0.5));
+ color: #fff;
+ font-size: 14px;
+ height: 18px;
+ padding: 6px 42px 6px 20px;
+
+ &:focus {
+ outline: none;
+
+ &::-webkit-input-placeholder {
+ color: rgba(255, 255, 255, 0);
+ }
+ }
+
&::-webkit-input-placeholder {
- color: rgba(255, 255, 255, 0);
+ color: #fff;
+ }
+
+ &:-moz-placeholder {
+ color: #fff;
}
- }
-
- &::-webkit-input-placeholder {
- color: #fff;
- }
-
- &:-moz-placeholder {
- color: #fff;
}
}
.html-rtl {
#support-search {
float: left;
-
- button {
+ }
+
+ .simple-search-form {
+ .submit-button {
left: 12px;
right: auto;
}
-
- input {
+
+ .searchbox {
padding: 6px 20px 6px 42px;
}
}
}
+#support-search {
+ display: block;
+ float: right;
+ margin: 35px 0 0 0;
+
+ .searchbox {
+ width: 240px;
+ }
+}
+
.warning-box {
background: url('../img/warning-stripes.png') top left repeat-x #ffe;
border: 1px solid #fffbe7;
View
1 media/less/search.less
@@ -125,7 +125,6 @@
.search-form {
margin-bottom: 40px;
- position: relative;
.btn {
float: right;
View
6 templates/includes/common_macros.html
@@ -7,15 +7,15 @@
{% else %}
{% set esab = 'b' %}
{% endif %}
- <form {% if id %}id="{{ id }}"{% endif %} action="{{ url('search') }}" method="get" {% if target %} target="{{ target }}"{% endif %}>
+ <form {% if id %}id="{{ id }}"{% endif %} action="{{ url('search') }}" method="get" {% if target %} target="{{ target }}"{% endif %} class="simple-search-form">
<input type="hidden" name="esab" value="{{ esab }}">
{% if params %}
{% for k, v in params.items() %}
<input type="hidden" name="{{ k }}" value="{{ v }}" />
{% endfor %}
{% endif %}
- <input type="text" name="q" required="required" placeholder="{{ _('Search Mozilla Support') }}" />
- <button type="submit" title="{{ _('Search') }}">{{ _('Search') }}</button>
+ <input type="search" name="q" required="required" placeholder="{{ _('Search Mozilla Support') }}" class="searchbox" />
+ <button type="submit" title="{{ _('Search') }}" class="submit-button">{{ _('Search') }}</button>
</form>
{% endmacro %}

0 comments on commit 5de3c93

Please sign in to comment.
Something went wrong with that request. Please try again.