Skip to content

Commit 93e5aba

Browse files
jlukicjlukic
committed
Add corner icons, add tiny/small modal
1 parent 2d9ddb2 commit 93e5aba

4 files changed

Lines changed: 148 additions & 131 deletions

File tree

‎docpad.coffee‎

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

32-
<<<<<<< HEAD
3332
version: "2.2.10",
34-
=======
35-
version: "2.2.8",
36-
>>>>>>> 2484310f15aa385c7bb5e7e668af728132955b76
3733

3834
branch: "master",
3935

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

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1757,6 +1757,24 @@ themes : ['Default']
17571757
<i class="corner add icon"></i>
17581758
</i>
17591759
</div>
1760+
<div class="another example">
1761+
<i class="huge icons">
1762+
<i class="puzzle icon"></i>
1763+
<i class="top left corner add icon"></i>
1764+
</i>
1765+
<i class="huge icons">
1766+
<i class="puzzle icon"></i>
1767+
<i class="top right corner add icon"></i>
1768+
</i>
1769+
<i class="huge icons">
1770+
<i class="puzzle icon"></i>
1771+
<i class="bottom left corner add icon"></i>
1772+
</i>
1773+
<i class="huge icons">
1774+
<i class="puzzle icon"></i>
1775+
<i class="bottom right corner add icon"></i>
1776+
</i>
1777+
</div>
17601778
<div class="another example">
17611779
<h2 class="ui header">
17621780
<i class="large icons">

‎server/documents/hotfix.html.eco‎

