Skip to content

Commit 90bca5b

Browse files
jlukicjlukic
committed
Docs from modal changes
1 parent 73b21ab commit 90bca5b

4 files changed

Lines changed: 144 additions & 50 deletions

File tree

‎server/documents/hotfix.html.eco‎

Lines changed: 51 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -8,45 +8,66 @@ type : 'Library'
88
---
99

1010
<div class="ui container">
11-
<div class="ui fluid multiple search selection dropdown">
12-
<input name="tags" type="hidden">
13-
<i class="dropdown icon"></i>
14-
<div class="default text">Skills</div>
15-
<div class="menu">
16-
<div class="item" data-value="angular">Angular</div>
17-
<div class="item" data-value="css">CSS</div>
18-
<div class="item" data-value="design">Graphic Design</div>
19-
<div class="item" data-value="ember">Ember</div>
20-
<div class="item" data-value="html">HTML</div>
21-
<div class="item" data-value="ia">Information Architecture</div>
22-
<div class="item" data-value="javascript">Javascript</div>
23-
<div class="item" data-value="mech">Mechanical Engineering</div>
24-
<div class="item" data-value="meteor">Meteor</div>
25-
<div class="item" data-value="node">NodeJS</div>
26-
<div class="item" data-value="plumbing">Plumbing</div>
27-
<div class="item" data-value="python">Python</div>
28-
<div class="item" data-value="rails">Rails</div>
29-
<div class="item" data-value="react">React</div>
30-
<div class="item" data-value="repair">Kitchen Repair</div>
31-
<div class="item" data-value="ruby">Ruby</div>
32-
<div class="item" data-value="ui">UI Design</div>
33-
<div class="item" data-value="ux">User Experience</div>
34-
</div>
35-
11+
<target class="top left">
12+
<i class="fitted link heart icon" data-content="This is a popup"></i>
13+
</target>
14+
<target class="top center">
15+
<i class="fitted link heart icon" data-content="This is a popup"></i>
16+
</target>
17+
<target class="top right">
18+
<i class="fitted link heart icon" data-content="This is a popup"></i>
19+
</target>
20+
<target class="right center">
21+
<i class="fitted link heart icon" data-content="This is a popup"></i>
22+
</target>
23+
<target class="bottom right">
24+
<i class="fitted link heart icon" data-content="This is a popup"></i>
25+
</target>
26+
<target class="bottom center">
27+
<i class="fitted link heart icon" data-content="This is a popup"></i>
28+
</target>
29+
<target class="top right">
30+
<i class="fitted link heart icon" data-content="This is a popup"></i>
31+
</target>
32+
<div class="ui divider"></div>
33+
<target class="top left">
34+
<div class="ui mini icon button" data-content="Do it do it"><i class="right chevron icon"></i></div>
35+
</target>
36+
<target class="top left">
37+
<div class="ui tiny icon button" data-content="Do it do it"><i class="right chevron icon"></i></div>
38+
</target>
39+
<target class="top left">
40+
<div class="ui small icon button" data-content="Do it do it"><i class="right chevron icon"></i></div>
41+
</target>
42+
<target class="top left">
43+
<div class="ui icon button" data-content="Do it do it"><i class="right chevron icon"></i></div>
44+
</target>
3645
</div>
3746

3847
<script>
3948
$(document).ready(function() {
40-
$('.dropdown').dropdown({ allowAdditions: true});
41-
});
42-
49+
$('target').each(function() {
50+
var
51+
$icon = $(this).children(),
52+
position = $(this).attr('class')
53+
;
54+
console.log($icon.get(0), position);
55+
$icon.popup({
56+
on: 'hover',
57+
inline: true,
58+
preserve: true,
59+
position: position
60+
});
61+
});
62+
});
4363
</script>
4464

4565
<!-- TEST CSS HERE !-->
4666
<style type="text/css">
4767

48-
4968
.ui.container {
50-
padding-top: 3em;
69+
padding-top: 6em;
5170
}
71+
72+
5273
</style>

‎server/documents/modules/dimmer.html.eco‎

Lines changed: 52 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ themes : ['Default']
6969
<div class="example">
7070
<h4 class="ui header">Content Dimmer</h4>
7171
<p>A dimmer can display content</p>
72-
<div class="ui ignored info message">Content must be included inside <code>.content .center</code> to display centered correctly in the dimmer.</div>
72+
<div class="ui ignored info message">Since <div class="ui horizontal label">2.3</div> dimmers with content now only need a single wrapping <code>content</code> container.</div>
7373
<div class="ui segment">
7474
<h3 class="ui header">
7575
Overlayable Section
@@ -82,12 +82,10 @@ themes : ['Default']
8282
<img class="ui medium wireframe image" src="/images/wireframe/media-paragraph.png">
8383
<div class="ui dimmer">
8484
<div class="content">
85-
<div class="center">
86-
<h2 class="ui inverted icon header">
87-
<i class="heart icon"></i>
88-
Dimmed Message!
89-
</h2>
90-
</div>
85+
<h2 class="ui inverted icon header">
86+
<i class="heart icon"></i>
87+
Dimmed Message!
88+
</h2>
9189
</div>
9290
</div>
9391
</div>
@@ -103,7 +101,7 @@ themes : ['Default']
103101
<div class="existing code" data-preview="true">
104102
<div class="ui page dimmer">
105103
<div class="content">
106-
<div class="center">Hello</div>
104+
Hello
107105
</div>
108106
</div>
109107
</div>
@@ -166,6 +164,47 @@ themes : ['Default']
166164
</div>
167165
</div>
168166

