Clean code for layout and modifications in dev.rake
This commit is contained in:
chris2tof committed
1 parent
e74f2931b1
commit
7a4ad240a8
22 files changed
+226
-159
No files matched your search
@@ -0,0 +1,85 @@
|
||||
Naming convention:
|
||||
1 - The file names can only be changed inside themes, javascripts and images.
|
||||
2 - File names must not contain spaces, spaces must be replace by underscores
|
||||
3 - CSS files can only have the extensions ".css" or ".scss"
|
||||
4 - Javascript files must have the extension ".js"
|
||||
5 - Image files can have any extension
|
||||
|
||||
|
||||
Package content:
|
||||
My_design.zip
|
||||
- info.json
|
||||
- layout.html
|
||||
- structure.css
|
||||
- themes
|
||||
- default.css
|
||||
- blue.css
|
||||
- red.css
|
||||
- javascripts
|
||||
- one.js
|
||||
- two.js
|
||||
- images
|
||||
- pic.jpg
|
||||
- pic_1.png
|
||||
- pic_2.jpg
|
||||
- README
|
||||
|
||||
|
||||
"info.json" file:
|
||||
|
||||
Content:
|
||||
{
|
||||
"title": "your_title",
|
||||
"author": "your_author",
|
||||
"intro": "your_intro"
|
||||
}
|
||||
|
||||
Title: it's the title of your design as it's going to appeared in your website, it can contain spaces
|
||||
Author: it's the name of the creator of the design
|
||||
Intro: it's introduction that can contain more details about your design
|
||||
|
||||
|
||||
"layout.html" file:
|
||||
|
||||
This HTML file can contain 3 types of elements: headers, blocks and footers.
|
||||
Each element defining a header, a block or a footer must be a <div>.
|
||||
Furthermore, each of those <div> must include an <layout_part> as follow:
|
||||
|
||||
<div ID="div_1" class="header">
|
||||
<r:layout_part ID="div_1" class="header" name="header_1">
|
||||
// Your code here
|
||||
</r:layout_part>
|
||||
</div>
|
||||
|
||||
Attributes convention:
|
||||
- each pair of <div> and <layout_part> tags, must have the same ID and class.
|
||||
- the <r:layout_part> tag as one more attribute: "name", it must contain the type of the element followed by the number of the element (if you have 2 header elements, you will have "header_1" and "header_2"
|
||||
|
||||
Javascripts and stylsheets:
|
||||
|
||||
The links to your javascript files and stylesheet files must be encapsulated respectively in <r:javascripts></r:javascripts> and <stylesheets></stylesheets> tags.
|
||||
|
||||
|
||||
"strucutre.css" file:
|
||||
|
||||
The stylesheet file contains the structure of the page, it reference elements by their ID.
|
||||
In this file, you can set structural attributes like "width", "height", "position"…
|
||||
|
||||
|
||||
Themes:
|
||||
|
||||
Themes are stylesheet files that modify the visual aspects of the page.
|
||||
The themes folder must contain at least one file named "default.css" that will be the default theme.
|
||||
Themes stylesheets reference elements by class.
|
||||
They can set attributes like "color", "background-image", "border"…
|
||||
|
||||
|
||||
Javascripts:
|
||||
|
||||
This folder contains the javascript files used by the design.
|
||||
|
||||
|
||||
Images:
|
||||
|
||||
This folder contains the images used by the design.
|
||||
They can have the extensions ".jpg", ".png"...
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"title": "Fraisier",
|
||||
"author": "Paul",
|
||||
"intro": "Strawberry cake"
|
||||
}
|
||||
@@ -0,0 +1,37 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
||||
<title>RulingSite</title>
|
||||
<r:stylesheets>
|
||||
<!-- your stylesheets here -->
|
||||
</r:stylesheets>
|
||||
<r:javascripts>
|
||||
<!-- your javascripts here -->
|
||||
</r:javascripts>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- example -->
|
||||
<div id="header_top" class="header">
|
||||
<r:layout_part id='header_top' class='header' name='header_1'>
|
||||
</r:layout_part>
|
||||
</div>
|
||||
<div id="header_bottom" class="header">
|
||||
<r:layout_part id='header_bottom' class='header' name='header_2'>
|
||||
</r:layout_part>
|
||||
</div>
|
||||
|
||||
<div id="main_content" class="content">
|
||||
<r:layout_part id="main_content" class='content' name='block_1' editable="true">
|
||||
</r:layout_part>
|
||||
</div>
|
||||
|
||||
<div id="footer" class="footer">
|
||||
<r:layout_part id="footer" class='footer' name='footer_1'>
|
||||
</r:layout_part>
|
||||
</div>
|
||||
<!-- END example -->
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,2 @@
|
||||
/* This stylesheet file contains the structure of the page, it reference elements by their ID.
|
||||
In this file, you can set structural attributes like "width", "height", "position"… */
|
||||
@@ -0,0 +1,2 @@
|
||||
/* This stylesheet file contains the visual aspect of the page, it reference elements by their class.
|
||||
In this file, you can set visual attributes like "color", "background-color", "border"… */
|
||||
+26
-4
@@ -64,8 +64,19 @@ module Parser
|
||||
res
|
||||
end
|
||||
c.define_tag 'stylesheets' do |tag|
|
||||
contents = tag.expand
|
||||
contents.to_html
|
||||
res = ''
|
||||
res << "<link href='#{page.design.structure_css.url}' rel='stylesheet' type='text/css' /> "
|
||||
page.design.themes.each do |theme|
|
||||
res << "<link href='#{theme.file.url}' rel='stylesheet' type='text/css' /> "
|
||||
end
|
||||
res
|
||||
end
|
||||
c.define_tag 'javascripts' do |tag|
|
||||
res = ''
|
||||
page.design.javascripts.each do |js|
|
||||
res << "<script type='text/javascript' src='#{js.file.url}'></script>"
|
||||
end
|
||||
res
|
||||
end
|
||||
c.define_tag 'image' do |tag|
|
||||
asset = Asset.find(tag.attr['id'])
|
||||
@@ -163,8 +174,19 @@ module Parser
|
||||
end
|
||||
end
|
||||
c.define_tag 'stylesheets' do |tag|
|
||||
contents = tag.expand
|
||||
contents.to_html
|
||||
res = ''
|
||||
res << "<link href='#{page.design.structure_css.url}' rel='stylesheet' type='text/css' />"
|
||||
page.design.themes.each do |theme|
|
||||
res << "<link href='#{theme.file.url}' rel='stylesheet' type='text/css' />"
|
||||
end
|
||||
res
|
||||
end
|
||||
c.define_tag 'javascripts' do |tag|
|
||||
res = ''
|
||||
page.design.javascripts.each do |js|
|
||||
res << "<script type='text/javascript' src='#{js.file.url}'></script>"
|
||||
end
|
||||
res
|
||||
end
|
||||
c.define_tag 'layout_part' do |tag|
|
||||
part = page.page_parts.detect{ |p| p.name.to_s == tag.attr['name'].to_s }
|
||||
|
||||
+42
-14
@@ -10,8 +10,8 @@ namespace :dev do
|
||||
puts 'Dropping ' + collection.name if include
|
||||
include
|
||||
end.each(&:drop)
|
||||
|
||||
Site.create!( :valid_locales => [ 'en', 'zh_tw' ], :in_use_locales => [ 'zh_tw', 'en' ] )
|
||||
|
||||
Site.create( :school => 'The Best School', :department => 'Awesome', :valid_locales => [ 'en', 'zh_tw' ], :in_use_locales => [ 'zh_tw', 'en' ])
|
||||
|
||||
user = User.new( :email => 'chris@rulingcom.com', :password => 'password', :password_confirmation => 'password', :admin => true, :active_roles => ['teacher'])
|
||||
user.user_roles.build(:key => 'teacher', :discipline_en => 'Database', :discipline_zh_tw => '資料庫' )
|
||||
@@ -50,22 +50,50 @@ namespace :dev do
|
||||
uim_1.save!
|
||||
|
||||
|
||||
layout = Layout.create!( :name => 'root', :description => 'root', :content => File.open("#{Rails.root}/lib/template/root.layout").read )
|
||||
layout.layout_parts.create!( :name => 'header', :content => File.open("#{Rails.root}/lib/template/nav.snippet").read )
|
||||
layout.layout_parts.create!( :name => 'main_content', :editable => true )
|
||||
layout.layout_parts.create!( :name => 'footer', :content => File.open("#{Rails.root}/lib/template/footer.snippet").read )
|
||||
# layout = Layout.create!( :name => 'root', :description => 'root', :content => File.open("#{Rails.root}/lib/template/root.layout").read )
|
||||
# layout.layout_parts.create!( :name => 'header', :content => File.open("#{Rails.root}/lib/template/nav.snippet").read )
|
||||
# layout.layout_parts.create!( :name => 'main_content', :editable => true )
|
||||
# layout.layout_parts.create!( :name => 'footer', :content => File.open("#{Rails.root}/lib/template/footer.snippet").read )
|
||||
#
|
||||
# home = Page.create!( :i18n_variable_id => var_10.id, :layout_id => layout.id, :name => 'home', :is_published => true )
|
||||
# home.page_parts.create!( :name => 'main_content', :content => File.open("#{Rails.root}/lib/template/home.page").read, :kind => 'text', :i18n_variable_id => var_13.id )
|
||||
#
|
||||
# about = Page.create!( :i18n_variable_id => var_11.id, :layout_id => layout.id, :name => 'about', :is_published => true, :parent_id => home.id )
|
||||
# about.page_parts.create!( :name => 'main_content', :content => File.open("#{Rails.root}/lib/template/about.page").read, :kind => 'text', :i18n_variable_id => var_14.id )
|
||||
|
||||
home = Page.create!( :i18n_variable_id => var_10.id, :layout_id => layout.id, :name => 'home', :is_published => true )
|
||||
home.page_parts.create!( :name => 'main_content', :content => File.open("#{Rails.root}/lib/template/home.page").read, :kind => 'text', :i18n_variable_id => var_13.id )
|
||||
# Link.create!( :i18n_variable_id => var_12.id, :name => 'google', :is_published => true, :parent_id => home.id, :url => 'www.google.com' )
|
||||
#
|
||||
# ["nav", "footer"].each do |page_name|
|
||||
# Snippet.create!( :name => page_name, :parent_id => home.id, :content => File.open("#{Rails.root}/lib/template/#{page_name}.snippet").read )
|
||||
# end
|
||||
|
||||
about = Page.create!( :i18n_variable_id => var_11.id, :layout_id => layout.id, :name => 'about', :is_published => true, :parent_id => home.id )
|
||||
about.page_parts.create!( :name => 'main_content', :content => File.open("#{Rails.root}/lib/template/about.page").read, :kind => 'text', :i18n_variable_id => var_14.id )
|
||||
design = Design.new(:title => "Fraisier", :author => "Paul", :intro => "Strawberry cake")
|
||||
|
||||
Link.create!( :i18n_variable_id => var_12.id, :name => 'google', :is_published => true, :parent_id => home.id, :url => 'www.google.com' )
|
||||
design.structure_css = File.open("#{Rails.root}/lib/fraisier/structure.css")
|
||||
|
||||
["nav", "footer"].each do |page_name|
|
||||
Snippet.create!( :name => page_name, :parent_id => home.id, :content => File.open("#{Rails.root}/lib/template/#{page_name}.snippet").read )
|
||||
end
|
||||
# image = design.images.build(:file => File.open("#{Rails.root}/lib/fraisier/img/buttons.gif"))
|
||||
#
|
||||
# js = design.javascripts.build(:file => File.open("#{Rails.root}/lib/fraisier/inettuts.js"))
|
||||
#
|
||||
# theme = design.themes.build(:file => File.open("#{Rails.root}/lib/fraisier/inettuts.js.css"))
|
||||
|
||||
design.build_layout
|
||||
design.layout.file = File.open("#{Rails.root}/lib/fraisier/layout.html")
|
||||
|
||||
design.layout.save
|
||||
# theme.save
|
||||
# image.save
|
||||
# js.save
|
||||
|
||||
design.save
|
||||
|
||||
design.layout.layout_parts.create!( :name => 'header_1')
|
||||
design.layout.layout_parts.create!( :name => 'header_2')
|
||||
design.layout.layout_parts.create!( :name => 'block_1')
|
||||
design.layout.layout_parts.create!( :name => 'footer_1')
|
||||
|
||||
home = Page.create!( :i18n_variable_id => var_10.id, :design_id => design.id, :name => 'home', :is_published => true )
|
||||
home.page_parts.create!( :name => 'header_1', :kind => 'text')
|
||||
|
||||
end
|
||||
|
||||
|
||||
Reference in new issue
Block a user