Merge pull request #731 from tr1ten/fix#BB-604

Fix[BB-604]: making datepicker and link button responisve on small screen devices.
metabrainz · Jan 25, 2022 · 674c6bc · 674c6bc
2 parents 2358867 + 9becb5b
commit 674c6bc
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 3 deletions.
diff --git a/src/client/entity-editor/button-bar/button-bar.js b/src/client/entity-editor/button-bar/button-bar.js
@@ -68,6 +68,7 @@ function ButtonBar({
 				</Col>
 				<Col className="text-center" md={6}>
 					<IdentifierButton
+						className="btn wrap"
 						identifiersInvalid={identifiersInvalid}
 						numIdentifiers={numIdentifiers}
 						onClick={onIdentifierButtonClick}

diff --git a/src/client/entity-editor/common/new-date-field.js b/src/client/entity-editor/common/new-date-field.js
@@ -140,8 +140,9 @@ class DateField extends React.Component {
 					groupClassName={groupClassName}
 					label={labelElement}
 				>
-					<InputGroup style={{width: '18em'}}>
+					<InputGroup className="responsive-date-field">
 						<FormControl
+							className="year-field"
 							maxLength={isCommonEraDate ? 4 : 5}
 							placeholder="YYYY"
 							type="text"
@@ -151,19 +152,19 @@ class DateField extends React.Component {
 						/>
 						<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}
@@ -182,6 +183,10 @@ class DateField extends React.Component {
 								dateFormat="uuuuuu-MM-dd"
 								disabled={!isCommonEraDate}
 								dropdownMode="select"
+								popperModifiers={
+									{preventOverflow: {
+									  enabled: true
+									}}}
 								popperPlacement="top-end"
 								selected={isValid(selectedDate) ? selectedDate : null}
 								timeFormat="false"

diff --git a/src/client/stylesheets/style.less b/src/client/stylesheets/style.less
@@ -316,6 +316,17 @@ a.contact-text:visited {
 
 /* react-datepicker styling */
 .form-group {
+	.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%;
 	}