Feature/improve membership card (#2517)
* Improve style * Add animated border
This commit is contained in:
Thomas Kaul
GitHub
parent
750c627613
commit
6a19eab425
@ -2,14 +2,15 @@
|
||||
<h1 class="d-none d-sm-block h3 mb-3 text-center" i18n>Membership</h1>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="align-items-center d-flex flex-column">
|
||||
<gf-membership-card
|
||||
class="mb-5 mx-auto"
|
||||
[expiresAt]="(user?.subscription?.expiresAt | date: defaultDateFormat) ?? '∞'"
|
||||
[expiresAt]="user?.subscription?.expiresAt | date: defaultDateFormat"
|
||||
[name]="user?.subscription?.type"
|
||||
></gf-membership-card>
|
||||
<div class="d-flex">
|
||||
<div class="mx-auto">
|
||||
<div *ngIf="user?.subscription?.type === 'Basic'">
|
||||
<div
|
||||
*ngIf="user?.subscription?.type === 'Basic'"
|
||||
class="d-flex flex-column mt-5"
|
||||
>
|
||||
<ng-container
|
||||
*ngIf="hasPermissionForSubscription && hasPermissionToUpdateUserSettings"
|
||||
>
|
||||
@ -21,7 +22,7 @@
|
||||
>Renew</ng-container
|
||||
>
|
||||
</button>
|
||||
<div *ngIf="price" class="mt-1">
|
||||
<div *ngIf="price" class="mt-1 text-center">
|
||||
<ng-container *ngIf="coupon"
|
||||
><del class="text-muted"
|
||||
>{{ baseCurrency }} {{ price }}</del
|
||||
@ -33,9 +34,10 @@
|
||||
> <span i18n>per year</span>
|
||||
</div>
|
||||
</ng-container>
|
||||
<div class="align-items-center d-flex justfiy-content-center mt-4">
|
||||
<a
|
||||
*ngIf="!user?.subscription?.expiresAt"
|
||||
class="mr-2 my-2"
|
||||
class="mx-1"
|
||||
mat-stroked-button
|
||||
[href]="trySubscriptionMail"
|
||||
><span i18n>Try Premium</span>
|
||||
@ -46,7 +48,7 @@
|
||||
></a>
|
||||
<a
|
||||
*ngIf="hasPermissionToUpdateUserSettings"
|
||||
class="mr-2 my-2"
|
||||
class="mx-1"
|
||||
i18n
|
||||
mat-stroked-button
|
||||
[routerLink]=""
|
||||
|
||||
@ -1,8 +1,4 @@
|
||||
<span class="align-items-center d-flex"
|
||||
><span
|
||||
class="d-inline-block logo"
|
||||
[ngClass]="{ 'mr-1': showLabel }"
|
||||
[ngStyle]="{ 'background-color': color }"
|
||||
></span>
|
||||
><span class="d-inline-block logo" [ngClass]="{ 'mr-1': showLabel }"></span>
|
||||
<span *ngIf="showLabel" class="label">{{ label ?? 'Ghostfolio' }}</span></span
|
||||
>
|
||||
|
||||
@ -4,18 +4,12 @@
|
||||
}
|
||||
|
||||
.logo {
|
||||
background-color: rgba(var(--dark-primary-text));
|
||||
background-color: currentColor;
|
||||
margin-top: -2px;
|
||||
mask: url('/assets/ghost.svg') no-repeat center;
|
||||
}
|
||||
}
|
||||
|
||||
:host-context(.is-dark-theme) {
|
||||
.logo {
|
||||
background-color: rgba(var(--light-primary-text));
|
||||
}
|
||||
}
|
||||
|
||||
:host-context(.large) {
|
||||
.label {
|
||||
font-size: 3rem;
|
||||
|
||||
@ -13,7 +13,6 @@ import {
|
||||
})
|
||||
export class LogoComponent {
|
||||
@HostBinding('class') @Input() size: 'large' | 'medium' = 'medium';
|
||||
@Input() color: string;
|
||||
@Input() label: string;
|
||||
@Input() showLabel = true;
|
||||
|
||||
|
||||
@ -1,25 +1,29 @@
|
||||
<div
|
||||
class="card-container position-relative"
|
||||
[ngClass]="{ premium: name === 'Premium' }"
|
||||
>
|
||||
<a
|
||||
class="card-item d-flex flex-column justify-content-between p-4"
|
||||
[ngClass]="{ premium: name === 'Premium' }"
|
||||
[routerLink]="routerLinkPricing"
|
||||
>
|
||||
<div class="d-flex justify-content-end">
|
||||
<gf-logo
|
||||
color="rgba(255, 255, 255, 1)"
|
||||
size="large"
|
||||
[ngClass]="{ 'text-muted': name === 'Basic' }"
|
||||
[showLabel]="false"
|
||||
></gf-logo>
|
||||
/>
|
||||
</div>
|
||||
<div class="d-flex justify-content-between">
|
||||
<div>
|
||||
<div class="card-item-heading mb-1 text-muted" i18n>Membership</div>
|
||||
<div class="card-item-name line-height-1 text-truncate">{{ name }}</div>
|
||||
<div class="heading text-muted" i18n>Membership</div>
|
||||
<div class="text-truncate value">{{ name }}</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="card-item-heading mb-1 text-muted" i18n>Valid until</div>
|
||||
<div class="card-item-name line-height-1 text-truncate">
|
||||
<div *ngIf="expiresAt">
|
||||
<div class="heading text-muted" i18n>Valid until</div>
|
||||
<div class="text-truncate value">
|
||||
{{ expiresAt }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -1,24 +1,66 @@
|
||||
:host {
|
||||
--borderRadius: 1rem;
|
||||
--borderWidth: 2px;
|
||||
|
||||
display: block;
|
||||
max-width: 25rem;
|
||||
padding-top: calc(1 * var(--borderWidth));
|
||||
width: 100%;
|
||||
|
||||
.card-container {
|
||||
border-radius: var(--borderRadius);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
|
||||
|
||||
&:after {
|
||||
animation: animatedborder 7s ease alternate infinite;
|
||||
background: linear-gradient(60deg, #5073b8, #1098ad, #07b39b, #6fba82);
|
||||
background-size: 300% 300%;
|
||||
border-radius: var(--borderRadius);
|
||||
content: '';
|
||||
height: calc(100% + var(--borderWidth) * 2);
|
||||
left: calc(-1 * var(--borderWidth));
|
||||
top: calc(-1 * var(--borderWidth));
|
||||
position: absolute;
|
||||
width: calc(100% + var(--borderWidth) * 2);
|
||||
z-index: -1;
|
||||
|
||||
@keyframes animatedborder {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-item {
|
||||
aspect-ratio: 1.586;
|
||||
background-color: #343a40 !important;
|
||||
border-radius: 1rem;
|
||||
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
|
||||
background-color: #1d2124;
|
||||
border-radius: calc(var(--borderRadius) - var(--borderWidth));
|
||||
color: rgba(var(--light-primary-text));
|
||||
|
||||
&.premium {
|
||||
background-color: #1d2124 !important;
|
||||
}
|
||||
|
||||
.card-item-heading {
|
||||
.heading {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.card-item-name {
|
||||
color: rgba(var(--light-primary-text));
|
||||
.value {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.premium) {
|
||||
&:after {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.card-item {
|
||||
background-color: #ffffff;
|
||||
color: rgba(var(--dark-primary-text));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user