Skip to content

Commit

Permalink
Merge pull request #4 from st1503/master
Browse files Browse the repository at this point in the history 
Add Contacts API example.
  • Loading branch information
@hyeonseok
hyeonseok committed Aug 9, 2013
2 parents 6ac6426 + bd4d2aa commit 5dcbd45
Show file tree
Hide file tree
Showing 119 changed files with 1,191 additions and 0 deletions.
11 changes: 11 additions & 0 deletions .project
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<projectDescription>
<name>F_WebAPI</name>
<comment></comment>
<projects>
</projects>
<buildSpec>
</buildSpec>
<natures>
</natures>
</projectDescription>
53 changes: 53 additions & 0 deletions Contacts/contact_create.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<!DOCTYPE html>
<html>
<head>
<title>Contacts</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/app.js"></script>
<script>
window.onload = function(){
app.addEvent('btnCreateOnContactCreate', 'click', app.contactCreate);
app.addEvent('btnBackOnContactCreate', 'click', app.back);
}
</script>
</head>
<body role="application">

<section role="region">
<header class="fixed">
<a href="#" id="btnBackOnContactCreate"><span
class="icon icon-back">back</span></a>
<h1>create</h1>
</header>
<div class="contact_create">
<form>
<fieldset>
<legend>Name</legend>
<section>
<p>
<input type="text" placeholder="Name" id="name" required>
<button type="reset">Clear</button>
</p>
</section>
</fieldset>
<fieldset>
<legend>Tel</legend>
<section>
<p>
<input type="tel" placeholder="Phone number" id="tel" required>
<button type="reset">Clear</button>
</p>
</section>
</fieldset>
<div class="bb-docs">
<button class="recommend" id="btnCreateOnContactCreate">save</button>
</div>
</form>
</div>
</section>

</body>
</html>
56 changes: 56 additions & 0 deletions Contacts/contact_read.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html>
<head>
<title>Contacts</title>
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/app.js"></script>
<script>
window.onload = function(){
app.contactRead();
}
</script>
</head>
<body role="application">

<section role="region">

<header class="fixed">
<a href="#" id="btnBackOnContactRead"><span
class="icon icon-back">back</span></a>
<h1>Contacts</h1>
</header>
<div class="contact_read">
<form>
<fieldset>
<legend>Name</legend>
<section>
<p>
<input type="text" id="name" required>
<button type="reset">Clear</button>
</p>
</section>
</fieldset>
<fieldset>
<legend>Tel</legend>
<section>
<p>
<input type="tel" id="tel" required>
<input type="hidden" id="id">
<button type="reset">Clear</button>
</p>
</section>
</fieldset>
<div class="bb-docs">
<button class="recommend" id="btnUpdateOnContactRead">update</button>
<button class="danger" id="btnDeleteOnContactRead">delete</button>
</div>
</form>
</div>

</section>

</body>
</html>
257 changes: 257 additions & 0 deletions Contacts/css/headers.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,257 @@
/* ----------------------------------
* HEADERS: default
* ---------------------------------- */
section[role="region"]>header:first-child {
position: relative; z-index: 10; padding: 0; height: 5rem; color: #fff;
background: url(../images/headers/ui/header.png) repeat-x 0 0; background-size: auto 100%; border: none;
}

section[role="region"]>header:first-child:after {
content: ""; display: block; height: 0.3rem; position: absolute; top: 100%; left: 0; right: 0;
background: url(../images/headers/ui/shadow.png) repeat-x; background-size: auto 100%;
}

section[role="region"]>header:first-child h1 {
font-size: 2.5rem; line-height: 4.8rem; text-align: left; color: #fff; white-space: nowrap; text-overflow: ellipsis;
display: block; overflow: hidden; margin: 0 0 0 3rem; padding-right: 1rem; height: 100%; font-weight: normal;
}

section[role="region"]>header:first-child h1 em {
font-weight: 400; font-size: 1.5rem; line-height: 1em; font-style: normal;
}

section[role="region"]>header:first-child form {
display: block; overflow: hidden; position: relative; padding: 1rem 1rem 0 0.5rem; margin-left: 2.5rem;
}

section[role="region"]>header:first-child input[type="text"] {
width: 100%; height: 3rem; -moz-box-sizing: border-box; padding: 0 0.8rem; border: solid 0.1rem #9d4123;
border-top-color: #a6501e; border-radius: 0.3rem;
background: #fff url(../images/headers/ui/shadow.png) repeat-x left -0.1rem; font-size: 1.5rem; line-height: 3em;
box-shadow: none;
}

section[role="region"]>header:first-child form button[type="reset"] {
font-size: 0; overflow: hidden; position: absolute; right: 1rem; top: 1rem; bottom: 0; width: 3rem; height: auto;
margin: 0; display: none; border: none;
background: url(../images/headers/icons/clear.png) no-repeat center center/1.7rem auto;
}

