144 comments found.
Hello
1. I would like to use this in ASP.NET + Angular Portal. Do you have any advice or suggestion for smooth implementation? 2. I would like to integrate fabric-js in two or three pages and send the design data to server from fabric canvas. Is there any problem?
Regards,
Imamuddin
Hi,
Unfortunately we don’t have any experience with integrating Angular with Asp.net and Fabricjs library. We prefer using backend as a service with all our frontend implementations such as React, Vue and etc.
Cheers.
Hi guys, we identified multiple issue with app-small-line-charts component, please find attached screenshots we have.
Responsive. https://ibb.co/x5J9FNx Mobile: https://ibb.co/SfBmKtZ Only Laptop layout is good: https://ibb.co/SQVM8SYPlease take a look and give us some advice n how to fix it. Thank you in advance.
Hi,
It looks like the problem is with the legend. The chart is not designed to have a legend. It should not display a legend if options parameter is provided correctly. Please check “_smallLineChartOptions” in src/app/components/charts/chart.service.ts file.
// Component initialization with smallLineChartOptions
<app-small-line-chart [data]="smallChartData1" [options]="chartDataConfig.smallLineChartOptions"></app-small-line-chart>
// smallLineChartOptions with legend prop is set to {diplay: false} in chart.service.ts file
private _smallLineChartOptions = {
layout: {
padding: {
left: 5,
right: 5,
top: 10,
bottom: 10
}
},
responsive: true,
maintainAspectRatio: false,
legend: {
display: false
},
scales: {
yAxes: [
{
ticks: {
beginAtZero: true
},
display: false
}
],
xAxes: [
{
display: false
}
]
}
};
If you have already provided the options correctly and think that the problem is related to something else, please let us know.
Thank you, sorry for the late answer, didn’t subscribe for notifications upon answer received so, I will inspect my settings (component options) as per recommended, honestly don’t remember I’ve changed it somehow, but anyway I will check it and let you know in within 2 days.
That helped. Thank you
Hi there, I really thank you for such great think like the Vien Theme. I do have one question: can you share the guidelines on how to create best fitting logo for the theme. Proportions, recommended size in bytes and in px/em will help us to create nice looking product. Thank you in advance.
Hi,
It’s nice to hear that you like the template, we really appreciate it.
As for your question, there are 3 logo files as you may have noticed. One with only the logo symbol for mobile and 2 for light and dark mode.
All the files are provided as an svg files and opening them with a text editor should provide the info you are looking for. Full ones are around 328×105 and mobile one is 81×105. (We should have use round numbers for dimensions but since they are vectors, I suppose it does not matter much)
viewBox="0 0 327.9 104.6"
viewBox="0 0 80.9 104.6"
Using svg files is really nice for multiple screen sizes and dpis. They scale without any pixelation and I suggest you to do the same if you can. Opening the svg files with a vector editing software such as Illustrator, changing them with vector version of your logos and saving files should be the best way.
Cheers.
Hey Hope you are doing well.
I wanted to ask you about a thing.
How do u copy things from the main project to the starter project.
For ex i wanna copy the “data-list” to the starter project, how can i do that??
I tried by simply copying the folder into the starter pack but it gives me lots of error.
I also tried copying the .html and .ts into a new component, still didnt work. (I am a beginner in angular so that might explain it. )
Hi,
Error details should point you right direction for it. My guess would be missing ApiService. Also please check and make sure you have all the modules from the module file of the page.
HI,
I hope you are doing well,
There is an issue in the sidebar menu, by default the sub menu opened when you open the page or refresh page and you need to press the burger icon to close it, even if you select item from sub menu it did not close, i found the same issue on the demo version
Thanks
Hi,
Thanks for asking, hope you are doing well too.
You should set defaultMenuType: ‘menu-sub-hidden’ in src/environments/environment.ts and src/environments/environment.prod.ts
Demo also have a menu-default so it’s normal.
If the problem is not related with setting the prop, please let us know.
Cheers.
Hi there love your theme.. wondering how I can modify the data for the JsChart you included.. how can I have it reside in source code within <script></script> tags on my html page?
this is the code I identified to be controlling the chart data
if (document.getElementById("salesChart")) {
var salesChart = document.getElementById("salesChart").getContext("2d");
var myChart = new Chart(salesChart, {
type: "LineWithShadow",
options: {
plugins: {
datalabels: {
display: false
}
},
responsive: true,
maintainAspectRatio: false,
scales: {
yAxes: [
{
gridLines: {
display: true,
lineWidth: 1,
color: "rgba(0,0,0,0.1)",
drawBorder: false
},
ticks: {
beginAtZero: true,
stepSize: 5,
min: 50,
max: 70,
padding: 20
}
}
],
xAxes: [
{
gridLines: {
display: false
}
}
]
},
legend: {
display: false
},
tooltips: chartTooltip
},
data: {
labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
datasets: [
{
label: "",
data: [54, 63, 60, 65, 60, 68, 60],
borderColor: themeColor1,
pointBackgroundColor: foregroundColor,
pointBorderColor: themeColor1,
pointHoverBackgroundColor: themeColor1,
pointHoverBorderColor: foregroundColor,
pointRadius: 6,
pointBorderWidth: 2,
pointHoverRadius: 8,
fill: false
}
]
}
});
}
Hi,
I think safest approach would be removing current implementation for salesChart in dore.scripts.js file and adding yours.
dore.script.js file works like a plugin and it starts working after all the styles and scripts loaded plus an 300 ms timeout. Although you add your script at the end of html file, it might work before dore.script.js. This will result that “LineWithShadow” custom chart type and “chartTooltip” plugin undefined. You also can’t access color variables outside of dore.script.js file.
These and some other problems that I currently can’t foresee might be fixed but it requires time and possible code duplication. Really don’t recommend it.
All the best.
It’ a great template, I started to customize to my new project, got stuck with Vien-Angular-Start app, how can I add data list to a new blank page
Hi,
Main project contains an example for this at src/app/views/app/pages/product/data-list directory.
I have configured the Vien-Angular-Start project and fix some issues. but when I customizing following error I can’t resolve, can you support me on this?
Cannot find module ‘src/app/views/app/applications/survey/survey.service’.
Severity Code Description Project File Line Suppression State Error TS2307 (TS) Cannot find module ‘src/app/views/app/applications/survey/survey.service’.
E:\OneDrive\Envoize\Theme\themeforest-bXMZfATZ-vien-angular-admin-template\Vien-Angular-Admin-Dashboard-1.1.0\Angular-Version\Source\Vien-Angular-Start (tsconfig or jsconfig project) E:\OneDrive\Envoize\Theme\themeforest-bXMZfATZ-vien-angular-admin-template\Vien-Angular-Admin-Dashboard-1.1.0\Angular-Version\Source\Vien-Angular-Start\src\app\containers\applications\question-builder\question-builder.component.ts 2 Active
Hi,
Vien-Angular-Start does not have all the files of the main project and the error seems like about a missing file and you may find it at Vien-Angular/src/app/views/app/applications/survey/survey.service.ts
I have an issue with the Vien Theme. Our website is www.trackspot.de. As you might realize on that site, we are unable to toggle the menu. The issue seem to be a timing issue. Sometimes it is possible, but in most cases not. Is there something we should activate/deactivate to let the menu open?
Best regards, Nils Paluch
n.paluch@2solutin.deHi,
As far as I can see, jQuery version is used at the page instead of Angular. So I will provide solutions for jQuery.
Franky, I am not sure what is causing the problem. Might be about the template, implementation or server. Can’t really tell.
First suggestion is testing menu-hidden page that comes with the template. It works without any problem at our server and if you can test this out at your end you may consider implementing your page using it. https://dore-jquery.coloredstrategies.com/Menu.Hidden.html
As an alternative, you may change menu-button click handler. I am not sure for the reason but click event never fires. You may try below lines.
// Current
$(".menu-button").on("click", function (event) {
event.preventDefault();
setMenuClassNames(++menuClickCount);
});
// Changed
$(window).on("click", ".menu-button", function (event) {
event.preventDefault();
setMenuClassNames(++menuClickCount);
});
Please let us know if these does not help at all. Cheers.
Hey, thanks for amazing template.
Today I faced an issue with NgSelect on Android device (Samsung A50) in Chrome browser. How to find: UI > Components > NgSelect block
Reproducing: try to select some item in “Search” and you will notice that the selected item is disappear. Do you have some fix or workaround?
I have found one WA, I have created custom template: <ng-template ng-label-tmp let-item=”item”> {{item.name}} </ng-template>
Hi,
Dropdowns and customized selects are a little bit awkward on mobile by their nature but rather than that unfortunately I couldn’t reproduce the error. I have tried with a Note 4 and it works as expected.
Let us know if the fix you have found does not solve the issue. We could try with an emulator.
Best.
Hi there and thanks again for the grate job. Could you please guys tell me how to correctly add my own styles not to touching _vien.style.scss? So far I’ve created _myapp.scss and imported it in vien.style.scss (@import “myapp”;). The problem that I cannot use in my classes any of theme colors like #{$primary-color} . Thanks in advance.
Hi,
Your approach seems like it should work. Might be related to missing underscore. I remember something about that if file name is not prefixed with an underscore, the compiler will try to build it on its own. So try adding it and if that doesn’t work modifying below lines in the theme files(all 20 of them) should grant access to variables.
@import "../_mixins.scss";
@import "../_vien.style.scss";
@import "../_myapp.scss"; //Added here at the end
Thanks for your kind words again, we really appreciate it
Cheers.
sub-menu hides automatically when I enter the sub-menu
Hi,
That’is the expected behaviour of the menu. Menu hides the submenu if there is not any submenu items or screen size is below subHiddenBreakpoint which is defined in environment files.
You may check Menu title at https://vien-docs.coloredstrategies.com/docs/codebase/routing
I have my own submenu that I added and it hides when I click on it, just a blank page like the standard of the system. the standard sub-menu does not close “example: Vien->Start” but hides when I enter the component I added “example: User -> Userlist”
Hi,
The only possible cause that I can think of is that maybe you have provided same route to main and sub item. You may find an example below.
id: 'dashboards',
icon: 'iconsminds-shop-4',
label: 'menu.dashboards',
to: '/app/dashboards', //---->here
subs: [{
icon: 'simple-icon-briefcase',
label: 'menu.default',
to: '/app/dashboards/default' //----> and here
},
If this is not the case, please provide your menu file so that we may look into it.
Can you implement Horizontal MENU ? Or black MENU?
Hi,
We have thought about the dark sidebar while developing the template and examined the apps we use daily(Gmail, Clickup, Github etc). Lots of templates sold here provides the feature but we have not found usage in real world apps so decided that separation with background and shadow should be the way to go.
Horizontal menu is in our todo list but there are other important parts that we are currently working on and whenever we introduce a new feature, we need to implement it for our other templates.
So, unfortunately these are not the features that will be implemented in the near future.
As a side note, thanks for the review. Hope you keep enjoying to work on the template. All the best.
Hi guys, do you have something like sticky popup to display notification from server, for example about scheduled upcoming maintenance window or something like this.
Hi,
I think currently best thing for the purpose is notifications. You may set a high timeout and respond to click events. https://vien-angular.coloredstrategies.com/app/ui/components/alerts
Here is the documentation: https://github.com/flauc/angular2-notifications
Hi guys, you have fancy landing page for your Vien app. Would you recommend to use this page for our landing page or it’s to heavy and not good for that purpose?
Hi,
Unfortunately the landing page is not built with Angular and it’s jQuery. It’s also not included within the template.
We have a plan to implement a landing page for our future version but I don’t think it will be available soon.
Hi guys, do you have a component that will conditionally popup and ask user to accept Cookie usage?
Hi,
We don’t have the logic for it but you may find an example modal implementation for it that will appear at the bottom of the page. Might provide a starting point.
// Ts
import { Component, OnInit, TemplateRef, ViewChild, AfterContentInit } from '@angular/core';
import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';
@Component({
selector: 'app-modal',
templateUrl: './modal.component.html'
})
export class ModalComponent implements AfterContentInit {
modalRef: BsModalRef;
@ViewChild('template', { static: true }) template: TemplateRef<any>;
config = {
backdrop: true,
ignoreBackdropClick: true,
class: 'modal-bottom'
};
constructor(private modalService: BsModalService) { }
ngAfterContentInit() {
this.showModal();
}
showModal() {
this.modalRef = this.modalService.show(this.template, this.config);
}
}
// Html
<ng-template #template>
<div class="modal-header">
<h4 class="modal-title pull-left">Cookies</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="modalRef.hide()">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Cras hendrerit ex et felis suscipit tempor. Proin vel ligula ut purus mattis porttitor eget tincidunt libero.
Nulla sit amet magna id ligula blandit scelerisque et ac magna. Suspendisse rutrum tempus finibus. Class aptent
taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
</p>
<div class="d-flex justify-content-center">
<button type="button" class="btn btn-outline-primary m-1" (click)="modalRef.hide()">Decline</button>
<button type="submit" class="btn btn-primary m-1">Accept</button>
</div>
</div>
</ng-template>
// Css to add _vien.style.scss file
.modal-bottom {
position: fixed;
top: auto;
right: auto;
bottom: 0;
margin: 0 auto;
left: 50%;
transition: initial !important;
transform: translate(-50%, 0) !important;
}
Hi @DimaMaslov
Running ‘npm update’ results in some ‘ngx-bootstrap’ import issues (which one can solve by importing ngx-bootstrap modules on their own and adding the route to the end, it’s a Angular 9 Ivy thing)
eg. from this :
import { ProgressbarModule, ModalModule } from ‘ngx-bootstrap’;
to this:
import { ProgressbarModule } from ‘ngx-bootstrap/progressbar’;
import { ModalModule } from ‘ngx-bootstrap/modal’;
Hi,
Thanks for the help, its very kind of you. I have just notified the user and we will publish an update as soon as we can.
We are also looking into your comment and will provide a detailed answer.
Thanks again, All the best.
Thank you.
Hi, guys, everything was very nice with your Vien template until we tried to build our app on the server. Now we have following error. Build is failed.
Compiling ngx-bootstrap/timepicker : es2015 as esm2015 ERROR in src/app/containers/layout/layout.containers.module.ts:10:65 – error TS2307: Cannot find module ‘ngx-bootstrap’.
10 import { CollapseModule, BsDropdownModule, TooltipModule } from ‘ngx-bootstrap’; ~~~~~~~~ src/app/containers/dashboards/dashboards.containers.module.ts:32:80 – error TS2307: Cannot find module ‘ngx-bootstrap’.
32 import { RatingModule, ProgressbarModule, ModalModule, BsDropdownModule } from ‘ngx-bootstrap’; ~~~~~~~~ src/app/containers/pages/pages.containers.module.ts:4:93 – error TS2307: Cannot find module ‘ngx-bootstrap’.
4 import { CollapseModule, RatingModule, TabsModule, AccordionModule, BsDropdownModule } from ‘ngx-bootstrap’; ~~~~~~~~ src/app/views/app/app.module.ts:13:97 – error TS2307: Cannot find module ‘ngx-bootstrap’.
13 import {CollapseModule, PaginationConfig, PaginationModule, ProgressbarModule, TabsModule} from ‘ngx-bootstrap’; ~~~~~~~~ src/app/components/state-button/components.state-button.module.ts:4:31 – error TS2307: Cannot find module ‘ngx-bootstrap’.
4 import { PopoverModule } from ‘ngx-bootstrap’; ~~~~~~~ src/app/app.module.ts:14:27 – error TS2307: Cannot find module ‘ngx-bootstrap’.
14 import {AlertModule} from ‘ngx-bootstrap’;
ENVIRONMENT:
Angular CLI: 9.0.7 Node: 10.20.1 OS: linux x64
Angular: 9.0.7 ... animations, cli, common, compiler, compiler-cli, core, forms ... language-service, platform-browser, platform-browser-dynamic ... router Ivy Workspace: Yes
Package Version
@angular-devkit/architect 0.900.7 @angular-devkit/build-angular 0.900.7 @angular-devkit/build-optimizer 0.900.7 @angular-devkit/build-webpack 0.900.7 @angular-devkit/core 9.0.7 @angular-devkit/schematics 9.0.7 @angular/cdk 9.2.1 @angular/fire 5.4.2 @ngtools/webpack 9.0.7 @schematics/angular 9.0.7 @schematics/update 0.900.7 rxjs 6.5.5 typescript 3.7.5 webpack 4.41.2
Hi,
As https://themeforest.net/user/nejih kindly pointed out, new Angular version doesn’t support current ngx-bootstrap imports used in the project.
This could be prevented if package-lock.json file or yarn.lock file used and package versions not updated manually.
We will publish an update to address the issue later today but if you want to update imports yourself, you may find a list of fixes below. Top ones should be changed with below ones in the module file within the provided folder.
// src/app/components/bootstrap
import {
AccordionModule, AlertModule, CollapseModule, BsDropdownModule, ModalModule, PaginationModule, PopoverModule, ProgressbarModule,
SortableModule, TabsModule, TooltipModule, TypeaheadModule, ButtonsModule
} from 'ngx-bootstrap';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { AlertModule } from 'ngx-bootstrap/alert';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ModalModule } from 'ngx-bootstrap/modal';
import { PaginationModule } from 'ngx-bootstrap/pagination';
import { PopoverModule } from 'ngx-bootstrap/popover';
import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
import { SortableModule } from 'ngx-bootstrap/sortable';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
import { ButtonsModule } from 'ngx-bootstrap/buttons';
// src/app/containers/dashboards
import { RatingModule, ProgressbarModule, ModalModule, BsDropdownModule } from 'ngx-bootstrap';
import { RatingModule } from 'ngx-bootstrap/rating';
import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
import { ModalModule } from 'ngx-bootstrap/modal';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
// src/app/containers/layout
import { CollapseModule, BsDropdownModule, TooltipModule } from 'ngx-bootstrap';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
// src/app/containers/applications
import { CollapseModule } from 'ngx-bootstrap';
import { CollapseModule } from 'ngx-bootstrap/collapse';
// src/app/views/app/applications
import { CollapseModule, TabsModule, ProgressbarModule, ModalModule } from 'ngx-bootstrap';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { ProgressbarModule } from 'ngx-bootstrap/progressbar';
import { ModalModule } from 'ngx-bootstrap/modal';
// src/app/containers/pages
import { CollapseModule, RatingModule, TabsModule, AccordionModule, BsDropdownModule } from 'ngx-bootstrap';
import { CollapseModule } from 'ngx-bootstrap/collapse';
import { RatingModule } from 'ngx-bootstrap/rating';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
// src/app/views/app/pages/product
import { RatingModule, PaginationModule, TabsModule, ModalModule, BsDropdownModule, AccordionModule } from 'ngx-bootstrap';
import { AccordionModule } from 'ngx-bootstrap/accordion';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ModalModule } from 'ngx-bootstrap/modal';
import { TabsModule } from 'ngx-bootstrap/tabs';
import { PaginationModule } from 'ngx-bootstrap/pagination';
import { RatingModule } from 'ngx-bootstrap/rating';
// src/app/views/app/pages/miscellaneous
import { PaginationModule, CollapseModule } from 'ngx-bootstrap';
import { PaginationModule } from 'ngx-bootstrap/pagination';
import { CollapseModule } from 'ngx-bootstrap/collapse';
// src/app/views/app/ui/datatables
import { PaginationModule } from 'ngx-bootstrap';
import { PaginationModule } from 'ngx-bootstrap/pagination';
// src/app/components/state-buttons
import { PopoverModule } from 'ngx-bootstrap';
import { PopoverModule } from 'ngx-bootstrap/popover';
// src/app/containers/ui/cards
import { TabsModule } from 'ngx-bootstrap';
import { TabsModule } from 'ngx-bootstrap/tabs';
// src/app/containers/ui/modals
import { ModalModule } from 'ngx-bootstrap';
import { ModalModule } from 'ngx-bootstrap/modal';
// src/app/containers/forms/datepicker
import { BsLocaleService } from 'ngx-bootstrap';
import { BsLocaleService } from 'ngx-bootstrap/datepicker';
// src/app/containers/forms
import { RatingModule } from 'ngx-bootstrap';
import { RatingModule } from 'ngx-bootstrap/rating';
One other thing that RatingModule now requires to be imported with .forRoot(). Below module files in the provided folders requires this fix.
src/app/containers/dashboards
src/app/containers/forms
src/app/containers/pages
src/app/views/app/pages/product
@NgModule({
imports: [
RatingModule.forRoot()
]
})
After implementing the fixes, project needs to be recompiled.
All the best.
Thanks a lot, it mostly helped, but unfortunately new issue in pagination: instead of Prev /Next arrows I see HTML
Please take a look: https://ibb.co/XtvJzYg – please assist.
Hi,
That is also a breaking change that comes with new ngx-bootstrap. Pagination now requires ng-template to provide custom buttons. You may find the new way of doing it below and here is the docs:https://valor-software.com/ngx-bootstrap/#/pagination#custom-template
<div class="row">
<div class="col-12">
<div class="card mb-4">
<div class="card-body">
<h5 class="mb-4">{{'pagination.boundary-links' | translate}}</h5>
<pagination [boundaryLinks]="true" [totalItems]="55" [customFirstTemplate]="firstTemplate"
[customLastTemplate]="lastTemplate" [customPreviousTemplate]="prevTemplate"
[customNextTemplate]="nextTemplate"></pagination>
</div>
</div>
</div>
</div>
<ng-template #nextTemplate let-disabled="disabled" let-currentPage="currentPage">
<i class="simple-icon-arrow-right" />
</ng-template>
<ng-template #prevTemplate let-disabled="disabled" let-currentPage="currentPage">
<i class="simple-icon-arrow-left" />
</ng-template>
<ng-template #lastTemplate let-disabled="disabled" let-currentPage="currentPage">
<i class="simple-icon-control-end" />
</ng-template>
<ng-template #firstTemplate let-disabled="disabled" let-currentPage="currentPage">
<i class="simple-icon-control-start" />
</ng-template>
Thanks. That helped. I had to expand tag, because there were compilation errors, because of empty
The corrected version: <ng-template #prevTemplate let-disabled=”disabled” let-currentPage=”currentPage”> </ng-template>
<ng-template #nextTemplate let-disabled=”disabled” let-currentPage=”currentPage”> </ng-template>
<ng-template #lastTemplate let-disabled=”disabled” let-currentPage=”currentPage”> </ng-template>
<ng-template #firstTemplate let-disabled=”disabled” let-currentPage=”currentPage”> </ng-template>
I’m also having issues the border-radius, not being able to switch between rounded and flat for buttons and so on, it seems that the _vien.style.scss file has a hardcoded 50px: for btn border-radius on line 728 (i see the 50px for other values as well), I think the reason you might not see the issue in your tests is because the version available for download on themeforest is not the same version as on your local?
.btn { border-radius: 50px; outline: initial !important; box-shadow: none !important; box-shadow: initial !important; font-size: 0.8rem; padding: 0.5rem 1.25rem 0.5rem 1.25rem; transition: background-color box-shadow 0.1s linear; }
PS. How can we stay up to date with the latest updates and fixes? do you have a secure GitHub Repo for this project?
also running ‘npm update’ results in some ‘ngx-bootstrap’ import issues (which one can solve by importing ngx-bootstrap moduled on their own and adding the route to the end, it’s a Angular 9 Ivy thing)
eg. from this import { ProgressbarModule, ModalModule } from ‘ngx-bootstrap’;
to this import { ProgressbarModule } from ‘ngx-bootstrap/progressbar’; import { ModalModule } from ‘ngx-bootstrap/modal’;
Hi,
Flat and rounded problem is now a lot clear. I have always thought that there is an issue that causes it to fail completely and not for only buttons and so on.
Our first design and implementation didn’t contain the choice for radius. It was something in between. Here you may see the design: https://i.ibb.co/2y5z0MC/design-semi-flat.jpg
We have implemented rounded corners for cards and other containers and since we have accustomed rounded borders for buttons we never thought to remove it for flat choice. By adding below lines to end of _vien.style.scss file, you may override rounded styles and have something like this: https://i.ibb.co/TR0hPnH/design-flat-all.jpg
body:not(.rounded) {
.btn,
.search-sm input,
.navbar .search,
.page-item .page-link,
.badge-pill,
.navbar .user img,
.rounded-circle {
border-radius: $border-radius !important;
}
}
This makes more sense for a term “flat”. Maybe we should implement it this way with our other templates and Vien. If you stumble across anything that should not be rounded, you may add it above list with a comma.
As for the ngx-bootstrap problem, thanks again for your earlier reply. We have implemented it and published an update.
Unfortunately we don’t have any easy solution for updating. The thing is, both parties work on an implementation for their own needs and trying to merge one to another alwasy causes conflicts. ngx-bootstrap update is a perfect example for this. Let’s say you have worked on the template for quite some time and implemented your own interfaces. Then used git to update and your module imports suddenly don’t work. We had lots of issues with updates, even one time users need to update their Node version. Our updates will mostly be build breaking so we never encourage it and publish them silent. We also provide a package-json.lock and yarn.lock file that will keep the versions stable. I hope that this makes sense for you.
Here is a comic to summarize our perspective for updates: https://img.devrant.com/devrant/rant/r_1030841_w7Mq9.jpg
All the best.
Hi Team, thank you for the awesome template! Just a small feature request, are you guys able to add a form/field to put in credit card info. This way it could be used for the payments options if a user registers. Thanks in advance!
Hi,
Thank you for the kind words, hope you keep enjoying working on the template.
As for your request, you may find an implementation below which created via reactive forms. I am not sure for all the required validations but it should serve you as a starting point. Also found out that our validation tooltips are not working well with small inputs. A workaround for that is implemented with CVS part.
HTML
<div class="card mb-4">
<div class="card-body">
<h6 class="mb-4">Credit Card</h6>
<form [formGroup]="creditCardForm" #form="ngForm" (ngSubmit)="onSubmit()" novalidate class="tooltip-right-bottom">
<div class="form-group error-l-125">
<label>Cardholder Name</label>
<input type="text" class="form-control" name="name" formControlName="name">
<div form.submitted="" class="invalid-tooltip">Name is
required!</div>
<div form.submitted="" class="invalid-tooltip">Name must
contain
at least 2 characters!</div>
</div>
<div class="form-group error-l-125">
<label>Creditcard Number</label>
<input type="text" class="form-control" name="cardNumber" formControlName="cardNumber">
<div form.submitted="" class="invalid-tooltip">Card
number is required!
</div>
<div form.submitted="" class="invalid-tooltip">Card
number must be valid!</div>
</div>
<div class="row">
<div class="col-6">
<label>Expiration Date(Month / Year)</label>
<div class="form-group float-left mr-2">
<ng-select appearance="outline" [searchable]="false" [clearable]="false" formControlName="expirationMonth"
style="width: 100px;">
<ng-option [value]="1">01</ng-option>
<ng-option [value]="2">02</ng-option>
<ng-option [value]="3">03</ng-option>
<ng-option [value]="4">04</ng-option>
<ng-option [value]="5">05</ng-option>
<ng-option [value]="6">06</ng-option>
<ng-option [value]="7">07</ng-option>
<ng-option [value]="8">08</ng-option>
<ng-option [value]="9">09</ng-option>
<ng-option [value]="10">10</ng-option>
<ng-option [value]="11">11</ng-option>
<ng-option [value]="12">12</ng-option>
</ng-select>
<div form.submitted="" class="invalid-tooltip">
Required!</div>
</div>
<div class="form-group float-left">
<ng-select appearance="outline" [searchable]="false" [clearable]="false" formControlName="expirationYear"
style="width: 100px;">
<ng-option [value]="20">20</ng-option>
<ng-option [value]="21">21</ng-option>
<ng-option [value]="22">22</ng-option>
<ng-option [value]="23">23</ng-option>
<ng-option [value]="24">24</ng-option>
<ng-option [value]="25">25</ng-option>
<ng-option [value]="26">26</ng-option>
<ng-option [value]="27">27</ng-option>
<ng-option [value]="28">28</ng-option>
<ng-option [value]="29">29</ng-option>
<ng-option [value]="30">30</ng-option>
<ng-option [value]="31">31</ng-option>
</ng-select>
<div form.submitted="" class="invalid-tooltip">
Required!</div>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label>CVC</label>
<input type="text" class="form-control" name="cvc" formControlName="cvc" style="width: 100px;">
<div class="position-relative tooltip-left-bottom" form.submitted="">
<div class="invalid-tooltip">Required longer!</div>
</div>
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">{{ 'forms.submit' | translate }}</button>
</form>
</div>
</div>
JS
ngOnInit() {
this.creditCardForm = new FormGroup({
name: new FormControl(null, [Validators.required, Validators.minLength(2), Validators.pattern('^[A-Za-z]+$')]),
cardNumber: new FormControl(null, [Validators.required, Validators.pattern('^(?:4[0-9]{12}(?:[0-9]{3})?|[25][1-7][0-9]{14}|6(?:011|5[0-9][0-9])[0-9]{12}|3[47][0-9]{13}|3(?:0[0-5]|[68][0-9])[0-9]{11}|(?:2131|1800|35\d{3})\d{11})$')]),
expirationMonth: new FormControl(null, [Validators.required]),
expirationYear: new FormControl(null, [Validators.required]),
cvc: new FormControl(null, [Validators.required])
});
}