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; let error;
if (this.state.error === true) { if (this.state.error === true) {
error = <p error = <p
className="f9 red2 pt1"> className="f9 red2 pt1">Please try again.
Incorrect latitude/longitude formatting. Please try again. <br/>
(eg. "29.558107, -95.089023")
</p> </p>
} }
if (location.protocol === "https:") { if (location.protocol === "https:") {
@ -117,16 +115,16 @@ export default class WeatherTile extends Component {
. .
</p> </p>
{error} {error}
<div className="flex"> <div className="absolute" style={{left: 8, bottom: 8}}>
<form className="flex absolute" style={{ bottom: 0, left: 8 }}> <form className="flex" style={{marginBlockEnd: 0 }}>
<input <input
id="gps" 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" type="text"
placeholder="29.558107, -95.089023" placeholder="29.558107, -95.089023"
onKeyDown={this.keyPress.bind(this)}></input> onKeyDown={this.keyPress.bind(this)}></input>
<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" type="submit"
onClick={() => this.manualLocationSubmit()} onClick={() => this.manualLocationSubmit()}
value="->"></input> value="->"></input>