Rails 3. I installed compass and I started to modify application.html.haml to convert it from erb to haml.
So far, it does not work. When I refresh the page the layout do not get rendered. It just render the contents of the controllers' view (which is erb).
It is the first time I use Compass, so probably the code is wrong. My question is, where do I see the errors, warning, etc?
I use Passenger.
Edit:
The code is
!!! 5
%html
%head
= stylesheet_link_tag 'compiled/screen.css', :media => 'screen, projection'
= stylesheet_link_tag 'compiled/print.css', :media => 'print'
/[if IE]
= stylesheet_link_tag 'compiled/ie.css', :media => 'screen, projection'
%title
DaVinci - = yield(:title) || " Inicio"
= stylesheet_link_tag 'compiled/modern'
= javascript_include_tag :defaults
= csrf_meta_tag
%body
#header
.navlist
%ul
%li
= link_to 'Inicio', root_path
%li
= link_to 'Administrar', configuration_index_path
%li
= link_to 'Tareas', tasks_path
%li
= link_to 'Documentos', files_path
%li
= link_to 'Correo', emails_path
= yield(:nav)
#contents
= yield
Can I use Tabs instead of spaces?
Compass errors usually show up when you load the page. If the page loads fine, a second option is to view the HTML source of the page, click on the stylesheet loaded into the page, and see if an error is printed into the stylesheet itself. Finally, you can also precompile your sass sheets by running the command
compass watch .
in your root directory. Compilation errors will be written as the output of this command
Related
For exemple, i have something contoller_1 with index.html.irb, and i have something controller_2 with index2.html.irb, how to properly connect .css files to this html-documents. I want to connect separate files to index.html.irb (for exemple, index.css) and to index2.html.irb (for exemple, index2.css).
thank you!
You can use all stylesheets with:
<%= stylesheet_link_tag "application", :media => "all" %>
...or you may create a separate directory that will use your external stylesheet
asset::your_external_css::new_sytle
<%= stylesheet_link_tag "application", "your_external_css/new_style" %>
found in (app/views/layouts/application.html.erb)
I get a flash of my top navbar at the side of the page, in between pages. Being a new programmer, I was looking for a simple solution, and tried inserting the solution from How do I eliminate FOUC with Ruby on Rails? into my app/views/layouts/application.html.haml file, so now the header portion of that file looks like:
!!! 5
%html
%head
%title Title
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true
= javascript_include_tag 'application', 'data-turbolinks-track' => true
= csrf_meta_tags
%link{:rel => "stylesheet", :href => "//opensource.keycdn.com/fontawesome/4.6.1/font-awesome.min.css"}/
= csrf_meta_tags
:css
.fouc { display:none; }
:javascript
try {
var html=document.getElementByName("html");
document.addEventListener("DOMContentLoaded", function(event) { html.class=""; });
html.class="fouc";
} catch() {}
But this did not fix the problem. Can anyone put me onto the right track? (In my research, it seemed other solutions were criticized for not working in all circumstances.) This really destroys an otherwise great project - I hope someone can help!
Edit: FOUC is happening on Chrome but not on MS-Edge.
I am formatting videos with video_js gem. For example here how I print my videos:
.row
- #streams.each do |stream|
= videojs_rails sources: { mp4: stream.video}, setup: "{}", controls: true, width:"400", class: "col-md-10 col-md-offset-1"
Everything works fine as expected if I go to that page with a link. If I create button with link_to to that page, formatting gets disabled. I need to refresh page to make it look as expected. What's wrong with that? Any ideas?
Remove turbolinks gem from your Gemfile
Run bundle install
In app/views/layouts/application.html.haml set turbolinks to false like that:
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => false
= javascript_include_tag 'application', 'data-turbolinks-track' => false
or remove them.
Restart server
I would like to exclude a specific folder from assets/javascripts in my application.html.haml
The folder that I do not want to be included in my layout is mobile folder
Here's my layout:
%html(lang="en")
%head
%meta(charset="utf-8")
%meta(http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1")
%meta(name="viewport" content="width=device-width, initial-scale=1.0")
%title= content_for?(:title) ? yield(:title) : #user.name ? 'Niche | ' + #user.name : 'Niche'
= csrf_meta_tags
= analytics_init if Rails.env.production?
/ Le HTML5 shim, for IE6-8 support of HTML elements
/[if lt IE 9]
= javascript_include_tag "//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js"
= stylesheet_link_tag "application", :media => "all"
%body#profile
%section.persist-area
%header.global.profile
%div.container
%a.brand.pull-left{ :href => root_path }
.logo-niche
%nav.pull-right
= render 'layouts/menu'
.container-fluid#main
= yield :profile
/
Javascripts
\==================================================
/ Placed at the end of the document so the pages load faster
= javascript_include_tag "application"
= yield :javascript
In this snippet, I am getting all JS:
= javascript_include_tag "application"
But I want to get all JS except the folder named mobile
I tried the following workaround but did not work:
= javascript_include_tag "application", except: "mobile"
Sorry that was just a wild guess. There's no javascript_exclude_tag too as per the docs.
Any ideas? Thanks.
PS: I have a different layout for mobile, so that's why I really want to exclude that folder in desktop view. It's conflicting a lot of conflicts in my desktop view.
Change in application.js
//= require_tree
to
//= require_directory .
or
//= require_tree ./useful
So that, app/assets/javascripts/* files will be included and app/assets/javascripts/mobile/* wont be included.
I have two different sets of CSS files that I want to use for the same website hosted with heroku.
The first set of CSS files are the standard Twitter BootStrap CSS files converted to SASS.
The second set are custom settings for my application.
I have been able to get the look and feel right on my development server but when I upload it to heroku the output is just
<body>
<head>
</head>
</body>
Please help!
My site is configured as such:
http://imgur.com/S5Aoov1&V3RNQZ3&lSJqpCz&jdSfy82
My controlling layout file is:
doctype 5
html data-uuid=current_user.try(:id)
= render 'head'
= render 'third_party_scripts'
body class=controller_name
= render 'navbar'
= render partial: 'account/infobar'
.container
= render partial: 'flash', locals: { flash: flash }
= yield
I've duplicated this file and named it "_home.html.slim"
I've changed the contents to:
head
title = t('.title', default: 'My Winning Trade')
= stylesheet_link_tag 'home', media: 'all'
= stylesheet_link_tag 'justified-nav', media: 'all'
= stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Shanti|Open+Sans:400,700,800'
= javascript_include_tag 'jquery'
= csrf_meta_tags
The CSS for my landing pages are called home & justified-nav, based on the jumbotron example provided by twitter bootstrap. http://getbootstrap.com/examples/jumbotron/
Heroku Error logs after Asset Precompile:
2013-10-04T19:48:42.124903+00:00 app[web.1]: Completed 500 Internal Server Error in 384ms
2013-10-04T19:48:42.127966+00:00 app[web.1]: 3: = stylesheet_link_tag 'home', media: 'all'
2013-10-04T19:48:42.127966+00:00 app[web.1]:
2013-10-04T19:48:42.127966+00:00 app[web.1]: 1: head
2013-10-04T19:48:42.127966+00:00 app[web.1]: app/views/layouts/sessions.html.slim:3:in `_app_views_layouts_sessions_html_slim__3803347664834042281_69939052542640'
2013-10-04T19:48:42.127966+00:00 app[web.1]: 2: title = t('.title', default: 'My Winning Trade')
2013-10-04T19:48:42.128146+00:00 app[web.1]:
2013-10-04T19:48:42.127966+00:00 app[web.1]: ActionView::Template::Error (home.css isn't precompiled):
2013-10-04T19:48:42.127966+00:00 app[web.1]: 4: = stylesheet_link_tag 'justified-nav', media: 'all'
2013-10-04T19:48:42.127966+00:00 app[web.1]: 5: = stylesheet_link_tag 'http://fonts.googleapis.com/css?family=Shanti|Open+Sans:400,700,800'
2013-10-04T19:48:42.127966+00:00 app[web.1]: 6: = javascript_include_tag 'jquery'
2013-10-04T19:48:42.127966+00:00 app[web.1]: app/views/application/_home.html.slim:3:in `_app_views_application__home_html_slim___3730913017080964654_69939053460220'
2013-10-04T19:48:42.128146+00:00 app[web.1]:
I'm not sure I completely understand what you're asking. But it sounds like:
You have a single layout file.
You want to load a single set of stylesheets in one set of views
In another set of views, you want to additionally load a second stylesheet.
Is that correct? If so, couldn't you just do something like this in your layout:
doctype 5
html data-uuid=current_user.try(:id)
= render 'head'
= render 'head_foobar' if controller_name == 'foobar'
The issue ended up being the home.css file not compiling on the heroku server side.
By changing the production.rb file setting:
from:
config.assets.compile = false
to:
config.assets.compile = true
The layout configuration that #Manishie suggested worked!
Thank you everyone!