Skip to content

Commit

Permalink
SCSS fixes and optimization, adding SCSS for custom amount selector
Browse files Browse the repository at this point in the history
  • Loading branch information
RyGuy committed Nov 27, 2024
1 parent d4d5cb7 commit f37d766
Show file tree
Hide file tree
Showing 2 changed files with 141 additions and 76 deletions.
63 changes: 32 additions & 31 deletions src/app/productConfig/productConfigForm/productConfigForm.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,53 +68,54 @@ <h4 class="panel-title border-bottom-small" translate>
<h4 class="panel-title border-bottom-small" translate>
{{'GIFT_AMOUNT'}}
</h4>
<div class="panel-body pt0">
<div class="panel-body p0">
<div ng-if="$ctrl.useSuggestedAmounts">
<div class="button-group">
<button
type="button"
<div
role="button"
class="suggested-button"
ng-click="$ctrl.changeAmount(suggested.amount)"
ng-class=" {'active': !$ctrl.customInputActive && $ctrl.itemConfig.AMOUNT === suggested.amount}"
ng-repeat="suggested in $ctrl.suggestedAmounts | orderBy:'order'">
<span class="amount-box">
<div class="amount-box">
{{$ctrl.suggestedAmount(suggested.amount)}}
</span>
<span class="label-text">
</div>
<div class="label-text">
{{suggested.label}}
</span>
</button>
</div>
<div class="radio radio-custom-amount form-inline" ng-class="{'has-error': ($ctrl.itemConfigForm.amount | showErrors)}">
<div class="form-group">
</div>
</div>
<div class="custom-amount-button" ng-class="{'has-error': ($ctrl.itemConfigForm.amount | showErrors)}">
<div class="input-prepend">
<span class="input-prepend-text">$</span>
</div>
<label>
<input name="suggestedAmount"
type="radio"
ng-checked="$ctrl.customInputActive" />
<input class="form-control form-control-subtle"
name="amount"
type="text"
step="1"
tabindex="-1"
ng-model="$ctrl.customAmount"
ng-change="$ctrl.changeCustomAmount($ctrl.customAmount)"
ng-focus="$ctrl.customInputActive = true;"
ng-required="$ctrl.customInputActive"
placeholder="{{'OTHER_PLACEHOLDER' | translate}}" />
<input
name="suggestedAmount"
type="radio"
ng-checked="$ctrl.customInputActive" />
<input
name="amount"
type="text"
step="1"
tabindex="-1"
ng-model="$ctrl.customAmount"
ng-change="$ctrl.changeCustomAmount($ctrl.customAmount)"
ng-focus="$ctrl.customInputActive = true;"
ng-required="$ctrl.customInputActive"
placeholder="{{'OTHER_PLACEHOLDER' | translate}}" />
</label>
<div role="alert" ng-messages="$ctrl.itemConfigForm.amount.$error"
ng-if="($ctrl.itemConfigForm.amount | showErrors)">
</div>
<div
role="alert"
ng-messages="$ctrl.itemConfigForm.amount.$error"
ng-if="($ctrl.itemConfigForm.amount | showErrors)">
<div class="help-block" ng-message="pattern" translate>{{'VALID_DOLLAR_AMOUNT_ERROR'}}</div>
<div class="help-block" ng-message="required" translate>{{'AMOUNT_EMPTY_ERROR'}}</div>
<div class="help-block" ng-message="minimum" translate translate-values="{currencyLimit: (1 | currency)}">{{'AMOUNT_MIN_ERROR'}}</div>
<div class="help-block" ng-message="maximum" translate translate-values="{currencyLimit: (10000000 | currency)}">
{{'AMOUNT_MAX_ERROR'}}
</div>
<div class="help-block" ng-message="maximum" translate translate-values="{currencyLimit: (10000000 | currency)}">{{'AMOUNT_MAX_ERROR'}}</div>
</div>
</div>
</div>
</div>

