Make it clear the #main section is hidden by default

3b319a3d · Sindre Sorhus · c7f5709c · 3b319a3d · 3b319a3d
Commit 3b319a3d authored Jan 07, 2012 by Sindre Sorhus
Hide whitespace changes
Inline Side-by-side

Showing with 5 additions and 7 deletions

todo-example/template/css/app.css todo-example/template/css/app.css +1 -1

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

No files found.
--- a/todo-example/template/css/app.css
+++ b/todo-example/template/css/app.css
@@ -57,7 +57,7 @@ body {
 	font-style: italic;
 }
-#todoapp #toggle-all-container {
+#todoapp #main {
 	display: none;
 }

--- a/todo-example/template/index.html
+++ b/todo-example/template/index.html
@@ -11,12 +11,10 @@
 			<h1>Todos</h1>
 			<input type="text" placeholder="What needs to be done?">
 		</header>
-		<section>
+		<!-- this section is hidden by default and you be shown when there are todos and hidden when not -->
-			<!-- toggle-all-container is hidden by default and should be shown when there are todos, and hidden when not -->
+		<section id="main">
-			<div id="toggle-all-container">
+			<input id="toggle-all" type="checkbox">
-				<input id="toggle-all" type="checkbox">
+			<label for="toggle-all">Mark all as complete</label>
-				<label for="toggle-all">Mark all as complete</label>
-			</div>
 			<ul class="items">
 				<li class="item done">
 					<div class="view" title="Double click to edit...">