polishes info toggling

Gabe-Codes · Dec 6, 2020 · 2ccb9ee · 2ccb9ee
1 parent 5338ba1
commit 2ccb9ee
Show file tree

Hide file tree

Showing 5 changed files with 137 additions and 157 deletions.
diff --git a/.eslintcache b/.eslintcache
@@ -1 +1 @@
-[{"/Users/gabrielrussell/code/world-weather-app/src/reportWebVitals.js":"1","/Users/gabrielrussell/code/world-weather-app/src/App.js":"2","/Users/gabrielrussell/code/world-weather-app/src/index.js":"3","/Users/gabrielrussell/code/world-weather-app/src/timezones.js":"4","/Users/gabrielrussell/code/world-weather-app/src/components/InfoModal/InfoModal.js":"5"},{"size":362,"mtime":1606235130117,"results":"6","hashOfConfig":"7"},{"size":8921,"mtime":1607141469844,"results":"8","hashOfConfig":"7"},{"size":500,"mtime":1606235130116,"results":"9","hashOfConfig":"7"},{"size":650,"mtime":1606693764967,"results":"10","hashOfConfig":"7"},{"size":2424,"mtime":1607141595501,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"139zll3",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"19"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"19"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/gabrielrussell/code/world-weather-app/src/reportWebVitals.js",[],["24","25"],"/Users/gabrielrussell/code/world-weather-app/src/App.js",[],"/Users/gabrielrussell/code/world-weather-app/src/index.js",[],["26","27"],"/Users/gabrielrussell/code/world-weather-app/src/timezones.js",[],"/Users/gabrielrussell/code/world-weather-app/src/components/InfoModal/InfoModal.js",[],{"ruleId":"28","replacedBy":"29"},{"ruleId":"30","replacedBy":"31"},{"ruleId":"28","replacedBy":"32"},{"ruleId":"30","replacedBy":"33"},"no-native-reassign",["34"],"no-negated-in-lhs",["35"],["34"],["35"],"no-global-assign","no-unsafe-negation"]
+[{"/Users/gabrielrussell/code/world-weather-app/src/reportWebVitals.js":"1","/Users/gabrielrussell/code/world-weather-app/src/App.js":"2","/Users/gabrielrussell/code/world-weather-app/src/index.js":"3","/Users/gabrielrussell/code/world-weather-app/src/timezones.js":"4","/Users/gabrielrussell/code/world-weather-app/src/components/InfoModal/InfoModal.js":"5"},{"size":362,"mtime":1606235130117,"results":"6","hashOfConfig":"7"},{"size":11042,"mtime":1607229487225,"results":"8","hashOfConfig":"7"},{"size":500,"mtime":1606235130116,"results":"9","hashOfConfig":"7"},{"size":650,"mtime":1606693764967,"results":"10","hashOfConfig":"7"},{"size":2188,"mtime":1607228767370,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"139zll3",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"19"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"19"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/gabrielrussell/code/world-weather-app/src/reportWebVitals.js",[],["24","25"],"/Users/gabrielrussell/code/world-weather-app/src/App.js",[],"/Users/gabrielrussell/code/world-weather-app/src/index.js",[],["26","27"],"/Users/gabrielrussell/code/world-weather-app/src/timezones.js",[],"/Users/gabrielrussell/code/world-weather-app/src/components/InfoModal/InfoModal.js",[],{"ruleId":"28","replacedBy":"29"},{"ruleId":"30","replacedBy":"31"},{"ruleId":"28","replacedBy":"32"},{"ruleId":"30","replacedBy":"33"},"no-native-reassign",["34"],"no-negated-in-lhs",["35"],["34"],["35"],"no-global-assign","no-unsafe-negation"]
diff --git a/src/App.js b/src/App.js
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import TextTransition, { presets } from 'react-text-transition';
 import { timezones } from './timezones';
-import InfoModal from './components/InfoModal/InfoModal';
 
 // makes the openweather api easier to call
 const api = {
@@ -21,6 +20,7 @@ export default class App extends Component {
 			climate: '',
 			favoriteLoc: localStorage.getItem('favLoc'), // sets the saved cookie favorite location
 			favorited: false,
+			showInfo: true,
 		};
 	}
 
@@ -35,6 +35,62 @@ export default class App extends Component {
 		}
 	}
 
+	// on update adjusts temp and favorite info location to be responsive
+	componentDidUpdate() {
+		document.getElementById('info-met').style.left = `calc(50% - ${
+			this.tempSize() * 0.75
+		}px)`;
+
+		document.getElementById('info-fav').style.right = `calc(50% - ${
+			this.getTextWidth(
+				this.state.weather.name + '' + this.state.weather.sys.country + '     ',
+				'500 32pt montseratt'
+			) * 0.7
+		}px)`;
+	}
+
+	// changes the informative text and borders to show when the info icon is pressed
+	showInfo = (e) => {
+		this.state.showInfo === false
+			? this.setState({ showInfo: true })
+			: this.setState({ showInfo: false });
+
+		let infoFav = document.getElementById('info-fav');
+		let infoLoc = document.getElementById('info-loc');
+		let infoMet = document.getElementById('info-met');
+		let locIcon = document.getElementById('curr-loc');
+		let favIcon = document.getElementById('fav-loc');
+		let tempIcon = document.getElementById('temp');
+
+		if (this.state.showInfo === true) {
+			infoFav.style.display = 'block';
+			infoLoc.style.display = 'block';
+			infoMet.style.display = 'block';
+
+			locIcon.style.border = 'solid lightcoral 2px';
+			locIcon.style.padding = '0px';
+
+			favIcon.style.border = 'solid yellow 2px';
+			favIcon.style.padding = '0px';
+
+			tempIcon.style.border = 'solid lightgreen 2px';
+			tempIcon.style.padding = '13px 23px';
+		} else {
+			infoFav.style.display = 'none';
+			infoLoc.style.display = 'none';
+			infoMet.style.display = 'none';
+
+			locIcon.style.border = 'none';
+			locIcon.style.padding = '2px';
+
+			favIcon.style.border = 'none';
+			favIcon.style.padding = '2px';
+
+			tempIcon.style.border = 'none';
+			tempIcon.style.padding = '15px 25px';
+		}
+	};
+
 	// gets users coordinates then fetchs the location
 	getUserLocation = (evt) => {
 		navigator.geolocation.getCurrentPosition((location) => {
@@ -252,7 +308,11 @@ export default class App extends Component {
 						<input
 							type="text"
 							className="search-bar"
-							placeholder="Search..."
+							placeholder={
+								this.state.showInfo === true
+									? 'Search...'
+									: 'e.g. dallas or dallas, US'
+							}
 							onChange={(e) => this.setState({ query: e.target.value })}
 							value={this.state.query}
 							onKeyPress={this.search}
@@ -267,16 +327,31 @@ export default class App extends Component {
 					</div>
 					{typeof this.state.weather.main != 'undefined' ? (
 						<div>
-							<InfoModal
-								tempSize={this.tempSize}
-								getTextWidth={this.getTextWidth}
-								location={
-									this.state.weather.name +
-									'' +
-									this.state.weather.sys.country +
-									'     '
-								}
-							/>
+							<div>
+								<i
+									className="material-icons info-toggle"
+									onClick={this.showInfo}
+								>
+									info
+								</i>
+								<span id="info-fav" className="info info-fav">
+									set as
+									<br />
+									favorite
+								</span>
+								<span id="info-loc" className="info info-loc">
+									current
+									<br />
+									location
+								</span>
+								<span id="info-met" className="info info-met">
+									tap to
+									<br />
+									switch
+									<br />
+									metric
+								</span>
+							</div>
 							<div className="location-box">
 								<div className="location">
 									{this.state.weather.name},{' '}

diff --git a/src/components/InfoModal/InfoModal.css b/src/components/InfoModal/InfoModal.css
diff --git a/src/components/InfoModal/InfoModal.js b/src/components/InfoModal/InfoModal.js
diff --git a/src/index.css b/src/index.css
@@ -253,8 +253,57 @@ main {
 	display: inline;
 }
 
+.info {
+	position: absolute;
+	text-align: center;
+	display: none;
+}
+
+.info-toggle {
+	position: absolute;
+	top: 0px;
+	left: 0px;
+
+	color: #fff;
+	cursor: pointer;
+}
+
+.info-fav {
+	top: calc(50% - 253px);
+	right: calc(50% - 220px);
+	color: yellow;
+}
+
+.info-loc {
+	top: 7.5%;
+	right: 4%;
+	color: lightcoral;
+}
+
+.info-met {
+	top: calc(50% - 140px);
+	color: lightgreen;
+}
+
 @media (min-width: 650px) {
 	.search-box {
 		width: 594px;
 	}
+
+	.welcome-box {
+		margin: 0 auto;
+		width: 649px;
+	}
+
+	.info-toggle {
+		left: calc(50% - 323px);
+	}
+
+	.info-loc {
+		right: calc(50% - 300px);
+	}
+
+	.info-search {
+		left: calc(50% - 200px);
+	}
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		[{"/Users/gabrielrussell/code/world-weather-app/src/reportWebVitals.js":"1","/Users/gabrielrussell/code/world-weather-app/src/App.js":"2","/Users/gabrielrussell/code/world-weather-app/src/index.js":"3","/Users/gabrielrussell/code/world-weather-app/src/timezones.js":"4","/Users/gabrielrussell/code/world-weather-app/src/components/InfoModal/InfoModal.js":"5"},{"size":362,"mtime":1606235130117,"results":"6","hashOfConfig":"7"},{"size":8921,"mtime":1607141469844,"results":"8","hashOfConfig":"7"},{"size":500,"mtime":1606235130116,"results":"9","hashOfConfig":"7"},{"size":650,"mtime":1606693764967,"results":"10","hashOfConfig":"7"},{"size":2424,"mtime":1607141595501,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"139zll3",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"19"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"19"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/gabrielrussell/code/world-weather-app/src/reportWebVitals.js",[],["24","25"],"/Users/gabrielrussell/code/world-weather-app/src/App.js",[],"/Users/gabrielrussell/code/world-weather-app/src/index.js",[],["26","27"],"/Users/gabrielrussell/code/world-weather-app/src/timezones.js",[],"/Users/gabrielrussell/code/world-weather-app/src/components/InfoModal/InfoModal.js",[],{"ruleId":"28","replacedBy":"29"},{"ruleId":"30","replacedBy":"31"},{"ruleId":"28","replacedBy":"32"},{"ruleId":"30","replacedBy":"33"},"no-native-reassign",["34"],"no-negated-in-lhs",["35"],["34"],["35"],"no-global-assign","no-unsafe-negation"]
		[{"/Users/gabrielrussell/code/world-weather-app/src/reportWebVitals.js":"1","/Users/gabrielrussell/code/world-weather-app/src/App.js":"2","/Users/gabrielrussell/code/world-weather-app/src/index.js":"3","/Users/gabrielrussell/code/world-weather-app/src/timezones.js":"4","/Users/gabrielrussell/code/world-weather-app/src/components/InfoModal/InfoModal.js":"5"},{"size":362,"mtime":1606235130117,"results":"6","hashOfConfig":"7"},{"size":11042,"mtime":1607229487225,"results":"8","hashOfConfig":"7"},{"size":500,"mtime":1606235130116,"results":"9","hashOfConfig":"7"},{"size":650,"mtime":1606693764967,"results":"10","hashOfConfig":"7"},{"size":2188,"mtime":1607228767370,"results":"11","hashOfConfig":"7"},{"filePath":"12","messages":"13","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"14"},"139zll3",{"filePath":"15","messages":"16","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"17","messages":"18","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"19"},{"filePath":"20","messages":"21","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0,"usedDeprecatedRules":"19"},{"filePath":"22","messages":"23","errorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/Users/gabrielrussell/code/world-weather-app/src/reportWebVitals.js",[],["24","25"],"/Users/gabrielrussell/code/world-weather-app/src/App.js",[],"/Users/gabrielrussell/code/world-weather-app/src/index.js",[],["26","27"],"/Users/gabrielrussell/code/world-weather-app/src/timezones.js",[],"/Users/gabrielrussell/code/world-weather-app/src/components/InfoModal/InfoModal.js",[],{"ruleId":"28","replacedBy":"29"},{"ruleId":"30","replacedBy":"31"},{"ruleId":"28","replacedBy":"32"},{"ruleId":"30","replacedBy":"33"},"no-native-reassign",["34"],"no-negated-in-lhs",["35"],["34"],["35"],"no-global-assign","no-unsafe-negation"]