Hi,

We don’t have the authority to switch items as an author but you can purchase jQuery version and refund Vue version. Refunds are in our control so it would not cause you any trouble.

Cheers.

Hi,

I am sorry that we don’t have any experience with Visual Studio.

Cheers.

Hi,

Thank you for your interest in our theme and the purchase.

As for the question, I am sorry that we can not help with this because noone in our team has experience with Laravel.

You might have already seen it but all the help I can provide is directing you to Vuejsdevelopers’ article on medium: https://medium.com/js-dojo/the-ultimate-vue-js-laravel-crud-tutorial-3640baf7eda0

Please let us know if you need assistance about something else.

Cheers.

Hello.

It would be too dificult to change my current app to a SPA.

The integration of the theme seems very complex. Do you eventually have the pure html version of the theme I could use just to get the canvas? Event if I don’t get the full power of your work, it should be very handy for me. Thanks!

Hi,

Yes you are right about switching to SPA. On the other hand, making the template multiple paged would required server side rendering and nodejs server. That would be even more complex.

If I understand correctly your current app is not built with Vuejs. We don’t have a pure html version since it is heavily javascript dependant but we do have a jQuery version if you are interested. https://themeforest.net/item/dore-jquery-bootstrap-4-admin-dashboard/22604108

Cheers.

Hi,

Thank you for asking. I am doing well and hope you are fine

As for the question, my coworker won’t be around for a few weeks and I mostly work on React so my recommendation might be very novice.

Have you added the library to the “components” section? I experienced the same error when I do import but not add it to the components part. You may see this usage in most of the files like FormComponents.vue.

Here is the screenshot: https://ibb.co/jhCmm1k

Let me know if this does not solve the problem.

Cheers.

Hi,

yes, i added the imported components to the components file and to the root file as well but it hasn’t worked yet. with same component structure in a cli 3 project its displays fine, in the node modules it has been globally declared.

Vue.component(‘amplify-authenticator’, Authenticator); Vue.component(‘amplify-sign-in’, SignIn); Vue.component(‘amplify-sign-up’, SignUp); Vue.component(‘amplify-sign-out’, SignOut); Vue.component(‘amplify-confirm-sign-up’, ConfirmSignUp); Vue.component(‘amplify-confirm-sign-in’, ConfirmSignIn); Vue.component(‘amplify-forgot-password’, ForgotPassword); Vue.component(‘amplify-set-mfa’, SetMfa); Vue.component(‘amplify-require-new-password’, RequireNewPassword);

like this. so it should work on all the components. I have been tweaking but no luck.

Ours don’t have vue-cli as much as I know since we would not like to provide so many things that we don’t have control.

My other suggestion would be checking how Bootstrap is imported. It is used globally and as far as I understand it is imported once at src/main.js file. Maybe it would be usefull.

Here is the syntax: import BootstrapVue from 'bootstrap-vue' Vue.use(BootstrapVue);

Hello.

I’ve splitted your SASS file into seperate SASS files and i’ve added _dropzone.scss with your new styling and removed the old from _forms.scss. Actually it looks better as the first version, but there are still some issues:

https://i.ibb.co/86gkqbL/001.png

Here you can see the “in-queue”-progress-bar, which looks weird. Try to upload more than “limit” files (e. g. 10 files at the same moment) and you’ll see what i mean.

https://i.ibb.co/1vmY83B/002.png

Here you can see that the “success”-icon is not visible (or at least in white) and hovers the file-icon.

Regarding the modal -> can you try it using “right”-modal?

Greetings, Danny

Hi,

Thank you for the feedback. I have not checked the scenario with multiple items but will look into this and right modal problem. Also will provide a solution with document success. I will write back as soon as I can.

Cheers.

Hi again,

We have tested the problem with right modal on Chrome and Firefox but could not replicate it. We are probably missing something. If you like to share your code for us to try, you may reach us from support@crealeaf.com

Here is the screencast: https://coloredstrategies.com/vids/right-modal-multiselect.mp4

And this is the component we use: <b-form-group :label="$t('form-components.state-multiple')"> <v-select v-model="vueSelectForm.multiple" multiple :options="selectData"/> -form-group> </b-form-group>

We have worked more on the dropzone and it looks way better now. We have included filled style icons for errors and success. Here is the screencast of the result: https://coloredstrategies.com/vids/dropzone-fix.mp4

