I thought I followed the directions, but maybe I missed something?
Gemfile:
gem 'foundation-rails'
ran bundle
ran rails g foundation:install
This added and made changes to:
views/layouts/application.html.erb
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= content_for?(:title) ? yield(:title) : "foundation-rails" %></title>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "vendor/modernizr" %>
<%= javascript_include_tag "application", 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
</head>
<body>
<%= yield %>
</body>
</html>
assets/stylesheets/application.css
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*= require foundation_and_overrides
*/
assets/stylesheets/foundation_and_overrides.scss
// -- snip --
// - - - - - - - - - - - - - - - - - - - - - - - - -
// $include-html-visibility-classes: $include-html-classes;
// $include-accessibility-classes: true;
// $include-table-visibility-classes: true;
// $include-legacy-visibility-classes: true;
#import 'foundation';
assets/javascripts/application.js
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .
$(function(){ $(document).foundation(); });
I have successfully seen buttons display correctly, but other things just refuse to display as expected. The first thing I looked at was the grid example, so i copied and pasted the source, but it didn't shade as the example. The spacing seems correct...
Then I tried accordian. I copied and pasted from the source code of the examples. It displayed the list bullets but didn't expand/contract.
Then I tried the top bar. I copied and pasted from the source code of the examples. It put a horizontal bar at the top, but the menu items are not inline.
Then I tried making a brand new rails project just to test foundation. I followed the same steps, and got the same results. (mumbles something about insanity...)
I've used foundation before, but apparently I'm missing something important.
$ rvm list
rvm rubies
=* ruby-2.2.1 [ x86_64 ]
# => - current
# =* - current && default
# * - default
$ rails -v
Rails 4.2.4
foundation-rails gem currently loads foundation 5, while the website has examples for foundation 6. It would appear that they are NOT compatible ;)
To test, see the documentation for foundation 5
Related
I created a style.css file in app/assets/stylesheets for my Ruby on Rails project. I added some styling and started up the server. I didn't put any <link href...> or stylesheet_link_tag anywhere in any html.erb file but every page had the css changes I wrote in style.css
Additionally, I now have to restart the server every time I make a change to the CSS in order to see those changes in the browser. Has anyone ran into this before? By the way, I am using action cable. I also don't have a public/assets folder.
application.js
require("#rails/ujs").start()
require("turbolinks").start()
require("#rails/activestorage").start()
require("channels")
require("jquery")
$(document).on('turbolinks:load', function () {
alert("Hello!");
})
application.css
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*= require_tree .
*= require_self
*/
style.css
table{
border-collapse: collapse;
}
table, th, td{
border: 1px solid black;
}
#left, #right {float:left}
#left {width: 30%;}
#right {width: 70%;}
How do I configure Jasmine in the Rails 6 environment (where Webpack replaces the asset pipeline for Javascript) so I can test the Javascript modules I've written for my app?
I installed the jasmine gem, ran rails generate jasmine:install, and edited jasmine.yml to point to the location of my Javascript source and specs.
The problem is that I can't use import/export statements. (For example, attempting to load my first module to test results in this error in Chrome: Uncaught SyntaxError: Unexpected token 'export')
From what I can tell, I need to set up Jasmine to use babel; but, I'm not having any luck finding instructions on how to do this in the new Rails 6 layout.
Yes, you're right. The main problem of jasmine-gem is that it doesn't pipe the spec through babel. Let me post the quickest solution to your problem and after that, I will think of the possible implementation of a similar approach in jasmine-gem.
The main idea is to pipe the specs through the rails webpack as long as it has all the required babel configurations.
Install jasmine-core since we will not use jasmine-gem in this solution
yarn add jasmine-core -D
Now create two additional webpack packs.
One is for Jasmine and will contain only Jasmine and the test runner
// app/javascript/packs/jasmine.js
import 'jasmine-core/lib/jasmine-core/jasmine.css'
import 'jasmine-core/lib/jasmine-core/jasmine-html.js'
import 'jasmine-core/lib/jasmine-core/boot.js'
import 'jasmine-core/images/jasmine_favicon.png'
And the second one for your application code and the specs
// app/javascript/packs/specs.js
// First load your regular JavaScript (copy all the JavaScript imports from your main pack).
let webpackContext = require.context('../javascripts', true, /\.js(\.erb)?$/)
for(let key of webpackContext.keys()) { webpackContext(key) }
// Then load the specs
let specsContext = require.context('../spec', true, /\.js(\.erb)?$/)
for(let key of specsContext.keys()) { specsContext(key) }
Pay attention to your '../javascripts' and '../spec' paths. For me it looked like '../../assets/javascripts' and '../../../spec' respectevly.
Then add the Webpack ProvidePlugin for Jasmine (add this code to config/webpack/environment.js)
// config/webpack/environment.js
const webpack = require('webpack')
environment.plugins.prepend('Provide', new webpack.ProvidePlugin({
jasmineRequire: 'jasmine-core/lib/jasmine-core/jasmine.js',
}))
Add Jasmine ranner page to your application
# config/routes.rb
Rails.application.routes.draw do
# ...
if Rails.env.development? || Rails.env.test?
get 'jasmine', to: 'jasmine#index'
end
end
# app/controllers/jasmine_controller.rb
class JasmineController < ApplicationController
layout false
def index
end
end
# app/views/jasmine/index.html.haml
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<%= stylesheet_pack_tag 'jasmine', :media => 'all' %>
</head>
<body>
<%= javascript_pack_tag 'jasmine' %>
<%= javascript_pack_tag 'specs' %>
</body>
</html>
Now your Jasmine should work on /jasmine route
This answer is prepared on the basis of this post, however, I've rechecked the instructions on ruby 2.6.3, rails 6.0.2, added appropriate changes to the recommendations and prove that this works.
Please, let me know if my answer was helpful for you or you need some additional information. However, I'm going to work on a solution that will succeed with jasmine gem or similar implementation.
I'm using wickedpdf to try to generate a nice looking pdf report. When using show_as_html: true to make sure everything looks right, the page looks great, it uses the correct template, and all content is loaded as they should. There are no reference errors or asset errors, those were corrected by creating a wickedpdf specific scss and js (see below):
However, when I set it up to disposition: 'attachment' for it to actually generate the pdf, it looks nothing like the page above and the result is a pdf that lacks formatting and with disjointed components across multiple pages. The graphs are also not rendering and show no data. It seems like it's not applying the correct bootstrap/custom css and it's not running the javascript files needed to create the layout as shown on the html view. Any ideas why this is happening? My understanding is using show_as_html: true would render the exact same page as it would look in the pdf and then creating the pdf would use those exact contents to create the pdf document. I've looked at all other wicked-pdf questions but I haven't found anything that helps.
Below is the current setup in the controller:
format.pdf do
render pdf: "#{#interest.name}",
template: "interests/pdf_export.html.erb",
layout: 'pdf.html', disposition: 'attachment',
title: "#{#interest.name}",
#default_header: true,
#default_footer: true,
header: { spacing: 10,
html: {
content: "interests/report_header",
layout: 'pdf.html', # optional, use 'pdf_plain' for a pdf_plain.html.pdf.erb file, defaults to main layout
}
},
viewport_size: '1280x1024',
#show_as_html: true,
javascript_delay: 10000,
enable_plugins: true,
page_size: 'A4'
end
Here is the pdf layout:
<!DOCTYPE html>
<html>
<head>
<title>PDF</title>
<%= wicked_pdf_stylesheet_link_tag 'wickedpdf' %>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/simple-line-icons/2.4.1/css/simple-line-icons.css">
<link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- JAVASCRIPT DEPENDENCIES ---->
<!-- jquery -->
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<!-- popper -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<!-- bootstrap -->
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src= "https://cdnjs.cloudflare.com/ajax/libs/feather-icons/4.19.0/feather.js"></script>
<%= wicked_pdf_javascript_include_tag 'wickedpdf'%>
</head>
<body>
<div class='container'>
<%= yield %>
</div>
</body>
</html>
wickedpdf.scss:
#import 'stack/bootstrap';
#import 'stack/fonts/flag-icon-css/css/flag-icon';
#import 'stack/vendors/extensions/pace';
#import 'stack/vendors/extensions/unslider';
#import 'stack/plugins/extensions/noui-slider';
#import "stack/bootstrap-extended";
#import "stack/colors";
#import "wickedpdf/components";
#import 'stack/core/menu/menu-types/vertical-menu';
#import 'stack/core/colors/palette-gradient';
#import 'style';
wickedpdf.js:
//= require stack/vendors/vendors.min
//= require stack/vendors/charts/raphael-min
//= require stack/vendors/charts/chart.min
//= require stack/vendors/charts/jquery.sparkline.min
//= require stack/vendors/extensions/unslider-min
//= require stack/vendors/extensions/wNumb
//= require stack/vendors/extensions/nouislider.min
//= require stack/vendors/extensions/jquery.steps.min
//= require stack/vendors/timeline/horizontal-timeline
//= require stack/vendors/tables/datatable/datatables.min
//= require stack/core/app-menu
//= require stack/core/app
//= require stack/scripts/pages/dashboard-ecommerce
//= require_tree ./common
//= stub ./common/subscriptions
My understanding is using show_as_html: true would render the exact same page as it would look in the pdf
This is a misunderstanding. I'm sorry it may have seemed that way from whatever documentation you read, but show_as_html: true will display the HTML that will be sent to wkhtmltopdf, however wkhtmltopdf is like a very old version of Chrome (around version 13, I think). It doesn't support flexbox and a lot of nice things like that, which I think newer versions of Bootstrap need. Probably some of your JS libraries, too.
That option is there to help you more rapidly develop and debug. It's a lot tougher to view-source on a PDF.
My advice would be to strip away all CSS and JS first, and try and get the most important part working (the charts), then implement the layout with tables or floats or fixed-width containers, then copy over the bits of CSS you need specifically for the styles shown on the page, and not all of Bootstrap.
If this is a page that does double duty (both format.html and format.pdf versions are served), I would suggest breaking the PDF out into it's own separate template, so HTML visitors still get the beautiful interactive webpage.
I am using the following gems:
gem 'therubyracer', platforms: :ruby
#gem "therubyracer"
gem "less-rails" #Sprockets (what Rails 3.1 uses for its asset pipeline) supports LESS
gem "twitter-bootstrap-rails"
and in asset pipeline this is the code
*
*= require_bootstrap_and_overrides
*= require_self
*= require_tree .
*/
and in bootstrap_and overrides file this is the code
#import "twitter/bootstrap/bootstrap";
// Set the correct sprite paths
#iconSpritePath: image-url("twitter/bootstrap/glyphicons-halflings.png");
#iconWhiteSpritePath: image-url("twitter/bootstrap/glyphicons-halflings-white.png");
// Set the Font Awesome (Font Awesome is default. You can disable by commenting below lines)
#fontAwesomeEotPath: font-url("fontawesome-webfont.eot");
#fontAwesomeEotPath_iefix: font-url("fontawesome-webfont.eot?#iefix");
#fontAwesomeWoffPath: font-url("fontawesome-webfont.woff");
#fontAwesomeTtfPath: font-url("fontawesome-webfont.ttf");
#fontAwesomeSvgPath: font-url("fontawesome-webfont.svg#fontawesomeregular");
// Font Awesome
//#import "fontawesome/font-awesome";
// Glyphicons
#import "twitter/bootstrap/glyphicons.less";
// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/customize.html#variables for their names and documentation
//
// Example:
// #link-color: #ff0000;
#import url(http://fonts.googleapis.com/css?family=Capriola);
and when i use the class <i class="fa fa-user"></i> like this glyphicon is showing. But for the class <i class="glyphicon glyphicon-user"></i
the glyphicon is not displaying the proper image.
Bootstrap is not being included in your asset pipeline correctly, try this workaround by importing from the CDN source instead of loading from an asset file:
Add this to the head section of your application.html.erb file in your views/layout folder:
FontAwesome icons:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" />
Glyphicon icons, which are packaged with the bootstrap minified CDN:
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
I would strongly suggest you to switch to https://github.com/twbs/bootstrap-sass and follow the guide there
I am trying to incorporate Polymer with Rails 4 using the polymer-rails and polymer-paper-rails Gems.
I seem to be having a lot of problems getting any elements to display in Firefox. After looking around and quite a lot of searching on Google, I have come to the conclusion that it must be an issue with my platfom.js file.
I have followed the instructions for installing both the aforementioned gems to the letter and really don't know what I'm doing wrong. The paper elements work perfectly in Google Chrome.
In my Firefox dev console I see the Message
"platform.js is not the first script on the page. See
http://www.polymer-project.org/docs/start/platform.html#setup for
details." platform.js:12".
This is what my application.js file looks like:
// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/sstephenson/sprockets#sprockets-directives) for details
// about supported directives.
//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .
//= require elements/ripple
//= require forms/select
$(function(){ $(document).foundation(); });
The section of my HTML looks like this:
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= content_for?(:title) ? yield(:title) : "foundation-rails" %></title>
<%= javascript_include_tag 'polymer/platform' %>
<%= stylesheet_link_tag "application" %>
<%= html_import_tag 'application'%>
<%= javascript_include_tag "vendor/modernizr" %>
<%= csrf_meta_tags %>
</head>
The platform.js documentation seem to be outdated (related to 0.5 version of Polymer)
For compatibility on browsers that do not fully support webcomponents you should include
//= require webcomponentsjs/webcomponents-lite
After that you should see the components in FF/Safari the same way you see in chrome