I'm writing a rails application in a RTL language (right to left).
I'm using Less and Twitter Bootstrap for my front-end framework.
To have my site completely RTL I use the CSS files I downloaded and copied from rbootstrap:
http://rbootstrap.ir/
to assets/stylesheets
Everything works great RTL besides the nav-tabs that are still on the left side.
I tried playing with it a lot and this is what I found:
- If I delete the file bootstrap_and_overrides.css.less a lot of bootstrap's features don't work but the nav-tab does align perfectly to the right.
Every time I try to add something in my bootstrap_and_overrides.css.less I get the same error:
Unrecognised input
(in /home/bellonet/poligaffes/app/assets/stylesheets/bootstrap_and_overrides.css.less)
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.6.1/html5shiv.js" type="text/javascript"></script>
<![endif]-->
<%= stylesheet_link_tag "application", :media => "all" %>
<!-- For third-generation iPad with high-resolution Retina display: -->
<!-- Size should be 144 x 144 pixels -->
Only way it worked at the end, was using the original css and js files of rbootstrap directly without less.
That solved it.
Related
I'm trying to use Foundation in a pre-existing Rails 5 project, but none of the Foundation styling is actually loading.
I've been through the following steps:
Add gem 'foundation-rails' to the Gemfile
Bundle
Run rails g foundation:install from the command line, overriding application.html.erb (then pasting back the deleted codes, without overwriting any of the new lines)
Rename application.css to application.scss, since (inside the original multiline comment) I'm running *= require foundation_and_overrides
Restart server, reload pages with some foundation-specific html added, eg, in application.html.erb:
<div class="row">
<div class="large-4 columns">
Testing columns
</div>
<div class="large-8 columns">
<%= yield %>
</div>
</div>
But the layout is unchanged (ie, splodged into the top-left of the page).
I've checked that the foundation_and_overrides.scss file is getting successfully loaded by adding some test styles in there which are getting picked up - but nothing is coming through that I haven't added myself.
What might I be doing wrong? (I realise I haven't included much code in here, because I'm not sure where the error might be, so I don't want to do a huge code dump).
You need to rename that file to application.scss and add #import "foundation_and_overrides";
and in your app/assets/javascripts/application.js add //= require foundation
$(document).foundation();
I was having the same problem and the thing that fixed it for me was overriding the conflicted files. If you run rails g foundation:install and it gives you the option to override the conflicting file (foundation_and_overrides.scss), accept it. This will load in the new file and once you restart your server, you should be good to go. Bare in mind however, this will override both foundation_and_overrides.scss and application.html.erb.
My problem stemmed from the fact that I was trying to use the same old files I was using with Rails 4, and for whatever reason, it broke when I upgraded to Rails 5.
So to summarize quickly:
Repeat steps 1-3 you listed above
Change application.css to application.scss
When prompted, override the conflicted files
Restart your server
I am doing my first project in Foundation 6 and am having trouble getting the responsive navigation to work. I started with the basic page template that comes with Foundation (installed F6 using CodeKit) then I pasted in the responsive menu code exactly as it appears here http://foundation.zurb.com/sites/docs/responsive-navigation.html#responsive-toggle but when viewed at small screen sizes, the word "menu" appears, but clicking it does nothing.
The Drilldown responsive menu also does not work -- pasted in the drilldown menu code (second example down, on the page referenced above) and what appears is a long long list of links, nothing is collapsed and nothing slides in. There must be a script missing but I have triple-checked and app.js, foundation.js and jquery scripts are loaded. What else am I missing?
First of all sorry for my bad English, did you initialize foundation's javascript?
That can be done with the following code in youre custom javascript file:
$(document).foundation();
I do it with jQuery like this:
$(document).ready(function() {
$(document).foundation();
});
for more information see: Foundation-6 documentation - initializing
and please check if you have the proper file structure for the foundation files, please see the following documentation: Foundation-6 documentation - File Structure
tl;dr: Faulty purifycss configuartion in the gulp.babel.js file.
I also had this problem. My setup:
generator-webapp
webapp's jade recipe
I can get the responsive dropdown menu to work by using the tab and enter key. This means that the relevant js files are being loaded correctly. The navigation 'burger' also does not appear.
Upon using the chrome dev tools to inspect the responsive dropdown menu example from the foundation website, I noticed that style of <button class="menu-icon" type="button" data-toggle=""></button> is being effected by the .menu-icon CSS rule from the scss partial, _menu-icon.scss. Mine wasn't. When I looked, the foundation.scss file from the app/ has the exact same style rule. The converted foundation.css was being served from the .tmp/ folder, but did not have the .menu-icon CSS rule. Then I suspected purifycss again (which I had commented out of the gulp file before and forgot to reset the gulp serve, saw no fix and thus falsely excluded the purifycss rule from the list of suspects).
I set my gulp styles task up like this:
gulp.task('styles', () => {
return gulp.src('app/styles/*.scss')
.pipe($.plumber())
.pipe($.sourcemaps.init())
.pipe($.sass.sync({
outputStyle: 'expanded',
precision: 10,
includePaths: ['.']
}).on('error', $.sass.logError))
.pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
/*Stupidly assumed that purifycss supported jade files as src files*/
.pipe($.purifycss(['app/**/*.js', 'app/*.jade']))
.pipe($.sourcemaps.write())
.pipe(gulp.dest('.tmp/styles'))
.pipe(reload({stream: true}));
});
Which meant that the necessary styles were being deleted (including .menu-icon). I think I will use stylperjade or rearrange the tasks so that I can do this: .pipe($.purifycss(['app/**/*.js', '.tmp/*.jade']))\
Let me know if this was your solution as well
Up until recently I was including the file...
https://raw.githubusercontent.com/rwjblue/ember-qunit-builds/master/dist/globals/main.js
...in a 'TestRunner' page which I would open to run all of my Ember unit tests. All was great.
A few days ago, that file disappeared from github, so I started searching for the new way get my unit tests (e.g. moduleForComponent tests) running.
I first tried to simply include the ember-qunit.js file from the ember-qunit-builds repo, but errors like could not find module 'ember' came back.
Am I correct in saying that ember-qunit somehow depends on ember-test-helpers? I'm a bit lost as to which references I should be including before my test code...I have a feeling that I'm missing something related to ES6-style modules (export/import etc) with which I have little experience.
Could somebody perhaps point me in the right direction here? What should I be including on my 'TestRunner.html' page to get the 'moduleForComponent'-style tests happening again?
Note: I'm in a .NET environment where I understand that the frequently-mentioned tools for 'installing' this stuff (like Bower/npm) are not really available (are these a necessity for getting this to work?).
I'm not really sure where your problem is, but I can paste you relevant parts of my index.html (I'm using Ember App Kit here):
<!-- #if tests=true -->
<script src="/vendor/ember-shim.js"></script>
<link rel="stylesheet" href="/vendor/qunit/qunit/qunit.css">
<script src="/vendor/qunit/qunit/qunit.js"></script>
<script src="/vendor/qunit-shim.js"></script>
<script src="/vendor/ember-qunit/dist/named-amd/main.js"></script>
<div id="qunit"></div>
<!-- #endif -->
and
<!-- #if tests=true -->
<div id="qunit-fixture"></div>
<script src="/tests/tests.js"></script>
<script src="/tests/test-helper.js"></script>
<script src="/tests/test-loader.js"></script>
<script src="/testem.js"></script>
<!-- #endif -->
If you're looking particularly for the dist/globals/main.js file, then you can always go to github and select an older tag (not master), then go to the file's raw version. Here's the link to the 0.1.8 version:
https://raw.githubusercontent.com/rwjblue/ember-qunit/v0.1.8/dist/globals/main.js
If you want to stay up-to-date, use this repo:
https://github.com/rwjblue/ember-qunit-builds
Does this provide any help?
If this seems not-so-helpful (Noting the 'too localized' close votes), then please tell me why. I think Django and JQuery UI make a pretty good team so it's worth working out any gotchas about using them. The answer to this question is not something I've found documented or in another question and is relevant to use of other widgets in other places.
And on to the question...
I have a django project in development mode. Inside its static directory I have the following file structure:
directory: js
jquery-1.9.1.js
jquery-ui-1.10.1.custom.js
other_stuff.js
directory: css
directory: ui-lightness
directory: images
jquery-ui-1.10.1.custom.css
jquery-ui-1.10.1.custom.min.css
I'm trying to get the datepicker to work on one of my forms:
In my html head I have:
<link type="text/css" rel="stylesheet" href="/static/css/ui-lightness/jquery-ui-1.10.1.custom.css"/>
<script src="/static/js/jquery-1.9.1.js" type="text/javascript"></script>
<script src="/static/js/jquery-ui-1.10.1.custom.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#id_date_of_birth").datepicker();
});
</script>
And the input I am trying to change looks like:
<input type="text" size="10" id="id_date_of_birth" class="vDateField" value="1987-01-19" name="date_of_birth"/>
Now I know this question has been asked like a billion times before but none of the listed solutions I have read so far seem to work...Can anybody hazard a guess as to why I am getting the error$(...).datepicker is not a function ?
Stuff I've considered:
Everything seems to be included in the correct order. Other solutions mention including jquery ui's ...core.js but I think everything is included in jquery-ui-1.10.1.custom.js because otherwise the jquery ui download page is very misleading (I chose to download every component and there is no effect)
No other errors came up except the one I mentioned. All scripts loaded correctly
Nothing is included more than once
I'm waiting until the document is ready before calling anything at all so my problem is not due to bad timing
If the directory structure you listed is accurate, your jquery files do not end with ".js", while your references to those files do have ".js" in the page header. Add the ".js" extension to your jquery files and it should work.
you should also close your input element:
<input type="text" size="10" id="id_date_of_birth" class="vDateField" value="1987-01-19" name="date_of_birth" **/**>
For some reason the link wanted a separate closing tag...
<link type="text/css" rel="stylesheet" href="/static/css/ui-lightness/jquery-ui-1.10.1.custom.css"><link/>
This happened to me several times.
What i did was to copy the whole code (script) and placed it in the parent view.
If you're trying to place the script in a partial it may not work, try to put it in a higher level until you get the job done.
One example in django-oscar i had to place the script in the basket.html template to make it work in here:
{% include 'basket/partials/basket_content.html' %}
What’s the best way to keep related files together in Django?
In addition to our HTML templates, most views have at least one additional JavaScript file, and possibly an additional CSS file. For example:
item_detail.html
item_detail.js
item_detail.css
We want to keep these files side-by-side if possible, so we don't have to look in two or three directories to find them.
Update: I do know that it’s dumb to defeat caching and that’s not what I’m asking. Each page loads several JavaScript and CSS items that are properly cached. For example:
<!-- at top of file -->
<link rel="stylesheet" href="/master/css/site-main.css">
<!-- at bottom of file -->
<script type="text/javascript" src="/master/js/jquery.js"></script>
<script type="text/javascript" src="/master/js/site-main.js"></script>
That part is fine.
In addition to this, each page loads page-specific JavaScript and CSS:
<link rel="stylesheet" href="/static/css/widgets/item_detail.css">
<script type="text/javascript" src="/static/js/widgets/item_detail.js"></script>
In this example, item_detail.js would have event handlers that are needed on the item detail page (only).
Unfortunately this means that I now have several parallel directory structures for this view:
my_site
widgets
item_detail.html ← This is the view
static
css
item_detail.css ← This is the view-specific CSS
js
item_detail.js ← This is the view-specific JavaScript
What I want is this:
my_site
widgets
item_detail.html ← This is the view
item_detail.css ← This is the view-specific CSS
item_detail.js ← This is the view-specific JavaScript
Due to the way views work in Django, it’s not clear to me that this is possible.
If you are just organizing stuff for development, you can symlink you template dir with all template, css and js files to directory you are serving static files too.
So from your example: add my_site/widgets to Django TEMPLATE_DIRS config and cp -s my_site/widgets to directory you have your static files in.
This is dirty hack and, please, don't use it in production as it is very insecure IMHO. But if you want to have neatly organized project in development stage - then I see this as one possible solution.
And also consider that this might give you loads of headache when you move from development to production as stuff WILL fail.
I agree with freiksenet. A solution to the problem he adresses could be aggregating the various css and js files. The whole site then uses just one css and one js file. The first load would be higher, yes, but a big part of the speed of a site is in downloading files, and if caching is done right, aggregation of these files helps imho.
I unfortunately don't have an answer to your main question.
I keep javascript in files separated by function and combine them into a single minified js file with a pre-commit hook (right after the tests run).
for example: I have several jquery-ui dialogs on the site I'm currently working on. Each dialog's functionality is broken off into it's own js file for maintainability. And all the needed js files are "included" on the development pages using a short base.js file like so:
function include(filename) {
document.write(unescape("%3Cscript src='" + filename + "' type='text/javascript'%3E%3C/script%3E"));
}
// include-js (external)
include('/site_media/jquery-plugin1.js');
include('/site_media/js-sources/dialog1.js');
my pre-commit hook does a regex on this file...
include\('/site_media/(.*)'\);
and feeds all the files into YUI compressor.
So I guess the answer to your question is... I put them wherever makes sense to me logically, because on the live site, it'll all be in the minified JS file(s) anyway
You don't want to have your templates available as static files -- they may contain sensitive information or details about the page's implementation which are not appropriate for the public to see.
CSS and JS do not have to be segregated into separate directories -- simply place them in the static/ directory.
my_site/
widgets/
item_detail.html
static/
item_detail.css
item_detail.js
One approach I’m testing:
my_site/
widgets/
item_detail.html
item_detail.css
item_detail.js
These are not shared statically. Instead, in the HTML template:
<script type="text/javascript" charset="utf-8">
{% include "widgets/item_detail.js" %}
</script>
(Similar code for CSS.) I would only do this for page-specific JavaScript and CSS, not site-wide stuff that can benefit from caching.
This dumps the actual JavaScript and/or CSS right into the template, yet allows me to keep them in separate files for development purposes. This is nice, development-wise but defeats some JavaScript and CSS caching, but only for page-level stuff that’s not re-used on any other page.