We have removed success and error “i” tags from template: dropzoneTemplate: function () { return `<div class="dz-preview dz-file-preview mb-3"> <div class="d-flex flex-row "> <div class="p-0 w-30 position-relative"> <div class="dz-error-mark"><span><i /> </span></div> <div class="dz-success-mark"><span><i /></span></div> <div class="preview-container"> <img data-dz-thumbnail="" class="img-thumbnail border-0" /> <i class="simple-icon-doc preview-icon" /> </div> </div> <div class="pl-3 pt-2 pr-2 pb-1 w-70 dz-details position-relative"> <div> <span data-dz-name="" /> </div> <div class="text-primary text-extra-small" data-dz-size="" /> </div> <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress="" /></div> <div class="dz-error-message"><span data-dz-errormessage="" /></div> </div> <a href="#" class="remove" data-dz-remove=""> <i class="glyph-icon simple-icon-trash" /> </a> </div> `; }

This is the dropzone part of the sass file: .dropzone { min-height: 115px; border: 1px solid $separator-color; background: $input-background; padding: 10px 10px; border-radius: $border-radius; color: $primary-color; height: auto; .img-thumbnail { height: 58px; width: 100%; object-fit: cover; } } .dropzone.dz-clickable .dz-message, .dropzone.dz-clickable .dz-message * { position: relative; transform: translateY(-50%); top: 24px !important; margin: 0; } .dropzone .dz-preview.dz-image-preview, .dropzone .dz-preview.dz-file-preview { width: 260px; height: 60px; min-height: unset; border: 1px solid $separator-color; border-radius: $border-radius; background: $foreground-color; color: $primary-color; .preview-container { transition: initial !important; animation: initial !important; margin-left: 0; margin-top: 0; position: relative; width: 100%; height: 100%; i { color: $theme-color-1; font-size: 20px; position: absolute; left: 50%; top: 29px; transform: translateX(-50%) translateY(-50%) !important; height: 22px; } } strong { font-weight: normal; } .remove { position: absolute; right: 5px; top: 5px; color: $theme-color-1; } .dz-details { position: static; display: block; opacity: 1; text-align: left; min-width: unset; z-index: initial; color: $primary-color; } .dz-error-mark { color: $button-text-color; top: 15px; left: 25px; margin-left: 0; margin-top: 0; span { display: inline-block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath style='fill:"+encodecolor($theme-color-1)+";' d='M4.1,23.9A13.51,13.51,0,0,1,0,14,13.52,13.52,0,0,1,4.1,4.1,13.52,13.52,0,0,1,14,0a13.52,13.52,0,0,1,9.9,4.1A13.52,13.52,0,0,1,28,14a13.51,13.51,0,0,1-4.1,9.9A13.52,13.52,0,0,1,14,28,13.52,13.52,0,0,1,4.1,23.9Z'/%3E%3Cpath style='fill:"+encodecolor($foreground-color)+";' d='M13.13,19.35V6.17a.88.88,0,1,1,1.75,0V19.35Z'/%3E%3Crect style='fill:"+encodecolor($foreground-color)+";' x='13.13' y='21.07' width='1.75' height='1.64'/%3E%3C/svg%3E"); width: 28px; height: 28px; } } .dz-success-mark { color: $button-text-color; top: 15px; left: 25px; margin-left: 0; margin-top: 0; span { display: inline-block; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28'%3E%3Cpath style='fill:"+encodecolor($theme-color-1)+";' d='M4.1,23.9A13.51,13.51,0,0,1,0,14,13.52,13.52,0,0,1,4.1,4.1,13.52,13.52,0,0,1,14,0a13.52,13.52,0,0,1,9.9,4.1A13.52,13.52,0,0,1,28,14a13.51,13.51,0,0,1-4.1,9.9A13.52,13.52,0,0,1,14,28,13.52,13.52,0,0,1,4.1,23.9Z'/%3E%3Cpath style='fill:"+encodecolor($foreground-color)+";' d='M20.14,8.81A.77.77,0,0,1,21.2,9a.81.81,0,0,1,.25.61.83.83,0,0,1-.25.62L12.48,19l-.11.1a.82.82,0,0,1-1.23,0L6.79,14.74l-.11-.16a.49.49,0,0,1-.08-.18,1.06,1.06,0,0,1,0-.19.61.61,0,0,1,0-.19,1.16,1.16,0,0,1,0-.18,1.26,1.26,0,0,1,.08-.18,1,1,0,0,1,.11-.15.87.87,0,0,1,1.26,0l3.69,3.7L19.94,9A.72.72,0,0,1,20.14,8.81Z'/%3E%3C/svg%3E"); width: 28px; height: 28px; } } .dz-progress { width: 84%; margin-left: 0; margin-top: 0; right: 0; height: 5px !important; left: 15px; .dz-upload { width: 100%; background: $theme-color-1; } } .dz-error-message { border-radius: 15px; background: $error-color; top: 60px; &:after { border-bottom: 6px solid $error-color; } } [data-dz-name] { white-space: nowrap; text-overflow: ellipsis; width: 90%; display: inline-block; overflow: hidden; } } .dropzone .dz-preview.dz-file-preview .img-thumbnail { display: none; } .dropzone .dz-error.dz-preview.dz-file-preview { .preview-icon { display: none; } .dz-error-mark, .dz-success-mark { color: $theme-color-1; } } .dropzone .dz-preview.dz-image-preview .preview-icon { display: none; } @-webkit-keyframes pulse-inner { 0% { -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1) } 10% { -webkit-transform: scale(0.8,1); -moz-transform: scale(0.8,1); -ms-transform: scale(0.8,1); -o-transform: scale(0.8,1); transform: scale(0.8,1); } 20% { -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1) } } @-moz-keyframes pulse-inner { 0% { -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1) } 10% { -webkit-transform: scale(0.8,1); -moz-transform: scale(0.8,1); -ms-transform: scale(0.8,1); -o-transform: scale(0.8,1); transform: scale(0.8,1); } 20% { -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1) } } @keyframes pulse-inner { 0% { -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1) } 10% { -webkit-transform: scale(0.8,1); -moz-transform: scale(0.8,1); -ms-transform: scale(0.8,1); -o-transform: scale(0.8,1); transform: scale(0.8,1); } 20% { -webkit-transform: scale(1,1); -moz-transform: scale(1,1); -ms-transform: scale(1,1); -o-transform: scale(1,1); transform: scale(1,1) } } .dropzone .dz-preview:not(.dz-processing) .dz-progress { -webkit-animation: pulse-inner 3s ease infinite; -moz-animation: pulse-inner 3s ease infinite; -ms-animation: pulse-inner 3s ease infinite; -o-animation: pulse-inner 3s ease infinite; animation: pulse-inner 3s ease infinite }

