Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-17 07:50:12 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(landing): fix IE/Firefox bugs, switcher, mailto

Browse source
This commit is contained in:
u.ahmetvaliyev 2019-01-23 15:40:42 +03:00
parent be65f95645
commit f1cc84e5ea
4 changed files with 72 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

17
docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.html
View file

@ -6,7 +6,7 @@
<ul class="features"> <ul class="features">
<li class="features__item"> <li class="features__item">
<h3 class="features__title title">Convenient</h3> <h3 class="features__title title">Convenient</h3>
<p class="features__description">Complete pack of well known Angular based NGX Admin template, integrated with Backend Solution. Finally, you can get fully backend integrated solution out of the box. Flexibility of Ngx Admin, the variety of Nebular features and convenience of integrated Backend in one pack. <p class="features__description">Complete pack of well known Angular based ngx-admin template, integrated with Backend Solution. Finally, you can get fully backend integrated solution out of the box. Flexibility of Ngx Admin, the variety of Nebular features and convenience of integrated Backend in one pack.
</p> </p>
</li> </li>
<li class="features__item"> <li class="features__item">
@ -25,13 +25,12 @@
<div class="package-switcher"> <div class="package-switcher">
<div [(ngModel)]="licenseType" ngbRadioGroup <div [(ngModel)]="licenseType" ngbRadioGroup
#selectedLicense="ngModel"
class="package-switcher__btn-group btn-group btn-group-toggle btn-outline-toggle-group btn-group-full-width btn-toggle-radio-group"> class="package-switcher__btn-group btn-group btn-group-toggle btn-outline-toggle-group btn-group-full-width btn-toggle-radio-group">
<label ngbButtonLabel class="package-switcher__btn btn btn-outline-secondary"> <label ngbButtonLabel class="package-switcher__btn btn btn-outline-secondary">
<input ngbButton type="radio" value="personal" name="1"> Personal <input ngbButton type="radio" value="Personal"> Personal
</label> </label>
<label ngbButtonLabel class="package-switcher__btn btn btn-outline-secondary"> <label ngbButtonLabel class="package-switcher__btn btn btn-outline-secondary">
<input ngbButton type="radio" value="commercial" name="2"> Commercial <input ngbButton type="radio" value="Commercial"> Commercial
</label> </label>
</div> </div>
</div> </div>
@ -50,7 +49,7 @@
<span class="package-card__price package-card__price--old">${{ licenseType === 'commercial' ? '2000' : '200' }}</span> <span class="package-card__price package-card__price--old">${{ licenseType === 'commercial' ? '2000' : '200' }}</span>
<span class="package-card__price">${{ licenseType === 'commercial' ? '1500' : '150' }}</span> <span class="package-card__price">${{ licenseType === 'commercial' ? '1500' : '150' }}</span>
</div> </div>
<h4 class="package-card__title">{{ firstBundleName }} + NGX Admin</h4> <h4 class="package-card__title">{{ firstBundleName }}</h4>
<p class="package-card__description"> <p class="package-card__description">
E-commerce Dashboard integrated with REST data services based on .NET Framework, Web API and Entity Framework 6.2 E-commerce Dashboard integrated with REST data services based on .NET Framework, Web API and Entity Framework 6.2
</p> </p>
@ -94,7 +93,7 @@
<span class="package-card__price package-card__price--old">${{ licenseType === 'commercial' ? '2000' : '200' }}</span> <span class="package-card__price package-card__price--old">${{ licenseType === 'commercial' ? '2000' : '200' }}</span>
<span class="package-card__price">${{ licenseType === 'commercial' ? '1500' : '150' }}</span> <span class="package-card__price">${{ licenseType === 'commercial' ? '1500' : '150' }}</span>
</div> </div>
<h4 class="package-card__title">{{ secondBundleName }} + NGX Admin</h4> <h4 class="package-card__title">{{ secondBundleName }}</h4>
<p class="package-card__description"> <p class="package-card__description">
IoT Dashboard integrated with REST data services based on .NET Framework, Web API and Entity Framework 6.2 IoT Dashboard integrated with REST data services based on .NET Framework, Web API and Entity Framework 6.2
</p> </p>
@ -138,7 +137,7 @@
<span class="package-card__price package-card__price--old">${{ licenseType === 'commercial' ? '1800' : '180' }}</span> <span class="package-card__price package-card__price--old">${{ licenseType === 'commercial' ? '1800' : '180' }}</span>
<span class="package-card__price">${{ licenseType === 'commercial' ? '1400' : '140' }}</span> <span class="package-card__price">${{ licenseType === 'commercial' ? '1400' : '140' }}</span>
</div> </div>
<h4 class="package-card__title">{{ thirdBundleName }} + NGX Admin</h4> <h4 class="package-card__title">{{ thirdBundleName }}</h4>
<p class="package-card__description"> <p class="package-card__description">
E-commerce Dashboard integrated with REST data services based on .NET Core, Web API and Entity Framework 2.2 E-commerce Dashboard integrated with REST data services based on .NET Core, Web API and Entity Framework 2.2
</p> </p>
@ -182,7 +181,7 @@
<span class="package-card__price package-card__price--old">${{ licenseType === 'commercial' ? '1800' : '180' }}</span> <span class="package-card__price package-card__price--old">${{ licenseType === 'commercial' ? '1800' : '180' }}</span>
<span class="package-card__price">${{ licenseType === 'commercial' ? '1400' : '140' }}</span> <span class="package-card__price">${{ licenseType === 'commercial' ? '1400' : '140' }}</span>
</div> </div>
<h4 class="package-card__title">{{ fourthBundleName }} + NGX Admin</h4> <h4 class="package-card__title">{{ fourthBundleName }}</h4>
<p class="package-card__description"> <p class="package-card__description">
IoT Dashboard integrated with REST data services based on .NET Core, Web API and Entity Framework 2.2 IoT Dashboard integrated with REST data services based on .NET Core, Web API and Entity Framework 2.2
</p> </p>
@ -218,7 +217,7 @@
<ng-template #bundleFeaturesList> <ng-template #bundleFeaturesList>
<ul class="included"> <ul class="included">
<li class="included__item"> <li class="included__item">
<p class="included__text">NGX Admin admin template with 100+ UI components integrated with Backend</p> <p class="included__text">ngx-admin template with 100+ UI components integrated with Backend</p>
</li> </li>
<li class="included__item"> <li class="included__item">
<p class="included__text">.NET backend Services and Repository layers with data access</p> <p class="included__text">.NET backend Services and Repository layers with data access</p>

