weather: concise error, input layout placement

This lines up the input with the "Set location" button,
and makes the latitude/longitude setting error
more concise, in order to fit within the tile without overflow.

This commit also removes some Tachyons-specific CSS classes.
This commit is contained in:
Matilde Park 2020-02-11 13:05:52 -05:00
parent 2c436655a9
commit 5c06d1b464
2 changed files with 6 additions and 8 deletions

File diff suppressed because one or more lines are too long

View File

@ -85,9 +85,7 @@ export default class WeatherTile extends Component {
let error;
if (this.state.error === true) {
error = <p
className="f9 red2 pt1">
Incorrect latitude/longitude formatting. Please try again. <br/>
(eg. "29.558107, -95.089023")
className="f9 red2 pt1">Please try again.
</p>
}
if (location.protocol === "https:") {
@ -117,16 +115,16 @@ export default class WeatherTile extends Component {
.
</p>
{error}
<div className="flex">
<form className="flex absolute" style={{ bottom: 0, left: 8 }}>
<div className="absolute" style={{left: 8, bottom: 8}}>
<form className="flex" style={{marginBlockEnd: 0 }}>
<input
id="gps"
className="w-100 black pa1 bg-transparent outline-0 bn bb-ns b--black f9"
className="w-100 black bg-transparent bn f9"
type="text"
placeholder="29.558107, -95.089023"
onKeyDown={this.keyPress.bind(this)}></input>
<input
className="bg-transparent black outliner-0 bn pointer f9 flex-shrink-0"
className="bg-transparent black bn pointer f9 flex-shrink-0"
type="submit"
onClick={() => this.manualLocationSubmit()}
value="->"></input>