ON-41316 # Altered abn mobile view

oneblink · Jun 20, 2024 · 4c1dfc7 · 4c1dfc7
1 parent 68ebd65
commit 4c1dfc7
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 3 deletions.
diff --git a/src/form-elements/FormElementABN.tsx b/src/form-elements/FormElementABN.tsx
@@ -201,6 +201,8 @@ function FormElementABN({
  error) &&
  !isLookingUp
 
+ const hasCopyButton = !!value && !!element.readOnly
+ const hasLookupButton = element.isDataLookup || element.isElementLookup
  return (
  <div className="cypress-abn-element">
  <FormElementLabelContainer
@@ -209,7 +211,11 @@ function FormElementABN({
  element={element}
  required={element.required}
  >
- <div className="field has-addons">
+ <div
+ className={clsx('field has-addons', {
+ 'no-addons-mobile': !hasCopyButton && !hasLookupButton,
+ })}
+ >
  <div
  className={clsx('control is-expanded', {
  'is-loading': isLoading,
@@ -243,13 +249,13 @@ function FormElementABN({
  />
  </div>
  {value && (
- <div className="control ob-abn__record-control">
+ <div className="control ob-abn__record-control ob-abn__display-desktop">
  <a className="button is-static ob-abn__record-button">
  {abnService.displayBusinessNameFromABNRecord(value)}
  </a>
  </div>
  )}
- {!!element.readOnly && !!value && (
+ {hasCopyButton && (
  <div className="control">
  <CopyToClipboardButton
  className="button is-input-addon copy-button cypress-copy-to-clipboard-button"
@@ -264,6 +270,13 @@ function FormElementABN({
  lookupButtonConfig={element.lookupButton}
  />
  </div>
+ {value && (
+ <div className="control ob-abn__record-control ob-abn__display-mobile">
+ <a className="button is-static ob-abn__record-button">
+ {abnService.displayBusinessNameFromABNRecord(value)}
+ </a>
+ </div>
+ )}
  {isDisplayingValidationMessage && (
  <div role="alert" className="has-margin-top-8">
  <div className="has-text-danger ob-error__text cypress-validation-message">

diff --git a/src/styles.scss b/src/styles.scss
@@ -140,6 +140,7 @@ $section-padding-mobile: $section-padding-mobile-y $section-padding-mobile-x;
 @import './styles/westpac-payment.scss';
 @import './styles/api-nsw-liquor-licence.scss';
 @import './styles/arcgis-web-map.scss';
+@import './styles/abn.scss';
 //
 // Third Party
 //

diff --git a/src/styles/abn.scss b/src/styles/abn.scss
@@ -0,0 +1,48 @@
+.ob-abn__display-mobile {
+ display: none;
+ @media only screen and (max-width: $mobile) {
+ display: block;
+ }
+
+ .ob-abn__record-button {
+ border-top: 0px;
+ border-top-left-radius: 0px;
+ border-top-right-radius: 0px;
+ width: 100%;
+ }
+}
+
+.ob-abn__display-desktop {
+ @media only screen and (max-width: $mobile) {
+ display: none;
+ }
+}
+
+.ob-abn .field .control:first-child .input {
+ @media only screen and (max-width: $mobile) {
+ border-bottom-left-radius: 0px;
+ }
+}
+
+/** Styles copy or lookup button */
+.ob-abn .field .control:last-child .button {
+ @media only screen and (max-width: $mobile) {
+ border-bottom-right-radius: 0px;
+ }
+}
+
+/** Styles input field when there are no copy or lookup buttons */
+.ob-abn
+ .field.has-addons.no-addons-mobile
+ .control:first-child:not(:only-child)
+ .input {
+ @media only screen and (max-width: $mobile) {
+ border-top-right-radius: 4px;
+ }
+}
+
+.field.no-addons-mobile .control:not(:last-child) {
+ @media only screen and (max-width: $mobile) {
+ margin-right: 0px;
+ }
+}