Skip to content

Commit

Permalink
Create a welcome page
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamschwartz
adamschwartz committed Dec 18, 2013
1 parent bef2504 commit 43f509f
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 532 deletions.
111 changes: 9 additions & 102 deletions docs/welcome/coffee/welcome.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,23 @@ isMobile = $(window).width() < 567

init = ->
setupHero()
setupBrowserDemo()

setupHero = ->
$target = $('.tether-target-demo')
$target = $('.tooltip-target-demo')

positions = [
'top left'
'left top'
'left middle'
'left bottom'
'bottom left'
'bottom center'
'bottom right'
'right bottom'
'right middle'
'right top'
'top right'
'top center'
]

if isMobile
Expand All @@ -31,14 +34,15 @@ setupHero = ->
for position in positions
drops[position] = new Drop
target: $target[0]
className: 'drop-tooltip-theme-arrows'
className: 'tooltip-theme-default'
attach: position
constrainToScrollParent: true
constrainToScrollParent: false
constrainToWindow: false
openOn: ''
content: $.map(position.split(' '), (word) -> word.substr(0, 1).toUpperCase() + word.substr(1)).join(' ')

# TODO - remove once zackbloom fixes
drops[position].$drop.addClass "drop-attached-#{ position.replace(' ', '-')}"
drops[position].$drop.addClass "drop-attached-#{ position.replace(' ', '-') }"

openIndex = 0
frames = 0
Expand Down Expand Up @@ -70,101 +74,4 @@ setupHero = ->
else
openNextDrop()

setupBrowserDemo = ->
$browserDemo = $('.browser-demo.showcase')

$startPoint = $('.browser-demo-start-point')
$stopPoint = $('.browser-demo-stop-point')

$iframe = $('.browser-window iframe')
$browserContents = $('.browser-content .browser-demo-inner')

$sections = $('.browser-demo-section')

$('body').append """
<style>
table.showcase.browser-demo.fixed-bottom {
top: #{ $sections.length }00%
}
</style>
"""

$(window).scroll ->
scrollTop = $(window).scrollTop()

if $startPoint.position().top < scrollTop and scrollTop + window.innerHeight < $stopPoint.position().top
$browserDemo.removeClass('fixed-bottom')
$browserDemo.addClass('fixed')

$sections.each ->
$section = $ @

if $section.position().top < scrollTop < $section.position().top + $section.outerHeight()
setSection $section.data('section')

return true

else
$browserDemo.removeAttr('data-section')
$browserDemo.removeClass('fixed')

if scrollTop + window.innerHeight > $stopPoint.position().top
$browserDemo.addClass('fixed-bottom')
else
$browserDemo.removeClass('fixed-bottom')

$iframe.load ->
iframeWindow = $iframe[0].contentWindow

$items = $iframe.contents().find('.item')

$items.each (i) ->
$item = $(@)

drop = new iframeWindow.Drop
target: $item[0]
className: 'drop-theme-arrows'
attach: 'right top'
constrainToWindow: true
openOn: 'click'
content: '<div class="drop-demo-spacer"></div>'

$item.data('drop', drop)

# TODO - remove once zackbloom fixes
drop.$drop.addClass "drop-attached-right-top"

setSection = (section) ->
$browserDemo.attr('data-section', section)

$('.section-copy').removeClass('active')
$(""".section-copy[data-section="#{ section }"]""").addClass('active')

openExampleItem = ->
if isMobile
$iframe.contents().find('.item:first').data().drop.open()
else
$iframe.contents().find('.item:eq(2)').data().drop.open()

closeAllItems = ->
$iframe.contents().find('.item').each -> $(@).data().drop.close() or true

switch section

when 'intro'
closeAllItems()
openExampleItem()

when 'explain'
closeAllItems()
openExampleItem()

when 'resize'
closeAllItems()
openExampleItem()

when 'outro'
closeAllItems()
openExampleItem()

init()
170 changes: 27 additions & 143 deletions docs/welcome/css/welcome.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,6 @@ body {
margin: 0;
font-family: "proxima-nova", "Helvetica Neue", sans-serif; }

.drop.drop-tooltip-theme-arrows .drop-content {
padding: 1em;
font-size: 1.1em; }

