Foundation 5 - Rails 4 css topbar not working - ruby-on-rails

I am having an issue with foundation 5, rails 4.1.0, as per screenshot, links are underlined, search box is off.
I have created a separate dummy rails app with the same spec and don't see the same issue
I've tried without turbolinks, and different topbar configurations.
any ideas where to troubleshoot this?
Screenshot:
http://postimg.org/image/ohtwc60rj/
application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require foundation
//= require_tree .
$(function() {
$(document).foundation();
});
`
application.css.scss
*= require_tree .
*= require_self
*/
gemfile
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.0'
# Use sqlite3 as the database for Active Record
#gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
gem 'foundation-rails'
gem 'rails_12factor'
gem 'activeadmin', github: 'gregbell/active_admin'
group :doc do
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', require: false
end
group :development do
#gem 'sqlite3'
gem 'rspec-rails'
gem 'guard-rspec'
gem 'slop'
gem 'guard-livereload', require: false
gem 'jazz_hands'
end
gem 'pg', '0.17.1'
group :test do
gem 'rspec-rails'
gem 'capybara'
gem 'rb-fsevent', :require => false
gem 'growl'
gem 'guard-spork', :github => 'guard/guard-spork'
gem 'spork', :github => 'sporkrb/spork'
end
#Server monitoring
gem 'newrelic_rpm'

Found that active admin was conflicting. commented out active_admin.css.scss resolved the issue. That put me in the right direction
Fix from Foundation when using active admin http://foundation.zurb.com/forum/posts/1359-foundation-5-impacted-by-active-admin-on-rails-4

Related

ActionView::Template::Error (couldn't find file )

I've updated my app to rails 5.1 and spree to spree 3.5 this caused several problems with the latest being.
ActionView::Template::Error (couldn't find file 'jquery.validate/jquery.validate.min' with type 'application/javascript'
I've tried installing the gems like gem 'jquery-rails' gem 'rails-ujs,'~> 0.1.0' gem "jquery-ui-rails" gem 'jquery-validation-rails' and even added the files to my JavaScript folder.
Still no succes.
Anyone know the cause of the problem and how to solve it?
gemfile
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails'
# Use sqlite3 as the database for Active Record
# gem 'sqlite3'
gem 'pg', '< 1'
# Use SCSS for stylesheets
gem 'sass-rails'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails'
# See https://github.com/rails/execjs#readme for more supported runtimes
gem 'therubyracer', platforms: :ruby
gem 'truncate_html', '~> 0.9.3'
# Use jquery as the JavaScript library
gem 'jquery-rails'
gem 'rails-ujs', '~> 0.1.0'
gem "jquery-ui-rails"
gem 'jquery-validation-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', group: :doc
gem 'rake'
gem 'rspec'
gem 'kramdown'
gem 'thor', '0.19.1'
gem 'spree_braintree_vzero', github: 'spree-contrib/spree_braintree_vzero'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug'
gem 'capistrano-passenger'
gem 'capistrano-rails'
gem 'capistrano-rvm'
end
group :development do
# Access an IRB console on exception pages or by using <%= console %> in views
gem 'web-console', '~> 2.0'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
end
gem 'spree', '~> 3.5.0.rc2'
gem 'spree_auth_devise', '~> 3.3'
gem 'spree_gateway', '~> 3.3'
gem 'devise'
gem 'materialize-sass'
gem 'active_link_to'
#gem 'mollie-api-ruby', '< 3.2'
# gem 'spree_mollie', github: 'salman15/mollie_spree_2017', branch: 'stable'
#gem 'spree_mollie', github: 'ttcremers/spree_mollie', branch: 'stable'
gem 'spree_mail_settings', github: 'spree-contrib/spree_mail_settings'
# gem 'spree_i18n', github: 'spree-contrib/spree_i18n'
# gem 'spree_globalize', github: 'spree-contrib/spree_globalize', branch: 'master'
gem "mini_magick"
gem 'spree_mollie_gateway'
# gem 'rails-i18n', github: 'svenfuchs/rails-i18n', branch: 'rails-4-x' # For 4.x
# gem 'globalize', '~> 5.1.0'
all.js/application.js
// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require jquery
//= require jquery_ujs
//= require jquery.validate
//= require spree/frontend
//= require_tree .
//= require spree/frontend/spree_auth
//= require spree/frontend/spree_braintree_vzero
This fixed the problem for me: I just removed the line
//= require jquery.validate/jquery.validate.min
from frontend.js

Why am I getting *unmatched OUTDENT* in this haml template in Rails 4.2 application?

I've been playing with react-rails gem and so I made a sample application with haml. When I do rails s and go to my sample route, I see the attached error coming from application.html.haml, the standard layout/application.html.haml view in Rails 4.2. If I remove stylesheet_link_tag and javascript_include_tag the Rails view renders fine. What could be causing it? Below are the relevant files. There is also a sample.coffee file but I can't imagine that has anything to do with it since as soon as I remove the *_tag helpers the Rails view renders without error.
application.js.coffee
# 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 react
#= require react_ujs
#= require components
#= require_tree .
application.html.haml
!!!
%html
%head
%meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/
%title SampleApp
= stylesheet_link_tag 'application', media: 'all'
= javascript_include_tag 'application'
= csrf_meta_tags
%body
= yield
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
*/
Gemfile
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 4.2.5'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
gem 'react-rails', '~> 1.6.0'
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug'
end
group :development do
# Access an IRB console on exception pages or by using <%= console %> in views
gem 'web-console', '~> 2.0'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
end
gem 'httparty'
gem 'haml-rails'
gem 'annotate'
gem 'figaro'
gem 'pundit'
gem 'lol_dba', require: false
gem 'foreman'
gem 'newrelic_rpm'
group :development do
gem 'sextant'
gem 'awesome_print', require: false
gem 'hirb', require: false
gem 'bullet'
gem 'flog', require: false
gem 'flay', require: false
gem 'reek', require: false
gem 'derailed'
gem 'stackprof'
gem 'sandi_meter'
gem 'rubocop', require: false
end
group :development, :test do
gem 'spring-commands-rspec'
gem 'rspec-rails'
gem 'guard-rspec'
gem 'pry'
end
group :test do
gem 'factory_girl_rails'
gem 'capybara'
gem 'database_cleaner'
gem 'launchy'
gem 'codeclimate-test-reporter', require: nil
gem 'shoulda-matchers', require: false
end
group :production, :staging do
gem 'rails_12factor'
gem 'puma'
end

Deploy masonry in Heroku

Good day,
I made an app with masonry and js.coffee to make something like "pins" in my app, but when I deploy to Heroku don't work like suppose to do.
This is my gem file
source 'https://rubygems.org'
ruby '2.1.4'
gem 'binding_of_caller'
gem 'masonry-rails', '~> 0.2.0'
gem 'haml'
gem 'high_voltage', '~> 2.3.0'
gem 'activevalidators'
gem 'paperclip', github: 'thoughtbot/paperclip'
gem 'simple_form', '~>3.0.2'
gem 'acts_as_votable'
gem 'bootstrap-sass'
gem 'devise', '~> 3.4.0'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.1'
# Use sqlite3 as the database for Active Record
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :assets do
gem 'therubyracer'
gem 'less-rails'
gem 'twitter-bootstrap-rails'
gem 'libv8'
end
group :production do
gem 'pg'
gem 'rails_12factor'
end
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug'
gem 'sqlite3'
# Access an IRB console on exception pages or by using <%= console %> in views
gem 'web-console', '~> 2.0'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
end
My 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 bootstrap
//= require bootstrap-sprockets
//= require masonry/jquery.masonry
//= require turbolinks
//= require_tree .
My js.coffee to show pins
# Place all the behaviors and hooks related to the matching controller here.
# All this logic will automatically be available in application.js.
# You can use CoffeeScript in this file: http://coffeescript.org/
$ ->
$('#pins').imagesLoaded ->
$('#pins').masonry
itemSelector: '.box'
isFitWidth: true
My index for pins
- content_for :board do
= javascript_include_tag 'application', 'data-turbolinks-track' => true
#pins.transitions-enabled
- #pins.each do |pin|
.box.panel.panel-default
= link_to (image_tag pin.image.url), pin
%h2
= link_to pin.title, pin
%p.user
Ofertado por
= pin.user.name
%p.price
$
= pin.price
Am I doing something wrong?
If it works well under development and won't work upon deployment in heroku, you might have mistakenly configured your database.yml under config.
production:
adapter: postgresql
encoding: utf8
database: (copy database name from your heroku database info)
username: (copy username from your heroku database info)
password: TV9ncj-HR1FqNFihKm6zlsHhxU
host: (copy host from your heroku database info)
sslmode: require
and don't forget to do the rake db:migrate
if this is not the answer you were looking for, this might still be a little useful for you, if not now, maybe in the near future as you go along with your code.

Trouble Installing Bootstrap on Rails

I am trying to install Bootstrap on Rails but can't seem to get it installed. I have ran bundle install , bundle update and rails server but just can't seem to get it to work.
Here is the error code:
File to import not found or unreadable: bootstrap.
Load paths:
c:/Users/teddynuts/Desktop/pinteresting/app/assets/images
c:/Users/teddynuts/Desktop/pinteresting/app/assets/javascripts
c:/Users/teddynuts/Desktop/pinteresting/app/assets/stylesheets
c:/Users/teddynuts/Desktop/pinteresting/vendor/assets/javascripts
c:/Users/teddynuts/Desktop/pinteresting/vendor/assets/stylesheets
c:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/turbolinks-2.2.2/lib/assets/javascripts c:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/jquery-rails-3.1.0/vendor/assets/javascripts
c:/RailsInstaller/Ruby2.0.0/lib/ruby/gems/2.0.0/gems/coffee-rails-4.0.1/lib/assets/javascripts
(in c:/Users/teddynuts/Desktop/pinteresting/app/assets/stylesheets/bootstrap_and_customization.css.scss:1)
My CSS file titled bootstrap_and_customization.css.scss code is:
#import "bootstrap";
My Gem file code is:
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.1.0'
# Use sqlite3 as the database for Active Record
gem 'sqlite3'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 4.0.3'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .js.coffee assets and views
gem 'coffee-rails', '~> 4.0.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0'
gem 'bootstrap-sass',
group: :doc
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
# Use debugger
# gem 'debugger', group: [:development, :test]
# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin]
You need to assign something to your "group". What goes into group :doc ?
I see that you are taking the One Month Rails Tutorial, so the gemfile for the Lesson (Until bootstrap) should be this:
source 'https://rubygems.org'
gem 'rails', '4.1.0'
gem 'sass-rails', '~> 4.0.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.0.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jquery-turbolinks'
gem 'jbuilder', '~> 1.2'
gem 'bootstrap-sass', '~> 3.1.1'
# Gems for Local Development
group :development, :test do
gem 'sqlite3'
end
# Gems for Heroku
group :production do
gem 'pg'
gem 'rails_12factor'
end
group :doc do
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', require: false
end
Official Sass port of Bootstrap
Sometimes when you are stuck just give the Official Repo a look.
The problem is here:
gem 'bootstrap-sass',
group: :doc
It may not be obvious, but it's one statement. In fact, it's interpreted like this:
gem 'bootstrap-sass', { :group => :doc }
...and therefore the specified gem is only available during docs generation. And the solution for this exact issue is to replace the above with:
gem 'bootstrap-sass'
However, since you're on Windows (if it's x64, which is likely), you may run into other issues, like this one.
Try bootstrap-sass-rails instead. It works in the asset pipeline. https://github.com/yabawock/bootstrap-sass-rails

Action Controller: Exception caught - turbolinks issue?

I am following Michael Hartl's Rails guide, and when I load localhost:3000 I get the following error messages in the browser:
Sprockets::FileNotFound in Static_pages#home
Showing /home/jonathan/Desktop/railsTut/sample_app/app/views/layouts/application.html.erb where line #6 raised:
couldn't find file 'turbolinks'
(in /home/jonathan/Desktop/railsTut/sample_app/app/assets/javascripts/application.js:16)
This is my file from the aformentioned message
// 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
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require bootstrap
//= require turbolinks
//= require_tree .
also, I am not sure if it is related, but here is my Gemfile:
source 'https://rubygems.org'
gem 'rails', '3.2.13'
gem 'bootstrap-sass', '2.1'
gem 'bcrypt-ruby', '3.0.1'
gem 'faker', '1.0.1'
gem 'will_paginate', '3.0.3'
gem 'bootstrap-will_paginate', '0.0.6'
gem 'jquery-rails', '2.0.2'
group :development, :test do
gem 'sqlite3', '1.3.5'
gem 'rspec-rails', '2.11.0'
# gem 'guard-rspec', '1.2.1'
# gem 'guard-spork', '1.2.0'
# gem 'childprocess', '0.3.6'
# gem 'spork', '0.9.2'
end
# Gems used only for assets and not required
# in production environments by default.
group :assets do
gem 'sass-rails', '3.2.5'
gem 'coffee-rails', '3.2.2'
gem 'uglifier', '1.2.3'
end
group :development do
gem 'annotate', '2.5.0'
end
group :test do
gem 'capybara', '1.1.2'
gem 'factory_girl_rails', '4.2.1'
gem 'cucumber-rails', '1.2.1', :require => false
gem 'database_cleaner', '0.7.0'
# gem 'launchy', '2.1.0'
# gem 'rb-fsevent', '0.9.1', :require => false
# gem 'growl', '1.0.3'
end
group :production do
gem 'pg', '0.12.2'
end
Any help is much appreciated!
As I see, you dont have 'turbolinks' in your gemfile... just add it! :
Add gem 'turbolinks' to your Gemfile.
Run bundle install.
Add //= require turbolinks to your Javascript manifest file (usually
found at app/assets/javascripts/application.js).
Restart your
server, and you're now using turbolinks!
As RomanDev said just remove it, unless like me you were trying to get ride of turbolinks.
In which case remove //= require turbolinks from your application.js file.
It took me way too long to realize that adding turbolinks to the gemfile would fix this. I'm also going through Hartl's tutorial as a beginner (obviously).

Resources