added classname and refactored styling

prconcepcion · prconcepcion · commit ce24dd45c27e · 2024-03-20T22:36:30.000+08:00
diff --git a/src/block/map/editor.scss b/src/block/map/editor.scss
@@ -38,18 +38,15 @@
 }
 
 .stk-control__location-control {
-	display: flex;
 
-	.stk-control__reset-button {
-		position: static;
-		margin-top: 2px;
-		margin-left: 4px;
-		margin-right: 2px;
+	.components-base-control {
+		width: 100%;
 	}
 
-	.components-text-control__input {
-		width: 224px;
+	.stk-control__reset-button {
+		top: 28px;
 	}
+
 }
 
 .stk-block-map__api-key-notice {
diff --git a/src/block/map/location-control.js b/src/block/map/location-control.js
@@ -64,6 +64,7 @@ const LocationControl = props => {
 
 	return (
 		<GutBaseControl
+			className="stk-control"
 			label={ __( 'Location', i18n ) }
 			help={ __( 'Type in a pair of latitude longitude coordinates. You can also type in the name of the location if your API Key has Geocoding API and Places API enabled.', i18n ) }
 		>

Original file line number	Diff line number	Diff line change
`@@ -38,18 +38,15 @@`
`38`	`38`	`}`
`39`	`39`
`40`	`40`	`.stk-control__location-control {`
`41`		`- display: flex;`
`42`	`41`
`43`		`- .stk-control__reset-button {`
`44`		`- position: static;`
`45`		`- margin-top: 2px;`
`46`		`- margin-left: 4px;`
`47`		`- margin-right: 2px;`
	`42`	`+ .components-base-control {`
	`43`	`+ width: 100%;`
`48`	`44`	`}`
`49`	`45`
`50`		`- .components-text-control__input {`
`51`		`- width: 224px;`
	`46`	`+ .stk-control__reset-button {`
	`47`	`+ top: 28px;`
`52`	`48`	`}`
	`49`	`+`
`53`	`50`	`}`
`54`	`51`
`55`	`52`	`.stk-block-map__api-key-notice {`
Original file line number	Diff line number	Diff line change
`@@ -64,6 +64,7 @@ const LocationControl = props => {`
`64`	`64`
`65`	`65`	`return (`
`66`	`66`	`<GutBaseControl`
	`67`	`+ className="stk-control"`
`67`	`68`	`label={ __( 'Location', i18n ) }`
`68`	`69`	`help={ __( 'Type in a pair of latitude longitude coordinates. You can also type in the name of the location if your API Key has Geocoding API and Places API enabled.', i18n ) }`
`69`	`70`	`>`