Skip to content

Commit aaf9adb

Browse files
jlukicjlukic
committed
Work on 2.4.0 docs
1 parent 627fe28 commit aaf9adb

16 files changed

Lines changed: 622 additions & 70 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.3.2",
32+
version: "2.4.0",
3333

3434
branch: "master",
3535

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

Lines changed: 41 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -34,69 +34,64 @@ themes : ['default']
3434
<div class="ui ignored message">
3535
Vertical dividers requires <code>position: relative</code> on the element that you would like to contain the divider
3636
</div>
37-
<div class="ui info ignored message">
38-
A vertical divider will automatically swap to a horizontal divider at mobile resolutions when used inside a <a href="/collections/grid.html#stackable-grid"><code>stackable grid</code></a>
39-
</div>
4037
<div class="ui warning ignored message">
41-
There is a known bug of vertical dividers after a W3C update. Please read <a href="https://github.com/Semantic-Org/Semantic-UI/issues/4342" target="_blank" rel="nofollow">#4342</a> for more information
38+
Due to a change in W3C implementation of <a href="https://github.com/w3c/csswg-drafts/issues/401" target="_blank" rel="nofollow">absolutely positioned elements in flex containers</a> vertical dividers now currently only support 50/50 splits automatically, and only if not positioned <b>as direct children of flex containers</b> (like grid).
4239
</div>
43-
<div class="ui three column very relaxed grid">
44-
<div class="column">
45-
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
46-
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
47-
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
48-
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
40+
<div class="ui segment">
41+
<div class="ui two column very relaxed grid">
42+
<div class="column">
43+
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
44+
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
45+
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
46+
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
47+
</div>
48+
<div class="column">
49+
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
50+
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
51+
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
52+
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
53+
</div>
4954
</div>
5055
<div class="ui vertical divider">
5156
and
5257
</div>
53-
<div class="column">
54-
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
55-
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
56-
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
57-
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
58-
</div>
59-
<div class="ui vertical divider">
60-
not
61-
</div>
62-
<div class="column">
63-
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
64-
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
65-
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
66-
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
67-
</div>
6858
</div>
6959
</div>
7060
<div class="another example">
71-
<div class="ui two column middle aligned very relaxed stackable grid">
72-
<div class="column">
73-
<div class="ui form">
74-
<div class="field">
75-
<label>Username</label>
76-
<div class="ui left icon input">
77-
<input type="text" placeholder="Username">
78-
<i class="user icon"></i>
61+
<div class="ui info ignored message">
62+
A vertical divider will automatically swap to a horizontal divider at mobile resolutions when used inside a <a href="/collections/grid.html#stackable-grid"><code>stackable grid</code></a>
63+
</div>
64+
<div class="ui placeholder segment">
65+
<div class="ui two column very relaxed stackable grid">
66+
<div class="column">
67+
<div class="ui form">
68+
<div class="field">
69+
<label>Username</label>
70+
<div class="ui left icon input">
71+
<input type="text" placeholder="Username">
72+
<i class="user icon"></i>
73+
</div>
7974
</div>
80-
</div>
81-
<div class="field">
82-
<label>Password</label>
83-
<div class="ui left icon input">
84-
<input type="password">
85-
<i class="lock icon"></i>
75+
<div class="field">
76+
<label>Password</label>
77+
<div class="ui left icon input">
78+
<input type="password">
79+
<i class="lock icon"></i>
80+
</div>
8681
</div>
82+
<div class="ui blue submit button">Login</div>
83+
</div>
84+
</div>
85+
<div class="middle aligned column">
86+
<div class="ui big button">
87+
<i class="signup icon"></i>
88+
Sign Up
8789
</div>
88-
<div class="ui blue submit button">Login</div>
8990
</div>
9091
</div>
9192
<div class="ui vertical divider">
9293
Or
9394
</div>
94-
<div class="center aligned column">
95-
<div class="ui big green labeled icon button">
96-
<i class="signup icon"></i>
97-
Sign Up
98-
</div>
99-
</div>
10095
</div>
10196
</div>
10297

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1411,6 +1411,7 @@ themes : ['Default']
14111411
<div class="column"><i class="cloud icon"></i>cloud</div>
14121412
<div class="column"><i class="cloud download icon"></i>cloud download</div>
14131413
<div class="column"><i class="cloud upload icon"></i>cloud upload</div>
1414+
<div class="column"><i class="close icon"></i>close icon</div>
14141415
<div class="column"><i class="coffee icon"></i>coffee</div>
14151416
<div class="column"><i class="cog icon"></i>cog</div>
14161417
<div class="column"><i class="cogs icon"></i>cogs</div>
@@ -1542,6 +1543,7 @@ themes : ['Default']
15421543
<div class="column"><i class="user circle icon"></i>user circle</div>
15431544
<div class="column"><i class="user circle outline icon"></i>user circle outline</div>
15441545
<div class="column"><i class="wifi icon"></i>wifi</div>
1546+
<div class="column"><i class="x icon"></i>x icon</div>
15451547
</div>
15461548
<div class="existing code">
15471549
<i class="ban icon"></i>

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

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ themes : ['Default', 'Duo', 'Pulsar']
1515

