Permalink
Browse files

Move classnames up to slide container in all cases - it's simpler. Ma…

…rkdown still moved/generated into the .content div.
  • Loading branch information...
1 parent a7f20e8 commit 802c34270c0d7d34b11e046207ba24560ae44c50 Davis W. Frank committed Nov 4, 2011
View
0 LICENSE → LICENSE.md
File renamed without changes.
View
1 VERSION
@@ -1 +0,0 @@
-0.9.0
View
8 lib/keydown/classnames.rb
@@ -11,6 +11,14 @@ def add(names)
@names.uniq!
end
+ def remove(names)
+ @names -= names.split(' ')
+ end
+
+ def include?(name)
+ @names.include? name
+ end
+
def to_hash
@names.empty? ? {} : { :class => self.to_s }
end
View
16 lib/keydown/slide.rb
@@ -4,28 +4,25 @@ class Slide
attr_reader :content
attr_reader :notes
attr_reader :background_image
- attr_reader :container_classnames
- attr_reader :content_classnames
+ attr_reader :classnames
def initialize(text, classnames = '')
@content = text
@notes = ''
@codemap = {}
@background_image = {}
- @content_classnames = Classnames.new('content')
- @content_classnames.add(classnames)
-
extract_notes!
extract_content!
extract_code!
extract_background_image!
- @container_classnames = Classnames.new('slide')
+ @classnames = Classnames.new('slide')
+ @classnames.add(classnames)
unless @background_image.empty?
- @container_classnames.add('full-background')
- @container_classnames.add(@background_image[:classname])
+ @classnames.add('full-background')
+ @classnames.add(@background_image[:classname])
end
highlight_code!
@@ -43,8 +40,7 @@ def to_html
markdown = RDiscount.new(@content)
context = OpenStruct.new(:html_content => markdown.to_html,
- :container_classnames => container_classnames.to_hash,
- :classnames => @content_classnames.to_hash,
+ :classnames => classnames.to_hash,
:background_attribution_classnames => background_attribution_classnames,
:background_image => background_image)
View
37 spec/lib/classnames_spec.rb
@@ -19,6 +19,43 @@
end
end
+ describe "#remove" do
+ before do
+ @classnames = Keydown::Classnames.new
+ @classnames.add("foo")
+ @classnames.add("bar baz")
+ end
+
+ it "should remove a classname" do
+ @classnames.remove("foo")
+ @classnames.to_s.should_not match(/foo/)
+ @classnames.to_hash[:class].should_not match(/foo/)
+ end
+
+ it "should remove multiple classnames" do
+ @classnames.remove("bar baz")
+ @classnames.to_s.should_not match(/bar/)
+ @classnames.to_s.should_not match(/baz/)
+ @classnames.to_hash[:class].should_not match(/bar/)
+ @classnames.to_hash[:class].should_not match(/baz/)
+ end
+ end
+
+ describe "#include?" do
+ before do
+ @classnames = Keydown::Classnames.new
+ @classnames.add("foo")
+ end
+
+ it "should return true if the class is present" do
+ @classnames.include?('foo').should be_true
+ end
+
+ it "should return false if the class is not present" do
+ @classnames.include?('bar').should be_false
+ end
+ end
+
describe "#to_s" do
describe "with no classnames" do
before do
View
60 spec/lib/slide_spec.rb
@@ -14,7 +14,7 @@ def self.template_dir
shared_examples_for 'extracting slide data' do
it "should set the CSS classnames" do
- @slide.content_classnames.to_s.should == @content_classnames
+ @slide.classnames.to_s.should == @classnames
end
it "should extract the slide content" do
@@ -68,7 +68,7 @@ def self.template_dir
a simple note
SLIDE
- @content_classnames = 'content'
+ @classnames = 'slide'
@slide = Keydown::Slide.new(@slide_text)
end
@@ -96,7 +96,7 @@ def self.template_dir
a simple note
SLIDE
- @content_classnames = ['foo', 'content'].sort.join(' ')
+ @classnames = ['foo', 'slide'].sort.join(' ')
@slide = Keydown::Slide.new(@slide_text, 'foo')
end
@@ -106,7 +106,7 @@ def self.template_dir
before :each do
@html = @slide.to_html
@doc = Nokogiri(@html)
- @slide_selector = "section.#{@content_classnames}"
+ @slide_selector = "section.#{@classnames}"
end
it_should_behave_like "generating HTML"
@@ -124,7 +124,7 @@ def self.template_dir
a simple note
SLIDE
- @content_classnames = ['content', 'foo', 'bar'].sort.join(' ')
+ @classnames = ['slide', 'foo', 'bar'].sort.join(' ')
@slide = Keydown::Slide.new(@slide_text, 'foo bar')
end
@@ -135,12 +135,46 @@ def self.template_dir
before :each do
@html = @slide.to_html
@doc = Nokogiri(@html)
- @slide_selector = "section.#{@content_classnames}"
+ @slide_selector = "section.#{@classnames}"
end
it_should_behave_like "generating HTML"
end
end
+ describe "with the classname of 'left'" do
+ before :each do
+ @slide_text = <<-SLIDE
+
+# A Slide
+With some text
+
+!NOTES
+a simple note
+ SLIDE
+
+ @classnames = ['slide', 'left', 'foo'].sort.join(' ')
+ @slide = Keydown::Slide.new(@slide_text, 'foo left')
+
+ end
+
+ it_should_behave_like "extracting slide data"
+
+ describe "generating HTML" do
+ before :each do
+ @html = @slide.to_html
+ @doc = Nokogiri(@html)
+ @slide_selector = "section.#{@classnames}"
+ end
+
+ it_should_behave_like "generating HTML"
+
+ it "should add the classname 'left' to the section (in order to justify the whole slide)" do
+ @doc.css('section')[0]['class'].should include('left')
+ end
+
+ end
+ end
+
describe "without a note" do
before :each do
@slide_text = <<-SLIDE
@@ -149,12 +183,12 @@ def self.template_dir
With some text
SLIDE
- @content_classnames = 'content'
+ @classnames = 'slide'
@slide = Keydown::Slide.new(@slide_text)
end
it "should set the CSS classnames" do
- @slide.content_classnames.to_s.should == @content_classnames
+ @slide.classnames.to_s.should == @classnames
end
it "should extract the slide content" do
@@ -192,8 +226,8 @@ def a_method(options)
SLIDE
- @content_classnames = 'content'
- template_dir = File.join(Keydown::Tasks.source_root, 'templates', 'rocks')
+ @classnames = 'slide'
+ template_dir = File.join(Keydown::Tasks.source_root, 'templates', 'deck.js')
@slide = Keydown::Slide.new(@slide_text)
end
@@ -229,7 +263,7 @@ def a_method(options)
SLIDE
- @content_classnames = 'content'
+ @classnames = 'slide'
@slide = Keydown::Slide.new(@slide_text)
end
@@ -266,7 +300,7 @@ def a_method(options)
SLIDE
- @content_classnames = 'content'
+ @classnames = 'full-background my_background slide'
@slide = Keydown::Slide.new(@slide_text.chomp)
end
@@ -319,7 +353,7 @@ def a_method(options)
SLIDE
- @content_classnames = 'content'
+ @classnames = 'full-background my_background slide'
@slide = Keydown::Slide.new(@slide_text.chomp)
end
View
14 spec/lib/slidedeck_spec.rb
@@ -72,16 +72,16 @@ def self.template_dir
end
it "should set the CSS classnames of each slide" do
- slides_content = @doc.css('.content')
+ slides = @doc.css('.slide')
- first_slide = slides_content[0]
- first_slide['class'].should == 'content'
+ first_slide = slides[0]
+ first_slide['class'].should == 'slide'
- second_slide = slides_content[1]
- second_slide['class'].should == 'content foo'
+ second_slide = slides[1]
+ second_slide['class'].should == 'foo slide'
- third_slide = slides_content[2]
- third_slide['class'].should == 'bar content foo'
+ third_slide = slides[2]
+ third_slide['class'].should == 'bar foo slide'
end
end
end
View
2 spec/tasks/slides_spec.rb
@@ -79,7 +79,7 @@
describe "should have one slide that" do
before :each do
- @third_slide = @doc.css('.content')[2]
+ @third_slide = @doc.css('.slide')[2]
end
it "should have the correct css class(es)" do
View
33 templates/deck.js/index.html.haml
@@ -19,23 +19,22 @@
/ Modernizr (provided for legacy browsers)
= script "deck.js/support/modernizr.custom.js"
- %body
- %article{ :class => "deck-container keydown" }
- - slides.each do |slide|
- = slide.to_html
-
- / deck.js navigation extension
- %a{ :href => '#', :class => 'deck-prev-link', :title => 'Previous' } &#8592;
- %a{ :href => '#', :class => 'deck-next-link', :title => 'Next' } &#8594;
-
- / deck.js hash extension
- %a{ :href => '.', :class => 'deck-permalink', :title => 'Permalink to this slide' } #
-
- / deck.js status extension
- %p.deck-status
- %span.deck-status-current
- \/
- %span.deck-status-total
+ %body{ :class => "deck-container keydown" }
+ - slides.each do |slide|
+ = slide.to_html
+
+ / deck.js navigation extension
+ %a{ :href => '#', :class => 'deck-prev-link', :title => 'Previous' } &#8592;
+ %a{ :href => '#', :class => 'deck-next-link', :title => 'Next' } &#8594;
+
+ / deck.js hash extension
+ %a{ :href => '.', :class => 'deck-permalink', :title => 'Permalink to this slide' } #
+
+ / deck.js status extension
+ %p.deck-status
+ %span.deck-status-current
+ \/
+ %span.deck-status-total
/ jQuery & deck.js
= script "deck.js/support/jquery.1.6.4.min.js"
View
6 templates/deck.js/slide.html.haml
@@ -1,8 +1,8 @@
-%section{container_classnames}
+%section{classnames}
.spacer.top
- %div{classnames}
+ .content
= html_content
+ .spacer.bottom
- if background_attribution_classnames.length > 2
%div{:class => background_attribution_classnames}
%a{:href => background_image[:attribution_link], :target => "_blank"}= background_image[:attribution_text]
- .spacer.bottom
View
2 templates/generate/deck.js/core/deck.core.css
@@ -182,7 +182,7 @@ html {
.deck-container h1 {
font-size: 4.5em;
font-weight: bold;
- text-align: center;
+ /*text-align: center;*/
padding-top: 1em;
}
.csstransforms .deck-container h1 {
View
180 templates/keydown.scss.erb
@@ -1,30 +1,34 @@
@import "compass/css3";
+@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700,800);
+
/* Reset deck.core.css */
-.csstransforms .deck-container .slide h1 {
- padding: 0;
- left: auto;
- right: auto;
- top: auto;
- position: relative;
-
- -webkit-transform: none;
- -moz-transform: none;
- -ms-transform: none;
- -o-transform: none;
- transform: none;
+.keydown.deck-container h1 {
+ font-weight: normal;
+ text-align: left;
+ padding-top: 0;
}
-// Keydown Styles
+/* Reset deck.core.css */
+.csstransforms .deck-container .slide {
-// Presentation fills the window
-body {
- height: 100%;
- margin: 0;
- padding: 0;
- background-color: #d7d7d7;
+ h1 {
+ padding: 0;
+ left: auto;
+ right: auto;
+ top: auto;
+ position: relative;
+
+ @include transform(none);
+ }
+
+ h2 {
+ border: none;
+ }
}
+// Keydown Styles
+
@mixin box-vertical-center {
@include display-box;
@include box-orient(vertical);
@@ -39,10 +43,55 @@ body {
@include box-pack(start);
}
-article.keydown.deck-container {
+html {
+ font-size: 20px; // allows all fonts to be in rems from here on down
+}
+
+// Presentation fills the window
+body {
+ height: 100%;
+ margin: 0;
+ padding: 0;
+ background-color: #d7d7d7;
+}
+
+.keydown.deck-container {
@include box-vertical-center;
+ h1 {
+ font-family: "Open Sans", "Helvetica Neue", sans-serif;
+ font-size: 4.5rem;
+ font-weight: 800;
+ color: black;
+ text-align: none;
+ }
+
+ h2, h3, h4, h5, p, li {
+ font-family: "Open Sans", "Helvetica Neue", sans-serif;
+ font-weight: normal;
+ }
+
+ h2 {
+ font-size: 3.75rem;
+ }
+
+ h3 {
+ font-size: 3rem;
+ }
+
+ h4 {
+ font-size: 2.25rem;
+ }
+
+ p, li {
+ font-size: 2rem;
+ }
+
+ .deck-status {
+ font-size: .75rem;
+ }
+
.slide {
@include box-vertical-center;
@@ -52,49 +101,94 @@ article.keydown.deck-container {
// for full-background images slides
&.full-background {
@include background-size(cover);
+ @include box-vertical-left;
<% backgrounds.each do |background| %>
&.<%= background[:classname] %> {
background-image: url(../<%= background[:path] %>);
}
<% end %>
+
+ h1 {
+ display: inline;
+ position: absolute;
+ background-color: rgba(0, 0, 0, 0.7);
+ font-weight: normal;
+ font-size: 3.5rem;
+ padding: 1rem;
+ color: #eee;
+ }
+
+ &.bottom-left {
+ h1 {
+ left: 0;
+ bottom: 20%;
+ }
+ }
+
+ &.top-left {
+ h1 {
+ left: 0;
+ top: 20%;
+ }
+ }
+
+ &.bottom-right {
+ h1 {
+ right: 0;
+ bottom: 20%;
+ }
+ }
+
+ &.top-right {
+ h1 {
+ right: 0;
+ top: 20%;
+ }
+ }
}
- // slide content - where the Markdown goes
- .content {
- @include box-vertical-center;
+ // left justified slides
+ &.left {
+ @include box-vertical-left;
- > * {
- @include box-vertical-center;
+ .spacer {
+ &.top {
+ @include box-flex(1);
+ }
+ &.bottom {
+ @include box-flex(5);
+ }
}
- // left justified slides
- &.left {
+ .content {
@include box-vertical-left;
> * {
@include box-vertical-left;
}
+ }
+ }
- .spacer {
- .top {
- @include box-flex(1);
- }
- .bottom {
- @include box-flex(5);
- }
- }
+ // slide content - where the Markdown goes
+ .content {
+ @include box-vertical-center;
+
+ > * {
+ @include box-vertical-center;
+ }
+
+ .CodeMirror {
+ font-size: 1rem;
}
}
- // TODO: make these rems values
.attribution {
-
- font-size: 24px;
- position: fixed;
- bottom: 8px;
- left: 40px;
@include background-size(contain);
+ position: absolute;
+ bottom: 0;
+ font-size: 1.25rem;
+ font-family: "Open Sans", "Helvetica Neue", sans-serif;
&.flickr {
background: url(../images/flickr.png) left top no-repeat;
@@ -105,6 +199,10 @@ article.keydown.deck-container {
background: url(../images/cc.large.png) left top no-repeat;
padding-left: 36px;
}
+
+ a {
+ color: #c7c7c7;
+ }
}
}
}

0 comments on commit 802c342

Please sign in to comment.