improve code readability

metabrainz · Dec 22, 2021 · 9becb5b · 9becb5b
1 parent 4850496
commit 9becb5b
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 5 deletions.
diff --git a/src/client/entity-editor/common/new-date-field.js b/src/client/entity-editor/common/new-date-field.js
@@ -140,31 +140,31 @@ class DateField extends React.Component {
 					groupClassName={groupClassName}
 					label={labelElement}
 				>
-					<InputGroup className="res-dob">
+					<InputGroup className="responsive-date-field">
 						<FormControl
+							className="year-field"
 							maxLength={isCommonEraDate ? 4 : 5}
 							placeholder="YYYY"
-							style={{width: '4em'}}
 							type="text"
 							value={this.state.year}
 							onBlur={this.handleYearInputBlur}
 							onChange={this.handleYearChange}
 						/>
 						<InputGroup.Addon style={{padding: '0 0.5em'}}>-</InputGroup.Addon>
 						<FormControl
+							className="other-date-field"
 							maxLength="2"
 							placeholder="MM"
-							style={{width: '3.5em'}}
 							type="text"
 							value={this.state.month}
 							onBlur={this.handleMonthInputBlur}
 							onChange={this.handleMonthChange}
 						/>
 						<InputGroup.Addon style={{padding: '0 0.5em'}}>-</InputGroup.Addon>
 						<FormControl
+							className="other-date-field"
 							maxLength="2"
 							placeholder="DD"
-							style={{width: '3.5em'}}
 							type="text"
 							value={this.state.day}
 							onBlur={this.handleDayInputBlur}

diff --git a/src/client/stylesheets/style.less b/src/client/stylesheets/style.less
@@ -339,10 +339,16 @@ a.contact-text:visited {
 
 /* react-datepicker styling */
 .form-group {
-	.res-dob{
+	.responsive-date-field{
 		width: 100%;
 		display: flex;
 		flex-wrap: wrap;
+		.year-field{
+			width:4em;
+		}
+		.other-date-field{
+			width: 3.5em;
+		}
 	}
 	.react-datepicker-wrapper, .react-datepicker__input-container {
 		width: 100%;