Skip to content

Commit

Permalink
Add user form + modal (create user functionality not added)
Browse files Browse the repository at this point in the history
  • Loading branch information
@KevFan
KevFan committed Sep 21, 2017
1 parent ab29890 commit c8bb732
Show file tree
Hide file tree
Showing 2 changed files with 173 additions and 3 deletions.
19 changes: 16 additions & 3 deletions views/index.ejs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Contact List </title>
<meta charset="UTF-8">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css" type="text/css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.js"></script>
Expand All @@ -26,7 +26,8 @@
<button class="ui circular olive icon button">
<i class="user icon"></i>
</button>
<button class="ui circular blue icon button">
<!--Add user button-->
<button class="ui circular blue icon button" id="showAddUserModal">
<i class="plus icon"></i>
</button>
<!--Search - doesnt work yet-->
Expand All @@ -39,9 +40,12 @@
</section>

<section class="ui container">
<div id="card-table" class="ui centered four doubling stackable cards">
<div id="card-table" class="ui centered five doubling stackable cards">
</div>
</section>

<%- include partials/addUserForm.ejs %>

</body>
</html>

Expand Down Expand Up @@ -73,6 +77,7 @@
);
}
}
let content = [
{ title: 'Does not work yet :('},
];
Expand All @@ -82,4 +87,12 @@
source: content
})
;
$('#showAddUserModal').click(function () {
$('#addUserModal')
.modal('show');
});
$('.ui.dropdown').dropdown();
$('.ui.accordion').accordion();
</script>
157 changes: 157 additions & 0 deletions views/partials/addUserForm.ejs
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,157 @@
<section class="ui modal" id="addUserModal"> <i class="close icon"></i>
<header class="header">Add new user</header>
<div class="content">
<form class="ui segment form">
<section class="three fields">
<div class="field">
<label>Title</label>
<div class="ui selection dropdown">
<i class="genderless icon"></i>
<input type="hidden" name="title">
<i class="dropdown icon"></i>
<div class="default text">Title</div>
<div class="menu">
<div class="item" data-value="miss">Miss</div>
<div class="item" data-value="mr">Mr</div>
<div class="item" data-value="mrs">Mrs</div>
</div>
</div>
</div>

<div class="field">
<label>First Name</label>
<div class="ui input left icon">
<i class="user icon"></i>
<input placeholder="First Name" type="text" name="first">
</div>
</div>

<div class="field">
<label>Last Name</label>
<div class="ui input left icon">
<i class="user icon"></i>
<input placeholder="Last Name" type="text" name="last">
</div>
</div>
</section>
<section class="three fields">
<div class="field">
<label>Gender</label>
<div class="ui selection dropdown">
<i class="genderless icon"></i>
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="Male">Male</div>
<div class="item" data-value="Female">Female</div>
</div>
</div>
</div>

<div class="field">
<label>Email</label>
<div class="ui input left icon">
<i class="mail icon"></i>
<input placeholder="Email" type="text" name="email">
</div>
</div>

<div class="field">
<label>Username</label>
<div class="ui input left icon">
<i class="address book icon"></i>
<input placeholder="Username" type="text" name="username">
</div>
</div>
</section>
<section class="two fields">
<div class="field">
<label>Password</label>
<div class="ui input left icon">
<i class="lock icon"></i>
<input placeholder="Password" type="password" name="password">
</div>
</div>
<div class="field">
<label>Confirm Password</label>
<div class="ui input left icon">
<i class="lock icon"></i>
<input placeholder="Confirm Password" type="password" name="confirmPassword">
</div>
</div>
</section>

<section class="four fields">
<div class="field">
<label>Date of Birth</label>
<div class="ui input left icon">
<i class="calendar icon"></i>
<input placeholder="Date of Birth" type="text" name="dob">
</div>
</div>
<div class="field">
<label>Phone Number</label>
<div class="ui input left icon">
<i class="volume control phone icon"></i>
<input placeholder="Phone Number" type="text" name="phone">
</div>
</div>
<div class="field">
<label>Cell Phone Number</label>
<div class="ui input left icon">
<i class="mobile icon"></i>
<input placeholder="Cell Phone No." type="text" name="cell">
</div>
</div>

<div class="field">
<label>PPS</label>
<div class="ui input left icon">
<i class="hashtag icon"></i>
<input placeholder="PPS" type="text" name="pps">
</div>
</div>
</section>

<section class="ui accordion field">
<div class="title">
<i class="icon dropdown"></i>
Location
</div>
<section class="content fields">
<div class="transition hidden content field">
<label>Street</label>
<div class="ui input left icon">
<i class="home icon"></i>
<input placeholder="Street" type="text" name="street">
</div>
</div>
<div class="transition hidden content field">
<label>City</label>
<div class="ui input left icon">
<i class="home icon"></i>
<input placeholder="City" type="text" name="city">
</div>
</div>
<div class="transition hidden content field">
<label>State</label>
<div class="ui input left icon">
<i class="home icon"></i>
<input placeholder="State" type="text" name="state">
</div>
</div>
<div class="transition hidden content field">
<label>ZIP</label>
<div class="ui input left icon">
<i class="hashtag icon"></i>
<input placeholder="ZIP" type="text" name="zip">
</div>
</div>
</section>
</section>
<button class="ui blue submit button"><i class="add user icon"></i>Submit</button>
<div class="ui error message"></div>
</form>
</div>
</section>

0 comments on commit c8bb732

Please sign in to comment.