Skip to content

Commit 91379ee

Browse files
jlukicjlukic
committed
Merge branch 'master' of github.com:Semantic-Org/Semantic-UI-Docs
2 parents a3ce380 + 2f37cea commit 91379ee

8 files changed

Lines changed: 213 additions & 24 deletions

File tree

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

Lines changed: 61 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -442,6 +442,49 @@ type : 'UI Behavior'
442442
</table>
443443
</div>
444444

445+
<div class="custom rule example">
446+
<h4 class="ui header">Adding Custom Rules</h4>
447+
<p>You can extend form validation to include your own rules. Keep in mind these will need to be executed synchronously.</p>
448+
<div class="ignore code">
449+
// some arbitrary business-logic
450+
window.user = {
451+
name : 'Simon',
452+
adminLevel : 1
453+
};
454+
// custom form validation rule
455+
$.fn.form.settings.rules.adminLevel = function(value, adminLevel) {
456+
return (window.user.adminLevel >= adminLevel)
457+
};
458+
$('.ui.form')
459+
.form({
460+
fields: {
461+
dog: {
462+
identifier: 'dog',
463+
rules: [
464+
{
465+
type: 'adminLevel[2]',
466+
prompt: 'You must be at least a level-2 admin to add a dog'
467+
}
468+
]
469+
}
470+
}
471+
})
472+
;
473+
</div>
474+
<form class="ui form segment">
475+
<p>Let's go ahead and get you signed up.</p>
476+
<div class="field">
477+
<label>Dog</label>
478+
<input placeholder="Dog" name="dog" type="text">
479+
</div>
480+
<div class="ui blue submit button">
481+
<i class="add icon"></i>
482+
Add Dog
483+
</div>
484+
<div class="ui error message"></div>
485+
</form>
486+
</div>
487+
445488
<div class="inline example">
446489
<h4 class="ui header">Built-in Events</h4>
447490
<p>
@@ -1585,22 +1628,24 @@ type : 'UI Behavior'
15851628
<div class="ignore code">
15861629
$('.ui.form')
15871630
.form({
1588-
dog: {
1589-
identifier: 'dog',
1590-
rules: [
1591-
{
1592-
type: 'empty',
1593-
prompt: 'You must have a dog to add'
1594-
},
1595-
{
1596-
type: 'contains[fluffy]',
1597-
prompt: 'I only want you to add fluffy dogs!'
1598-
},
1599-
{
1600-
type: 'not[mean]',
1601-
prompt: 'Why would you add a mean dog to the list?'
1602-
}
1603-
]
1631+
fields: {
1632+
dog: {
1633+
identifier: 'dog',
1634+
rules: [
1635+
{
1636+
type: 'empty',
1637+
prompt: 'You must have a dog to add'
1638+
},
1639+
{
1640+
type: 'contains[fluffy]',
1641+
prompt: 'I only want you to add fluffy dogs!'
1642+
},
1643+
{
1644+
type: 'not[mean]',
1645+
prompt: 'Why would you add a mean dog to the list?'
1646+
}
1647+
]
1648+
}
16041649
}
16051650
})
16061651
;

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@ themes : ['Default']
5050
<div class="column"><i class="comment icon"></i>Comment</div>
5151
<div class="column"><i class="comments outline icon"></i>Comments Outline</div>
5252
<div class="column"><i class="comments icon"></i>Comments</div>
53-
<div class="column"><i class="comments icon"></i>Comments</div>
5453
<div class="column"><i class="copyright icon"></i>Copyright</div>
5554
<div class="column"><i class="creative commons icon"></i>Creative Commons</div>
5655
<div class="column"><i class="dashboard icon"></i>Dashboard</div>

‎server/documents/introduction/advanced-usage.html.eco‎

Lines changed: 71 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ type : 'Introduction'
1212

1313
<div class="main ui intro container">
1414

15+
1516
<h2 class="ui dividing header">Custom Pipelines</h2>
1617
<div class="no example">
1718
<h4>Importing Gulp Tasks</h4>
@@ -29,6 +30,70 @@ type : 'Introduction'
2930
</div>
3031
</div>
3132

33+
<h2 class="ui dividing header">Semantic.json Settings</h2>
34+
35+
<div class="no example">
36+
<h4>Auto-Install</h4>
37+
<p>Running <code>npm install</code> normally will launch an interactive installer, to allow this installer to run without user interaction include a special flag <code>autoInstall: true</code>in your <code>semantic.json</code> file.</p>
38+
<div class="ignored code" data-type="JS" data-title="semantic.json">
39+
{
40+
// install will now automatically build your project files without user interaction
41+
"autoInstall": true,
42+
43+
// these settings may be different
44+
"base": "",
45+
"paths": {
46+
"source": {
47+
"config": "src/theme.config",
48+
"definitions": "src/definitions/",
49+
"site": "src/site/",
50+
"themes": "src/themes/"
51+
},
52+
"output": {
53+
"packaged": "dist/",
54+
"uncompressed": "dist/components/",
55+
"compressed": "dist/components/",
56+
"themes": "dist/themes/"
57+
},
58+
"clean": "dist/"
59+
},
60+
"permission": false,
61+
"rtl": false,
62+
}
63+
</div>
64+
</div>
65+
66+
<div class="no example">
67+
<h4>Right-to-left (RTL) Languages</h4>
68+
<p>Including the flag <code>rtl:true</code> will build Semantic UI using <a href="https://github.com/MohammadYounes/rtlcss" target="_blank">RTLCSS</a>.</p>
69+
<p>To build both LTR and RTL versions use the flag <code>rtl: 'both'</code></p>
70+
<div class="ignored code" data-type="JS" data-title="semantic.json">
71+
{
72+
// builds both LTR and RTL version
73+
"rtl": "both",
74+
75+
// these settings may be different
76+
"base": "",
77+
"paths": {
78+
"source": {
79+
"config": "src/theme.config",
80+
"definitions": "src/definitions/",
81+
"site": "src/site/",
82+
"themes": "src/themes/"
83+
},
84+
"output": {
85+
"packaged": "dist/",
86+
"uncompressed": "dist/components/",
87+
"compressed": "dist/components/",
88+
"themes": "dist/themes/"
89+
},
90+
"clean": "dist/"
91+
},
92+
"permission": false,
93+
}
94+
</div>
95+
</div>
96+
3297
<h2 class="ui dividing header">Prototyping with Semantic UI</h2>
3398
<div class="no example">
3499
<h4>Sketch Files</h4>
@@ -40,11 +105,14 @@ type : 'Introduction'
40105

41106
<div class="no example">
42107
<h4>CDN Releases</h4>
43-
<p>Individual components are available on <a href="http://osscdn.com/#/semantic-ui">OSS CDN</a></p>
108+
<p>Individual components are available on <a href="https://www.jsdelivr.com/projects/semantic-ui">jsDelivr</a></p>
109+
<div class="code">
110+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/<%= @getVersion() %>/semantic.min.css" integrity="sha256-pPbI0vDzgZ7JRdi3J6zdmBRMfDircVPDpH+sPWdf8nY=" crossorigin="anonymous">
111+
</div>
44112
<div class="code">
45-
<link rel="stylesheet" type="text/css" class="ui" href="//oss.maxcdn.com/semantic-ui/<%= @getVersion() %>/components/component-name.min.css">
113+
<script src="https://cdn.jsdelivr.net/semantic-ui/<%= @getVersion() %>/semantic.min.js" integrity="sha256-V9KQx5JePXsTb/xam4ALIhrJmnnujI6r4W1CZjqvzH4=" crossorigin="anonymous"></script>
46114
</div>
47-
<a class="ui button" href="http://osscdn.com/#/semantic-ui" target="_blank">View All CDN Files</a>
115+
<a class="ui button" href="https://www.jsdelivr.com/projects/semantic-ui" target="_blank">View All CDN Files</a>
48116
</div>
49117

50118
<div class="no example">

‎server/documents/introduction/integrations.html.eco‎

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,45 @@ type : 'Introduction'
3030

3131
<div class="no example">
3232
<h4 class="ui header">Install via Atmosphere</h4>
33-
<p>Install the <a href="https://atmospherejs.com/semantic/ui">Semantic UI package</a> from atmosphere. You will need a special package less-autoprefixer, to add vendor prefixes to your LESS pipeline.</p>
33+
<p>Install the <a href="https://atmospherejs.com/semantic/ui">Semantic UI package</a> from atmosphere.</p>
34+
<div class="code" data-type="bash">
35+
meteor add semantic:ui
36+
</div>
37+
<p>The next step will differ depending on what version of Meteor you are running. Continue to the section relevant to your version of Meteor.</p>
38+
<h4 class="ui header">(Meteor &lt;1.3) Install less-autoprefixer package</h4>
39+
<p>You will need a special package less-autoprefixer, to add vendor prefixes to your LESS pipeline.</p>
3440
<div class="ui ignored info message">
3541
Since <code>flemay:less-autoprefixer</code> compiles LESS files you don't need any other less package.
3642
</div>
3743
<div class="code" data-type="bash">
38-
meteor add semantic:ui flemay:less-autoprefixer
44+
meteor add flemay:less-autoprefixer
45+
</div>
46+
<p>Continue to the "Create a custom.semantic.json file" section</p>
47+
<h4 class="ui header">(Meteor 1.3+) Install less and postcss packages</h4>
48+
<p>Remove the standard-minifier-css package.</p>
49+
<div class="code" data-type="bash">
50+
meteor remove standard-minifier-css
51+
</div>
52+
<p>Install the less and postcss packages.</p>
53+
<div class="code" data-type="bash">
54+
meteor add less juliancwirko:postcss
55+
</div>
56+
<p>To configure the postcss package, add the following to your <code>package.json</code> file and save it.</p>
57+
<div class="code" data-type="json">
58+
{
59+
"devDependencies": {
60+
"autoprefixer": "^6.3.1"
61+
},
62+
"postcss": {
63+
"plugins": {
64+
"autoprefixer": {"browsers": ["last 2 versions"]}
65+
}
66+
}
67+
}
68+
</div>
69+
<p>To finish setting up the postcss package, install the new autoprefixer NPM package.</p>
70+
<div class="code" data-type="bash">
71+
meteor npm install
3972
</div>
4073
</div>
4174
<div class="no example">

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -582,6 +582,11 @@ themes : ['Default']
582582
<td>false</td>
583583
<td>Whether tab should load remote content as same url as history</td>
584584
</tr>
585+
<tr>
586+
<td>deactivate</td>
587+
<td>'siblings'</td>
588+
<td>When set to <code>siblings</code> will only deactivate elements that are DOM siblings with the activated element. When set to <code>all</code> the component will deactivate all other elements initialized at the same time.</td>
589+
</tr>
585590
<tr>
586591
<td>history</td>
587592
<td>false</td>

‎server/documents/usage/layout.html.eco‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,17 @@ type : 'Usage'
4747
</div>
4848
</div>
4949
</a>
50+
<a class="ui card" href="/examples/attached.html">
51+
<div class="image">
52+
<img src="/images/examples/attached.png">
53+
</div>
54+
<div class="content">
55+
<div class="header">Attached Content</div>
56+
<div class="description">
57+
Examples of content that can attach to other content
58+
</div>
59+
</div>
60+
</a>
5061
<a class="ui card" href="/examples/bootstrap.html">
5162
<div class="image">
5263
<img src="/images/examples/bootstrap.png">
@@ -109,4 +120,4 @@ type : 'Usage'
109120
</a>
110121
</div>
111122

112-
</div>
123+
</div>

‎server/files/javascript/validate-form.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ semantic.validateForm.ready = function() {
99
$matchingForm = $('.matching.example .ui.form'),
1010
$autoForm = $('.auto.example .ui.form'),
1111
$promptForm = $('.prompt.example .ui.form'),
12+
$ruleForm = $('.custom.rule.example .ui.form'),
1213
$dropdownForm = $('.dropdown.example .ui.form'),
1314
$optionalForm = $('.optional.example .ui.form'),
1415
$dependsForm = $('.depends.example .ui.form'),
@@ -36,6 +37,8 @@ semantic.validateForm.ready = function() {
3637
return false;
3738
};
3839

40+
41+
3942
$.fn.form.settings.defaults = {
4043
firstName: {
4144
identifier : 'first-name',
@@ -273,6 +276,26 @@ semantic.validateForm.ready = function() {
273276
})
274277
;
275278

279+
// no need to actually do this
280+
$.fn.form.settings.rules.adminLevel = function(value, adminLevel) {
281+
window.user && window.user.adminLevel >= adminLevel;
282+
};
283+
$ruleForm
284+
.form({
285+
fields: {
286+
dog: {
287+
identifier: 'dog',
288+
rules: [
289+
{
290+
type: 'adminLevel[2]',
291+
prompt: 'You must be at least a level-2 admin to add a dog'
292+
}
293+
]
294+
}
295+
}
296+
})
297+
;
298+
276299
$dogForm
277300
.form({
278301
fields: {

‎server/files/stylesheets/docs.css‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,11 @@ blockquote .author {
130130
Sidebar
131131
---------------*/
132132

133+
134+
#example .ui.sidebar.menu .item {
135+
will-change: transform;
136+
}
137+
133138
#example .sidebar.menu .logo.image,
134139
#example .sticky.menu .logo.image {
135140
width: 35px;
@@ -182,7 +187,7 @@ blockquote .author {
182187

183188
#example .masthead.segment {
184189
position: relative;
185-
z-index: 1;
190+
z-index: 3;
186191
margin: 0em;
187192
min-height: 185px;
188193
padding: 3em 0em;

0 commit comments

Comments
 (0)