I am running in an issue setting up the activeadmin gem. It's running fine but the issue is that it's loading the assets required from activeadmin in my main layout view. I wonder how to make it import the CSS and JS files to the view only when accessing the admin path.
In advance thanks for the help
application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= render "shared/main_nav" %>
<%= yield %>
</body>
</html>
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
*/
there is also an active_admin.scss file in the same path of the application.css
The require_tree directive in a CSS manifest is requiring all stylesheets from the current directory.
So you can remove the require_tree and include only the files you want.
Related
This is what I have on my application.html.erb file.
<head>
<title>Software & Cia.</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolineks-track': 'reload' %>
<%= csrf_meta_tags %>
</head>
If I delete the application stylesheet_link_tag, bootstrap works just fine, but I want to add my own styling to some parts. Sorry for the noobish question, but tried to find a solution and can't get it working.
My application.scss is
#import "bootstrap-sprockets";
#import "boostrap";
My application.js is
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree . here
If you want to use Bootstrap in rails, it's a good way to use the bootstrap gem (same for jquery)
gem 'turbolinks', '~> 5'
gem 'bootstrap', '~> 4.1.1'
gem 'jquery-rails'
This way you keep your application <head> clean:
<head>
<title>Software & Cia.</title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
</head>
Now your assets/stylesheets folder can be organize like that:
stylesheets
|_ custom_folder
| |_ custom1.scss
| |_ custom2.scss
|
|_ application.scss
|_ another_custom.scss
And you import all these files, bootstrap included, in your application.scss:
#import "bootstrap";
#import "custom_folder/custom1";
#import "custom_folder/custom2";
#import "another_custom";
If you have multiple files inside a custom folder, you can even
create an index.scss where you import all your files and just import
"custom_folder/index" in application.scss
If you override some boostrap variables in a file, import this one before bootstrap
Using the polymer-rails gem with Rails 4.2 I am able to use the predefined polymer elements such as the paper element set and the iron element set.
However when I make my own elements they are not rendered.
E.g. I created an element with this command
rails g polymer:component testing
and I left it untouched
/app/assets/components/testing/testing.html looks like this:
<dom-module id="testing">
<link rel="stylesheet" href="testing.css" />
<template>
<h2>Testing</h2>
</template>
<script src="testing.js"></script>
</dom-module>
/app/assets/components/testing/testing.js looks like this:
Polymer({
is: "testing"
});
/app/assets/components/application.html.erb has this:
//= require polymer/polymer
//= require paper-styles/paper-styles
//= require iron-icons/iron-icons
//= require paper-tooltip/paper-tooltip
//= require easy-paper-tabs/easy-paper-tabs
//= require testing/testing
the <head> of /app/views/layouts/application.html.erb is this:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
<title><%= full_title(yield(:title)) %></title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= javascript_include_tag "https://www.google.com/jsapi", "chartkick" %>
<%= csrf_meta_tags %>
<%= favicon_link_tag %>
<%= html_import_tag 'application', 'data-turbolinks-track' => true %>
</head>
When I put the tag <testing></testing> into a view I expect to see the h2 heading "Testing", but I don't. Instead nothing is rendered there. When I inspect the page I just see the empty tag <testing></testing>.
What am I missing?
I've tried putting the <testing></testing> tag into different views
I've tried replacing <%= html_import_tag 'application', 'data-turbolinks-track' => true %> with <%= html_import_tag 'application' %> in /app/views/layouts/application.html.erb
I've tried putting the custom component into /vendor/assets/components/testing/ instead of /app/assets/components/testing/
For each thing I tried I restarted the server.
I noticed the console logged an error that said
Failed to execute 'registerElement' on 'Document': Registration failed for type 'testing'. The type name is invalid.
so I googled it and found that the web-components spec bizarrely requires all user-created elements to have a hyphen in their name! There's not much documentation about this - it's like secret knowledge.
Putting a hyphen in the name of the element fixes my problem.
I am new to rails and implementing a demo app. I have this code in my 'app/view/layout/applicatio.html.erb' file:
<%= stylesheet_link_tag "scaffold" %>
but when I run it and debug in my browser I see this path expands to:
<link href="/assets/scaffold.css" media="screen" rel="stylesheet" type="text/css">
I am not able to understand that from where this assets folder is coming into picture? this is also causing the problem in the loading of my stylesheets.
Read this stuff here.
http://guides.rubyonrails.org/asset_pipeline.html
In application.html.erb
<%= stylesheet_link_tag "application", :media => "all" %>
in the applications.css
*= require_tree .
This row means all .css file in app/assets/stylesheets will be included.
I'm trying to use Dojo Toolkit 1.8 instead JQuery in a Rails 3.2.8 web application, mainly due of the lack of a complete and visually uniform widget based on JQuery. Followed these steps:
Unzip dojo, dijit and dojox directories into app/assets/javascripts
Changed in application.js //= require_tree . to //= require_directory .
Edited application layout (Not unobtrusive yet... just to effect of testing)
views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title>Dojo</title>
<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application' %>
<%= stylesheet_link_tag '/assets/dijit/themes/claro/claro.css' %>
<%= javascript_include_tag "dojo/dojo", :'data-dojo-config' => 'async: true' %>
<%= csrf_meta_tags %>
</head>
<body class='claro'>
<%= yield %>
<script>
require(["dojo/parser", "dojo/ready"], function(parser, ready) {
ready(function() {
parser.parse();
});
});
</script>
</body>
</html>
Created a controller named home and a template to the index action
views/home/index.html.erb
<input type="text" required="true" name="bday" id="bday" data-dojo-type="dijit/form/DateTextBox" value=<%= localize(Date.today - 21.days) %> />
<button id="button1" type="button" data-dojo-type="dijit/form/Button">Button 1</button>
Ok, Dijit works nice! But when I try to put some dojo code within a CoffeeScript file (assets/javascripts/home.js.coffee), a "ReferenceError: require is not defined" error message is raised on Firebug console. Sample code:
require ["dojo/domReady!"], () ->
alert('ok')
If I put a //= require dojo/dojo before the code above, it runs, but all dojo modules are loaded (not just domReady) and a "Error: defineAlreadyDefined" is raised on Firebug.
Is there any way to call the require function without having to reload the entire dojo.js or even access a dojo global variable?
Thanks
It was a slip of mine, I swapped the javascripts inclusion order. The correct is:
<%= stylesheet_link_tag '/assets/dijit/themes/claro/claro.css' %>
<%= javascript_include_tag "dojo/dojo", :'data-dojo-config' => 'async: true' %>
<%= stylesheet_link_tag 'application' %>
<%= javascript_include_tag 'application' %>
Dojo wasn't loaded yet when I was trying to require modules within the coffeescript file.
Thank you for your attention.
Im just looking for a little clarity to better my understanding of the Rails asset pipeline. I have placed my stylesheets and javascripts within app/assets/javascripts and app/assets/stylesheets. Now i am trying to get these views to render on my page but so far nothing is showing.. I wanted to see if someone could confirm if the following looks correct
In my layouts/application i have
<%= stylesheet_link_tag "fullcalendar" %>
<%= stylesheet_link_tag "application" %>
<%= javascript_include_tag "jquery.js" %>
<%= javascript_include_tag "jquery.rest.js" %>
<%= javascript_include_tag "rails.js" %>
<%= javascript_include_tag "application.js" %>
<!-- these are needed for the calendar. -->
<%= javascript_include_tag "jquery-ui-1.8.11.custom.min.js" %>
<%= javascript_include_tag "fullcalendar.js" %>
<%= javascript_include_tag "calendar.js" %>
And my index.html.erb looks like
<html>
<head>
<link href="/stylesheets/fullcalendar.css" media="screen" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='/javascripts/jquery.js'></script>
<script type='text/javascript' src='/javascripts/fullcalendar.js'></script>
<script type='text/javascript' src='/javascripts/calendar.js'></script>
<script type='text/javascript' src='/javascripts/jquery-ui-1.8.9.custom.min.js'></script>
<script type='text/javascript' src='/javascripts/jquery.rest.js'></script>
Am I missing something or just being a real novice ( All constructive criticism welcome)
in Your layouts/application you just need this:
<%= javascript_include_tag "application" %>
<%= stylesheet_link_tag "application", media: "all" %>
and in app/assets/stylesheets/application.css
you just need:
*=require_self
*=require_tree .
and in app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require_tree .
And there's o need to include all the files
You'll have some problems in production if you include js files, to avoid it, you should add such files, ex: "fullcalendar.js" in config/production.rb, config.assets.precompile += %W(fullcalendar.js), and then run rake asset:precompile
You can see a quick overview in Ryan Bates Video: #279 Understanding the Asset Pipeline.
For more info go to the RailsGuide: Asset Pipeline.
Both helped me a lot.