How adapt web page template into meteor?


#1

Hello, thanks for read

I have a problem, I hope some orientation because always I worked only with bootstrap. Never with css or templates.

I bought a template in wrapbootstrap.com
As you know, this templates coming with a setup files like a js, img, fonts, and of course html

I need integrate this template into meteor, I searched in web Meteor.startup() . This code help a little to solve, but no solve the problem

I have the next issue:
Somethime the view is good, sometimes is very bad
Next a img

We can se that window on right is perfect. The window on left is bad, and with errors. Why? sometimes good, sometimes bad

Next, my file js client

client/main.js

import angular from 'angular';
import angularMeteor from 'angular-meteor';
import uiRouter from 'angular-ui-router';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
import {name as Inicio} from '../imports/ui/components/views/inicio/inicio';
class Main {}
// JS IMPORTS
Meteor.startup(function () {$.getScript('js/jquery-2.1.3.min.js', function () {});});
Meteor.startup(function () {$.getScript('bootstrap/js/bootstrap.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/jquery.superslides.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/jquery.mb.YTPlayer.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/jquery.magnific-popup.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/owl.carousel.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/jquery.simple-text-rotator.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/imagesloaded.pkgd.js', function () {});});
Meteor.startup(function () {$.getScript('js/isotope.pkgd.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/packery-mode.pkgd.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/appear.js', function () {});});
Meteor.startup(function () {$.getScript('js/jquery.easing.1.3.js', function () {});});
Meteor.startup(function () {$.getScript('js/wow.min.js', function () {});});
Meteor.startup(function () {$.getScript('js/jqBootstrapValidation.js', function () {});});
Meteor.startup(function () {$.getScript('js/jquery.fitvids.js', function () {});});
Meteor.startup(function () {$.getScript('js/jquery.parallax-1.1.3.js', function () {});});
Meteor.startup(function () {$.getScript('js/smoothscroll.js', function () {});});
Meteor.startup(function () {$.getScript('http://maps.google.com/maps/api/js?sensor=true', function () {});});
Meteor.startup(function () {$.getScript('js/gmaps.js', function () {});});
Meteor.startup(function () {$.getScript('js/contact.js', function () {});});
Meteor.startup(function () {$.getScript('js/custom.js', function () {});});
... more code

As you can see Meteor.startup help me to load the js files. If I dont use Meteor.startup more erros in console

Next my files

As you can see I copy the files of my template wrapbootstrap into meteor directory /public. But the css are in /client/css

I hope someone can help. I know that the problem may is file structure, I not sure.

////////////////////////////////////////////////////////////////////

Is a good way to import files like this? Iam doing something wrong?
Exist other way? please need help, due I dont understand the ‘file structure’ documentation. I need a example
Thanks for your time and read


I'm having a very difficult time implementing a new theme I purchased with my Meteor app
#3

I think you’re facing similar issues to the author of this thread…I’m having a very difficult time implementing a new theme I purchased with my Meteor app


#4

Hello.
This is my progress about my problem.
I find a almost a definitive solution,
As you remember I was use Meteor.starup() like this:

Meteor.startup(function () {$.getScript('js/jquery-2.1.3.min.js', function () {});});

I find in stackoverflow a best way to import my js files, next I share you.:

client/main.js


.. more imports
import '../public/js/jquery.superslides.min.js';
import '../public/js/jquery.mb.YTPlayer.min.js';
import '../public/js/jquery.magnific-popup.min.js';
import '../public/js/owl.carousel.min.js';
import '../public/js/jquery.simple-text-rotator.min.js';
import '../public/js/imagesloaded.pkgd.js';
// import '../public/js/isotope.pkgd.min.js'; // COMENTED
// import '../public/js/packery-mode.pkgd.min.js'; // COMENTED
import '../public/js/appear.js';
import '../public/js/jquery.easing.1.3.js';
import '../public/js/wow.min.js';
import '../public/js/jqBootstrapValidation.js';
import '../public/js/jquery.fitvids.js';
import '../public/js/jquery.parallax-1.1.3.js';
import '../public/js/smoothscroll.js';
import '../public/js/contact.js';
import '../public/js/custom.js';

.. more code

Now this is my result:
The most of visual components are fine, menu, slider, fonts, footer, almost ist ok. BUT Only have a issue with isotope and their files isotope.pkgd.js and isotope.pkgd.min.js. This files for some reason these are causing conflict. If I import the console send me this mensaje:

I notice something:
When I instal Isotope with Admosphere Its no necesary import this files on my client/main.js.
Almost, almost could be fine with Admosphere, but no.

This is the result:

    1. The app load and menu, navbar etc its ok (windows left)
    1. The button and img are not good
    1. When I click in a one element (arrow green) the app It gets fixed (window right)
    1. When change the size of window next many errors it coming

So, I think that the problem remains in the way that I import, because with Meteor.starup() when it was do it good, everything well.

I need to change the way of I import this files?
You know some better way?
I share my post in stackoverflow here

Thanks for your time.