.button {
display: inline-block;
border: 2px solid #333333;
Expand Down Expand Up @@ -71,9 +67,34 @@ table.showcase {
font-size: 14px; } }
table.showcase .showcase-inner p {
text-align: center; }
table.showcase.about {
text-align: left;
background: #fff1dd; }
table.showcase.about a {
color: #c96c24; }
table.showcase.about p {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: left;
width: 500px;
max-width: 100%;
margin-left: auto;
margin-right: auto; }
table.showcase.about p > code {
background: rgba(0, 0, 0, 0.05); }
table.showcase.about pre {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: left;
width: 500px;
max-width: 100%;
margin-left: auto;
margin-right: auto; }
table.showcase.hero {
text-align: center; }
table.showcase.hero .tether-target-demo {
table.showcase.hero .tooltip-target-demo {
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
Expand All @@ -84,142 +105,5 @@ table.showcase {
margin: 5rem auto;
padding: 3rem; }
@media (max-width: 567px) {
table.showcase.hero .tether-target-demo {
table.showcase.hero .tooltip-target-demo {
padding: 1rem; } }
table.showcase.browser-demo {
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #723362), color-stop(100%, #9d223c));
background-image: -webkit-linear-gradient(top left, #723362 0%, #9d223c 100%);
background-image: -moz-linear-gradient(top left, #723362 0%, #9d223c 100%);
background-image: -o-linear-gradient(top left, #723362 0%, #9d223c 100%);
background-image: linear-gradient(top left, #723362 0%, #9d223c 100%);
background-color: #9d223c;
position: absolute;
top: 100%; }
table.showcase.browser-demo.fixed {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1; }
table.showcase.browser-demo.fixed .browser-demo-inner {
-webkit-transition: width 2s ease-in-out, height 2s ease-in-out;
-moz-transition: width 2s ease-in-out, height 2s ease-in-out;
-o-transition: width 2s ease-in-out, height 2s ease-in-out;
transition: width 2s ease-in-out, height 2s ease-in-out; }
table.showcase.browser-demo.fixed[data-section="intro"] {
box-shadow: 0 0 0 0; }
table.showcase.browser-demo.fixed[data-section="resize"] .browser-demo-inner {
width: 50%; }
table.showcase.browser-demo .showcase-inner {
position: absolute;
left: 200px;
right: 200px;
top: 220px;
bottom: 120px;
margin: 0;
padding: 0; }
@media (max-width: 1200px) {
table.showcase.browser-demo .showcase-inner {
left: 10%;
right: 10%; } }
@media (max-width: 567px) {
table.showcase.browser-demo .showcase-inner {
bottom: 90px;
top: 180px; } }
table.showcase.browser-demo .browser-demo-inner {
height: 100%;
width: 100%; }
table.showcase.browser-demo .section-copy {
-webkit-transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
opacity: 0;
position: absolute;
top: 0;
position: absolute;
height: 200px;
color: white;
text-align: center;
width: 100%; }
table.showcase.browser-demo .section-copy.active {
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
opacity: 1;
top: -150px; }
@media (max-width: 567px) {
table.showcase.browser-demo .section-copy.active {
top: -130px; } }
table.showcase.browser-demo .section-copy h2 {
font-size: 40px;
font-weight: bold;
line-height: 1;
margin: 0 0 15px; }
@media (max-width: 567px) {
table.showcase.browser-demo .section-copy h2 {
font-size: 30px; } }
table.showcase.browser-demo .section-copy p {
font-size: 26px;
font-weight: 300;
margin: 0; }
@media (max-width: 567px) {
table.showcase.browser-demo .section-copy p {
font-size: 16px; } }
table.showcase.browser-demo .browser-window {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
background: white;
position: relative;
height: 100%;
width: 100%;
max-width: 1200px;
margin: 0 auto; }
table.showcase.browser-demo .browser-window .browser-titlebar {
position: absolute;
top: 0;
left: 0;
right: 0;
border-bottom: 1px solid #eeeeee;
height: 55px; }
table.showcase.browser-demo .browser-window .browser-titlebar .browser-dots {
padding: 16px; }
table.showcase.browser-demo .browser-window .browser-titlebar .browser-dots b {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
display: -moz-inline-stack;
display: inline-block;
vertical-align: middle;
*vertical-align: auto;
zoom: 1;
*display: inline;
width: 10px;
height: 10px;
margin-right: 7px;
background: rgba(0, 0, 0, 0.1); }
table.showcase.browser-demo .browser-window .browser-frame {
position: absolute;
top: 55px;
left: 0;
right: 0;
bottom: 0; }
table.showcase.browser-demo .browser-window .browser-frame iframe {
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
-ms-border-radius: 0 0 4px 4px;
-o-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
border: 0;
width: 100%;
height: 100%; }
table.showcase.browser-demo-section {
pointer-events: none; }

.browser-content {
display: none; }
Loading

0 comments on commit 43f509f

Please sign in to comment.