Cheers.

From another message you wrote, it looks like you are not using vue-cli. Well, it’s a showstopper for me. I would really recommend to use it. It would make it possible to have a much more modular approach without hacking all the time in the source code.

Hi,

Yes, I have forgotten to write it back. This comment system makes it easy to miss this kind of things. Sorry about that.

Vue-cli is an awesome tool and you are right about wanting a template which uses it.

On the other hand, we have not included it to be able to modify every little part of the template. We did not want anything important to work under the hood. One other reason was “ejecting” but I guess they are done with it too with the newest version.

Cheers.

Hi,

We have implemented Vue CLI 3 and a starter project with the latest update. Just wanted to let you know

Cheers.

Hi again,

We have fixed the error and published an update.

If you don’t want to update everything here is the solution we applied:

handleDocumentClick function in src/containers/Sidebar.vue file should be like this:
handleDocumentClick(e) { if(!this.isMenuOver){ let cont=true; e.path.map(p=>{ if(p.nodeName!="svg" && p.className != undefined && p.className.indexOf('menu-button')>-1){ cont=false } }) if (cont) { this.toggle(); } } },

Let us know if this fixes the problem.

Cheers.

Thanks ColoredStrategies, it’s work now ! The support is very effective

That’s great, happy to help We would be very gratefull if you give the item a review when you have time. https://themeforest.net/downloads

Let us know if you need any assistance.

Cheers.

Thank you, Write down my email, when you have the angular version, let me know, I’ll be the first to buy

Thank you for your interest, we will notify you when it is available

Hello,

It’s been a while but just wanted to let you know that Angular version of the template is finally available.
https://themeforest.net/item/vien-angular-admin-template/25817698

Cheers.

Hi,

Thanks for your interest in our theme.

As for the question, we don’t have a wordpress version of the template. It works on Vue.js which is a quite specific javascript framework.

Cheers.

Hi Linus,

You are right, we had the same problem earlier and had to comment out UglifyJs part for the time until we figure out the problem. We use same plugin and quite the same setup at our React project without problems but have not figured out the problem yet.

Although, we might suggest Terser as an alternative and probably we will include this with the next update.

Command to install it: npm install terser-webpack-plugin --save-dev

