The edit input field no longer moves when activated

- CSS fixes - Remove an unnecessary div wrapper

The edit input field no longer moves when activated
- CSS fixes - Remove an unnecessary div wrapper
2f3a90e8 · Sindre Sorhus · 8c0549b9 · 2f3a90e8 · 2f3a90e8
Commit 2f3a90e8 authored Jan 07, 2012 by Sindre Sorhus
Hide whitespace changes
Inline Side-by-side

Showing with 27 additions and 14 deletions

todo-example/template/css/app.css todo-example/template/css/app.css +23 -6

todo-example/template/index.html todo-example/template/index.html +4 -8

No files found.
--- a/todo-example/template/css/app.css
+++ b/todo-example/template/css/app.css
@@ -61,19 +61,23 @@ body {
 	display: none;
 }

-#todo-list li {
+#todo-list {
 	margin: 10px 0;
 	padding: 0;
 	list-style: none;
 }

 #todo-list li {
-	padding: 15px 20px 15px 0;
+	padding: 18px 20px 18px 0;
 	position: relative;
 	font-size: 24px;
 	border-bottom: 1px solid #cccccc;
 }

+#todo-list li:last-child {
+	border-bottom: none;
+}
+
 #todo-list li.done span {
 	color: #777777;
 	text-decoration: line-through;
@@ -94,12 +98,21 @@ body {
 	display: block;
 }

-#todo-list li .edit {
-	display: none;
+#todo-list li.editing {
+	border-bottom: none;
+	margin-top: -1px;
+	padding: 0;
+}
+
+#todo-list li.editing:last-child {
+	margin-bottom: -1px;
 }

 #todo-list li.editing .edit {
 	display: block;
+	width: 444px;
+	padding: 13px 15px 14px 20px;
+	margin: 0;
 }

 #todo-list li.editing .view {
@@ -110,15 +123,19 @@ body {
 	word-break: break-word;
 }

+#todo-list li .edit {
+	display: none;
+}
+
 #todoapp footer {
 	display: none;
-	margin: 20px -20px -20px -20px;
+	margin: 0 -20px -20px -20px;
 	overflow: hidden;
 	color: #555555;
 	background: #f4fce8;
 	border-top: 1px solid #ededed;
 	padding: 0 20px;
-	line-height: 36px;
+	line-height: 37px;
 	-webkit-border-radius: 0 0 5px 5px;
 	-moz-border-radius: 0 0 5px 5px;
 	-ms-border-radius: 0 0 5px 5px;

--- a/todo-example/template/index.html
+++ b/todo-example/template/index.html
@@ -2,14 +2,14 @@
 <html lang="en">
 <head>
 	<meta charset="utf-8">
-	<title>TodoMVC Template</title>
+	<title>Template - TodoMVC</title>
 	<link rel="stylesheet" href="css/app.css">
 </head>
 <body>
 	<div id="todoapp">
 		<header>
 			<h1>Todos</h1>
-			<input type="text" placeholder="What needs to be done?">
+			<input id="new-todo" type="text" placeholder="What needs to be done?">
 		</header>
 		<!-- this section is hidden by default and you be shown when there are todos and hidden when not -->
 		<section id="main">
@@ -22,9 +22,7 @@
 						<span>Create a TodoMVC template</span>
 						<a class="destroy"></a>
 					</div>
-					<div class="edit">
-						<input type="text" value="Create a TodoMVC template">
-					</div>
+					<input class="edit" type="text" value="Create a TodoMVC template">
 				</li>
 				<li>
 					<div class="view">
@@ -32,9 +30,7 @@
 						<span>Rule the web</span>
 						<a class="destroy"></a>
 					</div>
-					<div class="edit">
-						<input type="text" value="Rule the web">
-					</div>
+					<input class="edit" type="text" value="Rule the web">
 				</li>
 			</ul>
 		</section>