1616
<%- @partial('header') %>
1717
<link rel="stylesheet/less" type="text/css" href="/src/definitions/elements/loader.less" />
18+
<script src="/javascript/loader.js"></script>
1819

1920
<div class="main ui container">
2021

@@ -31,6 +32,31 @@ themes : ['Default', 'Duo', 'Pulsar']
3132
</div>
3233
</div>
3334

35+
<div class="example" data-class="image header, paragraph, line, content, loader, image">
36+
<h4 class="ui header">
37+
Content Loader
38+
<div class="ui teal horizontal label">New in 2.4.0</div>
39+
</h4>
40+
<p>A loader can indicate content will soon appear inside a container.</p>
41+
<div class="ui ignored info message">
42+
Content loaders can include <code>paragraph</code>, <code>header</code>, <code>image header</code> and <code>image</code> to let you format the loaders to emulate the content being loaded.
43+
</div>
44+
<div class="ui active content loader">
45+
<div class="image header">
46+
<div class="line"></div>
47+
<div class="line"></div>
48+
</div>
49+
<div class="paragraph">
50+
<div class="line"></div>
51+
<div class="line"></div>
52+
<div class="line"></div>
53+
</div>
54+
</div>
55+
</div>
56+
<div class="another content example">
57+
<%- @partial('examples/content-loader') %>
58+
</div>
59+
3460
<div class="example">
3561
<h4 class="ui header">Text Loader</h4>
3662
<p>A loader can contain text</p>
@@ -51,6 +77,54 @@ themes : ['Default', 'Duo', 'Pulsar']
5177
</div>
5278

5379

80+
<h2 class="ui dividing header">Content</h2>
81+
<div class="example">
82+
<h4 class="ui header">Headers</h4>
83+
<p>A content loader can contain a header</p>
84+
<div class="ui active content loader">
85+
<div class="image header">
86+
<div class="line"></div>
87+
<div class="line"></div>
88+
</div>
89+
</div>
90+
</div>
91+
<div class="another example">
92+
<div class="ui active content loader">
93+
<div class="header">
94+
<div class="line"></div>
95+
<div class="line"></div>
96+
</div>
97+
</div>
98+
</div>
99+
<div class="example">
100+
<h4 class="ui header">Paragraph</h4>
101+
<p>A content loader can contain a paragraph</p>
102+
<div class="ui active content loader">
103+
<div class="paragraph">
104+
<div class="line"></div>
105+
<div class="line"></div>
106+
<div class="line"></div>
107+
<div class="line"></div>
108+
<div class="line"></div>
109+
</div>
110+
<div class="paragraph">
111+
<div class="line"></div>
112+
<div class="line"></div>
113+
<div class="line"></div>
114+
</div>
115+
</div>
116+
</div>
117+
<div class="example">
118+
<h4 class="ui header">Image</h4>
119+
<p>A content loader can contain an image</p>
120+
<div class="ui ignored info message">
121+
For image loaders you can use <code>square</code> (1:1) or <code>rectangular</code> (4:3) to embed an aspect ratio into the image loader, or manually specify a width and height using your site's css.
122+
</div>
123+
<div class="ui active content loader" style="width:150px;height:150px;">
124+
<div class="image"></div>
125+
</div>
126+
</div>
127+
54128
<h2 class="ui dividing header">States</h2>
55129

56130
<div class="example">
@@ -175,6 +249,21 @@ themes : ['Default', 'Duo', 'Pulsar']
175249
<br>
176250
</div>
177251
</div>
252+
<div class="another example">
253+
<div class="ui inverted segment">
254+
<div class="ui active inverted content loader">
255+
<div class="image header">
256+
<div class="line"></div>
257+
<div class="line"></div>
258+
</div>
259+
<div class="paragraph">
260+
<div class="line"></div>
261+
<div class="line"></div>
262+
<div class="line"></div>
263+
</div>
264+
</div>
265+
</div>
266+
</div>
178267
<div class="another example" data-class="inverted dimmer">
179268
<div class="ui ignored info message">Loaders will automatically be inverted inside <code>inverted dimmer</code></div>
180269
<div class="ui segment">

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

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ type : 'UI Element'
1212
themes : ['default', 'GitHub']
1313
---
1414
<%- @partial('header') %>
15+
<script src="/javascript/search.js"></script>
1516
<link rel="stylesheet/less" type="text/css" href="/src/definitions/elements/segment.less" />
1617

