Starting a new rails project using foundation. I have successfully used it before, but for some reason it is not working for me today :(
Here are the steps I went through:
rails new fndtn
cd fndtn
added gem 'foundation-rails' to my Gemfile
bundle install
Resolving dependencies...
Using rake 10.4.2
Using i18n 0.7.0
Using json 1.8.3
Using minitest 5.7.0
Using thread_safe 0.3.5
Using tzinfo 1.2.2
Using activesupport 4.2.1
Using builder 3.2.2
Using erubis 2.7.0
Using mini_portile 0.6.2
Using nokogiri 1.6.6.2
Using rails-deprecated_sanitizer 1.0.3
Using rails-dom-testing 1.0.6
Using loofah 2.0.2
Using rails-html-sanitizer 1.0.2
Using actionview 4.2.1
Using rack 1.6.4
Using rack-test 0.6.3
Using actionpack 4.2.1
Using globalid 0.3.5
Using activejob 4.2.1
Using mime-types 2.6.1
Using mail 2.6.3
Using actionmailer 4.2.1
Using activemodel 4.2.1
Using arel 6.0.2
Using activerecord 4.2.1
Using debug_inspector 0.0.2
Using binding_of_caller 0.7.2
Using bundler 1.10.4
Using columnize 0.9.0
Using byebug 5.0.0
Using coffee-script-source 1.9.1.1
Using execjs 2.5.2
Using coffee-script 2.4.1
Using thor 0.19.1
Using railties 4.2.1
Using coffee-rails 4.1.0
Using sass 3.4.16
Using foundation-rails 5.3.0.1
Using multi_json 1.11.2
Using jbuilder 2.3.1
Using jquery-rails 4.0.4
Using sprockets 3.2.0
Using sprockets-rails 2.3.2
Using rails 4.2.1
Using rdoc 4.2.0
Using tilt 1.4.1
Using sass-rails 5.0.3
Using sdoc 0.4.1
Using spring 1.3.6
Using sqlite3 1.3.10
Using turbolinks 2.5.3
Using uglifier 2.7.1
Using web-console 2.2.1
Bundle complete! 13 Gemfile dependencies, 55 gems now installed.
Use `bundle show [gemname]` to see where a bundled gem is installed.
Ran the generator:
rails g foundation:install
insert app/assets/javascripts/application.js
append app/assets/javascripts/application.js
create app/assets/stylesheets/foundation_and_overrides.scss
append app/assets/stylesheets/foundation_and_overrides.scss
insert app/assets/stylesheets/application.css
conflict app/views/layouts/application.html.erb
Overwrite /home/tim/git/fndtn/app/views/layouts/application.html.erb? (enter "h" for help) [Ynaqdh] y
force app/views/layouts/application.html.erb
Next, I needed a page to demonstrate that it is working, so I copied a known good page and displayed it thus:
config/routes.rb
root 'home#index'
controller/home/homecontroller.rb
class HomeController < ApplicationController
def index
end
end
view/home/index.html.erb
<h1>Sample Content</h1>
<dl class="accordion" data-accordion>
<dd class="accordion-navigation">
Accordion 1
<div id="panel1b" class="content active">
Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</dd>
<dd class="accordion-navigation">
Accordion 2
<div id="panel2b" class="content">
Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</dd>
<dd class="accordion-navigation">
Accordion 3
<div id="panel3b" class="content">
Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</dd>
</dl>
fire up the server,
rails s
...and the page shows no css goodness. :(
So, are the stylesheets loading? Here's the source (head only):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>foundation-rails</title>
<link rel="stylesheet" media="screen" href="/assets/foundation_and_overrides.self-e1e904b6b73c8f10825ea8cfcef529741aa5a0db4f1ca308619414139602986c.css?body=1" />
<link rel="stylesheet" media="screen" href="/assets/application.self-167193cd81d9330d9ddb5c4ec7b44214fea529aa8a94f3a86e6526e4f652fc02.css?body=1" />
<script src="/assets/vendor/modernizr.self-212c168b41d4ef12c547b56dc9c6db01f76fc65a43410de24e5581da7ee48e85.js?body=1"></script>
<meta name="csrf-param" content="authenticity_token" />
<meta name="csrf-token" content="kssa1n5rZlL6ZYpSS7VXYtVTMsuKxiMkydbK6swwm7O2ZVSZR12vrQ1gOYYG7LFrwKsdaY/7AiRhmX/cVGsecw==" />
</head>
A couple things to note here:
That link looks different from working instances; I've never seen ".self" before
I followed the link and it didn't seem to have all the css
So, my question is, have I lost my mind, did I do something wrong, or has foundation broken something?
UPDATE
Out of desperation, I tried using a known good gemfile. When I did a bundle install, it croaked and told me to do a bundle update.
Did a bundle update, then tried firing up the server. It croaked.
I put the original gemfile back in, did a bundle update, fired up the server....
and it works.
Five hours beating my head against the wall, post the problem, and answer my own question minutes later... But if someone could explain why bundle update was necessary, I'd be much obliged :)
Related
I am writing my backend using DRF and using VueJS frontend templates. In the admin panel I use Ckeditor to edit textfield.
class ArticleModelForm(forms.ModelForm):
content = forms.CharField(widget=CKEditorUploadingWidget)
class Meta:
model=Article
fields = [ "title", "slug" "published_at"]
While rendering a post TextField I can not use template filters to render correctly, so text seems ruined. I have tried lots of things but no success yet.
<template>
<div>
<div class="container negative-margin-top150">
<div class="col col-xl-8 m-auto col-lg-12 col-md-12 col-sm-12 col-12">
<div class="ui-block">
<!-- Single Post -->
<article class="hentry blog-post single-post single-post-v1">
<div class="post-content-wrap">
<div class="post-content" >
<p class="post-paragraph">
{{article.content}}
</p>
<p>{{content}}</p>
</div>
</div>
</article>
<!-- ... end Single Post -->
</div>
</div>
</div>
</div>
</template>
and my script is below
<script>
import axios from 'axios';
export default {
name: "Article",
props: {
slug: {
type: String,
required: true
}
},
data() {
return {
article: {},
content: `${content}`,
}
},
methods: {
setPageTitle(title) {
document.title = title;
},
setRequestUser() {
this.requestUser = window.localStorage.getItem("username");
},
getArticle(slug) {
axios.get(`http://localhost:8000/api/articles/${this.slug}`)
.then(response => {
this.article = response.data;
this.setPageTitle(response.data.title);
this.content = window.content;
});
}
},
created() {
this.getArticle();
this.setRequestUser();
},
};
</script>
Now in the browser my text is rendered with template tags
<h3>The standard Lorem Ipsum passage, used since the 1500s</h3>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
Anybody here who can point me in the right direction?
You need to use v-html attribute to render raw conent.
https://v2.vuejs.org/v2/guide/syntax.html
Below the HTML and Jquery code that is not working. I want two tabbing section on a single page.
So, how can I modify it to make it work ?..
<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab One</li>
<li class="tab-link" data-tab="tab-2">Tab Two</li>
<li class="tab-link" data-tab="tab-3">Tab Three</li>
<li class="tab-link" data-tab="tab-4">Tab Four</li>
</ul>
<div id="tab-1" class="tab-content current">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
<div id="tab-2" class="tab-content">
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
<div id="tab-3" class="tab-content">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
</div>
<div id="tab-4" class="tab-content">
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
$(document).ready(function(){
$('ul.tabs li').click(function(){
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#"+tab_id).addClass('current');
})
})
I'm using ZURB Foundation (v6) Accordions.
When an accordion opens, I want to scroll the page to be at the top of that accordion item. I can run this code:
$("#arf").on("down.zf.accordion", function() {
$('html,body').animate({scrollTop: $(this).offset().top}, 'slow');
});
Of course, this scrolls the page to the top of the accordion, not the accordion item. How would I modify this code to scroll to the accordion's item when it opens?
Here is the solution that I found that works. This works for version 6 of Foundation for Sites.
$("#form-selector").on("up.zf.accordion", function(event) {
setTimeout(function(){
$('html,body').animate({scrollTop: $('.is-active').offset().top}, 'slow');
}, 250); //Adjust to match slideSpeed
});
The setTimeout is used because of the slideSpeed of the accordion. If you do not use setTimeout it scrolls the moment down.zf.accordion fires thus scrolling to the wrong position.
You can also us down.zf.accordion in place of up.zf.accordion, however, if you use down.zf.accordion, it will fire once the page loads (as the accordion is initialized and opens) and scrolls to the accordion item. This is unwanted in my case but may be desired in certain case.
You could attach your own click listeners to each accordion <a> tag and scroll to the top of that tag on click. Eg.
JS
$('.accordionBtn').on('click', function(event) {
$('html,body').animate({scrollTop: $(event.target).offset().top}, 'slow');
});)
CSS
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
<a class="accordionBtn" href="#panel1a">Accordion 1</a>
<div id="panel1a" class="content active">
Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</li>
<li class="accordion-navigation">
<a class="accordionBtn" href="#panel2a">Accordion 2</a>
<div id="panel2a" class="content">
Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</li>
<li class="accordion-navigation">
<a class="accordionBtn" href="#panel3a">Accordion 3</a>
<div id="panel3a" class="content">
Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</div>
</li>
</ul>
I first used the solution posted by #L84 then I thought of this one.
In the code below, $active references the currently active accordion item (Note: the reference is stored each time an accordion is opened rather than when the accordion title is clicked). When a new title is clicked, $active is the item that will be closed. We need to know its height in advance.
For the newly active accordion item to be properly positioned, the height of that previously active item has to be subtracted from the viewport's scrolling position -- note that this in necessary only if the newly active item is located further down.
$(function () {
var $active;
$(".accordion").on("click", ".accordion-title", function () {
var itemIndexNew = $(".accordion-item").index($(this).parent());
var itemIndexOld = ($active ? $(".accordion-item").index($active) : null);
if (itemIndexOld !== null && itemIndexOld < itemIndexNew) {
$("html, body").scrollTop($(window).scrollTop() - $active.height());
}
});
$(".accordion").on("down.zf.accordion", function(e) {
$active = $(".accordion").find(".accordion-item.is-active");
});
$(document).foundation();
});
You could use the below script, im also using foundation 6 accordion, this will work also if you have multiple accordions on single page. Thanks
jQuery(".accordion-title").click(function() {
var $this = this;
setTimeout(function(){
jQuery('html,body').animate({scrollTop: jQuery($this).closest('.accordion').find('.is-active').offset().top}, 'slow');
}, 250);
});
I am trying to use cflayout to create an accordion control on ColdFusion 11. Below is the code I am using:
<cflayout name="outerlayout" type="accordion" titlecollapse="true" width="150px">
<cflayoutarea name="area1" collapsible="true" title="acc1">
<h3>Area 1</h3>
<ul><li>sdfgsdfg</li><li>sdfgsdf</li></ul>
</cflayoutarea>
<cflayoutarea name="area2" collapsible="true" title="acc2">
<h3>Area 2</h3>
<ul><li>sdfgsdfg</li><li>sdfgsdf</li></ul>
<ul><li>sdfgsdfg</li><li>sdfgsdf</li></ul>
<ul><li>sdfgsdfg</li><li>sdfgsdf</li></ul>
</cflayoutarea>
</cflayout>
I have the following issues with the code:
1. It displays same height for each accordion irrespective of their content.
2. Unordered list doesn't get displayed as usual.
3. I want all the accordions to be initially collapsed. I am not able to accomplish it.
Note: I know it's not wise to use cflayout of the ColdFusion. But anyway I want to use it.
I finally decided to switch to jQuery solution as the cflayout solution of ColdFusion seems to be very buggy. This is how I achieved my requirements using jquery.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Accordion - Collapse content</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion({
active: false,
collapsible: true,
heightStyle: "content"
});
$("#accordion>h3>a").click(function(){
var loc = $(this).prop("href");
window.open(loc, '_blank');
})
});
</script>
</head>
<body>
<div id="accordion">
<h3>Section 1</h3>
<div>
</div>
<h3>Section 2</h3>
<div>
<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
</div>
<h3>Section 3</h3>
<div>
<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
<h3>Section 4</h3>
<div>
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
</div>
</div>
</body>
</html>
To solve my first issue we need to set heightStyle option to "content". It ensures that the height of each accordion element is a according to content of its elements.
The jQuery accordion has no issues with unordered list.
Finally to make all the accordions collapsed initially, we just need to set active to false.
One more thing. I noted that jQuery accordion loads faster than the Coldfusion's one. Thanks Adam Cameron & Scott Stroz for pushing me to go for jQuery solution.
To answer your Issue #1:
The code for cflayout.js on ColdFusion 11 has the height for all accordion tabs hardcoded to 600. This results in either scrollbars or large blank spaces in each tab.
Edit the code at c:\ColdFusion11\cfusion\wwwroot\CFIDE\scripts\ajax\package\cflayout.js, and delete Line 430 which reads:
_85e.height=600;
You will need to flush the template and component caches after editing this code (in the Caching section of ColdFusion Administrator).
I'm building a static site generator with a blog plugin. Is there a way I can parse an entire block of contents through markdown like this?
title: My First Post
author: Plutor Heidepeen
date: 01-01-2012
{% extends "post.html" %}
{% block body|markdown %}
## This Should be A Title
1. This
2. A
3. List
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{% endblock %}
You're looking for {% filter %}.
{% filter markdown %}
## This Should be A Title
1. This
2. A
3. List
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
{% endfilter %}