45
docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.scss
View file

@ -28,14 +28,17 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
padding: 0; padding: 0 11px;
margin-top: 5rem; margin-top: 5rem;
margin-left: -11px; margin-left: -11px;
margin-right: -11px; margin-right: -11px;
width: 100%;
width: calc(100% + 22px);
&__item { &__item {
flex: 0 0 25%; flex: 0 0 25%;
width: 25%; width: 25%;
max-width: 25%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: center; text-align: center;
@ -68,6 +71,15 @@
&__btn-group { &__btn-group {
box-shadow: 0 8px 20px 0 rgba(218, 224, 235, 0.5); box-shadow: 0 8px 20px 0 rgba(218, 224, 235, 0.5);
border-radius: 1.5rem;
&:not(.btn-divided-group) > .package-switcher__btn:not(.dropdown-toggle):first-child {
border-top-left-radius: 1.5rem;
border-bottom-left-radius: 1.5rem;
}
&:not(.btn-divided-group) > .package-switcher__btn:not(.dropdown-toggle):last-child {
border-top-right-radius: 1.5rem;
border-bottom-right-radius: 1.5rem;
}
} }
&__btn { &__btn {
@ -76,6 +88,7 @@
border-color: #e6e8eb; border-color: #e6e8eb;
text-transform: none; text-transform: none;
cursor: pointer; cursor: pointer;
&:active { &:active {
color: #ffffff; color: #ffffff;
} }
@ -94,15 +107,19 @@
margin-left: -11px; margin-left: -11px;
margin-right: -11px; margin-right: -11px;
margin-bottom: 4rem; margin-bottom: 4rem;
width: 100%;
width: calc(100% + 22px);
&__item { &__item {
flex: 0 0 25%; flex: 0 0 25%;
width: 25%; width: 25%;
max-width: 25%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
list-style: none; list-style: none;
padding-left: 11px; padding-left: 11px;
padding-right: 11px; padding-right: 11px;
margin-bottom: 22px;
} }
} }
@ -187,10 +204,10 @@
background-position: center center; background-position: center center;
background-size: auto 100%; background-size: auto 100%;
&--dot-net { &--dot-net {
background-image: url('/assets/img/bundle-dot-net.png'); background-image: url('assets/img/bundle-dot-net.png');
} }
&--dot-net-core { &--dot-net-core {
background-image: url('/assets/img/bundle-dot-net-core.png'); background-image: url('assets/img/bundle-dot-net-core.png');
} }
} }
&__price-wrapper { &__price-wrapper {
@ -284,26 +301,31 @@
} }
@include media-breakpoint-down(xl) { @include media-breakpoint-down(xl) {
.section-container {
.features {
width: 100%;
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
}
.features {
padding-left: 11px;
padding-right: 11px;
&__item { &__item {
flex-basis: 50%; flex-basis: 50%;
width: 50%; width: 50%;
max-width: 50%;
} }
} }
.packages { .packages {
width: 100%; padding-left: 11px;
padding-left: 1rem; padding-right: 11px;
padding-right: 1rem;
&__item { &__item {
flex-basis: 50%; flex-basis: 50%;
width: 50%; width: 50%;
max-width: 50%;
margin-bottom: 1.625rem;
} }
} }
} }
@ -313,6 +335,7 @@
.packages__item { .packages__item {
flex-basis: 100%; flex-basis: 100%;
width: 100%; width: 100%;
max-width: 100%;
} }
} }
@ -321,6 +344,10 @@
.features__item { .features__item {
flex-basis: 100%; flex-basis: 100%;
width: 100%; width: 100%;
max-width: 100%;
}
.package-switcher__btn {
min-width: 8rem;
} }
} }
} }

