scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-27 09:35:56 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Fix search button display

Browse source 
Update search form submit button from an input[type=submit] to a button.  React 15 omits the value prop if it's blank, so the `<input type="submit" value="">` was rendered as `<input type="submit">`. This caused the input to display the default value of "Submit".  The button element is more appropriate for this behavior and doesn't have the missing value issue.
This commit is contained in:
Ray Schamp 2016-05-26 15:59:55 -04:00
parent c966f8a0ba
commit 2a01ebee84
2 changed files with 22 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/navigation/www/navigation.jsx
View file

@ -9,6 +9,7 @@ var sessionActions = require('../../../redux/session.js');
var Api = require('../../../mixins/api.jsx');
var Avatar = require('../../avatar/avatar.jsx');
var Button = require('../../forms/button.jsx');
var Dropdown = require('../../dropdown/dropdown.jsx');
var Input = require('../../forms/input.jsx');
var log = require('../../../lib/log.js');
@ -215,7 +216,7 @@ var Navigation = React.createClass({
<li className="search">
<form action="/search/google_results" method="get">
<Input type="submit" value="" />
<Button type="submit" className="btn-search" />
<Input type="text"
aria-label={formatMessage({id: 'general.search'})}
placeholder={formatMessage({id: 'general.search'})}

34
src/components/navigation/www/navigation.scss
View file

@ -39,7 +39,8 @@
margin: 0;
}
input {
input,
button {
display: inline-block;
margin-top: 5px;
outline: none;
@ -47,19 +48,6 @@
background-color: $active-gray;
height: 14px;
&[type=submit] {
position: absolute;
background-color: transparent;
background-image: url("/images/nav-search-glass.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 14px 14px;
width: 40px;
height: 40px;
}
&[type=text] {
transition: .15s ease background-color;
padding: 0;
@ -85,6 +73,24 @@
}
}
}
.btn-search {
position: absolute;
box-shadow: none;
background-color: transparent;
background-image: url("/images/nav-search-glass.png");
background-repeat: no-repeat;
background-position: center center;
background-size: 14px 14px;
width: 40px;
height: 40px;
&:hover {
box-shadow: none;
}
}
}
}