Skip to content

HS-1390414-CSS-updates #1227

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wjames111 wants to merge 10 commits into
base: master
Choose a base branch
from
Open

HS-1390414-CSS-updates #1227

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8f6be13
scope css for branded-checkout
wjames111 Jul 15, 2025
ec6ab02
Updates to just use 1 fade animation.
wjames111 Jul 15, 2025
6faf93e
Updates class names to use prefix give- for loading elements.
wjames111 Jul 15, 2025
f4585d3
Attempt to fix layout shift.
wjames111 Jul 17, 2025
0d4a6c4
Move loading.scss to be imported from branded-checkout.scss and style…
wjames111 Jul 18, 2025
0fe7687
Revert changes for layout shifts.
wjames111 Jul 18, 2025
772ab07
fixup! scope css for branded-checkout
wjames111 Jul 18, 2025
1f382e8
Fix for layout shifts.
wjames111 Jul 21, 2025
1a9e9c5
Reverts branded-checkout-step-1 loading placement.
wjames111 Jul 21, 2025
1ad1ec8
Adds comment for loading layout shift css.
wjames111 Jul 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/app/cart/cart.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
<div class="col-md-12">

<!-- Cart Summary -->
<div class="panel loading-overlay-parent">
<div class="panel give-loading-overlay-parent">
<div class="panel-body">
<div class="row">
<div class="col-sm-6">
Expand Down
2 changes: 1 addition & 1 deletion src/app/checkout/cart-summary/cart-summary.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="panel loading-overlay-parent">
<div class="panel give-loading-overlay-parent">
<div class="panel-body">
<h3 id="cart-summary-header" class="panel-name" translate>Cart Summary</h3>
<table class="table giftsum-table giftsum-table-cart" aria-labelledby="cart-summary-header">
Expand Down
2 changes: 1 addition & 1 deletion src/app/checkout/step-2/step-2.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
</span>
</p>
</div>
<div class="loading-overlay-parent">
<div class="give-loading-overlay-parent">
<loading type="overlay" ng-if="$ctrl.loadingPaymentMethods || $ctrl.paymentFormState === 'loading' || $ctrl.paymentFormState === 'encrypting'"></loading>
<div ng-if="!$ctrl.existingPaymentMethods">
<payment-method-form
Expand Down
2 changes: 1 addition & 1 deletion src/app/checkout/step-3/step-3.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="loading-overlay-parent">
<div class="give-loading-overlay-parent">
<checkout-error-messages
needinfo-errors="$ctrl.needinfoErrors"
submission-error="$ctrl.submissionError"
Expand Down
2 changes: 1 addition & 1 deletion src/app/designationEditor/designationEditor.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="container loading-overlay-parent">
<div class="container give-loading-overlay-parent">
<div class="alert alert-danger mt-" role="alert" ng-if="$ctrl.loadingContentError">
<p translate>
There was an error loading your page.
Expand Down
8 changes: 4 additions & 4 deletions src/app/profile/profile.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ <h2 class="mb_x" translate>Your Profile</h2>

<!--Donor Details-->
<h4 id="name-heading" class="panel-title border-bottom-small visible" translate>Your Name</h4>
<div class="loading-overlay-parent">
<div class="give-loading-overlay-parent">
<loading type="overlay" ng-if="$ctrl.donorDetailsLoading"></loading>
<ul class="list-unstyled people-fields">
<li>
Expand Down Expand Up @@ -142,7 +142,7 @@ <h4 id="name-heading" class="panel-title border-bottom-small visible" translate
<!--Email Address-->
<h4 class="panel-title border-bottom-small visible mt" translate>Email Addresses</h4>

<div class="loading-overlay-parent">
<div class="give-loading-overlay-parent">
<loading type="overlay" ng-if="$ctrl.emailLoading"></loading>
<form name="$ctrl.donorEmailForm" novalidate>
<div class="form-group is-required" ng-class="{'has-error': ($ctrl.donorEmailForm.donorsEmail | showErrors)}">
Expand Down Expand Up @@ -188,7 +188,7 @@ <h4 class="panel-title border-bottom-small visible mt" translate>Email Addresse
<!--Phone Numbers-->
<h4 class="panel-title border-bottom-small visible mt" translate>Phone Numbers</h4>

<div class="loading-overlay-parent">
<div class="give-loading-overlay-parent">
<loading type="overlay" ng-if="$ctrl.phonesLoading"></loading>
<div ng-if="!$ctrl.phonesLoading">
<div ng-repeat="phone in $ctrl.phoneNumbers" ng-class="{'has-error': ($ctrl.phoneNumberForms[$index].phoneNumber | showErrors)}" class="form-group is-required phone-row" >
Expand Down Expand Up @@ -250,7 +250,7 @@ <h4 class="panel-title border-bottom-small visible" translate>Your Mailing Addr
</div>
</div>

