Skip to content

Commit 1fe105a

Browse files
jlukicjlukic
committed
Fix visibility docs
1 parent 6bfe86f commit 1fe105a

3 files changed

Lines changed: 136 additions & 79 deletions

File tree

‎docpad.coffee‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ docpadConfig = {
2929
# Here are some old site urls that you would like to redirect from
3030
oldUrls: [],
3131

32-
version: "2.2.7",
32+
version: "2.2.8",
3333

3434
branch: "master",
3535

‎server/documents/behaviors/visibility.html.eco‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -267,6 +267,28 @@ type : 'UI Behavior'
267267
</tr>
268268
</thead>
269269
<tbody>
270+
<tr>
271+
<td>
272+
onOnScreen
273+
</td>
274+
<td>
275+
Any part of element is in current scroll viewport
276+
</td>
277+
<td>
278+
<div class="code" data-type="javascript">screen.bottom >= element.top && screen.bottom <= element.bottom</div>
279+
</td>
280+
</tr>
281+
<tr>
282+
<td>
283+
onOffScreen
284+
</td>
285+
<td>
286+
No part of element is in current scroll viewport
287+
</td>
288+
<td>
289+
<div class="code" data-type="javascript">screen.bottom <= element.top || screen.top >= element.bottom</div>
290+
</td>
291+
</tr>
270292
<tr>
271293
<td>
272294
onTopVisible

‎server/documents/elements/icon.html.eco‎

Lines changed: 113 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -33,104 +33,129 @@ themes : ['Default']
3333
<h4 class="ui header">Web Content</h4>
3434
<p>Icons can represent types of content found on websites</p>
3535
<div class="ui doubling five column grid">
36-
<div class="column"><i class="add to calendar icon"></i>Add To Calendar</div>
37-
<div class="column"><i class="alarm icon icon"></i>Alarm</div>
38-
<div class="column"><i class="alarm outline icon"></i>Alarm Outline</div>
39-
<div class="column"><i class="alarm mute outline icon"></i>Alarm Mute Outline</div>
40-
<div class="column"><i class="alarm mute icon"></i>Alarm Mute</div>
41-
<div class="column"><i class="at icon"></i>At</div>
42-
<div class="column"><i class="browser icon"></i>Browser</div>
43-
<div class="column"><i class="bug icon"></i>Bug</div>
44-
<div class="column"><i class="calendar outline icon"></i>Calendar Outline</div>
45-
<div class="column"><i class="calendar icon"></i>Calendar</div>
46-
<div class="column"><i class="checked calendar icon"></i>Checked Calendar</div>
47-
<div class="column"><i class="cloud icon"></i>Cloud</div>
48-
<div class="column"><i class="code icon"></i>Code</div>
49-
<div class="column"><i class="comment outline icon"></i>Comment Outline</div>
50-
<div class="column"><i class="comment icon"></i>Comment</div>
51-
<div class="column"><i class="comments outline icon"></i>Comments Outline</div>
52-
<div class="column"><i class="comments icon"></i>Comments</div>
53-
<div class="column"><i class="copyright icon"></i>Copyright</div>
54-
<div class="column"><i class="creative commons icon"></i>Creative Commons</div>
55-
<div class="column"><i class="dashboard icon"></i>Dashboard</div>
56-
<div class="column"><i class="delete calendar icon"></i>Delete Calendar</div>
57-
<div class="column"><i class="external square icon"></i>External Square</div>
58-
<div class="column"><i class="external icon"></i>External</div>
59-
<div class="column"><i class="eyedropper icon"></i>Eyedropper</div>
60-
<div class="column"><i class="feed icon"></i>Feed</div>
61-
<div class="column"><i class="find icon"></i>Find</div>
62-
<div class="column"><i class="hashtag icon"></i>Hashtag</div>
63-
<div class="column"><i class="heartbeat icon"></i>Heartbeat</div>
64-
<div class="column"><i class="history icon"></i>History</div>
65-
<div class="column"><i class="home icon"></i>Home</div>
66-
<div class="column"><i class="hourglass full icon"></i>Hourglass Full</div>
67-
<div class="column"><i class="hourglass start icon"></i>Hourglass Start</div>
68-
<div class="column"><i class="hourglass half icon"></i>Hourglass Half</div>
69-
<div class="column"><i class="hourglass end icon"></i>Hourglass End</div>
70-
<div class="column"><i class="hourglass empty icon"></i>Hourglass Empty</div>
71-
<div class="column"><i class="idea icon"></i>Idea</div>
72-
<div class="column"><i class="image icon"></i>Image</div>
73-
<div class="column"><i class="inbox icon"></i>Inbox</div>
74-
<div class="column"><i class="industry icon"></i>Industry</div>
75-
<div class="column"><i class="lab icon"></i>Lab</div>
76-
<div class="column"><i class="mail outline icon"></i>Mail Outline</div>
77-
<div class="column"><i class="mail square icon"></i>Mail Square</div>
78-
<div class="column"><i class="mail icon"></i>Mail</div>
79-
<div class="column"><i class="mouse pointer icon"></i>Mouse Pointer</div>
80-
<div class="column"><i class="options icon"></i>Options</div>
81-
<div class="column"><i class="paint brush icon"></i>Paint Brush</div>
82-
<div class="column"><i class="payment icon"></i>Payment</div>
83-
<div class="column"><i class="percent icon"></i>Percent</div>
84-
<div class="column"><i class="privacy icon"></i>Privacy</div>
85-
<div class="column"><i class="protect icon"></i>Protect</div>
86-
<div class="column"><i class="registered icon"></i>Registered</div>
87-
<div class="column"><i class="remove from calendar icon"></i>Remove From Calendar</div>
88-
<div class="column"><i class="search icon"></i>Search</div>
89-
<div class="column"><i class="setting icon"></i>Setting</div>
90-
<div class="column"><i class="settings icon"></i>Settings</div>
91-
<div class="column"><i class="shop icon"></i>Shop</div>
92-
<div class="column"><i class="shopping bag icon"></i>Shopping Bag</div>
93-
<div class="column"><i class="shopping basket icon"></i>Shopping Basket</div>
94-
<div class="column"><i class="signal icon"></i>Signal</div>
95-
<div class="column"><i class="sitemap icon"></i>Sitemap</div>
96-
<div class="column"><i class="tag icon"></i>Tag</div>
97-
<div class="column"><i class="tags icon"></i>Tags</div>
98-
<div class="column"><i class="tasks icon"></i>Tasks</div>
99-
<div class="column"><i class="terminal icon"></i>Terminal</div>
100-
<div class="column"><i class="text telephone icon"></i>Text Telephone</div>
101-
<div class="column"><i class="ticket icon"></i>Ticket</div>
102-
<div class="column"><i class="trademark icon"></i>Trademark</div>
103-
<div class="column"><i class="trophy icon"></i>Trophy</div>
104-
<div class="column"><i class="wifi icon"></i>Wifi</div>
36+
<div class="column"><i class="add to calendar"></i>Add To Calendar</div>
37+
<div class="column"><i class="address book"></i>Address Book</div>
38+
<div class="column"><i class="address book outline"></i>Address Book Outline</div>
39+
<div class="column"><i class="address card"></i>Address Card</div>
40+
<div class="column"><i class="address card outline"></i>Address Card Outline</div>
41+
<div class="column"><i class="alarm"></i>Alarm</div>
42+
<div class="column"><i class="alarm mute"></i>Alarm Mute</div>
43+
<div class="column"><i class="alarm mute outline"></i>Alarm Mute Outline</div>
44+
<div class="column"><i class="alarm outline"></i>Alarm Outline</div>
45+
<div class="column"><i class="at"></i>At</div>
46+
<div class="column"><i class="browser"></i>Browser</div>
47+
<div class="column"><i class="bug"></i>Bug</div>
48+
<div class="column"><i class="calendar"></i>Calendar</div>
49+
<div class="column"><i class="calendar outline"></i>Calendar Outline</div>
50+
<div class="column"><i class="checked calendar"></i>Checked Calendar</div>
51+
<div class="column"><i class="cloud"></i>Cloud</div>
52+
<div class="column"><i class="code"></i>Code</div>
53+
<div class="column"><i class="comment"></i>Comment</div>
54+
<div class="column"><i class="comment outline"></i>Comment Outline</div>
55+
<div class="column"><i class="comments"></i>Comments</div>
56+
<div class="column"><i class="comments"></i>Comments</div>
57+
<div class="column"><i class="comments outline"></i>Comments Outline</div>
58+
<div class="column"><i class="copyright"></i>Copyright</div>
59+
<div class="column"><i class="creative commons"></i>Creative Commons</div>
60+
<div class="column"><i class="dashboard"></i>Dashboard</div>
61+
<div class="column"><i class="delete calendar"></i>Delete Calendar</div>
62+
<div class="column"><i class="external"></i>External</div>
63+
<div class="column"><i class="external"></i>External</div>
64+
<div class="column"><i class="external square"></i>External Square</div>
65+
<div class="column"><i class="eyedropper"></i>Eyedropper</div>
66+
<div class="column"><i class="feed"></i>Feed</div>
67+
<div class="column"><i class="find"></i>Find</div>
68+
<div class="column"><i class="hand pointer"></i>Hand Pointer</div>
69+
<div class="column"><i class="handshake"></i>Handshake</div>
70+
<div class="column"><i class="hashtag"></i>Hashtag</div>
71+
<div class="column"><i class="heartbeat"></i>Heartbeat</div>
72+
<div class="column"><i class="history"></i>History</div>
73+
<div class="column"><i class="home"></i>Home</div>
74+
<div class="column"><i class="hourglass empty"></i>Hourglass Empty</div>
75+
<div class="column"><i class="hourglass end"></i>Hourglass End</div>
76+
<div class="column"><i class="hourglass full"></i>Hourglass Full</div>
77+
<div class="column"><i class="hourglass half"></i>Hourglass Half</div>
78+
<div class="column"><i class="hourglass start"></i>Hourglass Start</div>
79+
<div class="column"><i class="id badge"></i>Id Badge</div>
80+
<div class="column"><i class="id card"></i>Id Card</div>
81+
<div class="column"><i class="id card outline"></i>Id Card Outline</div>
82+
<div class="column"><i class="idea"></i>Idea</div>
83+
<div class="column"><i class="image"></i>Image</div>
84+
<div class="column"><i class="inbox"></i>Inbox</div>
85+
<div class="column"><i class="industry"></i>Industry</div>
86+
<div class="column"><i class="lab"></i>Lab</div>
87+
<div class="column"><i class="mail"></i>Mail</div>
88+
<div class="column"><i class="mail outline"></i>Mail Outline</div>
89+
<div class="column"><i class="mail square"></i>Mail Square</div>
90+
<div class="column"><i class="mouse pointer"></i>Mouse Pointer</div>
91+
<div class="column"><i class="open envelope"></i>Open Envelope</div>
92+
<div class="column"><i class="open envelope outline"></i>Open Envelope Outline</div>
93+
<div class="column"><i class="options"></i>Options</div>
94+
<div class="column"><i class="paint brush"></i>Paint Brush</div>
95+
<div class="column"><i class="payment"></i>Payment</div>
96+
<div class="column"><i class="percent"></i>Percent</div>
97+
<div class="column"><i class="podcast"></i>Podcast</div>
98+
<div class="column"><i class="privacy"></i>Privacy</div>
99+
<div class="column"><i class="protect"></i>Protect</div>
100+
<div class="column"><i class="registered"></i>Registered</div>
101+
<div class="column"><i class="remove from calendar"></i>Remove From Calendar</div>
102+
<div class="column"><i class="search"></i>Search</div>
103+
<div class="column"><i class="setting"></i>Setting</div>
104+
<div class="column"><i class="settings"></i>Settings</div>
105+
<div class="column"><i class="shop"></i>Shop</div>
106+
<div class="column"><i class="shopping bag"></i>Shopping Bag</div>
107+
<div class="column"><i class="shopping basket"></i>Shopping Basket</div>
108+
<div class="column"><i class="signal"></i>Signal</div>
109+
<div class="column"><i class="sitemap"></i>Sitemap</div>
110+
<div class="column"><i class="tag"></i>Tag</div>
111+
<div class="column"><i class="tags"></i>Tags</div>
112+
<div class="column"><i class="tasks"></i>Tasks</div>
113+
<div class="column"><i class="terminal"></i>Terminal</div>
114+
<div class="column"><i class="text telephone"></i>Text Telephone</div>
115+
<div class="column"><i class="ticket"></i>Ticket</div>
116+
<div class="column"><i class="trademark"></i>Trademark</div>
117+
<div class="column"><i class="trophy"></i>Trophy</div>
118+
<div class="column"><i class="window close"></i>Window Close</div>
119+
<div class="column"><i class="window close outline"></i>Window Close Outline</div>
120+
<div class="column"><i class="window maximize"></i>Window Maximize</div>
121+
<div class="column"><i class="window minimize"></i>Window Minimize</div>
122+
<div class="column"><i class="window restore"></i>Window Restore</div>
105123
</div>
106124
<div class="existing code">
107125
<i class="add to calendar icon"></i>
108-
<i class="alarm outline icon"></i>
109-
<i class="alarm mute outline icon"></i>
110-
<i class="alarm mute icon"></i>
126+
<i class="address book icon"></i>
127+
<i class="address book outline icon"></i>
128+
<i class="address card icon"></i>
129+
<i class="address card outline icon"></i>
111130
<i class="alarm icon"></i>
131+
<i class="alarm mute icon"></i>
132+
<i class="alarm mute outline icon"></i>
133+
<i class="alarm outline icon"></i>
112134
<i class="at icon"></i>
113135
<i class="browser icon"></i>
114136
<i class="bug icon"></i>
115-
<i class="calendar outline icon"></i>
116137
<i class="calendar icon"></i>
138+
<i class="calendar outline icon"></i>
117139
<i class="checked calendar icon"></i>
118140
<i class="cloud icon"></i>
119141
<i class="code icon"></i>
120-
<i class="comment outline icon"></i>
121142
<i class="comment icon"></i>
122-
<i class="comments outline icon"></i>
143+
<i class="comment outline icon"></i>
144+
<i class="comments icon"></i>
123145
<i class="comments icon"></i>
146+
<i class="comments outline icon"></i>
124147
<i class="copyright icon"></i>
125148
<i class="creative commons icon"></i>
126149
<i class="dashboard icon"></i>
127150
<i class="delete calendar icon"></i>
128-
<i class="external square icon"></i>
129151
<i class="external icon"></i>
152+
<i class="external icon"></i>
153+
<i class="external square icon"></i>
130154
<i class="eyedropper icon"></i>
131155
<i class="feed icon"></i>
132156
<i class="find icon"></i>
133157
<i class="hand pointer icon"></i>
158+
<i class="handshake icon"></i>
134159
<i class="hashtag icon"></i>
135160
<i class="heartbeat icon"></i>
136161
<i class="history icon"></i>
@@ -140,19 +165,25 @@ themes : ['Default']
140165
<i class="hourglass full icon"></i>
141166
<i class="hourglass half icon"></i>
142167
<i class="hourglass start icon"></i>
168+
<i class="id badge icon"></i>
169+
<i class="id card icon"></i>
170+
<i class="id card outline icon"></i>
143171
<i class="idea icon"></i>
144172
<i class="image icon"></i>
145173
<i class="inbox icon"></i>
146174
<i class="industry icon"></i>
147175
<i class="lab icon"></i>
176+
<i class="mail icon"></i>
148177
<i class="mail outline icon"></i>
149178
<i class="mail square icon"></i>
150-
<i class="mail icon"></i>
151179
<i class="mouse pointer icon"></i>
180+
<i class="open envelope icon"></i>
181+
<i class="open envelope outline icon"></i>
152182
<i class="options icon"></i>
153183
<i class="paint brush icon"></i>
154184
<i class="payment icon"></i>
155185
<i class="percent icon"></i>
186+
<i class="podcast icon"></i>
156187
<i class="privacy icon"></i>
157188
<i class="protect icon"></i>
158189
<i class="registered icon"></i>
@@ -173,7 +204,11 @@ themes : ['Default']
173204
<i class="ticket icon"></i>
174205
<i class="trademark icon"></i>
175206
<i class="trophy icon"></i>
176-
<i class="wifi icon"></i>
207+
<i class="window close icon"></i>
208+
<i class="window close outline icon"></i>
209+
<i class="window maximize icon"></i>
210+
<i class="window minimize icon"></i>
211+
<i class="window restore icon"></i>
177212
</div>
178213
</div>
179214
<div class="icon example">

0 commit comments

Comments
 (0)