Skip to content

Commit 43f509f

Browse files
adamschwartzadamschwartz
committed
Create a welcome page
1 parent bef2504 commit 43f509f

File tree

5 files changed

+112
-532
lines changed

5 files changed

+112
-532
lines changed

‎docs/welcome/coffee/welcome.coffee

Lines changed: 9 additions & 102 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,23 @@ isMobile = $(window).width() < 567
22

33
init = ->
44
setupHero()
5-
setupBrowserDemo()
65

76
setupHero = ->
8-
$target = $('.tether-target-demo')
7+
$target = $('.tooltip-target-demo')
98

109
positions = [
1110
'top left'
1211
'left top'
12+
'left middle'
1313
'left bottom'
1414
'bottom left'
15+
'bottom center'
1516
'bottom right'
1617
'right bottom'
18+
'right middle'
1719
'right top'
1820
'top right'
21+
'top center'
1922
]
2023

2124
if isMobile
@@ -31,14 +34,15 @@ setupHero = ->
3134
for position in positions
3235
drops[position] = new Drop
3336
target: $target[0]
34-
className: 'drop-tooltip-theme-arrows'
37+
className: 'tooltip-theme-default'
3538
attach: position
36-
constrainToScrollParent: true
39+
constrainToScrollParent: false
40+
constrainToWindow: false
3741
openOn: ''
3842
content: $.map(position.split(' '), (word) -> word.substr(0, 1).toUpperCase() + word.substr(1)).join(' ')
3943

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

4347
openIndex = 0
4448
frames = 0
@@ -70,101 +74,4 @@ setupHero = ->
7074
else
7175
openNextDrop()
7276

73-
setupBrowserDemo = ->
74-
$browserDemo = $('.browser-demo.showcase')
75-
76-
$startPoint = $('.browser-demo-start-point')
77-
$stopPoint = $('.browser-demo-stop-point')
78-
79-
$iframe = $('.browser-window iframe')
80-
$browserContents = $('.browser-content .browser-demo-inner')
81-
82-
$sections = $('.browser-demo-section')
83-
84-
$('body').append """
85-
<style>
86-
table.showcase.browser-demo.fixed-bottom {
87-
top: #{ $sections.length }00%
88-
}
89-
</style>
90-
"""
91-
92-
$(window).scroll ->
93-
scrollTop = $(window).scrollTop()
94-
95-
if $startPoint.position().top < scrollTop and scrollTop + window.innerHeight < $stopPoint.position().top
96-
$browserDemo.removeClass('fixed-bottom')
97-
$browserDemo.addClass('fixed')
98-
99-
$sections.each ->
100-
$section = $ @
101-
102-
if $section.position().top < scrollTop < $section.position().top + $section.outerHeight()
103-
setSection $section.data('section')
104-
105-
return true
106-
107-
else
108-
$browserDemo.removeAttr('data-section')
109-
$browserDemo.removeClass('fixed')
110-
111-
if scrollTop + window.innerHeight > $stopPoint.position().top
112-
$browserDemo.addClass('fixed-bottom')
113-
else
114-
$browserDemo.removeClass('fixed-bottom')
115-
116-
$iframe.load ->
117-
iframeWindow = $iframe[0].contentWindow
118-
119-
$items = $iframe.contents().find('.item')
120-
121-
$items.each (i) ->
122-
$item = $(@)
123-
124-
drop = new iframeWindow.Drop
125-
target: $item[0]
126-
className: 'drop-theme-arrows'
127-
attach: 'right top'
128-
constrainToWindow: true
129-
openOn: 'click'
130-
content: '<div class="drop-demo-spacer"></div>'
131-
132-
$item.data('drop', drop)
133-
134-
# TODO - remove once zackbloom fixes
135-
drop.$drop.addClass "drop-attached-right-top"
136-
137-
setSection = (section) ->
138-
$browserDemo.attr('data-section', section)
139-
140-
$('.section-copy').removeClass('active')
141-
$(""".section-copy[data-section="#{ section }"]""").addClass('active')
142-
143-
openExampleItem = ->
144-
if isMobile
145-
$iframe.contents().find('.item:first').data().drop.open()
146-
else
147-
$iframe.contents().find('.item:eq(2)').data().drop.open()
148-
149-
closeAllItems = ->
150-
$iframe.contents().find('.item').each -> $(@).data().drop.close() or true
151-
152-
switch section
153-
154-
when 'intro'
155-
closeAllItems()
156-
openExampleItem()
157-
158-
when 'explain'
159-
closeAllItems()
160-
openExampleItem()
161-
162-
when 'resize'
163-
closeAllItems()
164-
openExampleItem()
165-
166-
when 'outro'
167-
closeAllItems()
168-
openExampleItem()
169-
17077
init()