<form name="$ctrl.mailingAddressForm" class="loading-overlay-parent" novalidate>
<form name="$ctrl.mailingAddressForm" class="give-loading-overlay-parent" novalidate>
<loading type="overlay" ng-if="$ctrl.mailingAddressLoading"></loading>
<address-form ng-if="$ctrl.mailingAddress" address="$ctrl.mailingAddress.address" parent-form="$ctrl.mailingAddressForm" disabled="$ctrl.donorDetails.staff"></address-form>
</form>
Expand Down
2 changes: 1 addition & 1 deletion src/app/profile/receipts/receipts.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<span>{{$ctrl.retrievingError}}</span>
</div>
<div class="panel panel-margin-bottom">
<div class="panel-body loading-overlay-parent">
<div class="panel-body give-loading-overlay-parent">
<div class="row">
<div class="col-md-12">
<h3>Receipts</h3>
Expand Down
2 changes: 1 addition & 1 deletion src/app/profile/yourGiving/stopStartRecurringGifts/stopStartRecurringGifts.modal.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div ng-switch="$ctrl.state" class="loading-overlay-parent">
<div ng-switch="$ctrl.state" class="give-loading-overlay-parent">
<stop-start-step-0 ng-switch-when="step-0"
gift-action="$ctrl.giftAction"
change-state="$ctrl.changeState(state)"
Expand Down
2 changes: 1 addition & 1 deletion src/app/searchResults/searchResults.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ <h1 ng-if="!$ctrl.searchParams.type || $ctrl.searchParams.type === 'people'">
<div class="container margin-top-30">
<div class="row">
<div class="col-md-12">
<div class="panel loading-overlay-parent">
<div class="panel give-loading-overlay-parent">
<div class="panel-body">
<div class="row">
<div class="col-sm-12 col-md-3">
Expand Down
2 changes: 1 addition & 1 deletion src/app/thankYou/summary/thankYouSummary.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="panel loading-overlay-parent">
<div class="panel give-loading-overlay-parent">
<div class="panel-body">
<h2 class="panel-name" translate>
{{'FINAL_THANK_YOU_HEADING'}}
Expand Down
31 changes: 31 additions & 0 deletions src/assets/scss/branded-checkout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,9 @@ branded-checkout{
@import 'account_management';
@import 'mobile';
@import 'directives/creditCardCvv';
@import 'components/loading';

display: block;
background-color: $body-bg;
color: $text-color;
font-family: $data-font;
Expand All @@ -22,4 +24,33 @@ branded-checkout{
.row {
display: block;
}

// Prevents layout shifts when loading
&:has(loading) {
position: relative;
display: block;
overflow: hidden;
height: 200px;
}

& *:has(loading) {
position: static !important;
}

& loading {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: $body-bg;
}

& product-config-form loading {
z-index: 99;
}

& contact-info:has(loading) {
display: none;
}
}
3 changes: 1 addition & 2 deletions src/assets/scss/components/_components.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,4 @@
@import "./oktaSigninWidget";
@import "./signOut";
@import "./resetPassword";


@import "./loading";
62 changes: 30 additions & 32 deletions src/common/components/loading/loading.scss → src/assets/scss/components/_loading.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,93 +3,91 @@ loading {
display: block;
text-align: center;

.loading-bar {
.give-loading-bar {
Copy link

@clonge clonge Jul 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is much less likely to conflict, however, a give prefix on a give page is still pretty generic. .bc, .cbc or .branded-checkout is much better and less likely to conflict.

Copy link

@clonge clonge Jul 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think, however:

branded-checkout loading1 {

is fine, with the assumption that other components are properly scoping their css as well.
Except for the animation name since it can't be scoped.

Copy link
Contributor Author

@wjames111 wjames111 Jul 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So I didn't use bc or cbc because this stylesheet is being used by both branded checkout and standard checkout. Also the reason why it isn't scoped. I thought about creating a separate stylesheet for this but that would mean creating an entirely separate component, unlike the other stylesheets this one is imported directly into the component. Not sure what the best workaround is.

Copy link

@clonge clonge Jul 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't know the specifics of the project(s), but for branded checkout would not including the loader css directly but adding it as @include rule similar to @import '../cru-scss/cru'; work? Seems like a simple solution that will scope the css just like the rest of it.

That would leave only the animation name out of scope and I think give-fade is unique enough to not likely collide.

Copy link
Contributor Author

@wjames111 wjames111 Jul 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That could work, might be a good solution. Worried there's a reason certain components import the stylesheet directly rather then just import them. I'll try doing that and do some testing.

display: inline-block;
width: 7px;
border-radius: 10%;
transition: background .2s;
transition: background-color 0.2s;
vertical-align: middle;
}

.loading1 {
.give-loading1 {
height: 26px;
animation: fade1 1s infinite;
animation: give-fade 1.2s infinite;
animation-delay: 0.0s;
}

.loading2 {
.give-loading2 {
height: 32px;
animation: fade2 1s infinite;
animation: give-fade 1.2s infinite;
animation-delay: 0.3s;
}

.loading3 {
.give-loading3 {
height: 32px;
animation: fade3 1s infinite;
animation: give-fade 1.2s infinite;
animation-delay: 0.6s;
}

.loading4 {
.give-loading4 {
height: 26px;
animation: fade4 1s infinite;
animation: give-fade 1.2s infinite;
animation-delay: 0.9s;
}

@keyframes fade1 {
0% {
background: #43B3C9;
@keyframes give-fade {
0%, 100% {
background: $colorGrayscale-background;
}
}

@keyframes fade2 {
33% {
background: #F9B625;
25% {
background: $colorCru-blueBright;
}
}

@keyframes fade3 {
66% {
background: #DE8123;
50% {
background: $colorCru-gold;
}
}

@keyframes fade4 {
90% {
background: #007398;
75% {
background: $colorCru-orange;
}
}

.loading-centered {
.give-loading-centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

.loading-overlay {
.give-loading-overlay {
z-index: 2;
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: space-around;
background-color: rgb(255 255 255 / 70%);
background-color: rgba(255, 255, 255, 0.7);
}

.loading-fixed:first-child {
.give-loading-fixed:first-child {
position: fixed;
z-index: 2;
top: 50%;
left: 50%;
}

/* stylelint-disable-next-line selector-class-pattern */
.loadingWrap{
.give-loadingWrap{
display: inline-block
}
}

.loading-overlay-parent{
.give-loading-overlay-parent{
position: relative;
}

.icon-first > div {
.give-icon-first > div {
display: flex;
width: 100%;
flex-direction: row-reverse;
Expand Down
2 changes: 1 addition & 1 deletion src/common/components/contactInfo/contactInfo.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
</p>
</div>

<div ng-if="$ctrl.donorDetails" class="loading-overlay-parent">
<div ng-if="$ctrl.donorDetails" class="give-loading-overlay-parent">
<loading type="overlay" ng-if="$ctrl.loadingDonorDetails">
<translate>{{'CHECKING_FOR_EXISTING'}}</translate>
</loading>
Expand Down
2 changes: 0 additions & 2 deletions src/common/components/loading/loading.component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import angular from 'angular'

import './loading.scss'

import template from './loading.tpl.html'

const componentName = 'loading'
Expand Down
18 changes: 9 additions & 9 deletions src/common/components/loading/loading.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,18 @@
<div ng-class="{
'loading-centered': $ctrl.type === 'centered' || $ctrl.type === 'overlay' || $ctrl.type === 'fixed',
'loading-overlay': $ctrl.type === 'overlay' || $ctrl.type === 'fixed',
'loading-fixed': $ctrl.type === 'fixed',
'icon-first': $ctrl.iconFirst
'give-loading-centered': $ctrl.type === 'centered' || $ctrl.type === 'overlay' || $ctrl.type === 'fixed',
'give-loading-overlay': $ctrl.type === 'overlay' || $ctrl.type === 'fixed',
'give-loading-fixed': $ctrl.type === 'fixed',
'give-icon-first': $ctrl.iconFirst
}">
<div>
<span ng-class="$ctrl.inline ? 'mr-' : 'center-block'">
<ng-transclude></ng-transclude>
</span>
<span class="loading-wrap">
<span class="loading-bar loading1"></span>
<span class="loading-bar loading2"></span>
<span class="loading-bar loading3"></span>
<span class="loading-bar loading4"></span>
<span class="give-loadingWrap">
<span class="give-loading-bar give-loading1"></span>
<span class="give-loading-bar give-loading2"></span>
<span class="give-loading-bar give-loading3"></span>
<span class="give-loading-bar give-loading4"></span>
</span>
</div>
</div>
2 changes: 1 addition & 1 deletion src/common/services/session/sessionModal.tpl.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="loading-overlay-parent">
<div class="give-loading-overlay-parent">
<div ng-switch="$ctrl.state">
<register-account-modal ng-switch-when="register-account"
modal-title="$ctrl.modalTitle"
Expand Down