Skip to content

T
todomvc
Commit 2f3a90e8 authored by Sindre Sorhus's avatar Sindre Sorhus
Browse files
Options

The edit input field no longer moves when activated 

- CSS fixes
- Remove an unnecessary div wrapper
parent 8c0549b9
Hide whitespace changes
Inline Side-by-side
Showing with 27 additions and 14 deletions
todo-example/template/css/app.css
View file @ 2f3a90e8
...@@ -61,19 +61,23 @@ body { ...@@ -61,19 +61,23 @@ body {
display: none; display: none;
} }
#todo-list li { #todo-list {
margin: 10px 0; margin: 10px 0;
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
#todo-list li { #todo-list li {
padding: 15px 20px 15px 0; padding: 18px 20px 18px 0;
position: relative; position: relative;
font-size: 24px; font-size: 24px;
border-bottom: 1px solid #cccccc; border-bottom: 1px solid #cccccc;
} }
#todo-list li:last-child {
border-bottom: none;
}
#todo-list li.done span { #todo-list li.done span {
color: #777777; color: #777777;
text-decoration: line-through; text-decoration: line-through;
...@@ -94,12 +98,21 @@ body { ...@@ -94,12 +98,21 @@ body {
display: block; display: block;
} }
#todo-list li .edit { #todo-list li.editing {
display: none; border-bottom: none;
margin-top: -1px;
padding: 0;
}
#todo-list li.editing:last-child {
margin-bottom: -1px;
} }
#todo-list li.editing .edit { #todo-list li.editing .edit {
display: block; display: block;
width: 444px;
padding: 13px 15px 14px 20px;
margin: 0;
} }
#todo-list li.editing .view { #todo-list li.editing .view {
...@@ -110,15 +123,19 @@ body { ...@@ -110,15 +123,19 @@ body {
word-break: break-word; word-break: break-word;
} }
#todo-list li .edit {
display: none;
}
#todoapp footer { #todoapp footer {
display: none; display: none;
margin: 20px -20px -20px -20px; margin: 0 -20px -20px -20px;
overflow: hidden; overflow: hidden;
color: #555555; color: #555555;
background: #f4fce8; background: #f4fce8;
border-top: 1px solid #ededed; border-top: 1px solid #ededed;
padding: 0 20px; padding: 0 20px;
line-height: 36px; line-height: 37px;
-webkit-border-radius: 0 0 5px 5px; -webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px; -moz-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px; -ms-border-radius: 0 0 5px 5px;
......
todo-example/template/index.html
View file @ 2f3a90e8
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>TodoMVC Template</title> <title>Template - TodoMVC</title>
<link rel="stylesheet" href="css/app.css"> <link rel="stylesheet" href="css/app.css">
</head> </head>
<body> <body>
<div id="todoapp"> <div id="todoapp">
<header> <header>
<h1>Todos</h1> <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> </header>
<!-- this section is hidden by default and you be shown when there are todos and hidden when not --> <!-- this section is hidden by default and you be shown when there are todos and hidden when not -->
<section id="main"> <section id="main">
...@@ -22,9 +22,7 @@ ...@@ -22,9 +22,7 @@
<span>Create a TodoMVC template</span> <span>Create a TodoMVC template</span>
<a class="destroy"></a> <a class="destroy"></a>
</div> </div>
<div class="edit"> <input class="edit" type="text" value="Create a TodoMVC template">
<input type="text" value="Create a TodoMVC template">
</div>
</li> </li>
<li> <li>
<div class="view"> <div class="view">
...@@ -32,9 +30,7 @@ ...@@ -32,9 +30,7 @@
<span>Rule the web</span> <span>Rule the web</span>
<a class="destroy"></a> <a class="destroy"></a>
</div> </div>
<div class="edit"> <input class="edit" type="text" value="Rule the web">
<input type="text" value="Rule the web">
</div>
</li> </li>
</ul> </ul>
</section> </section>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7