This is the const : const TerserPlugin = require('terser-webpack-plugin');

Here is the setup for the optimization part of the prod file: optimization: { splitChunks: { cacheGroups: { commons: { test: /[\\/]node_modules[\\/]/, name: "vendor", chunks: "all", }, }, }, }, optimization: { minimizer: [ new TerserPlugin({}), new OptimizeCSSAssetsPlugin({}) ] },

For more details and config, you may check the plugin page: https://webpack.js.org/plugins/terser-webpack-plugin

Let us know if this does not solve the problem.

Cheers.

Hi,

We have not included psd files since our design is mostly concept work. Although the laptop and phone is from a paid mockup which we don’t have rights to distribute. You may check it here: https://www.ls.graphics/simplemockups

Cheers.

Hi,

Sorry about it but design work done for the theme is mostly concept and not included with the theme.

Cheers.

Hi,

Thank you for the kind words, I hope you keep enjoying the theme:)

As for the question, I am afraid there is not an easy way to do this. You will need to change styles of the navbar and it’s children.

You may look into the “src/assets/css/sass/_piaf.style.scss” file. There is a section for navbar which you may find with searching /* 09.Navbar*/. You can change the background of navbar here. You will also need to change a few more things like button colors, text colors, input background color etc. to make them visible over dark color.

Let us know if you need any more assistance.

Cheers.

Hey,

Thank you. I was tweaking the colours. yes, its bit of a workaround. would have loved if there would be an inverse header and body styles included.

Hi,

I personally have not felt the need for inverse coloring as the designer. Main reason for inverse colors would be separation of the theme parts but i think shadows get the job done pretty well. It also seemed to me that making a darker navbar or sidebar nullifys the shadow and so the perseption of depth. This breaks the overall harmony.

Although, it would be nice and maybe necessary for a flatter design like Theme Forest have.

It might be a personal choice of course since there can not be an absolute right about design

Cheers.

Hi,

1- Easy option would be to create these pages individually, set the routing and link them.

2- You may create <router-link> tags and create buttons as you wish. Hero section which contains register button is located here: “src/components/LandingPage/HeroHome.vue” I am not sure if I understand the question here but here is the button with a link to register page: <router-link tag="a" :to="/auth-register" class="btn btn-outline-semi-light btn-xl">REGISTER NOW</router-link>

Cheers.

regarding “1”, tried that but getting 404 error. How can routing be set?

Hi,

You may look into the following page at the documentation for a very detailed information. You may jump to step 3 but i suggest you to take a look at other steps too. https://piaf-vue-docs.coloredstrategies.com/docs/code/routing

Ps: This one is the routing file: src/router/index.js

Cheers

Hi, I sent you an e-mail.

Hi,

We have received the email, we will try to provide the example project today if everything goes right. If not i think it will be ready for tomorrow.

Cheers.

Ok, thank you.

Hi,

Thank you for the kind word, we really apreciate it.

As for the error, could you try “npm run dev”?

Cheers.

Now is working with “npm run dev”, thank you!

That is nice, you may find some info about getting a production build when you need here:
https://piaf-vue-docs.coloredstrategies.com/docs/getting-started/introduction

Cheers.

Hi,

It will be an update containing following and will be available within a week or two.:

• Tables
• Invoice
• Mailing
• Removel of landing page backgrounds in the favor for svgs via css.

Cheers.

Ok, I think I’ve figured it out. isMenuOver is being set to false as soon as I move my mouse out of the sidebar component to click on the menu button.

Just to clarify, this isn’t a bug with the theme, it’s a bug with my implementation into Laravel. Thanks for your help!

Hi,

It is nice to hear that you have figured it out and it is your kindness to separate the theme from the problem. Most people would prefer to go like “menu is not working, help”

Please let us know when you require our assistance.

Cheers.

Hi again,

Today, we have found out a problem with mobile menu which only occurs on Mac environment. We all use Windows so we have missed it. If you are on a Mac then the problem you have experienced might be our fault and if that is so we are sorry about it.

If you have not fixed it yet, here is our solution:

handleDocumentClick function in src/containers/Sidebar.vue file should be like this:
handleDocumentClick(e) { if(!this.isMenuOver){ let cont=true; e.path.map(p=>{ if(p.nodeName!="svg" && p.className != undefined && p.className.indexOf('menu-button')>-1){ cont=false } }) if (cont) { this.toggle(); } } },

Kind Regards.

Hi,

We have not included any integrations with a backend framework or library including Laravel.

Cheers.