mardi 28 juin 2016

Metronic Theme with Ruby on Rails: Webpage is not rendered properly

New to rails. All rights to bash me if this is silly or stupid. I have done the following steps but still the local host looks like this: enter image description here

I have done the following: 1) Downloaded Metronic Admin Theme 2) Manually added the required css and js to appropriate folders in my app 3) Made changes to html file to satisfy it to be html.erb 4) Pasted a copy of entire theme to vendor/assets folder of my rails app 5) My application.js file is :

//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-sprockets
//= require jquery.turbolinks
//= require_tree .

6)Modified my html to as follows:

 <head>
    <title>Metronic | Blank Page Layout</title>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => 'reload' %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => 'reload' %>

    <%= csrf_meta_tags %>   
        <meta charset="utf-8" />

        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta content="width=device-width, initial-scale=1" name="viewport" />
        <meta content="" name="description" />
        <meta content="" name="author" />


  <script type="text/javascript" src="http://ift.tt/1jAc4pg"></script>
    <script type="text/javascript" src="http://ift.tt/1yCEpkO"></script>


        <!-- BEGIN GLOBAL MANDATORY STYLES -->
        <link href="http://ift.tt/1gelRyP" rel="stylesheet" type="text/css" />
        <link href="/assets/stylesheets/font-awesome.min.css" rel="stylesheet" type="text/css" />
        <link href="/assets/stylesheets/simple-line-icons.min.css" rel="stylesheet" type="text/css" />
        <link href="/assets/stylesheets/bootstrap.min.css" rel="stylesheet" type="text/css" />
        <link href="/assets/stylesheets/bootstrap-switch.min.css" rel="stylesheet" type="text/css" />

7) My application.css.scss is as follows:

@import "bootstrap-sprockets";
@import "bootstrap";


/*
 * This is a manifest file that'll automatically include all the     stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.

*= require bootstrap
*= require_tree 
*= require_self

The actual page should ideally look like this:enter image description here

I use ruby 2.3.0 and rails 4.2.6 All help appreciated.

Aucun commentaire:

Enregistrer un commentaire