makes information text responsive

.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":8703,"mtime":1606988957224,"results":"8","hashOfConfig":"7"},{"size":500,"mtime":1606235130116,"results":"9","hashOfConfig":"7"},{"size":650,"mtime":1606693764967,"results":"10","hashOfConfig":"7"},{"size":2052,"mtime":1606891289002,"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},{"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":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"]

src/App.js

@@ -227,7 +227,7 @@ export default class App extends Component {
 	};
 
 	// calls to check the temp text width based on the current metric
-	sizeCheck = () => {
+	tempSize = () => {
 		let impTemp = String(Math.round(this.state.weather.main.temp)) + '°F';
 
 		let metTemp =
@@ -248,7 +248,6 @@ export default class App extends Component {
 				}
 			>
 				<main>
-					<InfoModal />
 					<div id="search" className="search-box">
 						<input
 							type="text"
@@ -268,6 +267,16 @@ 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 className="location-box">
 								<div className="location">
 									{this.state.weather.name},{' '}
@@ -287,7 +296,7 @@ export default class App extends Component {
 									id="temp"
 									className="temp"
 									onClick={this.setUnit}
-									style={{ width: this.sizeCheck() + 'px' }}
+									style={{ width: this.tempSize() + 'px' }}
 								>
 									<TextTransition
 										text={this.switchUnits()}

src/components/InfoModal/InfoModal.css

@@ -14,27 +14,38 @@
 }
 
 .info-fav {
-	top: 17vh;
-	right: 14vw;
-
+	top: calc(50% - 253px);
+	right: calc(50% - 220px);
 	color: yellow;
 }
 
 .info-loc {
-	top: 8vh;
-	right: 5vw;
-
-	color: lightgreen;
+	top: calc(50% - 325px);
+	right: calc(50% - 230px);
+	color: lightcoral;
 }
 
 .info-met {
-	top: 30vh;
-	left: 8vw;
-
-	color: lightcoral;
+	top: calc(50% - 140px);
+	/* left: calc(50% - 220px); */
+	color: lightgreen;
 }
 
 .info-search {
-	top: 2.5vh;
-	left: 26vw;
+	top: calc(50% - 363px);
+	left: calc(50% - 125px);
+}
+
+@media (min-width: 650px) {
+	.info-toggle {
+		left: calc(50% - 323px);
+	}
+
+	.info-loc {
+		right: calc(50% - 300px);
+	}
+
+	.info-search {
+		left: calc(50% - 200px);
+	}
 }

src/components/InfoModal/InfoModal.js

@@ -6,6 +6,16 @@ export default class InfoModal extends Component {
 		showInfo: true,
 	};
 
+	componentDidUpdate() {
+		document.getElementById('info-met').style.left = `calc(50% - ${
+			this.props.tempSize() * 0.75
+		}px)`;
+
+		document.getElementById('info-fav').style.right = `calc(50% - ${
+			this.props.getTextWidth(this.props.location, '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
@@ -26,13 +36,13 @@ export default class InfoModal extends Component {
 			infoMet.style.display = 'block';
 			infoSearch.style.display = 'block';
 
-			locIcon.style.border = 'solid lightgreen 2px';
+			locIcon.style.border = 'solid lightcoral 2px';
 			locIcon.style.padding = '0px';
 
 			favIcon.style.border = 'solid yellow 2px';
 			favIcon.style.padding = '0px';
 
-			tempIcon.style.border = 'solid lightcoral 2px';
+			tempIcon.style.border = 'solid lightgreen 2px';
 			tempIcon.style.padding = '13px 23px';
 		} else {
 			infoFav.style.display = 'none';

src/index.css

@@ -252,3 +252,9 @@ main {
 .attribution p {
 	display: inline;
 }
+
+@media (min-width: 650px) {
+	.search-box {
+		width: 594px;
+	}
+}