Merge branch 'develop'

impress-org · Jun 16, 2022 · 4b2c38b · 4b2c38b
2 parents f23d0fb + b68aab7
commit 4b2c38b
Show file tree

Hide file tree

Showing 225 changed files with 5,702 additions and 6,947 deletions.
diff --git a/.distignore b/.distignore
@@ -9,6 +9,7 @@
 /tests
 /node_modules
 /assets/src
+/assets/dist/**/*.map
 /vendor/bin
 /vendor/composer/installers
 /vendor/**/*.phar
@@ -32,7 +33,6 @@ jsconfig.json
 globals.d.ts
 tsconfig.json
 
-cypress.json
 sample-data/wordpress.sql
 sample-data/sample-data.numbers
 bower.json

diff --git a/.gitignore b/.gitignore
@@ -2,11 +2,6 @@
 /tmp
 /tests/bin/tmp
 
-# Cypress
-/cypress
-/tests/e2e/videos
-/tests/e2e/screenshots
-
 # Numerous always-ignore extensions
 .diff
 .err

diff --git a/assets/src/css/admin/settings.scss b/assets/src/css/admin/settings.scss
@@ -281,6 +281,7 @@ div.give-field-description {
 	font-size: 14px;
 }
 
+
 //--------------------------------------------------------------
 // Payment Gateways
 //--------------------------------------------------------------

diff --git a/assets/src/css/frontend/_card.scss b/assets/src/css/frontend/_card.scss
@@ -9,9 +9,9 @@
 
 .give-card {
 	background-color: white;
-	border:  1px solid $give-card-border;
-	box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.04 );
-	color: inherit;
+	border-radius: 8px;
+    box-shadow: 0px 0px 8px rgba(112, 111, 111, 0.25);
+    color: inherit;
 	display: flex;
 	flex-direction: column;
 	width: 100%;

diff --git a/assets/src/css/frontend/_components.donor.scss b/assets/src/css/frontend/_components.donor.scss
@@ -5,17 +5,34 @@
 /**
  * Single donor with user image, details, and review text.
  *
- * 1. Header wraps the user photo and details. It displays above review text.
- * 2. Image is the image of the donor.
- * 3. Details include the donor's name, amount given, and date of the donation.
+ * 1. Card Container wraps the Image, Name, Content & Details. It displays above the tribute message.
+ * 2. Content includes the donor comment
+ * 4. Details include the forms title & amount given.
  */
 
+@use "sass:string";
+
+$MIN_REM_SIZE: 16px;
+
+/**
+ * Safely use rem values in distributed code for unpredictable environments (e.g. for use inside a WordPress plugin).
+ *
+ * This does not support IE 11 and a few other outdated browser.
+ * A Sass mixin could be used to provide a fallback value for this.
+ *
+ * @param {Number} $value
+ * @return {String} e.g. for $value: 3 and $MIN_REM_SIZE: 16px => max(3rem, 48px)
+ */
+@function safe-rem($value) {
+    @return string.unquote("max(#{$value}rem, #{$value * $MIN_REM_SIZE})");
+}
+
 /*--------------------------------------------------------------
 # Spacing
 --------------------------------------------------------------*/
 
 $donor-space: 20px;
-$donor-color: #333;
+$donor-color: #00160A;
 $donor-space-eighth: $donor-space * 0.125;
 $donor-space-quarter: $donor-space * 0.25;
 $donor-space-fifth: $donor-space * 0.2;
@@ -27,117 +44,177 @@ $donor-space-and-three-quarters: $donor-space * 1.75;
 $donor-space-double: $donor-space * 2;
 $donor-space-triple: $donor-space * 3;
 
