topaLE
/
ghostfolio
mirror of https://github.com/ghostfolio/ghostfolio
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

refactoring

pull/5966/head
David Requeno 3 weeks ago
parent
65cbbafa5f
commit
df2de50b8e
3 changed files with 235 additions and 241 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      libs/ui/src/lib/membership-card/membership-card.component.html
  2. 446
      libs/ui/src/lib/membership-card/membership-card.component.scss
  3. 12
      libs/ui/src/lib/membership-card/membership-card.component.stories.ts

18
libs/ui/src/lib/membership-card/membership-card.component.html
View File

@ -1,8 +1,5 @@
<div class="card-wrapper" [class.hover-3d-enabled]="hover3d"> <div class="card-wrapper position-relative" [class.hover-3d]="hover3d">
<div <div class="card-container" [ngClass]="{ premium: name === 'Premium' }">
class="card-container position-relative"
[ngClass]="{ premium: name === 'Premium' }"
>
<a <a
class="card-item d-flex flex-column justify-content-between p-4" class="card-item d-flex flex-column justify-content-between p-4"
[routerLink]="routerLinkPricing" [routerLink]="routerLinkPricing"
@ -50,13 +47,8 @@
</a> </a>
</div> </div>
@if (hover3d) { @if (hover3d) {
<div class="hover-zone"></div> @for (zone of [1, 2, 3, 4, 5, 6, 7, 8]; track zone) {
<div class="hover-zone"></div> <a class="hover-zone" [routerLink]="routerLinkPricing"></a>
<div class="hover-zone"></div> }
<div class="hover-zone"></div>
<div class="hover-zone"></div>
<div class="hover-zone"></div>
<div class="hover-zone"></div>
<div class="hover-zone"></div>
} }
</div> </div>

446
libs/ui/src/lib/membership-card/membership-card.component.scss
View File