1718
<div class="main ui container">
@@ -25,6 +26,71 @@ themes : ['default', 'GitHub']
2526
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
2627
</div>
2728
</div>
29+
<div class="example">
30+
<h4 class="ui header">
31+
Placeholder
32+
<div class="ui teal horizontal label">New in 2.4.0</div>
33+
</h4>
34+
<p>A segment may be used to explain the purpose of empty space.</p>
35+
<div class="ui placeholder segment">
36+
<div class="ui icon header">
37+
<i class="dont icon"></i>
38+
No users have been added yet
39+
</div>
40+
<div class="ui primary button">Add User</div>
41+
</div>
42+
</div>
43+
44+
<div class="another example">
45+
<div class="ui ignored info message">
46+
To use inline-block content inside a placeholder, wrap the content in <code>inline</code>.
47+
</div>
48+
<div class="ui placeholder segment">
49+
<div class="ui icon header">
50+
<i class="dont icon"></i>
51+
We don't have any results matching your query
52+
</div>
53+
<div class="inline">
54+
<div class="ui primary button">Clear Query</div>
55+
<div class="ui button">Restart</div>
56+
</div>
57+
</div>
58+
</div>
59+
60+
61+
<div class="another local example">
62+
<div class="ui placeholder segment">
63+
<div class="ui two column center aligned grid">
64+
<div class="ui vertical divider">Or</div>
65+
<div class="middle aligned row">
66+
<div class="column">
67+
<div class="ui icon header">
68+
<i class="search icon"></i>
69+
Find Country
70+
</div>
71+
<div class="field">
72+
<div class="ui search">
73+
<div class="ui icon input">
74+
<input class="prompt" type="text" placeholder="Search countries...">
75+
<i class="search icon"></i>
76+
</div>
77+
<div class="results"></div>
78+
</div>
79+
</div>
80+
</div>
81+
<div class="column">
82+
<div class="ui icon header">
83+
<i class="world icon"></i>
84+
Add New Country
85+
</div>
86+
<div class="ui primary button">
87+
Create
88+
</div>
89+
</div>
90+
</div>
91+
</div>
92+
</div>
93+
</div>
2894

2995
<div class="example">
3096
<h4 class="ui header">Raised</h4>

‎server/documents/hotfix.html‎

Lines changed: 28 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,41 @@
99

1010
<div class="ui container">
1111

12-
<div class="ui form">
13-
<div class="field">
14-
<label>Favorite Animal</label>
15-
<div class="ui search selection dropdown">
16-
<input type="hidden">
12+
<div class="ui button dropdown">
13+
<span class="text">Choose Category</span>
14+
<i class="dropdown icon"></i>
15+
<div class="menu">
16+
<div class="item">
17+
<span class="text">Category 1</span>
18+
</div>
19+
<div class="item">
20+
<i class="dropdown icon"></i>
21+
<span class="text">Category 2</span>
22+
<div class="menu">
23+
<div class="item">Item 2A</div>
24+
<div class="item">Item 2B</div>
25+
<div class="item">Item 2C</div>
26+
</div>
27+
</div>
28+
<div class="item">
1729
<i class="dropdown icon"></i>
18-
<input type="text" class="search" tabindex="0">
19-
<div class="default text">Select one...</div>
20-
<div class="menu" tabindex="-1"></div>
30+
<span class="text">Category 3</span>
31+
<div class="menu">
32+
<div class="item">Item 3A</div>
33+
<div class="item">Item 3B</div>
34+
<div class="item">Item 3C</div>
35+
</div>
2136
</div>
2237
</div>
2338
</div>
2439

2540
</div>
26-
2741
<script>
2842
$(document).ready(function() {
29-
30-
$('.ui.dropdown').dropdown({
31-
apiSettings: {
32-
url: '//api.semantic-ui.com/tags/xxx',
33-
cache: false
34-
}
35-
});
36-
43+
$('.ui.dropdown')
44+
.dropdown({
45+
allowCategorySelection: true
46+
});
3747
});
3848
</script>
3949

@@ -46,3 +56,4 @@
4656

4757

4858
</style>
59+

0 commit comments

Comments
 (0)