+
 .give-donor {
-	border: 1px solid $give-card-border;
-	background: #fff;
-	color: $donor-color;
-	font-size: 1em;
-	margin-bottom: $donor-space;
-	padding: $donor-space;
-	position: relative;
-	transition: all 0.2s ease-out;
-	width: 100%;
-
-	&__header {
-
-		/* [1] */
-		align-items: center;
-		display: flex;
-	}
-
-	&__image {
-
-		/* [2] */
-		display: flex;
-		align-items: center;
-		justify-content: center;
-
-		background: #fff;
-		margin-right: $donor-space-half;
-		overflow: hidden;
-		border-radius: 50%;
-		flex-basis: 40%;
-
-		position: relative;
-
-		img {
-			object-fit: cover;
-			width: 100%;
-		}
-
-		.give-donor__name_initial {
-			position: absolute;
-		}
-
-		&[data-anonymous-donation='0'] img[src*='anonymous-user.svg'],
-		&[data-anonymous-donation='1'] .give-donor__name_initial {
-			visibility: hidden;
-		}
-
-		&[data-anonymous-donation='0'][data-has-valid-gravatar='0'] {
-			border: 1px solid $give-card-border;
-		}
-	}
-
-	&__details {
-
-		/* [3] */
-		flex-grow: 1;
-		overflow: hidden;
-		flex-basis: 60%;
-	}
-
-	&__name {
-		font-size: 1em !important;
-		font-weight: bold !important;
-		color: $donor-color !important;
-		line-height: 1.3 !important;
-		margin: 0 !important;
-		padding: 0 !important;
-	}
-
-	&__timestamp {
-		color: $donor-color !important;
-		display: block;
-		font-size: 75% !important;
-		line-height: 1.3 !important;
-	}
-
-	&__content {
-		margin-top: $donor-space-half;
-		width: 100%;
-
-		p {
-			color: $donor-color;
-			font-size: 1em !important;
-			font-size: 1em !important;
-			line-height: 1.5 !important;
-			margin: 0 0 $donor-space !important;
-			padding: 0 !important;
-			width: 100%;
-		}
-
-		&:first-child {
-			margin-top: 0 !important;
-		}
-
-		& :last-child {
-			margin-bottom: 0 !important;
-		}
-	}
-
-	&__read-more {
-		cursor: pointer;
-		white-space: nowrap;
-	}
-
-	&__excerpt + &__comment {
-		display: none;
-	}
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    width:100%;
+    max-height: 100%;
+    padding: 18px 0;
+    margin-bottom: $donor-space;
+    border: 1px solid $give-card-border;
+    background: #fff;
+    color: $donor-color;
+    transition: all 0.2s ease-out;
+
+    &-container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: 0 5%;
+
+        &__image {
+            align-self: center;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            background: #fff;
+            overflow: hidden;
+            border-radius: 50%;
+            border: 1px solid $give-card-border;
+            margin-bottom: 12px;
+
+            img {
+                object-fit: cover;
+                object-position: center;
+                width: 100%;
+            }
+
+            &__name_initial {
+                position: absolute;
+            }
+
+            &[data-anonymous-donation='0'] img[src*='anonymous-user.svg'],
+            &[data-anonymous-donation='1'] .give-donor-header__name_initial {
+                visibility: hidden;
+            }
+
+            &[data-anonymous-donation='0'][data-has-valid-gravatar='0'] {
+                border: 1px solid $give-card-border;
+            }
+        }
+
+        &__name {
+            width: 100%;
+            margin: 0 0 10px 0 !important;
+            font-size: safe-rem(1.5);
+            font-weight: 600;
+            text-align: center;
+            line-height: 20px;
+        }
+    }
+
+    /* [1] */
+    &-wrapper {
+        flex: 1;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    &-content {
+        flex: 1;
+        width: 100%;
+        margin-bottom: 20px;
+        line-height: 20px;
+        padding-left: 16px;
+        border-left: 2px solid #219653;
+        font-weight: 400;
+        letter-spacing: 0;
+
+        p {
+            width: 100%;
+            color: $donor-color;
+            font-size: safe-rem(.875);
+            font-style: italic;
+            line-height: 20px;
+            margin: 0 !important;
+        }
+
+        &__excerpt &__read-more {
+            cursor: pointer;
+            white-space: nowrap;
+        }
+
+        &__excerpt + &__comment {
+            display: none;
+        }
+    }
+
+
+    /* [2] */
+
+    &-details {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        &__wrapper {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+
+            span:first-child {
+                color: $donor-color;
+                font-size: safe-rem(1) !important;;
+                font-weight: 500 !important;;
+                letter-spacing: 0;
+            }
+
+            span:last-child {
+                color: $donor-color;
+                font-size: safe-rem(0.8);
+                font-weight: 400;
+                letter-spacing: 0;
+                text-align: left;
+            }
+        }
+
+        &__total {
+            color: #219653;
+            font-size: safe-rem(1.25);
+            font-weight: 700;
+            line-height: 24px;
+            letter-spacing: 0;
+            text-align: right;
+            overflow-wrap: normal;
+        }
+    }
+
+    /* [3] */
+
+    &-tribute{
+        display: flex;
+        align-items: center;
+        width: 100%;
+        min-height: 32px;
+        margin-top: 32px;
+
+        span {
+            svg {
+                display: block;
+                height: 22px;
+                width: 22px;
+                margin: 0 15px 0 32px;
+            }
+        }
+
+        &__message {
+            font-size: safe-rem(0.75);
+            color: $donor-color;
+            text-align: center;
+
+            span:last-child {
+                font-weight: 600;
+            }
+        }
+    }
 }
 
 .give-donor-wall-modal {
-	p:last-child {
-		margin-bottom: 0;
-	}
+    p:last-child {
+        margin-bottom: 0;
+    }
 }