@ -1,6 +1,8 @@
:host { :host {
--borderRadius: 1rem; --borderRadius: 1rem;
--borderWidth: 2px; --borderWidth: 2px;
--hover3dGradientOpacity: 0.15;
--hover3dGradientOpacityHover: 0.2;
display: block; display: block;
max-width: 25rem; max-width: 25rem;
@ -8,277 +10,279 @@
width: 100%; width: 100%;
.card-wrapper { .card-wrapper {
position: relative; &.hover-3d {
&.hover-3d-enabled {
perspective: 1000px; perspective: 1000px;
} }
}
.card-container {
border-radius: var(--borderRadius);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
&:after { .card-container {
animation: animatedborder 7s ease alternate infinite;
background: linear-gradient(60deg, #5073b8, #1098ad, #07b39b, #6fba82);
background-size: 300% 300%;
border-radius: var(--borderRadius); border-radius: var(--borderRadius);
content: ''; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
height: calc(100% + var(--borderWidth) * 2);
left: calc(-1 * var(--borderWidth)); &:after {
top: calc(-1 * var(--borderWidth)); animation: animatedborder 7s ease alternate infinite;
position: absolute; background: linear-gradient(60deg, #5073b8, #1098ad, #07b39b, #6fba82);
width: calc(100% + var(--borderWidth) * 2); background-size: 300% 300%;
z-index: -1; border-radius: var(--borderRadius);
content: '';
@keyframes animatedborder { height: calc(100% + var(--borderWidth) * 2);
0% { left: calc(-1 * var(--borderWidth));
background-position: 0% 50%; position: absolute;
} top: calc(-1 * var(--borderWidth));
50% { width: calc(100% + var(--borderWidth) * 2);
background-position: 100% 50%; z-index: -1;
}
100% { @keyframes animatedborder {
background-position: 0% 50%; 0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
} }
} }
}
.card-item {
aspect-ratio: 1.586;
background-color: #1d2124;
border-radius: calc(var(--borderRadius) - var(--borderWidth));
color: rgba(var(--light-primary-text));
line-height: 1.2;
button { .card-item {
aspect-ratio: 1.586;
background-color: #1d2124;
border-radius: calc(var(--borderRadius) - var(--borderWidth));
color: rgba(var(--light-primary-text)); color: rgba(var(--light-primary-text));
height: 1.5rem; line-height: 1.2;
}
button {
color: rgba(var(--light-primary-text));
height: 1.5rem;
}
.heading { .heading {
font-size: 13px; font-size: 13px;
}
.value {
font-size: 18px;
}
} }
.value { &:not(.premium) {
font-size: 18px; &:after {
opacity: 0;
}
.card-item {
background-color: #ffffff;
color: rgba(var(--dark-primary-text));
}
} }
} }
&:not(.premium) { &.hover-3d {
&:after { .card-container {
opacity: 0; position: relative;
} transform-style: preserve-3d;
transition:
box-shadow 300ms ease,
transform 300ms ease;
will-change: transform;
.card-item {
pointer-events: none;
}
.card-item { &::before {
background-color: #ffffff; background: radial-gradient(
color: rgba(var(--dark-primary-text)); circle at 50% 0%,
rgba(255, 255, 255, var(--hover3dGradientOpacity)),
transparent 60%
);
border-radius: var(--borderRadius);
content: '';
inset: 0;
mix-blend-mode: screen;
opacity: 0;
pointer-events: none;
position: absolute;
transition: opacity 300ms ease;
z-index: 1;
}
} }
}
}
.hover-3d-enabled { .hover-zone {
.card-container { height: 33.333%;
transition: pointer-events: auto;
transform 300ms ease,
box-shadow 300ms ease;
transform-style: preserve-3d;
will-change: transform;
position: relative;
&::before {
content: '';
position: absolute; position: absolute;
inset: 0; width: 33.333%;
background: radial-gradient( z-index: 2;
circle at 50% 0%,
rgba(255, 255, 255, 0.25),
transparent 60%
);
opacity: 0;
mix-blend-mode: screen;
transition: opacity 300ms ease;
pointer-events: none;
border-radius: var(--borderRadius);
z-index: 1;
}
}
.hover-zone { &:nth-child(3) {
position: absolute; left: 0;
width: 33.333%; top: 0;
height: 33.333%; }
pointer-events: auto;
z-index: 2;
&:nth-child(3) { &:nth-child(4) {
top: 0; left: 33.333%;
left: 0; top: 0;
} }
&:nth-child(4) { &:nth-child(5) {
top: 0; right: 0;
left: 33.333%; top: 0;
} }
&:nth-child(5) { &:nth-child(6) {
top: 0; left: 0;
right: 0; top: 33.333%;
} }
&:nth-child(6) { &:nth-child(7) {
top: 33.333%; right: 0;
left: 0; top: 33.333%;
} }
&:nth-child(7) { &:nth-child(8) {
top: 33.333%; bottom: 0;
right: 0; left: 0;
} }
&:nth-child(8) { &:nth-child(9) {
bottom: 0; bottom: 0;
left: 0; left: 33.333%;
} }
&:nth-child(9) { &:nth-child(10) {
bottom: 0; bottom: 0;
left: 33.333%; right: 0;
}
} }
&:nth-child(10) { &:has(.hover-zone:nth-child(3):hover) .card-container {
bottom: 0; box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
right: 0; transform: perspective(1000px) rotateX(5deg) rotateY(-5deg)
} translateY(-2px);
}
&:has(.hover-zone:nth-child(3):hover) .card-container { &::before {
transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) background: radial-gradient(
translateY(-2px); circle at 0% 0%,
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3); rgba(255, 255, 255, var(--hover3dGradientOpacityHover)),
transparent 60%
&::before { );
opacity: 1; opacity: 1;
background: radial-gradient( }
circle at 0% 0%,
rgba(255, 255, 255, 0.35),
transparent 60%
);
} }
}
&:has(.hover-zone:nth-child(4):hover) .card-container { &:has(.hover-zone:nth-child(4):hover) .card-container {
transform: perspective(1000px) rotateX(5deg) rotateY(0deg) box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
translateY(-2px); transform: perspective(1000px) rotateX(5deg) rotateY(0deg)
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3); translateY(-2px);
&::before { &::before {
opacity: 1; background: radial-gradient(
background: radial-gradient( circle at 50% 0%,
circle at 50% 0%, rgba(255, 255, 255, var(--hover3dGradientOpacityHover)),
rgba(255, 255, 255, 0.35), transparent 60%
transparent 60% );
); opacity: 1;
}
} }
}
&:has(.hover-zone:nth-child(5):hover) .card-container { &:has(.hover-zone:nth-child(5):hover) .card-container {
transform: perspective(1000px) rotateX(5deg) rotateY(5deg) box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
translateY(-2px); transform: perspective(1000px) rotateX(5deg) rotateY(5deg)
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3); translateY(-2px);
&::before { &::before {
opacity: 1; background: radial-gradient(
background: radial-gradient( circle at 100% 0%,
circle at 100% 0%, rgba(255, 255, 255, var(--hover3dGradientOpacityHover)),
rgba(255, 255, 255, 0.35), transparent 60%
transparent 60% );
); opacity: 1;
}
} }
}
&:has(.hover-zone:nth-child(6):hover) .card-container { &:has(.hover-zone:nth-child(6):hover) .card-container {
transform: perspective(1000px) rotateX(0deg) rotateY(-5deg) box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
translateY(-2px); transform: perspective(1000px) rotateX(0deg) rotateY(-5deg)
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3); translateY(-2px);
&::before { &::before {
opacity: 1; background: radial-gradient(
background: radial-gradient( circle at 0% 50%,
circle at 0% 50%, rgba(255, 255, 255, var(--hover3dGradientOpacityHover)),
rgba(255, 255, 255, 0.35), transparent 60%
transparent 60% );
); opacity: 1;
}
} }
}
&:has(.hover-zone:nth-child(7):hover) .card-container { &:has(.hover-zone:nth-child(7):hover) .card-container {
transform: perspective(1000px) rotateX(0deg) rotateY(5deg) box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
translateY(-2px); transform: perspective(1000px) rotateX(0deg) rotateY(5deg)
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3); translateY(-2px);
&::before { &::before {
opacity: 1; background: radial-gradient(
background: radial-gradient( circle at 100% 50%,
circle at 100% 50%, rgba(255, 255, 255, var(--hover3dGradientOpacityHover)),
rgba(255, 255, 255, 0.35), transparent 60%
transparent 60% );
); opacity: 1;
}
} }
}
&:has(.hover-zone:nth-child(8):hover) .card-container { &:has(.hover-zone:nth-child(8):hover) .card-container {
transform: perspective(1000px) rotateX(-5deg) rotateY(-5deg) box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
translateY(-2px); transform: perspective(1000px) rotateX(-5deg) rotateY(-5deg)
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3); translateY(-2px);
&::before { &::before {
opacity: 1; background: radial-gradient(
background: radial-gradient( circle at 0% 100%,
circle at 0% 100%, rgba(255, 255, 255, var(--hover3dGradientOpacityHover)),
rgba(255, 255, 255, 0.35), transparent 60%
transparent 60% );
); opacity: 1;
}
} }
}
&:has(.hover-zone:nth-child(9):hover) .card-container { &:has(.hover-zone:nth-child(9):hover) .card-container {
transform: perspective(1000px) rotateX(-5deg) rotateY(0deg) box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
translateY(-2px); transform: perspective(1000px) rotateX(-5deg) rotateY(0deg)
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3); translateY(-2px);
&::before { &::before {
opacity: 1; background: radial-gradient(
background: radial-gradient( circle at 50% 100%,
circle at 50% 100%, rgba(255, 255, 255, var(--hover3dGradientOpacityHover)),
rgba(255, 255, 255, 0.35), transparent 60%
transparent 60% );
); opacity: 1;
}
} }
}
&:has(.hover-zone:nth-child(10):hover) .card-container { &:has(.hover-zone:nth-child(10):hover) .card-container {
transform: perspective(1000px) rotateX(-5deg) rotateY(5deg) box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
translateY(-2px); transform: perspective(1000px) rotateX(-5deg) rotateY(5deg)
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3); translateY(-2px);
&::before { &::before {
opacity: 1; background: radial-gradient(
background: radial-gradient( circle at 100% 100%,
circle at 100% 100%, rgba(255, 255, 255, var(--hover3dGradientOpacityHover)),
rgba(255, 255, 255, 0.35), transparent 60%
transparent 60% );
); opacity: 1;
}
} }
} }
} }
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.hover-3d-enabled { .card-wrapper.hover-3d {
.card-container { .card-container {
transition: none !important;
transform: none !important; transform: none !important;
transition: none !important;
&::before { &::before {
transition: none !important; transition: none !important;

12
libs/ui/src/lib/membership-card/membership-card.component.stories.ts
View File

@ -26,12 +26,12 @@ export default {
}) })
], ],
argTypes: { argTypes: {
hover3d: {
control: { type: 'boolean' }
},
name: { name: {
control: { type: 'select' }, control: { type: 'select' },
options: ['Basic', 'Premium'] options: ['Basic', 'Premium']
},
hover3d: {
control: { type: 'boolean' }
} }
} }
} as Meta<GfMembershipCardComponent>; } as Meta<GfMembershipCardComponent>;
@ -40,8 +40,7 @@ type Story = StoryObj<GfMembershipCardComponent>;
export const Basic: Story = { export const Basic: Story = {
args: { args: {
name: 'Basic', name: 'Basic'
hover3d: false
} }
}; };
@ -49,7 +48,6 @@ export const Premium: Story = {
args: { args: {
expiresAt: addYears(new Date(), 1).toLocaleDateString(), expiresAt: addYears(new Date(), 1).toLocaleDateString(),
hasPermissionToCreateApiKey: true, hasPermissionToCreateApiKey: true,
name: 'Premium', name: 'Premium'
hover3d: false
} }
}; };

Write Preview
Loading…
Cancel
Save