Lines changed: 85 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -6,138 +6,96 @@ standalone : true
66
title : 'Test Page'
77
type : 'Library'
88
---
9-
<!-- <div class="ui modal small" id="yyyyyy">
10-
<i class="close icon" tabindex="0"></i>
11-
<div class="header">Entre em contato</div>
12-
<div class="content">
13-
<form class="ui form">
14-
<div class="field">
15-
<label>Nome</label>
16-
<input type="text" name="nome" placeholder="Digite seu nome">
17-
</div>
18-
<div class="field">
19-
<label>Nome</label>
20-
<input type="text" name="nome" placeholder="Digite seu nome">
21-
</div>
22-
<div class="field">
23-
<label>Nome</label>
24-
<input type="text" name="nome" placeholder="Digite seu nome">
25-
</div>
26-
<div class="field">
27-
<label>Nome</label>
28-
<input type="text" name="nome" placeholder="Digite seu nome">
29-
</div>
30-
<div class="field">
31-
<label>Nome</label>
32-
<input type="text" name="nome" placeholder="Digite seu nome">
33-
</div>
34-
<div class="field">
35-
<label>Nome</label>
36-
<input type="text" name="nome" placeholder="Digite seu nome">
37-
</div>
38-
<div class="field">
39-
<label>Nome</label>
40-
<input type="text" name="nome" placeholder="Digite seu nome">
41-
</div>
42-
<div class="field">
43-
<label>Nome</label>
44-
<input type="text" name="nome" placeholder="Digite seu nome">
45-
</div>
46-
<div class="field">
47-
<label>Nome</label>
48-
<input type="text" name="nome" placeholder="Digite seu nome">
49-
</div>
50-
<div class="field">
51-
<label>Nome</label>
52-
<input type="text" name="nome" placeholder="Digite seu nome">
53-
</div>
54-
<div class="field">
55-
<label>Nome</label>
56-
<input type="text" name="nome" placeholder="Digite seu nome">
57-
</div>
58-
<div class="field">
59-
<label>Nome</label>
60-
<input type="text" name="nome" placeholder="Digite seu nome">
61-
</div>
62-
<div class="field">
63-
<label>Nome</label>
64-
<input type="text" name="nome" placeholder="Digite seu nome">
65-
</div>
66-
</form>
9+
<div class="ui container">
10+
<form class="ui form">
11+
<div class="field">
12+
<label>Empty</label>
13+
<input name="empty" type="text">
6714
</div>
68-
<div class="actions">
69-
<button class="ui button red cancelar">111111</button>
70-
<button class="ui button primary right labeled icon">222222<i class="checkmark icon"></i></button>
15+
<div class="field">
16+
<label>Dropdown</label>
17+
<select class="ui dropdown" name="dropdown">
18+
<option value="">Select</option>
19+
<option value="male">Choice 1</option>
20+
<option value="female">Choice 2</option>
21+
</select>
7122
</div>
72-
</div> -->
73-
<div class="ui container">
74-
<form class="ui form segment">
75-
<p>Tell Us About Yourself</p>
76-
<div class="two fields">
77-
<div class="field">
78-
<label>Name</label>
79-
<input placeholder="First Name" name="name" type="text">
80-
</div>
81-
<div class="field">
82-
<label>Gender</label>
83-
<select class="ui dropdown" name="gender">
84-
<option value="">Gender</option>
85-
<option value="male">Male</option>
86-
<option value="female">Female</option>
87-
</select>
88-
</div>
89-
</div>
90-
<div class="two fields">
91-
<div class="field">
92-
<label>Username</label>
93-
<input placeholder="Username" name="username" type="text">
94-
</div>
95-
<div class="field">
96-
<label>Password</label>
97-
<input type="password" name="password">
98-
</div>
99-
</div>
100-
<div class="field">
101-
<label>Skills</label>
102-
<select name="skills" multiple class="ui dropdown">
103-
<option value="">Select Skills</option>
104-
<option value="css">CSS</option>
105-
<option value="html">HTML</option>
106-
<option value="javascript">Javascript</option>
107-
<option value="design">Graphic Design</option>
108-
<option value="plumbing">Plumbing</option>
109-
<option value="mech">Mechanical Engineering</option>
110-
<option value="repair">Kitchen Repair</option>
111-
</select>
112-
</div>
113-
<div class="inline field">
114-
<div class="ui checkbox">
115-
<input type="checkbox" name="terms" />
116-
<label>I agree to the terms and conditions</label>
117-
</div>
118-
</div>
119-
<div class="ui primary submit button">Submit</div>
120-
<div class="ui error message"></div>
121-
</div>
122-
</form>
23+
<div class="inline field">
24+
<div class="ui checkbox">
25+
<input name="checkbox" type="checkbox">
26+
<label>Checkbox</label>
27+
</div>
28+
</div>
29+
<div class="inline field">
30+
<div class="ui radio checkbox">
31+
<input name="radio" type="radio">
32+
<label>Radio</label>
33+
</div>
34+
<div class="ui radio checkbox">
35+
<input name="radio" type="radio">
36+
<label>Radio</label>
37+
</div>
38+
<div class="ui radio checkbox">
39+
<input name="radio" type="radio">
40+
<label>Radio</label>
41+
</div>
42+
</div>
43+
<div class="ui submit button">Submit</div>
44+
<div class="ui error message"></div>
45+
<p style="color:red;">The radio field is validated, but is not included in onFailure field parameter values.</p>
46+
<div class="output"></div>
47+
</form>
12348
</div>
12449
<script>
125-
$(document).ready(function() {
126-
$('.ui.dropdown').dropdown();
127-
$('.ui.form')
128-
.form({
129-
fields: {
130-
name : 'empty',
131-
gender : 'empty',
132-
username : 'empty',
133-
password : ['minLength[6]', 'empty'],
134-
skills : ['minCount[2]', 'empty'],
135-
terms : 'checked'
50+
$(document).ready(function() {$('.ui.form')
51+
.form({
52+
on: 'blur',
53+
onFailure: function(formErrors, fields){
54+
$('.output').html(JSON.stringify(fields));
55+
return false;
56+
},
57+
fields: {
58+
empty: {
59+
identifier : 'empty',
60+
rules: [
61+
{
62+
type : 'empty',
63+
prompt : 'Please enter a value'
64+
}
65+
]
66+
},
67+
dropdown: {
68+
identifier : 'dropdown',
69+
rules: [
70+
{
71+
type : 'empty',
72+
prompt : 'Please select a dropdown value'
13673
}
137-
})
138-
;
139-
// $('.ui.form').form('validate field', 'username');
140-
console.log($('.ui.form').form('is valid', 'username'));
74+
]
75+
},
76+
checkbox: {
77+
identifier : 'checkbox',
78+
rules: [
79+
{
80+
type : 'checked',
81+
prompt : 'Please check the checkbox'
82+
}
83+
]
84+
},
85+
radio: {
86+
identifier : 'radio',
87+
rules: [
88+
{
89+
type : 'checked',
90+
prompt : 'Please check the radio'
91+
}
92+
]
93+
}
94+
}
95+
})
96+
;
97+
98+
14199
});
142100

143101
</script>

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,41 @@ themes : ['Default', 'Material']
8080
</div>
8181
</div>
8282
</div>
83+
<div class="ui mini test modal">
84+
<div class="header">
85+
Delete Your Account
86+
</div>
87+
<div class="content">
88+
<p>Are you sure you want to delete your account</p>
89+
</div>
90+
<div class="actions">
91+
<div class="ui negative button">
92+
No
93+
</div>
94+
<div class="ui positive right labeled icon button">
95+
Yes
96+
<i class="checkmark icon"></i>
97+
</div>
98+
</div>
99+
</div>
100+
101+
<div class="ui tiny test modal">
102+
<div class="header">
103+
Delete Your Account
104+
</div>
105+
<div class="content">
106+
<p>Are you sure you want to delete your account</p>
107+
</div>
108+
<div class="actions">
109+
<div class="ui negative button">
110+
No
111+
</div>
112+
<div class="ui positive right labeled icon button">
113+
Yes
114+
<i class="checkmark icon"></i>
115+
</div>
116+
</div>
117+
</div>
83118

84119
<div class="ui small test modal">
85120
<div class="header">
@@ -399,6 +434,16 @@ themes : ['Default', 'Material']
399434
<div class="no example">
400435
<h4 class="ui header">Size</h4>
401436
<p>A modal can vary in size</p>
437+
<div class="code" data-demo="true" data-eval="$('.mini.test.modal').not('.basic').modal('show')">
438+
$('.mini.modal')
439+
.modal('show')
440+
;
441+
</div>
442+
<div class="code" data-demo="true" data-eval="$('.tiny.test.modal').not('.basic').modal('show')">
443+
$('.tiny.modal')
444+
.modal('show')
445+
;
446+
</div>
402447
<div class="code" data-demo="true" data-eval="$('.small.test.modal').not('.basic').modal('show')">
403448
$('.small.modal')
404449
.modal('show')

0 commit comments

Comments
 (0)