<div data-toggle="buttons"
ng-class="{'has-error': ($ctrl.itemConfigForm.amount | showErrors)}"
ng-if="!$ctrl.useSuggestedAmounts">
Expand Down
154 changes: 109 additions & 45 deletions src/assets/scss/_give.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -484,76 +484,140 @@ hr.horizontal-divider {
}
}

/* Product Config Form - Suggested Amount Buttons Begin */
/* Product Config Form Amounts Begin */

/* Shared styles begin */
.button-common {
font-size: 16px;
font-weight: 500;
border: none;
border-radius: 2px;
background-color: $colorGrayscale-pebble;
color: $colorCru-gray;
cursor: pointer;
}

.flex-center {
display: flex;
justify-content: center;
align-items: center;
align-self: stretch;
}
/* Shared styles end */

.button-group {
display: flex;
flex-direction: column;
gap: 10px;

.help-block {
padding: 10px;
color: #715927;
background-color: #f4d89d;
border: 2px solid #f9b625;
border-radius: 2px;
}
}

.suggested-button {
@extend .button-common;
display: flex;
justify-content: flex-start;
gap: 10px;
align-items: center;
padding: 0;
font-size: 16px;
font-weight: 500;
background-color: $colorGrayscale-pebble;
border: none;
border-radius: 5px;
overflow: hidden;
color: $colorCru-gray;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
height: 60px;
}

.suggested-button.active {
background-color: #dddddd;
cursor: default;
height: 70px;

.amount-box {
background-color: #3a3a3a;
color: #fff;
font-weight: normal;
@extend .flex-center;
min-width: 50px;
aspect-ratio: 1 / 1;
background-color: #ddd;
color: inherit;
border-radius: 2px 0 0 2px;
transition: all 0.3s ease;
}

.label-text {
font-weight: normal;
flex: 1;
color: inherit;
}

&.active {
cursor: default;
.amount-box {
background-color: #3a3a3a;
color: #fff;
font-weight: normal;
min-width: 55px;
}
}
}

.suggested-button:hover {
background-color: #f5f5f5;
&:hover {
background-color: #f5f5f5;
}
}

.amount-box {
.custom-amount-button {
@extend .button-common;
display: flex;
align-items: center;
justify-content: center;
padding: 0 20px;
min-width: 100px;
height: 100%;
background-color: $colorGrayscale-rock;
font-size: 16px;
font-weight: normal;
color: #333;
flex-direction: row;
height: 50px;
border: 1px solid #ddd;

.input-prepend {
@extend .flex-center;
min-width: 50px;
aspect-ratio: 1 / 1;
background-color: #ddd;
cursor: default;
}

label {
all: unset;
width: 100%;
height: 100%;

input[type="radio"] {
position: absolute;
opacity: 0;
}

input[type="text"] {
width: 100%;
height: 100%;
padding: 0 7px;
border: none;
border-radius: 2px;
transition: all 0.3s ease;

&::placeholder {
color: $colorCru-gray;
}

&:focus {
border: 1px solid #3eb1c8;
outline: none;
}
}
}
}

.label-text {
flex-grow: 1;
padding: 0 15px;
text-align: left;
font-size: 16px;
font-weight: normal;
color: inherit;
line-height: 1.5;
/* Check for custom amount input */
.custom-amount-button:has(.ng-not-empty) {
border: 1px solid #3a3a3a;
font-weight: 700;
color: #3a3a3a;
}

/* Product Config Form - Suggested Amount Buttons End */
.custom-amount-button:has(.ng-not-empty) .input-prepend {
// @extend .button-common;
@extend .input-prepend;
min-width: 55px;
aspect-ratio: 1 / 1;
background-color: #3a3a3a;
color: #fff;
transition: all 0.3s ease;
}
/* Product Config Form Amounts End */

.btn-xs,
.btn-sm {
Expand Down

0 comments on commit f37d766

Please sign in to comment.