section[role="region"]>header:first-child input[type="text"]:valid+button[type="reset"] {
display: block;
}

/* Generic set of actions in toolbar */
section[role="region"]>header:first-child menu[type="toolbar"] {
height: 100%; float: right;
}

section[role="region"]>header:first-child menu[type="toolbar"] a,section[role="region"]>header:first-child menu[type="toolbar"] button
{
-moz-box-sizing: border-box; position: relative; float: left; width: auto; min-width: 5rem; height: 5rem;
margin-bottom: 0; padding: 0 1rem; border-radius: 0; line-height: 5rem; background: none; text-align: center;
text-shadow: none; z-index: 5;
}

section[role="region"]>header:first-child menu[type="toolbar"] a:last-child,section[role="region"]>header:first-child menu[type="toolbar"] button:last-child
{
background: url(../images/headers/ui/separator.png) no-repeat left center/auto 4.8rem; margin-left: -0.2rem; z-index: 1;
}

section[role="region"]>header:first-child menu[type="toolbar"] {
padding: 0; margin: 0;
}

section[role="region"]>header:first-child a,section[role="region"]>header:first-child button {
border: none; padding: 0; overflow: hidden; font-weight: 400; font-size: 1.5rem; line-height: 1.1em; color: #fff;
border-radius: 0; text-decoration: none;
}

/* Pressed state */
section[role="region"]>header:first-child a::-moz-focus-inner,section[role="region"]>header:first-child button::-moz-focus-inner,section[role="region"]>header:first-child a:active,section[role="region"]>header:first-child button:active,section[role="region"]>header:first-child a:focus,section[role="region"]>header:first-child button:focus
{
outline: none !important; border: none !important;
}

section[role="region"]>header:first-child a:not ([aria-disabled="true"]
):active .icon:after,section[role="region"]>header:first-child button:not
(:disabled ):active .icon:after,section[role="region"]>header:first-child menu[type="toolbar"] a:not
([aria-disabled="true"] ):active,section[role="region"]>header:first-child menu[type="toolbar"] button:not
(:disabled ):active {
background: #008aaa !important; transition: background 0.2s ease;
}

/* Disabled state */
section[role="region"]>header:first-child menu[type="toolbar"] a[aria-disabled="true"],section[role="region"]>header:first-child menu[type="toolbar"] button[disabled]
{
opacity: 0.5;
}

section[role="region"]>header:first-child a:first-letter,section[role="region"]>header:first-child button:first-letter {
text-transform: uppercase;
}

/* Icon definitions */
section[role="region"]>header:first-child .icon {
position: relative; float: none; display: inline-block; vertical-align: top; width: 3rem; height: 4.9rem;
margin: 0 -1rem; background: transparent no-repeat center center/3rem auto; font-size: 0; overflow: hidden;
}

section[role="region"]>header:first-child .icon.icon-add {
background-image: url(../images/headers/icons/add.png);
}

section[role="region"]>header:first-child .icon.icon-compose {
background-image: url(../images/headers/icons/compose.png);
}

section[role="region"]>header:first-child .icon.icon-edit {
background-image: url(../images/headers/icons/edit.png);
}

section[role="region"]>header:first-child .icon.icon-send {
background-image: url(../images/headers/icons/send.png);
}

section[role="region"]>header:first-child .icon.icon-close {
background-image: url(../images/headers/icons/close.png);
}

section[role="region"]>header:first-child .icon.icon-back {
background-image: url(../images/headers/icons/back.png);
}

section[role="region"]>header:first-child .icon.icon-menu {
background-image: url(../images/headers/icons/menu.png);
}

section[role="region"]>header:first-child .icon.icon-user {
background-image: url(../images/headers/icons/user.png);
}

section[role="region"]>header:first-child .icon.icon-reply {
background-image: url(../images/headers/icons/reply.png);
}

section[role="region"]>header:first-child .icon.icon-reply-all {
background-image: url(../images/headers/icons/reply-all.png);
}

/* Navigation links (back, cancel, etc) */
section[role="region"]>header:first-child>button,section[role="region"]>header:first-child>a {
position: absolute; left: 0; width: 5rem; height: 5rem;
background: url(../images/headers/ui/separator-large.png) no-repeat 2rem top/0.2rem 5rem; overflow: hidden;
}

section[role="region"]>header:first-child>button::-moz-focus-inner {
border: 0; padding: 0;
}

section[role="region"]>header:first-child>button .icon,section[role="region"]>header:first-child>a .icon {
position: static; display: block; width: 2rem; height: 4.9rem; margin: 0; overflow: visible; font-size: 0;
}

section[role="region"]>header:first-child>button .icon:after,section[role="region"]>header:first-child>a .icon:after {
content: ""; position: absolute; left: 0; top: 0; z-index: -1; width: 2rem; height: 4.9rem; background-color: #a03f25;
}