57
docs/app/pages/home/backend-bundles-section/backend-bundles-section.component.ts
View file

@ -14,40 +14,28 @@ import { Component} from '@angular/core';
export class BackendBundlesSectionComponent { export class BackendBundlesSectionComponent {
licenseType = 'commercial'; licenseType = 'Personal';
firstBundleName = 'E-commerce: .NET'; firstBundleName = '.NET + ngx-admin E-commerce';
secondBundleName = 'IoT: .NET'; secondBundleName = '.NET + ngx-admin IoT';
thirdBundleName = 'E-commerce: .NET Core'; thirdBundleName = '.NET Core + ngx-admin E-commerce';
fourthBundleName = 'IoT: .NET Core'; fourthBundleName = '.NET Core + ngx-admin IoT';
firstBundleMail: string = 'mailto:support@akveo.com' + get firstBundleMail(): string {
'?subject=.NET E-commerce Bundle' + return this.getMailToText('.NET E-commerce');
'&body=Dear Akveo, %0D%0A%0D%0A' + }
'I would like to purchase .NET E-commerce Bundle. ' +
'Please give me details how I can proceed with that. %0D%0A%0D%0A' +
'Thanks and regards';
secondBundleMail: string = 'mailto:support@akveo.com' + get secondBundleMail(): string {
'?subject=.NET IoT Bundle' + return this.getMailToText('.NET IoT');
'&body=Dear Akveo, %0D%0A%0D%0A' + }
'I would like to purchase .NET IoT Bundle. ' +
'Please give me details how I can proceed with that. %0D%0A%0D%0A' +
'Thanks and regards';
thirdBundleMail: string = 'mailto:support@akveo.com' + get thirdBundleMail(): string {
'?subject=.NET Core E-commerce Bundle' + return this.getMailToText('.NET Core E-commerce');
'&body=Dear Akveo, %0D%0A%0D%0A' + }
'I would like to purchase .NET Core E-commerce Bundle. ' +
'Please give me details how I can proceed with that. %0D%0A%0D%0A' +
'Thanks and regards';
fourthBundleMail: string = 'mailto:support@akveo.com' + get fourthBundleMail(): string {
'?subject=.NET Core IoT Bundle' + return this.getMailToText('.NET Core IoT');
'&body=Dear Akveo, %0D%0A%0D%0A' + }
'I would like to purchase .NET Core IoT Bundle. ' +
'Please give me details how I can proceed with that. %0D%0A%0D%0A' +
'Thanks and regards';
firstCardFlipped: boolean = false; firstCardFlipped: boolean = false;
secondCardFlipped: boolean = false; secondCardFlipped: boolean = false;
@ -62,6 +50,15 @@ export class BackendBundlesSectionComponent {
} }
isCommercial() { isCommercial() {
return this.licenseType === 'commercial'; return this.licenseType === 'Commercial';
}
private getMailToText(bundleName: string) {
return 'mailto:support@akveo.com' +
`?subject=${this.licenseType} ${bundleName} Bundle` +
'&body=Dear Akveo, %0D%0A%0D%0A' +
`I would like to purchase ${this.licenseType} ${bundleName} Bundle. ` +
'Please give me details how I can proceed with that. %0D%0A%0D%0A' +
'Thanks and regards';
} }
} }

1
docs/app/pages/home/description-section/description-section.component.scss
View file

@ -48,6 +48,7 @@
} }
.description { .description {
width: 100%;
color: nb-theme(color-fg); color: nb-theme(color-fg);
font-family: nb-theme(font-secondary), sans-serif; font-family: nb-theme(font-secondary), sans-serif;
margin-top: 1.25rem; margin-top: 1.25rem;