Skip to content

Commit

Permalink
Add corner icons, add tiny/small modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@jlukic
jlukic committed Apr 10, 2017
1 parent 2d9ddb2 commit 93e5aba
Show file tree
Hide file tree
Showing 4 changed files with 148 additions and 131 deletions.
4 changes: 0 additions & 4 deletions docpad.coffee
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,7 @@ docpadConfig = {
# Here are some old site urls that you would like to redirect from
oldUrls: [],

<<<<<<< HEAD
version: "2.2.10",
=======
version: "2.2.8",
>>>>>>> 2484310f15aa385c7bb5e7e668af728132955b76

branch: "master",

Expand Down
18 changes: 18 additions & 0 deletions server/documents/elements/icon.html.eco
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1757,6 +1757,24 @@ themes : ['Default']
<i class="corner add icon"></i>
</i>
</div>
<div class="another example">
<i class="huge icons">
<i class="puzzle icon"></i>
<i class="top left corner add icon"></i>
</i>
<i class="huge icons">
<i class="puzzle icon"></i>
<i class="top right corner add icon"></i>
</i>
<i class="huge icons">
<i class="puzzle icon"></i>
<i class="bottom left corner add icon"></i>
</i>
<i class="huge icons">
<i class="puzzle icon"></i>
<i class="bottom right corner add icon"></i>
</i>
</div>
<div class="another example">
<h2 class="ui header">
<i class="large icons">
Expand Down
212 changes: 85 additions & 127 deletions server/documents/hotfix.html.eco
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,138 +6,96 @@ standalone : true
title : 'Test Page'
type : 'Library'
---
<!-- <div class="ui modal small" id="yyyyyy">
<i class="close icon" tabindex="0"></i>
<div class="header">Entre em contato</div>
<div class="content">
<form class="ui form">
<div class="field">
<label>Nome</label>
<input type="text" name="nome" placeholder="Digite seu nome">
</div>
<div class="field">
<label>Nome</label>
<input type="text" name="nome" placeholder="Digite seu nome">
</div>
<div class="field">
<label>Nome</label>
<input type="text" name="nome" placeholder="Digite seu nome">
</div>
<div class="field">
<label>Nome</label>
<input type="text" name="nome" placeholder="Digite seu nome">
</div>
<div class="field">
<label>Nome</label>
<input type="text" name="nome" placeholder="Digite seu nome">
</div>
<div class="field">
<label>Nome</label>
<input type="text" name="nome" placeholder="Digite seu nome">
</div>
<div class="field">
<label>Nome</label>
<input type="text" name="nome" placeholder="Digite seu nome">
</div>
<div class="field">
<label>Nome</label>
<input type="text" name="nome" placeholder="Digite seu nome">
</div>
<div class="field">
<label>Nome</label>
<input type="text" name="nome" placeholder="Digite seu nome">
</div>
<div class="field">
<label>Nome</label>
<input type="text" name="nome" placeholder="Digite seu nome">
</div>
<div class="field">
<label>Nome</label>
<input type="text" name="nome" placeholder="Digite seu nome">
</div>
<div class="field">
<label>Nome</label>
<input type="text" name="nome" placeholder="Digite seu nome">
</div>
<div class="field">
<label>Nome</label>
<input type="text" name="nome" placeholder="Digite seu nome">
</div>
</form>
<div class="ui container">
<form class="ui form">
<div class="field">
<label>Empty</label>
<input name="empty" type="text">
</div>
<div class="actions">
<button class="ui button red cancelar">111111</button>
<button class="ui button primary right labeled icon">222222<i class="checkmark icon"></i></button>
<div class="field">
<label>Dropdown</label>
<select class="ui dropdown" name="dropdown">
<option value="">Select</option>
<option value="male">Choice 1</option>
<option value="female">Choice 2</option>
</select>
</div>
</div> -->
<div class="ui container">
<form class="ui form segment">
<p>Tell Us About Yourself</p>
<div class="two fields">
<div class="field">
<label>Name</label>
<input placeholder="First Name" name="name" type="text">
</div>
<div class="field">
<label>Gender</label>
<select class="ui dropdown" name="gender">
<option value="">Gender</option>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<div class="two fields">
<div class="field">
<label>Username</label>
<input placeholder="Username" name="username" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password" name="password">
</div>
</div>
<div class="field">
<label>Skills</label>
<select name="skills" multiple class="ui dropdown">
<option value="">Select Skills</option>
<option value="css">CSS</option>
<option value="html">HTML</option>
<option value="javascript">Javascript</option>
<option value="design">Graphic Design</option>
<option value="plumbing">Plumbing</option>
<option value="mech">Mechanical Engineering</option>
<option value="repair">Kitchen Repair</option>
</select>
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" name="terms" />
<label>I agree to the terms and conditions</label>
</div>
</div>
<div class="ui primary submit button">Submit</div>
<div class="ui error message"></div>
</div>
</form>
<div class="inline field">
<div class="ui checkbox">
<input name="checkbox" type="checkbox">
<label>Checkbox</label>
</div>
</div>
<div class="inline field">
<div class="ui radio checkbox">
<input name="radio" type="radio">
<label>Radio</label>
</div>
<div class="ui radio checkbox">
<input name="radio" type="radio">
<label>Radio</label>
</div>
<div class="ui radio checkbox">
<input name="radio" type="radio">
<label>Radio</label>
</div>
</div>
<div class="ui submit button">Submit</div>
<div class="ui error message"></div>
<p style="color:red;">The radio field is validated, but is not included in onFailure field parameter values.</p>
<div class="output"></div>
</form>
</div>
<script>
$(document).ready(function() {
$('.ui.dropdown').dropdown();
$('.ui.form')
.form({
fields: {
name : 'empty',
gender : 'empty',
username : 'empty',
password : ['minLength[6]', 'empty'],
skills : ['minCount[2]', 'empty'],
terms : 'checked'
$(document).ready(function() {$('.ui.form')
.form({
on: 'blur',
onFailure: function(formErrors, fields){
$('.output').html(JSON.stringify(fields));
return false;
},
fields: {
empty: {
identifier : 'empty',
rules: [
{
type : 'empty',
prompt : 'Please enter a value'
}
]
},
dropdown: {
identifier : 'dropdown',
rules: [
{
type : 'empty',
prompt : 'Please select a dropdown value'
}
})
;
// $('.ui.form').form('validate field', 'username');
console.log($('.ui.form').form('is valid', 'username'));
]
},
checkbox: {
identifier : 'checkbox',
rules: [
{
type : 'checked',
prompt : 'Please check the checkbox'
}
]
},
radio: {
identifier : 'radio',
rules: [
{
type : 'checked',
prompt : 'Please check the radio'
}
]
}
}
})
;


});

</script>
Expand Down
45 changes: 45 additions & 0 deletions server/documents/modules/modal.html.eco
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,41 @@ themes : ['Default', 'Material']
</div>
</div>
</div>
<div class="ui mini test modal">
<div class="header">
Delete Your Account
</div>
<div class="content">
<p>Are you sure you want to delete your account</p>
</div>
<div class="actions">
<div class="ui negative button">
No
</div>
<div class="ui positive right labeled icon button">
Yes
<i class="checkmark icon"></i>
</div>
</div>
</div>

<div class="ui tiny test modal">
<div class="header">
Delete Your Account
</div>
<div class="content">
<p>Are you sure you want to delete your account</p>
</div>
<div class="actions">
<div class="ui negative button">
No
</div>
<div class="ui positive right labeled icon button">
Yes
<i class="checkmark icon"></i>
</div>
</div>
</div>

<div class="ui small test modal">
<div class="header">
Expand Down Expand Up @@ -399,6 +434,16 @@ themes : ['Default', 'Material']
<div class="no example">
<h4 class="ui header">Size</h4>
<p>A modal can vary in size</p>
<div class="code" data-demo="true" data-eval="$('.mini.test.modal').not('.basic').modal('show')">
$('.mini.modal')
.modal('show')
;
</div>
<div class="code" data-demo="true" data-eval="$('.tiny.test.modal').not('.basic').modal('show')">
$('.tiny.modal')
.modal('show')
;
</div>
<div class="code" data-demo="true" data-eval="$('.small.test.modal').not('.basic').modal('show')">
$('.small.modal')
.modal('show')
Expand Down

0 comments on commit 93e5aba

Please sign in to comment.