‎docs/welcome/css/welcome.css

Lines changed: 27 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,6 @@ body {
55
margin: 0;
66
font-family: "proxima-nova", "Helvetica Neue", sans-serif; }
77

8-
.drop.drop-tooltip-theme-arrows .drop-content {
9-
padding: 1em;
10-
font-size: 1.1em; }
11-
128
.button {
139
display: inline-block;
1410
border: 2px solid #333333;
@@ -71,9 +67,34 @@ table.showcase {
7167
font-size: 14px; } }
7268
table.showcase .showcase-inner p {
7369
text-align: center; }
70+
table.showcase.about {
71+
text-align: left;
72+
background: #fff1dd; }
73+
table.showcase.about a {
74+
color: #c96c24; }
75+
table.showcase.about p {
76+
-webkit-box-sizing: border-box;
77+
-moz-box-sizing: border-box;
78+
box-sizing: border-box;
79+
text-align: left;
80+
width: 500px;
81+
max-width: 100%;
82+
margin-left: auto;
83+
margin-right: auto; }
84+
table.showcase.about p > code {
85+
background: rgba(0, 0, 0, 0.05); }
86+
table.showcase.about pre {
87+
-webkit-box-sizing: border-box;
88+
-moz-box-sizing: border-box;
89+
box-sizing: border-box;
90+
text-align: left;
91+
width: 500px;
92+
max-width: 100%;
93+
margin-left: auto;
94+
margin-right: auto; }
7495
table.showcase.hero {
7596
text-align: center; }
76-
table.showcase.hero .tether-target-demo {
97+
table.showcase.hero .tooltip-target-demo {
7798
display: -moz-inline-stack;
7899
display: inline-block;
79100
vertical-align: middle;
@@ -84,142 +105,5 @@ table.showcase {
84105
margin: 5rem auto;
85106
padding: 3rem; }
86107
@media (max-width: 567px) {
87-
table.showcase.hero .tether-target-demo {
108+
table.showcase.hero .tooltip-target-demo {
88109
padding: 1rem; } }
89-
table.showcase.browser-demo {
90-
background-image: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #723362), color-stop(100%, #9d223c));
91-
background-image: -webkit-linear-gradient(top left, #723362 0%, #9d223c 100%);
92-
background-image: -moz-linear-gradient(top left, #723362 0%, #9d223c 100%);
93-
background-image: -o-linear-gradient(top left, #723362 0%, #9d223c 100%);
94-
background-image: linear-gradient(top left, #723362 0%, #9d223c 100%);
95-
background-color: #9d223c;
96-
position: absolute;
97-
top: 100%; }
98-
table.showcase.browser-demo.fixed {
99-
position: fixed;
100-
top: 0;
101-
bottom: 0;
102-
left: 0;
103-
right: 0;
104-
z-index: 1; }
105-
table.showcase.browser-demo.fixed .browser-demo-inner {
106-
-webkit-transition: width 2s ease-in-out, height 2s ease-in-out;
107-
-moz-transition: width 2s ease-in-out, height 2s ease-in-out;
108-
-o-transition: width 2s ease-in-out, height 2s ease-in-out;
109-
transition: width 2s ease-in-out, height 2s ease-in-out; }
110-
table.showcase.browser-demo.fixed[data-section="intro"] {
111-
box-shadow: 0 0 0 0; }
112-
table.showcase.browser-demo.fixed[data-section="resize"] .browser-demo-inner {
113-
width: 50%; }
114-
table.showcase.browser-demo .showcase-inner {
115-
position: absolute;
116-
left: 200px;
117-
right: 200px;
118-
top: 220px;
119-
bottom: 120px;
120-
margin: 0;
121-
padding: 0; }
122-
@media (max-width: 1200px) {
123-
table.showcase.browser-demo .showcase-inner {
124-
left: 10%;
125-
right: 10%; } }
126-
@media (max-width: 567px) {
127-
table.showcase.browser-demo .showcase-inner {
128-
bottom: 90px;
129-
top: 180px; } }
130-
table.showcase.browser-demo .browser-demo-inner {
131-
height: 100%;
132-
width: 100%; }
133-
table.showcase.browser-demo .section-copy {
134-
-webkit-transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
135-
-moz-transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
136-
-o-transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
137-
transition: opacity 0.5s ease-in-out, top 0.5s ease-in-out;
138-
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
139-
opacity: 0;
140-
position: absolute;
141-
top: 0;
142-
position: absolute;
143-
height: 200px;
144-
color: white;
145-
text-align: center;
146-
width: 100%; }
147-
table.showcase.browser-demo .section-copy.active {
148-
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
149-
opacity: 1;
150-
top: -150px; }
151-
@media (max-width: 567px) {
152-
table.showcase.browser-demo .section-copy.active {
153-
top: -130px; } }
154-
table.showcase.browser-demo .section-copy h2 {
155-
font-size: 40px;
156-
font-weight: bold;
157-
line-height: 1;
158-
margin: 0 0 15px; }
159-
@media (max-width: 567px) {
160-
table.showcase.browser-demo .section-copy h2 {
161-
font-size: 30px; } }
162-
table.showcase.browser-demo .section-copy p {
163-
font-size: 26px;
164-
font-weight: 300;
165-
margin: 0; }
166-
@media (max-width: 567px) {
167-
table.showcase.browser-demo .section-copy p {
168-
font-size: 16px; } }
169-
table.showcase.browser-demo .browser-window {
170-
-webkit-border-radius: 4px;
171-
-moz-border-radius: 4px;
172-
-ms-border-radius: 4px;
173-
-o-border-radius: 4px;
174-
border-radius: 4px;
175-
background: white;
176-
position: relative;
177-
height: 100%;
178-
width: 100%;
179-
max-width: 1200px;
180-
margin: 0 auto; }
181-
table.showcase.browser-demo .browser-window .browser-titlebar {
182-
position: absolute;
183-
top: 0;
184-
left: 0;
185-
right: 0;
186-
border-bottom: 1px solid #eeeeee;
187-
height: 55px; }
188-
table.showcase.browser-demo .browser-window .browser-titlebar .browser-dots {
189-
padding: 16px; }
190-
table.showcase.browser-demo .browser-window .browser-titlebar .browser-dots b {
191-
-webkit-border-radius: 50%;
192-
-moz-border-radius: 50%;
193-
-ms-border-radius: 50%;
194-
-o-border-radius: 50%;
195-
border-radius: 50%;
196-
display: -moz-inline-stack;
197-
display: inline-block;
198-
vertical-align: middle;
199-
*vertical-align: auto;
200-
zoom: 1;
201-
*display: inline;
202-
width: 10px;
203-
height: 10px;
204-
margin-right: 7px;
205-
background: rgba(0, 0, 0, 0.1); }
206-
table.showcase.browser-demo .browser-window .browser-frame {
207-
position: absolute;
208-
top: 55px;
209-
left: 0;
210-
right: 0;
211-
bottom: 0; }
212-
table.showcase.browser-demo .browser-window .browser-frame iframe {
213-
-webkit-border-radius: 0 0 4px 4px;
214-
-moz-border-radius: 0 0 4px 4px;
215-
-ms-border-radius: 0 0 4px 4px;
216-
-o-border-radius: 0 0 4px 4px;
217-
border-radius: 0 0 4px 4px;
218-
border: 0;
219-
width: 100%;
220-
height: 100%; }
221-
table.showcase.browser-demo-section {
222-
pointer-events: none; }
223-
224-
.browser-content {
225-
display: none; }

0 commit comments

Comments
 (0)