section[role="region"]>header>a .icon.icon-menu,section[role="region"]>header>button .icon.icon-menu {
background-position: -1.1rem center;
}

/* ----------------------------------
* HEADERS: subheader
* ---------------------------------- */
section[role="region"]>header {
z-index: 0; height: auto;
}

section[role="region"]>header:after {
display: none;
}

section[role="region"] header h2 {
margin: 0; padding: 0.8rem 3rem; color: #424242; font-weight: 400; font-size: 1.5rem; line-height: 1.8rem;
border-bottom: solid 0.1rem #e6e6e6;
}

/* ----------------------------------
* HEADERS: dark
* ---------------------------------- */
section[role="region"].skin-dark>header:first-child,.skin-dark section[role="region"]>header:first-child {
background-image: url(../images/headers/ui/dark/header.png);
}

section[role="region"].skin-dark>header:first-child menu[type="toolbar"] a:last-child,.skin-dark section[role="region"]>header:first-child menu[type="toolbar"] a:last-child,section[role="region"].skin-dark>header:first-child menu[type="toolbar"] button:last-child,.skin-dark section[role="region"]>header:first-child menu[type="toolbar"] button:last-child
{
background: url(../images/headers/ui/dark/separator.png) no-repeat left center/auto 4.8rem;
}

/* Navigation links (back, cancel, etc) */
section[role="region"].skin-dark>header:first-child>a .icon:after,.skin-dark section[role="region"]>header:first-child>a .icon:after,section[role="region"].skin-dark>header:first-child>button .icon:after,.skin-dark section[role="region"]>header:first-child>button .icon:after
{
background-image: url(../images/headers/ui/dark/negative.png); background-color: transparent;
}

section[role="region"].skin-dark>header:first-child a,.skin-dark section[role="region"]>header:first-child a,section[role="region"].skin-dark>header:first-child button,.skin-dark section[role="region"]>header:first-child button
{
background: url(../images/headers/ui/dark/separator-large.png) no-repeat 2rem top/0.2rem 4.8rem;
}

section[role="region"].skin-dark header h2,.skin-dark section[role="region"] header h2 {
background: #2e3c3f url(../images/headers/ui/organic/subheader.png); color: #fff; border: none;
}

/* ----------------------------------
* HEADERS: organic
* ---------------------------------- */
section[role="region"].skin-organic>header:first-child,.skin-organic section[role="region"]>header:first-child {
background-image: url(../images/headers/ui/noise-pattern.png), url(../images/headers/ui/organic/header.png);
background-size: auto;
}

section[role="region"].skin-organic>header:first-child menu[type="toolbar"] a:last-child,.skin-organic section[role="region"]>header:first-child menu[type="toolbar"] a:last-child,section[role="region"].skin-organic>header:first-child menu[type="toolbar"] button:last-child,.skin-organic section[role="region"]>header:first-child menu[type="toolbar"] button:last-child
{
background: url(../images/headers/ui/organic/separator.png) no-repeat left center/auto 4.8rem;
}

/* Navigation links (back, cancel, etc) */
section[role="region"].skin-organic>header:first-child>a .icon:after,.skin-organic section[role="region"]>header:first-child>a .icon:after,section[role="region"].skin-organic>header:first-child>button .icon:after,.skin-organic section[role="region"]>header>button .icon:after
{
background: #23292b url(../images/headers/ui/noise-pattern.png); background-size: auto;
}

section[role="region"].skin-organic>header:first-child a,.skin-organic section[role="region"]>header:first-child a,section[role="region"].skin-organic>header:first-child button,.skin-organic section[role="region"]>header:first-child button
{
background: url(../images/headers/ui/organic/separator-large.png) no-repeat 2rem top/0.2rem 4.8rem;
}

section[role="region"].skin-organic header h2,.skin-organic section[role="region"] header h2 {
background: #5c6a6d url(../images/headers/ui/organic/subheader.png); color: #fff; border: none;
}

/* ----------------------------------
* HEADERS: right-to-left tweaks
* ---------------------------------- */
html[dir="rtl"] section[role="region"]>header:first-child h1 {
text-align: right; margin: 0 3rem 0 0;
}

html[dir="rtl"] section[role="region"]>header:first-child button,html[dir="rtl"] section[role="region"]>header:first-child a
{
left: inherit; right: 0;
}

html[dir="rtl"] section[role="region"]>header:first-child>button .icon,html[dir="rtl"] section[role="region"]>header:first-child>a .icon
{
margin-left: 0; margin-right: -2rem;
}

html[dir="rtl"] section[role="region"]>header:first-child>button .icon:after,html[dir="rtl"] section[role="region"]>header:first-child>a .icon:after
{
left: inherit; right: 0;
}

html[dir="rtl"] section[role="region"]>header:first-child .icon.icon-back {
background-image: url(../images/headers/icons/back-rtl.png);
}
Loading

0 comments on commit 5dcbd45

Please sign in to comment.