167+
<h3>Alignment</h3>
168+
<div class="example">
169+
<h4 class="ui header">
170+
Vertical Alignment
171+
<span class="ui teal label">New in 2.3</span>
172+
</h4>
173+
<p>A dimmer can have its content top or bottom aligned.</p>
174+
<div class="ui segment">
175+
<div class="ui top aligned dimmer">
176+
<div class="content">
177+
<h2 class="ui inverted header">Title</h2>
178+
<div class="ui primary button">Add</div>
179+
<div class="ui button">View</div>
180+
</div>
181+
</div>
182+
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
183+
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
184+
</div>
185+
<div class="ui ignored ignored icon buttons">
186+
<div class="ui show button"><i class="plus icon"></i></div>
187+
<div class="ui hide button"><i class="minus icon"></i></div>
188+
</div>
189+
</div>
190+
<div class="another example">
191+
<div class="ui segment">
192+
<div class="ui bottom aligned dimmer">
193+
<div class="content">
194+
<h2 class="ui inverted header">Title</h2>
195+
<div class="ui primary button">Add</div>
196+
<div class="ui button">View</div>
197+
</div>
198+
</div>
199+
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
200+
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
201+
</div>
202+
<div class="ui ignored ignored icon buttons">
203+
<div class="ui show button"><i class="plus icon"></i></div>
204+
<div class="ui hide button"><i class="minus icon"></i></div>
205+
</div>
206+
</div>
207+
169208
<h3>Dimmer</h3>
170209
<div class="example">
171210
<h4 class="ui header">Simple Dimmer</h4>
@@ -209,22 +248,18 @@ themes : ['Default']
209248
<div class="ui medium image">
210249
<div class="ui dimmer">
211250
<div class="content">
212-
<div class="center">
213-
<h2 class="ui inverted header">Title</h2>
214-
<div class="ui primary button">Add</div>
215-
<div class="ui button">View</div>
216-
</div>
251+
<h2 class="ui inverted header">Title</h2>
252+
<div class="ui primary button">Add</div>
253+
<div class="ui button">View</div>
217254
</div>
218255
</div>
219256
<img class="ui image" src="/images/wireframe/image.png">
220257
</div>
221258
<div class="ui circular image">
222259
<div class="ui dimmer">
223260
<div class="content">
224-
<div class="center">
225-
<div class="ui small primary button">Add</div>
226-
<div class="ui small button">View</div>
227-
</div>
261+
<div class="ui small primary button">Add</div>
262+
<div class="ui small button">View</div>
228263
</div>
229264
</div>
230265
<img src="/images/wireframe/square-image.png">

‎server/documents/modules/modal.html.eco‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,30 @@ themes : ['Default', 'Material']
9898
</div>
9999
</div>
100100

101+
<div class="ui special modal">
102+
<div class="header">
103+
Delete Your Account
104+
</div>
105+
<div class="content">
106+
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
107+
<div class="ui hidden divider"></div>
108+
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
109+
<div class="ui hidden divider"></div>
110+
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
111+
<div class="ui hidden divider"></div>
112+
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
113+
</div>
114+
<div class="actions">
115+
<div class="ui negative button">
116+
No
117+
</div>
118+
<div class="ui positive right labeled icon button">
119+
Yes
120+
<i class="checkmark icon"></i>
121+
</div>
122+
</div>
123+
</div>
124+
101125
<div class="ui tiny test modal">
102126
<div class="header">
103127
Delete Your Account
@@ -526,6 +550,22 @@ themes : ['Default', 'Material']
526550

527551
<h2 class="ui dividing header">Examples</h2>
528552

553+
<div class="no example">
554+
<h4 class="ui header">
555+
Disabling Vertical Centering
556+
<div class="ui horizontal teal label">New in 2.3</div>
557+
</h4>
558+
<p>When your modal has dynamic content, or multiple steps, it can make sense to disable centering so content doesn't jump around vertically when its height changes.</p>
559+
<div class="code" data-demo="true">
560+
$('.special.modal')
561+
.modal({
562+
centered: false
563+
})
564+
.modal('show')
565+
;
566+
</div>
567+
</div>
568+
529569
<div class="no example">
530570
<h4 class="ui header">Scrolling Modal</h4>
531571
<p>When your modal content exceeds the height of the browser the scrollable area will automatically expand to include just enough space for scrolling, without scrolling the page below.</p>

‎server/files/javascript/docs.js‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ semantic.ready = function() {
142142
: $(this).children().eq(1)
143143
;
144144
$('<i/>')
145-
.addClass('icon code')
145+
.addClass('fitted icon code')
146146
.insertBefore( $insertPoint )
147147
;
148148
})
@@ -787,7 +787,6 @@ semantic.ready = function() {
787787
.on('click', handler.copyCode)
788788
.popup({
789789
variation : 'inverted',
790-
offset : -12,
791790
distanceAway : 6
792791
})
793792
;
@@ -1346,7 +1345,6 @@ semantic.ready = function() {
13461345
hide: 100
13471346
},
13481347
position : 'top left',
1349-
offset : -5,
13501348
content : 'View Source',
13511349
target : $(this).find('i.code')
13521350
})

0 commit comments

Comments
 (0)