Permalink
Browse files

Added a bit more style to tasks application

  • Loading branch information...
1 parent 9758a41 commit 3f1cd9324da776323cd95538c8a31e7a4e1b5202 @blackjk3 committed Apr 11, 2012
Showing with 77 additions and 46 deletions.
  1. +8 −7 apps/tasks/index.html
  2. +12 −0 apps/tasks/js/tasks.js
  3. +31 −33 apps/tasks/style/tasks.css
  4. +26 −6 apps/tasks/style/ui.css
View
@@ -13,8 +13,8 @@
<body>
<div id="root" class="active view" data-title="Tasks">
<header>
- <a id="task-new" href="#task" class="right button">+</a>
- <span id="tasks-title" class="label" data-l10n-id="tasks">Tasks</span>
+ <a id="task-new" href="#task" class="right button plus">+</a>
+ <h1 id="tasks-title" class="label" data-l10n-id="tasks">Tasks</h1>
</header>
<ul id="tasks" class="tableView"></ul>
</div>
@@ -23,20 +23,21 @@
<div id="task" class="view" data-title="Task">
<header>
<a href="#root" class="left button" data-l10n-id="back">Back</a>
- <a id="task-save" href="#root" class="right button" data-l10n-id="save">Save</a>
+ <h1 id="task-title" class="label" data-l10n-id="task">Task</h1>
+ <a id="task-save" href="#root" class="right button save-btn" data-l10n-id="save">Save</a>
</header>
<ul class="tableView">
- <li>
- <span data-l10n-id="name">Name</span>
+ <li class="singleline">
+ <span class="lbl" data-l10n-id="name">Name</span>
<input type="text" name="task.name" placeholder="New task" />
<p></p>
</li>
<li class="multiline">
- <span data-l10n-id="description">Description</span>
+ <span class="lbl" data-l10n-id="description">Description</span>
<textarea name="task.desc"></textarea>
</li>
<li>
- <span data-l10n-id="done">Done</span>
+ <span class="lbl" data-l10n-id="done">Done</span>
<label>
<input type="checkbox" name="task.done"/>
<span></span>
View
@@ -107,6 +107,11 @@ var EditTask = {
return this.doneInput = document.querySelector('input[name=\'task.done\']');
},
+ get taskTitle() {
+ delete this.taskTitle;
+ return this.taskTitle = document.getElementById('task-title');
+ },
+
handleEvent: function(evt) {
switch (evt.type) {
case 'click':
@@ -145,6 +150,13 @@ var EditTask = {
this.nameInput.value = task.name;
this.descInput.value = task.desc;
this.doneInput.checked = task.done;
+
+ if(task.id) {
+ this.taskTitle.innerHTML = "Edit Task";
+ } else {
+ this.taskTitle.innerHTML = "New Task";
+ }
+
},
updateCurrent: function() {
View
@@ -1,27 +1,3 @@
-html, body {
- font-family: "Roboto", sans-serif;
-}
-
-@font-face {
- font-family: Roboto;
- src: url('fonts/Roboto-Regular.ttf');
-}
-@font-face {
- font-family: Roboto;
- font-weight: bold;
- src: url('fonts/Roboto-Bold.ttf');
-}
-@font-face {
- font-family: Roboto;
- font-style: italic;
- src: url('fonts/Roboto-Italic.ttf');
-}
-@font-face {
- font-family: Roboto;
- font-weight: bold;
- font-style: italic;
- src: url('fonts/Roboto-BoldItalic.ttf');
-}
/* ---------- header --------------- */
@@ -36,14 +12,15 @@ a.button, span.button {
padding:12px;
min-width: 6mozmm;
line-height: 22px;
- border:1px solid #aaa;
- background-color:#FFF;
- color:#000;
+ border:1px solid #282d32;
+ background-image: -moz-linear-gradient(#5c636c, #3d434a);
+ color:#c7d8e4;
display:inline-block;
text-align: center;
text-decoration:none;
- border-radius: 15px;
+ border-radius: 7px;
cursor:pointer;
+ text-shadow: 0px 1px 0px #305b5e;
}
a.button.right {
@@ -65,7 +42,8 @@ select, input, textarea {
clear: both;
background:none;
border:1px solid #AAA;
- width: -moz-calc(100% - 24px);
+ border-radius: 5px;
+ width: -moz-calc(100% - 44px);
margin:8px;
font-size: 1em;
}
@@ -90,7 +68,7 @@ input ~ *:empty {
}
.view label.text {
- text-align:right;
+ text-align: right;
padding: 20px 0;
text-indent:20px;
direction:rtl;
@@ -111,15 +89,35 @@ li img {
background-color: #f5f5f5;
}
-li.multiline {
+li.singleline {
height: 132px;
}
+li.multiline {
+ height: 152px;
+}
+
li.delete {
text-align: center;
+ background: none;
+ border: 0;
}
li.delete > a {
- color: red;
- text-align: underline;
+ font-size: 1.3em;
+ border-radius: 7px;
+ margin: 10px auto;
+ background: #333;
+ background-image: -moz-linear-gradient(#c8494e, #9a3a3f);
+ color: #eff3e4;
+ text-shadow: 0px 1px 0px #305b5e;
+ box-shadow: 0 1px 0px rgba(0,0,0,0.75);
+}
+
+.lbl {
+ padding: 0.3em 0 0 0.5em;
+}
+
+a.plus {
+ font-size: 1.7em;
}
View
@@ -1,7 +1,18 @@
+@font-face {
+ font-family: 'Open Sans';
+ src: url('fonts/Open-Sans.woff');
+}
+@font-face {
+ font-family: 'Open Sans';
+ font-weight: bold;
+ src: url('fonts/Open-Sans-Bold.woff');
+}
+
html, body {
margin: 0;
padding: 0;
font-size: 3mozmm;
+ font-family: "Open Sans", sans-serif;
overflow: hidden !important;
}
@@ -13,15 +24,23 @@ body.hidden * {
display: none;
}
+textarea, input {
+ font-family: "Open Sans", sans-serif;
+ padding: 0.3em;
+}
+input {
+ height: 40px;
+}
+
header {
position: relative;
height: 62px;
line-height: 62px;
text-align: center;
background-color: #fff;
- background-image: -moz-linear-gradient(#fff, #eaeae4);
+ background-image: -moz-linear-gradient(#4d555f, #292e33);
+ color: #fff;
border-bottom: solid 2px #a3a3a3;
- border-radius: 8px 8px 0 0;
}
body > header {
@@ -35,7 +54,8 @@ header h1 {
text-align: center;
font-family: "Open Sans", sans-serif;
font-weight: bold;
- font-size: 1em;
+ font-size: 1.3em;
+ text-shadow: 0px 1px 0px #305b5e;
}
/* View */
@@ -91,7 +111,7 @@ ul li { /* 96px, including a 2px border */
position: relative;
height: 94px;
background-color: #f5f5f5;
- border-bottom: 2px solid #c3c9cb;
+ border-bottom: 1px solid #c3c9cb;
color: #555;
}
@@ -130,7 +150,7 @@ ul li > small {
position: absolute;
left: 20px;
top: 50%;
- font-size: 0.65em;
+ font-size: 0.9em;
color: #888;
}
@@ -180,4 +200,4 @@ ul li > small {
.view label > input[type=checkbox]:checked + span {
background: url(images/checked.png) no-repeat scroll center center,
-moz-linear-gradient(#ffffff, #eaeae4);
-}
+}

0 comments on commit 3f1cd93

Please sign in to comment.